How Interaction Design drives better UI/UX

Brief introduction to Interaction Design

“Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Our practices evolve with the world” — IXDA

Interaction design vs UI/UX

Although there is a lot of overlap between IxD and UI/UX, they do involve different aspects of design. IxD is a critical factor of overall user experience with computers and applications, but it does not define the entire experience. Think of interactions as moving a mouse, clicking a button, typing, etc.

Interaction design is closely related with user experience because most applications we use involve constant interaction between the user and the machine.

If we’re constantly “Interacting” with our applications, then designers should be thinking about these interaction carefully. User’s will feel rewarded if these interactions are crystal clear and fluid, which will drive a better experience.

Examples of Interaction Design

Here is an simple example where we add a new event to a calendar on a phone.

Let’s explore some of the obvious Interactive Design implemented in this example and explore some of the IxD considerations involved. We will only cover a small percentage of the experience, as there are hundreds of possible interactions possible even in this short flow.

Homescreen

• Starting with the “Homescreen” of the phone, we are presented with multiple “App Icons”, each is available for the user to click on. These should be an appropriate size for the user’s thumb and should clearly illustrate the app the icon will open.

Interaction 1 - Tapping on the “Calendar” icon

• Next we are presented with an introduction to the Calendar application. This screen shows us some basic information on what the app offers. Near the bottom of the screen we see a red “Continue” button. This button can be very large as it is the only option.

Interaction 2 - we tap on the “Continue” button

Interaction 3 - we tap on “Allow” when asked about our location

Interaction 4 - we tap on the “Plus” icon which we assume will allow us to add a new event.

ETC

Bringing IxD to life with CSS

Let’s use one of the most common elements (a Button) in a website to demonstrate bringing IxD to life.

Buttons are almost always a gateway into a new state in some form or another, of course unless they are disabled. So let’s imagine some common use cases for a button and apply some minimal styles for an appropriate look.

Default Button

So we have our HTML. This will be placed inside a simple dialog box.

Without any styling applied, it looks pretty simple. Notice that when the user mouses over it, the background gets darker. This already conveys that it is an element that can be clicked on and it gives you certainty that your mouse is hovering over it.

However it doesn’t use color or icons at all, it completely lacks theme and doesn’t stand out very much.

Theming

Let’s imagine we’d like the button to match a theme and serve as a primary action button in our application. To do this we’d likely apply a color that represents the brand. For this generic example, we’ll use blue.

Let’s add some basic CSS to give it a more modern look.

Disabled State

Now let’s imagine we need to demonstrate that a button is not active for the user to click right now. We can apply styles to essentially make the button appear dead.

Which looks like this. Notice the grey background and that there’s no change while the user hovers over the button anymore.

Examples of modern Interaction Design

The examples of buttons above are simple and relatively easy to implement with only a few lines of code. However it’s likely that a lot more time will go into designing and coding interactions that will pop in a modern website.

Some beautiful IxD examples

How about this lovely click effect. Doesn’t that feel good?

Source: https://codepen.io/glueckler/pen/oNpQPJK

A very refreshing refresh animation

Source: https://dribbble.com/shots/2590603-Liquid-Pull-Down-UI-Animation

Innovate dock tabs

Source: https://dribbble.com/shots/5982908-Interactive-animation-Tab-bar

Trust the Experts when it comes to UI/UX design

We’ve seen examples of Interaction Design developed by experts inside of the IOS Calendar Application. We’ve seen simple examples of how a few lines of code can signal the purpose of a button in an application. And we’ve seen some very innovative examples of interactive design.

IxD is everywhere in technology and should be thought of carefully as it will have a big affect on user experience. Consider each interaction carefully and it will guide UI/UX design.

At Konverge we have over 28 years of experience in software development, and that includes UI/UX design.

So fill out the form below, or contact us today to request a consultation and let's make your software dreams come to life.