A keynote about Microinteractions in web and mobile design, explaining what they are, different approaches, structure (triggers, rules, feedback and modes) and examples.

1. Microinteractions:
Designing With Details

2. 1- Designing
Microinteractions
1.1. What are (and not) M.I.
1.2. M.I. can be big.
1.3. The secret history of M.I.
1.4. M.I. as a philosophy.

3. 1.1. What Are And (Not) M.I.?
WHAT ARE MICROINTERACTIONS?
- “Are the functional interactive details of a product” those who makes
a product enjoyable, engaging and easy to use.
- Some of them are practically invisible.
- The difference between a product you like and a product you tolerate,
are the microinteractions included in it.

4. Gilt.Com
(Form)
“When entering your email address
in the sign up form, the input field
auto completes common domains”.

5. 1.1. What Are And (Not) M.I.?
WHAT MICROINTERACTIONS ARE NOT:
- “Features”.
- Microinteractions differ from features in size and scope.
- Features tends to be complex, time consuming and cognitively engaging.
- Microinteractions on the other hand are simple, brief, and should be nearly
effortless.

6. 1.1. What Are And (Not) M.I.?
FOR WHAT ARE MICROINTERACTIONS GOOD FOR?
- Accomplishing a single task.
- Connecting devices together.
- Adjusting a setting.
- Turning a feature or function on or off.

7. Google
(Translate)
“The second time you listen to
a translation, it is dictated
at a slower speed”.

8. 1.2. M.I. Can Be Big.
M.I. CAN BE PART OF A PRODUCT, OR THE PRODUCT ITSELF
- Toaster: Function: Toast, the whole device is powered by a single interaction
“Press a button”, “Toast toasted”.
- Similarity small apps can be made of only one interaction;
many mobile and desktop apps do just one thing, but well.
Example: converting measurements, being a calculator or showing the weather.
- “Microinteractions are the glue that can tie together features across mobile
devices TV, desktop and laptop computers and the web”.
- Microinteractions force designers to work simply, and to focus on details.

9. Dark Sky
(iPhone app)
“The main function of the app is
to display the weather, also
giving information about
temperature, chances of rain,
and humidity”.

10. Menu Bar
(Mac Os X)
“The menu bar in Mac Os X is full of icons
each of which launches a microinteraction".

11. 1.3. The History Of M.I.
GYPSY
- In 1974 Larry Tesler began working on an application for Xerox Alto computer called
Gypsy.
- Made use of mouse and GUI.
- Larry’s mission—was to reduce the modality of the interface, so that users wouldn’t
have to switch to a separate mode to perform actions.
- One of those functions was moving text from one part of the document to another.
then find and select the text to move, then finally press the Escape key to execute the
copy.

12. 1.3. The History Of M.I.
GYPSY
- Larry knew there was a better way to perform this action, so he designed
one that not only made use of the mouse, but radically simplified this
microinteraction.
- In “Gypsy”, the user could select a piece of text, press the “Copy”
function key, then select the destination, and finally press the “Paste”
function key.

13. Xerox
Bravo
“The precursor of “Gypsy”, and the first microinteraction,
copy and paste”

14. 1.4. M.I. As A Philosophy.
There are three ways to incorporate M.I. into products or systems:
1-MICROINTERACTIONS AS SIGNATURE MOMENTS
-Think about them on a case by case basis, during the course of a design process
or when simply refining your product try to identify possible microinteractions.
- “Signature Moments” are those microinteractions that are product
diferentiatiator, they help to create customer loyalty and recognition.

15. MENU
M.I. As
Signature
Moment
(iPod Scroll Wheel)
“Signature moments” are those MI, that
are product differentiators, such as the
original iPod scroll wheel to help you
navigate through the different songs
and menus of the music player”.

16. M.I. As
Signature
Moment
(Facebook
Like Button)
“The Like Button on Facebook,
is now so well known, that it’s
part of the brand”.

17. 1.3. M.I. As A Philosophy.
The second way to think about M.I: is to reduce more complex applications
to individual products built around one microinteraction:
2- MICROINTERACTIONS AS PRODUCT STRATEGY
- Your product does one thing and one thing well. (Reduce product to its
essence).
- How many startups work or began, Instagram to Nest.
- MVP can be one microinteraction.

18. 1.3. M.I. As A Philosophy.
The third way to think about microinteractions is:
3- MAKE PRODUCT AS A SUM OF MICROINTERACTIONS
- That’s what Charles Eames meant when he said “the details are the
design”.
- Treat every piece of functionality as a set of microinteractions.
- The beauty of designing products this way is that it mirrors the smaller
more agile way of working that many companies are embracing.

19. Products As
Sum Of M.I.
(Google Maps)
“Whether viewing the standard
(Plan) or Satellite view of Google
Maps, the widget for changing
the views shows the map and the
other view behind it”.

20. 2 - The Structure
Of Microinteractions
2.1. Triggers
2.2. Rules
2.3. Feedback
2.4. Loops and Modes

21. 2.1. Triggers
DEFINITION AND TYPES OF TRIGGERS:
“A trigger is what initiates a micro interaction”
There's two kind of triggers:
Manual Triggers: User initiated, and can be a control, an icon, a form or a
voice, touch or gestural command
System Initiated Triggers: When a certain set of conditions are met.

22. Manual
Trigger:
(Iphone Unlock)
“The label on the iPhone slide to
unlock trigger vanishes as you slide”.

23. System
Trigger
(Notifications)
“One of the most interesting features
of the recently launched Basecamp 3
is Work Can Wait, which gives users
the ability to choose the hours during
which they want to receive
notifications”.

24. 2.1. Triggers
HOW TO CREATE EFFECTIVE TRIGGERS?
- Make it consistent: Triggers must always perform the same action in time.
- Bring the data forward: show essential information from inside the
microinteraction when possible, such as unread messages, or ongoing
processes.
- Don’t break visual affordances: If the trigger looks like a button, it has to
looks like a button.
- Rule of thumbs: The more used a microinteractiion, the more visible the
trigger should be.

25. 2.2. Rules
DEFINITION & CHARACTERISTICS
Rules, creates a nontechnical model of the microinteraction, they define
what can and cannot be done, and in what order.
- Rules, reflects constraints, (business, technical and contextual).
- The most important part of the rules is the goal the application or system
tries to perform.

26. 2.2. Rules
CHARACTERISTICS
Rules, determine:
a) How the microinteraction responds to the trigger being activated, What
happens when the icon is clicked?)
b) What control the user has. Can the user cancel a download?
c) The sequence in which actions take place and the timing, For example,
before the search button becomes active users have to enter text
d) What data is being used and from where, Geolocation? Weather, Time?

27. Rules For The
Simplest M.I.
(Turning On A
Light)
1- When the switch is thrown, the
light turns and stays on.
2- If the switch is thrown again, turn
the lights off.

28. Example
Of Rules:
(Mail Chimp).
“Mail chimp, shows what can’t be
done by stretching the chimps
arm so far that it pops off when
you try to make an email too
wide”.

29. 2.2. Rules
HOW TO CREATE EFFECTIVE RULES:
- Don’t start from zero: use what you know about the user, the platform,
or the environment to improve the microinteraction.
- Remove complexity: reduce controls to the minimum.
- Reduce options and make smart defaults: more options means more
rules.

30. 2.2. Rules
HOW TO CREATE EFFECTIVE RULES?
Define states for each object, how do the items change over time or with
interactivity.
- The main use of rules, are as a tool to prevent errors, make human errors
impossible.
- Keep copy short, don’t use instructional text if a label is suffice.

31. Effective Rules: Don’t Start From Zero.
After the trigger has been initiated, allow the system to get data to help you to improve the microinteraction.

32. 2.3. Feedback
DEFINITION:
- “Feedback is the backward process who helps to understand the rules of
the microinteraction".
- It’s function is understand what information the user needs to know and
when, the more information, the better feedback will be.

33. Feedback:
(Progress Bar).

34. 2.3. Feedback
HOW TO CREATE EFFECTIVE FEEDBACK?
- Determine what message do you want to convey with feedback, then
select the correct channel for than message.
- Be human.
- Use pre-exisiting UI elements, to convey feedback messages,
- Don’t make feeback arbitrary.
- Whenever possible, have visual feedback for every user initiated action,
& add sound and haptics, for emphasis and alerts.

35. Effective Feedback: “Be Human”
Humans respond to faces, the Treadless shopping cart face turns from frowning to happy when you put items on it.

36. Effective Feedback: “Visual, Sound, Haptics”
HAPTICSSOUNDVISUAL

37. 2.4. Loops And Modes
DEFINITION:
Loops: “Is a cycle that repeats for a set duration” (minutes, seconds, years)
Modes: “Define routes to show how a micro interaction should behave”. Sometimes
are necessary, but they should be only used to avoid infrequent actions which would
clutter the main purpose of the microinteraction, the best example of modes is the
“Settings” menu.

38. Loops:
“Moo.Com”
“Moo starts a timing loop after an
order has been placed, to show users
how long do they have to edit
a placed order”.

39. Modes:
(Weather Apps).
When you select cities, to get data on
them, you are not performing the
main action of the microinteraction.
It’s a deviation of the rules.

40. 2.4. Loops And Modes
HOW TO CREATE EFFECTIVE LOOPS AND MODES
- Use loops to extend the life of a microinteraction.
- Only have a mode when there is a infrequent action that might otherwise
clutter the microinteraction.
- If you must have a mode make it it's own screen, when possible.
- Use long loops to give the microinteraction memory or to progressively
disclosure or reduce aspects of the microinteraction over time.

41. Effective Loops: “Progressive Disclosure:
“Duolingo uses an interactive way of
progressive disclosure to show users how
the app works: users are encouraged
to jump in and do a quick test in the selected
language”.

42. 3 - Putting It All
Together.
3.1. Microinteractions in
a Mobile App (Clock Alarm)

43. 3.1. M.I. In A Mobile App
OVERVIEW:
- The microinteraction is the entire app, all the app does is to allow the user to set a
time for an alarm to go go off.
- The first thing to think about is what the goal: To be alerted, (most of the times
woken up).

44. 3.1. M.I. In A Mobile
App (Clock Alarm):
TRIGGER:
- Standard icon who lives on the iPhone
screen.
- Trigger needs a label, which in our case is
the name of the app:

45. 3.1. M.I. In A Mobile App (Clock Alarm)
RULES
Some of the rules that can be set are:
1- If the user has to set the same alarm for three days in a row
2- If the country the phone is in uses 24-hour format use that.
3- Display any set alarms, show the time until it goes off.
4- The alarm goes off at a specific time.
5- If after a week the user has never pressed snooze, remove it from the
alert.

46. 3.1. M.I. In A Mobile
App (Clock Alarm):
FEEDBACK
- Mainly visual, click of the hours and
minutes as you set the alarm.
- Another piece of feedback is the alarm
itself, letting use pick up different tones, or
maybe tones from iTunes.

47. 3.1. M.I. In A Mobile
App (Clock Alarm):
LOOPS AND MODES
- Loops, the alarm itself is several loops at
once, the snooze is a count controlled loop,
also long loops.
- Mode here would be the settings of the
alarm time, e.g. let them to customise the
duration of snooze.

48. Thank
You!