Transcript Presentation - Piki Productions

Design for Interaction
Rui Filipe Antunes
www.pikiproductions.com/rui
Design for interaction




Interaction design is about working with all
different types of interfaces not only
websites;
Interaction design is not about the behavior of
the interface but the behavior of people;
Is about Efficiency when people are consuming
content;
Is about easying users interaction. Don't make
them search for what they want. We want to
create smooth experiences so that users will
return.
Design for Interaction
Some examples of bad design

Example 1

Example 2

Example 3

Example 4
Examples of (in)consistency in Google

Chromebook

Chromium

ThinkWithGoogle

20ThingsIlearned

Webstore
Five Design Principles
Five main principles of design:
a) Consistency
b) Visibility
c) Learnability
d) Predictability
e) Feedback
Consistency

Consistency goes unnoticed;

Human eyes are sensitive to changes;


People should pay attention only to the content not
to where things are located;
Strive for consistency in both appearance and
behavior :

Same functionality = same appearance;

Elements with different functionalities
should have different appearances;
Consistency
Changes in appearance and behavior can attract
attention in a negative way. Rules of consistency
should apply to all elements of design

colors, pattern, textures

size, proportion and rotation

shapes and alignments

typography

visibility

transitions and motion graphics

rool-overs/mouseovers

tooltips

layers

....
Visibility

Let users know that an opportunity to interact
exists
e.g. A good example is provided by cars where all
the interactive elements you need to drive are
highly visible for the user



People are “click-happy”, reinforce the
possibility of interaction with visual indicators
that invite people to touch or click.
Unless it is a game, discoverability does not
belong to this context.
This is not a game of chance or luck, it is about
easying users interaction. Don't make them search
for what they want.
Visibility


Standard clickable elements understood to be
interactive :

Hyperlinks,

Buttons

Scrollbars

Forms
Other invitations for interactivity are
provided by :

Buttons- depths, shadings, shadows

small images

Textures simulating things that
people might want to touch

Text styles – different colors and fonts
Learnability



Interaction must be:

easy to learn

easy to remember
If you do something and get what you want this
increases the possibility of returning to do it in
a the future occasion.
Operant conditioning:

Rewarding increases the probability of
learning, positive feedback reinforces the
probability of people engaging in that
behavior again

Negative feedback or making an error
increases the probability of that person
will not engage in that behavior again
Learnability

Observational learning
Observing an expert doing some action and then
repeating it (e.g video tutorials)


The more you use an interface the easier it becomes

Practice --> habits

extensive practice → automaticity
Tranfer of perceived affordances:
People learn behaviors from all different sorts of
experiences, not only on the web, as well as in
other media and in real life
Affordance:
When an object
“tells you” how does it function
e.g buttons, sliders, tabs
Predictability
It is all about expectations. Before the interaction
has occurred, the design should set the accurate
expectations. Labels, instructions, icons and
images can all be used for this purpose.
We should be able to communicate:

What to do.

How the interface will respond.

What will happen.

Where the visitors will go.
e.g What happens when this icon is pressed?
Predictability
When users don't know what they can do, they will
interact with everything that is clickable (or
touchable)
When they can predict what will happen they will
only interact with the necessary elements.
Behaviors differ when:

playing

exploring

focusing in a specific task
Feedback
Provide information about:

Location – where are you

Status of progress – what is happening

Future events or possibilities – what will
happen in the future

Completion or closure – whether or not
something has finished
Feedback
Feedback should complement the experience not
complicate.

do not interrupt the visitor's actions.
Allow undo to revert to prior states.

mistakes and errors always happen (mistakes not
always end up in errors.)
Every interaction should produce a noticeable and
understandable reaction.

Failing to acknowledge an interactions can
lead to unnecessary actions or errors and
mistakes. (People will often redo their action)

e.g What is the consequent action when nothing is
displayed after the following button is pressed?
Feedback

Progress indicators

Definite (we know the size/end limit for
the operation)

Indefinite (we don't know how long the
operation will take)
Summary

Consistency: Make sure you have similar design,
similar behaviors throughout the site. Strive for
consistency in appearance and behavior, because it
facilitates usability, credibility and trust;

Visibility: Provide cues to know when and where can
users interact;

Learnability: Meaningful and unambiguous labels,
content, and interactions make it possible to quickly
understand and repeat the experience;

Predictability: We want to be able to set
expectations so that people know where they are, where
can they go, what can happen, and what the outcome of
their actions will be;

Feedback: Acknowledge interactions, make sure users
know that the interface realises that they have
interacted with it, as well as provide information such
as error messages, dialogs and comptetion messages
(status, location, progress, and completion)