microinteractions in web and mobile design

Microinteractions: Designing With Details

1- DesigningMicrointeractions

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.

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.

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


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.


FOR WHAT ARE MICROINTERACTIONS GOOD FOR?- Accomplishing a single task.

- Connecting devices together.

- Adjusting a setting.

- Turning a feature or function on or off.

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

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.

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”.

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

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.

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.

Xerox Bravo“The precursor of “Gypsy”, and the first microinteraction,

copy and paste”

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.

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”.

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”.


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.


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.

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”.

2 - The StructureOf Microinteractions

2.1. Triggers2.2. Rules2.3. Feedback2.4. Loops and Modes

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.

Manual Trigger:(Iphone Unlock)“The label on the iPhone slide to

unlock trigger vanishes as you slide”.

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”.

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.

2.2. Rules

DEFINITION & CHARACTERISTICSRules, 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.

2.2. Rules

CHARACTERISTICSRules, 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?

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.

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”.

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.

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.

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.

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.

Feedback:(Progress Bar).

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.

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

Effective Feedback: “Visual, Sound, Haptics”

HAPTICSSOUNDVISUAL

2.4. Loops And ModesDEFINITION: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.

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”.

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.

2.4. Loops And ModesHOW 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.

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”.

3 - Putting It AllTogether.

3.1. Microinteractions in a Mobile App (Clock Alarm)

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).

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:

3.1. M.I. In A Mobile App (Clock Alarm)RULESSome 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.

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.

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.

Thank You!