Five Dimensions of

Interaction Design
Interaction Design
Interaction design has been around at least since the 1980s but
only fairly recently has it come to gain shape and form like any other
discipline. And it is a separate discipline. User experience (UX) design
shapes the overall encounter with the use of a product, including
programming, building information architecture, doing
usability engineering, and user research. Interaction design is
involved in helping a user reach their goal via smooth, pleasurable,
and quick interactions with an object or a machine.
Interaction Design
If a software product is a house and UX design is everything that
makes this house a cozy and convenient place to live in, then
interaction design is a light switch near the entrance to each room, a
heated bathroom floor, a dinner table big enough to accommodate
the whole family.

While you only remember your overall experience of living in this

house, it’s the small details like nicely colored walls and comfy
armchairs that make up this experience.
Interaction Design
In Designing for Interaction, a usability academic Gillian
Crampton Smith offered a concept of four dimensions (or
languages) of interactive design. According to Crampton
Smith, these languages are the essence of all interactions that
help humans and machines communicate effectively. Later,
designer Kevin Silver proposed the fifth dimension thus
establishing the concept now known as 5 dimensions of
interaction design. Designers use them to analyze the current
interactions and ask questions within each dimension.
Background

● User Experience is wholistic

● Interaction Design facilitates
experience
● Details that make the larger
experience memorable
The 5 Dimensions

● 1D- WORDS
● 2D- VISUAL REPRESENTATION
● 3D- FORM
● 4D- TIME
● 5D- BEHAVIOR
1D- Words
1D- Words
This is the language we use to describe interactions and the meaning
behind every button, label, or signifier. Words should be clear and
familiar to end users, used consistently and appropriately to the setting.

● What words should we use so our end users can understand them?
● Do we use words consistently throughout the interface?
● What meaningful information can we provide to let users know what
will happen after they perform an action?
In the example shown above, words alone help us understand
different functions or feature available in the product, like “Watch
Later”, “Liked Videos”.
● They are simple and exactly what the user is looking for.
2D- Visual Representation
 2D- Visual Representation

● These are all the elements like typography, imagery, icons, and
a color palette that users perceive involuntarily.
● What feeling are we trying to convey with the chosen visual
style?
● What shapes and sizes should we use to evoke an appropriate
reaction to our interface elements?
● Are we using familiar formats of menus and forms to boost
learnability?
 2D- Visual Representation

● We have seen in our past modules where we spoke about

understanding what users already know. With facebook and
other social media becoming popular people are now more
familiar with certain interactions. For e.g more people now
know how to upload a photo. Or take a photo. Or share a photo.
We do not have to reinvent the wheel all the time. We draw
inferences from popular interfaces and design our interactions
accordingly.
3D Form
3D Form
This includes computer keyboards, mice, trackpads, and touchscreens
that users interact with and the space they interact within.

● What will users have to do with their keyboards,mice, and

touchpads to effectively interact with our product?
● What accessibility issues may people have when interacting with
our product?
● Are the interface elements of the right size so mobile users can
manipulate them easily?
 3D Form
● With the advent of touch screen interfaces, interaction designers had a
challenge to ensure that what is clickable, should look clickable and should be
big enough to click. New interactions like long press, slide left, slide right etc
had to be designed to make tasks easier and more intuitive. For e.g. on a
desktop or a web application we can hover on a element and that gives us an
indication whether the element is clickable or not. Even more.. We know if
there is more information behind that we will be able to see that too. But that
does not happen in the mobile environment. Smart watches require a
completely different approach to interaction design because of sheer size of
the product.
4D - Time
4D - Time

Motions, sounds, animations – all interactive elements that

change over time – give a user an understanding of the
progress of their actions and perform the feedback on it.

● How should the system respond to each user’s action?

● How long is response time?
4D - Time
We all need a closure to an action. For e.g. when we close the door, we
want to hear that “click” sound, which gives us a confirmation that the
door has been closed. These sounds or actions must happen in a Time
frame that does not leave the user wondering. Wherever the system
needs time to perform an action the system should give a visual
indication to the user that the action is happening. For .e.g. Loaders.
When we are downloading or uploading we see loaders which assure
us that the process is underway and will take a bit of time. This is a
visual confirmation of time.
 5D - Behavior
How does the user react and feel when interacting with the
system.

This dimension is the net effect of all other dimensions put

together.

Is the user going back and forth between pages?

Is he moving too quickly through pages?
How does he/she feel about the product?
All of the above tells how effectively we have implemented the
interactions.
 5D - Behavior

We use various tools to understand this user behaviour, the simplest

being observe user while using the system.

In the absence of access, we can use tools like heat maps, which show
where the user is looking and which elements he is clicking

We can use google analytics to track how user moves between pages.
We can also use screen recordings to map the user behaviour on each
page.
5D - Behavior