Microinteractions, seminar by Gaitri Biharie
-
Upload
gaitri-biharie -
Category
Design
-
view
115 -
download
2
description
Transcript of Microinteractions, seminar by Gaitri Biharie
![Page 1: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/1.jpg)
Microinteractions
Spreker: Gaitri Biharie
![Page 2: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/2.jpg)
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](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/3.jpg)
..behalen van bepaalde doelen of taken van de gebruiker.
navigatie interface, verschillende functionaliteiten, widgets of bedieningen
![Page 4: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/4.jpg)
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](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/5.jpg)
![Page 6: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/6.jpg)
![Page 7: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/7.jpg)
![Page 8: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/8.jpg)
Welke design principes bieden een ondersteuning voor de interaction designer om microinteractions in een ontwerp te implementeren?
![Page 9: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/9.jpg)
Don NormanThe design of everyday things
Design principles
![Page 10: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/10.jpg)
Affordance
![Page 11: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/11.jpg)
Signifier
![Page 12: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/12.jpg)
Mapping
![Page 13: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/13.jpg)
Feedback
![Page 14: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/14.jpg)
Contrains
![Page 15: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/15.jpg)
Mental models
![Page 16: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/16.jpg)
Welke design principes bieden een ondersteuning voor de interaction designer om microinteractions in een ontwerp te implementeren?
![Page 17: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/17.jpg)
A way to design and dissect microinteractions:
STRUCTURE OF M.I.
![Page 18: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/18.jpg)
TRIGGER
![Page 19: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/19.jpg)
the physical / digital control or condition(s) that begins a microinteraction
“TRIGGER
![Page 20: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/20.jpg)
Make the trigger something the target users will recognize as a trigger in context
![Page 21: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/21.jpg)
TRIGGER
![Page 22: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/22.jpg)
TRIGGER
![Page 23: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/23.jpg)
Have the trigger initiate the same action very time
TRIGGER
![Page 24: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/24.jpg)
TRIGGER
![Page 25: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/25.jpg)
Bring the data forward
TRIGGER
![Page 26: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/26.jpg)
TRIGGER
![Page 27: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/27.jpg)
if it looks like a button..
SIGN IN
TRIGGER
![Page 28: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/28.jpg)
it should act like a button.
SIGN IN
TRIGGER
![Page 29: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/29.jpg)
SIGN IN
Don’t break the visual affordanceand don’t make a false affordance
TRIGGER
![Page 30: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/30.jpg)
TRIGGER
![Page 31: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/31.jpg)
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](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/32.jpg)
TRIGGER
![Page 33: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/33.jpg)
TRIGGER
![Page 34: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/34.jpg)
Add a label only if it provides information that the trigger itself cannot
TRIGGER
![Page 35: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/35.jpg)
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](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/36.jpg)
RULES
![Page 37: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/37.jpg)
Don’t start from zero
RULES
![Page 38: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/38.jpg)
Tesler’s law:There is a point beyond which you cannot simplify a process any further.
“
RULES
![Page 39: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/39.jpg)
RULES
![Page 40: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/40.jpg)
RULES
![Page 41: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/41.jpg)
Remove complexity, reduce options
and make smart defaults
RULES
![Page 42: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/42.jpg)
A B
RULES
![Page 43: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/43.jpg)
RULES
![Page 44: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/44.jpg)
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](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/45.jpg)
RULES
![Page 46: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/46.jpg)
Prevent errors, make human errors impossible
RULES
![Page 47: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/47.jpg)
Tap next to continue
RULES
![Page 48: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/48.jpg)
Continue
Next
RULES
![Page 49: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/49.jpg)
RULES
![Page 50: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/50.jpg)
Keep it short
RULES
![Page 51: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/51.jpg)
You have no mail.Please enjoy your day!
FEEDBACK
![Page 52: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/52.jpg)
Never overburden users with feedback
FEEDBACK
![Page 53: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/53.jpg)
Feedback provides character,personality of the microinteraction“
FEEDBACK
![Page 54: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/54.jpg)
FEEDBACK
![Page 55: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/55.jpg)
Use the overlooked as a means of message delivery
FEEDBACK
![Page 56: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/56.jpg)
Settings mode
LOOPS & MODES
![Page 57: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/57.jpg)
LOOPS & MODES
![Page 58: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/58.jpg)
Avoid modes;
The fewer modes, the less chance of confusion
LOOPS & MODES
![Page 59: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/59.jpg)
LOOPS & MODES
![Page 60: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/60.jpg)
A cycle that repeats, usually for a set of duration“
LOOPS & MODES
![Page 61: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/61.jpg)
LOOPS & MODES
![Page 62: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/62.jpg)
Carefully consider the parameters of loops to ensure the best user experience
LOOPS & MODES
![Page 63: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/63.jpg)
Wat heb jij eraan?
LOOPS & MODES
![Page 64: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/64.jpg)
LOOPS & MODES
![Page 65: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/65.jpg)
LOOPS & MODES
![Page 66: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/66.jpg)
LOOPS & MODES
![Page 67: Microinteractions, seminar by Gaitri Biharie](https://reader034.fdocuments.nl/reader034/viewer/2022052307/54c7a1294a7959c0408b45b9/html5/thumbnails/67.jpg)
Why make good design, if you can make great design?
LOOPS & MODES