microinteractions, seminar by gaitri biharie

67
Microinteractions Spreker: Gaitri Biharie

Upload: gaitri-biharie

Post on 27-Jan-2015

120 views

Category:

Design


2 download

DESCRIPTION

reduced file

TRANSCRIPT

Page 1: Microinteractions, seminar by Gaitri Biharie

Microinteractions

Spreker: Gaitri Biharie

Page 2: Microinteractions, seminar by Gaitri Biharie

Het ontwerpen van interactieve pro-ducten die de manier van dagelijkse communicatie en interactie van de gebruiker ondersteunt.

Page 3: Microinteractions, seminar by Gaitri Biharie

..behalen van bepaalde doelen of taken van de gebruiker.

navigatie interface, verschillende functionaliteiten, widgets of bedieningen

Page 4: Microinteractions, seminar by Gaitri Biharie

Details aren’t just details; they are the design

- Charles Eames

Kleine functionaliteit die alleen één ding doet en om één gebruikersmoment draait.“

Page 5: Microinteractions, seminar by Gaitri Biharie
Page 6: Microinteractions, seminar by Gaitri Biharie
Page 7: Microinteractions, seminar by Gaitri Biharie
Page 8: Microinteractions, seminar by Gaitri Biharie

Welke design principes bieden een ondersteuning voor de interaction designer om microinteractions in een ontwerp te implementeren?

Page 9: Microinteractions, seminar by Gaitri Biharie

Don NormanThe design of everyday things

Design principles

Page 10: Microinteractions, seminar by Gaitri Biharie

Affordance

Page 11: Microinteractions, seminar by Gaitri Biharie

Signifier

Page 12: Microinteractions, seminar by Gaitri Biharie

Mapping

Page 13: Microinteractions, seminar by Gaitri Biharie

Feedback

Page 14: Microinteractions, seminar by Gaitri Biharie

Contrains

Page 15: Microinteractions, seminar by Gaitri Biharie

Mental models

Page 16: Microinteractions, seminar by Gaitri Biharie

Welke design principes bieden een ondersteuning voor de interaction designer om microinteractions in een ontwerp te implementeren?

Page 17: Microinteractions, seminar by Gaitri Biharie

A way to design and dissect microinteractions:

STRUCTURE OF M.I.

Page 18: Microinteractions, seminar by Gaitri Biharie

TRIGGER

Page 19: Microinteractions, seminar by Gaitri Biharie

the physical / digital control or condition(s) that begins a microinteraction

“TRIGGER

Page 20: Microinteractions, seminar by Gaitri Biharie

Make the trigger something the target users will recognize as a trigger in context

Page 21: Microinteractions, seminar by Gaitri Biharie

TRIGGER

Page 22: Microinteractions, seminar by Gaitri Biharie

TRIGGER

Page 23: Microinteractions, seminar by Gaitri Biharie

Have the trigger initiate the same action very time

TRIGGER

Page 24: Microinteractions, seminar by Gaitri Biharie

TRIGGER

Page 25: Microinteractions, seminar by Gaitri Biharie

Bring the data forward

TRIGGER

Page 26: Microinteractions, seminar by Gaitri Biharie

TRIGGER

Page 27: Microinteractions, seminar by Gaitri Biharie

if it looks like a button..

SIGN IN

TRIGGER

Page 28: Microinteractions, seminar by Gaitri Biharie

it should act like a button.

SIGN IN

TRIGGER

Page 29: Microinteractions, seminar by Gaitri Biharie

SIGN IN

Don’t break the visual affordanceand don’t make a false affordance

TRIGGER

Page 30: Microinteractions, seminar by Gaitri Biharie

TRIGGER

Page 31: Microinteractions, seminar by Gaitri Biharie

Mircrointeractions that most people do, most often, should be highly discouverable.

Mircrointeractions that some people do, somewhat often, should be easily discouverable.

Mircrointeractions that few people do, infrequently, should take some searching to find.

Golden rules by Scott Berkun“TRIGGER

Page 32: Microinteractions, seminar by Gaitri Biharie

TRIGGER

Page 33: Microinteractions, seminar by Gaitri Biharie

TRIGGER

Page 34: Microinteractions, seminar by Gaitri Biharie

Add a label only if it provides information that the trigger itself cannot

TRIGGER

Page 35: Microinteractions, seminar by Gaitri Biharie

The more the microinteraction is focused on the goal rather than the steps, the more succesful the microinteraction is liked to be.

“RULES

Page 36: Microinteractions, seminar by Gaitri Biharie

RULES

Page 37: Microinteractions, seminar by Gaitri Biharie

Don’t start from zero

RULES

Page 38: Microinteractions, seminar by Gaitri Biharie

Tesler’s law:There is a point beyond which you cannot simplify a process any further.

RULES

Page 39: Microinteractions, seminar by Gaitri Biharie

RULES

Page 40: Microinteractions, seminar by Gaitri Biharie

RULES

Page 41: Microinteractions, seminar by Gaitri Biharie

Remove complexity, reduce options

and make smart defaults

RULES

Page 42: Microinteractions, seminar by Gaitri Biharie

A B

RULES

Page 43: Microinteractions, seminar by Gaitri Biharie

RULES

Page 44: Microinteractions, seminar by Gaitri Biharie

Poka-yoke:

Products and processes should be designed so that it’s impossible for users to commit an error

RULESRULES

Page 45: Microinteractions, seminar by Gaitri Biharie

RULES

Page 46: Microinteractions, seminar by Gaitri Biharie

Prevent errors, make human errors impossible

RULES

Page 47: Microinteractions, seminar by Gaitri Biharie

Tap next to continue

RULES

Page 48: Microinteractions, seminar by Gaitri Biharie

Continue

Next

RULES

Page 49: Microinteractions, seminar by Gaitri Biharie

RULES

Page 50: Microinteractions, seminar by Gaitri Biharie

Keep it short

RULES

Page 51: Microinteractions, seminar by Gaitri Biharie

You have no mail.Please enjoy your day!

FEEDBACK

Page 52: Microinteractions, seminar by Gaitri Biharie

Never overburden users with feedback

FEEDBACK

Page 53: Microinteractions, seminar by Gaitri Biharie

Feedback provides character,personality of the microinteraction“

FEEDBACK

Page 54: Microinteractions, seminar by Gaitri Biharie

FEEDBACK

Page 55: Microinteractions, seminar by Gaitri Biharie

Use the overlooked as a means of message delivery

FEEDBACK

Page 56: Microinteractions, seminar by Gaitri Biharie

Settings mode

LOOPS & MODES

Page 57: Microinteractions, seminar by Gaitri Biharie

LOOPS & MODES

Page 58: Microinteractions, seminar by Gaitri Biharie

Avoid modes;

The fewer modes, the less chance of confusion

LOOPS & MODES

Page 59: Microinteractions, seminar by Gaitri Biharie

LOOPS & MODES

Page 60: Microinteractions, seminar by Gaitri Biharie

A cycle that repeats, usually for a set of duration“

LOOPS & MODES

Page 61: Microinteractions, seminar by Gaitri Biharie

LOOPS & MODES

Page 62: Microinteractions, seminar by Gaitri Biharie

Carefully consider the parameters of loops to ensure the best user experience

LOOPS & MODES

Page 63: Microinteractions, seminar by Gaitri Biharie

Wat heb jij eraan?

LOOPS & MODES

Page 64: Microinteractions, seminar by Gaitri Biharie

LOOPS & MODES

Page 65: Microinteractions, seminar by Gaitri Biharie

LOOPS & MODES

Page 66: Microinteractions, seminar by Gaitri Biharie

LOOPS & MODES

Page 67: Microinteractions, seminar by Gaitri Biharie

Why make good design, if you can make great design?

LOOPS & MODES