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.
- 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.
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.
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.
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.
background: #3e849e; /* blue */
border: none; /* remove default border */
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.
border: none; /* remove default border */
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?
A very refreshing refresh animation
Innovate dock tabs
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.
So fill out the form below, or contact us today to request a consultation and let's make your software dreams come to life.