Theory
Button જેને કોઈ press કરી શકે છે એ કોઈ જાણતું નહોતું
FestConnect tester screen ને stare કરે છે. 'Register' text ત્યાં જ છે, પણ flat, grey, unadorned: એ tappable LOOK નથી કરતું, એટલે ક્યારેય tap નથી કરતા. tap કરે છે, wait કરે છે, કંઈ happen થતું નથી લાગતું, એટલે 4 વાર વધુ tap કરે છે: અને accidentally 5 વાર register થઈ જાય છે.
બે failures, બંને INTERACTION વિશે: button એ tap ને INVITE નહોતું કર્યું, અને tap landed થયું એ CONFIRM નહોતું કર્યું. Interaction design એ user અને product વચ્ચેની conversation ની craft છે, અને આ lesson એના 3 core principles છે.
Theory
Interaction design, અને તેના first two principles
Interaction design (IxD) એ user અને product વચ્ચેનો dialogue design કરવાનું છે: એ કેવી રીતે behave કરે છે, respond કરે છે, અને guide કરે છે.
Affordance: property જે suggest કરે છે કે કંઈક ને કેવી રીતે USE કરી શકાય. Raised, coloured button pressing ને AFFORD કરે છે; underlined blue text clicking ને afford કરે છે. Affordance ને reveal કરતો visible cue એ signifier છે (shadow, colour, icon). Good affordances નો અર્થ છે કે users ને શું કરવું એ told કર્યા વગર ખબર પડે છે.
Feedback: product નો response જે CONFIRM કરે છે કે action happened. Button tap પર dark થાય છે, spinner work in progress show કરે છે, submit પછી 'Registered!' message આવે છે. Feedback વગર, users ને ખબર નથી પડતી કે work થયું કે નહીં: એટલે re-tap કરે છે.
At a glance
3 named interaction-design principles
| Principle | શું કરે છે | FestConnect example |
|---|---|---|
| Affordance | Suggest કરે છે કે HOW something ને use કરી શકાય | Raised, coloured Register button જે tappable લાગે છે |
| Feedback | Confirm કરે છે કે action HAPPENED | Tap પર button dark થાય છે; submit પછી 'Registered!' message |
| User flow | Goal થી completion સુધીનો PATH | Open -> pick event -> fill form -> confirm -> done |
Theory
User flows: done સુધીનો path
ત્રીજું principle single controls થી આખી JOURNEY પર zoom out કરે છે. User flow એ steps નો sequence છે જે user goal complete કરવા લે છે.
FestConnect નો registration flow: app open કરો → event pick કરો → form ભરો → confirm → done.
Flow design કરવાનો અર્થ છે: STEPS ને minimise કરો (દરેક extra screen લોકો ને lose કરે છે), DEAD-ENDS ને remove કરો (user ને ક્યારેય forward અથવા back નો way વગર trap ન કરો), અને user ના MENTAL MODEL ને match કરો (order Rahul ને natural લાગવી જોઈએ, database ને નહીં). Great button waste થાય છે જો એની આસપાસનો flow maze હોય. Flows એ જગ્યા છે જ્યાં interaction design user ના actual goal ને meet કરે છે.
Quiz
FestConnect user 'Submit' tap કરે છે અને screen કંઈ show નથી કરતી: no spinner, no message, no change. કયો interaction-design principle missing છે, અને user likely શું કરશે?
- Affordance missing છે; user colour ને change કરશે
- Feedback missing છે; work થયું કે નહીં unsure, user re-tap કરશે, possibly multiple times submit કરશે
- User flow missing છે; app crash થશે
- કંઈ missing નથી; silence એ good design છે
- Consistency missing છે; fonts change થશે
Show the answer
Feedback missing છે; work થયું કે નહીં unsure, user re-tap કરશે, possibly multiple times submit કરશે
Action નો કોઈ response નહોતો, એટલે FEEDBACK missing છે: product એ શું થયું એ confirm ન કર્યું, user ને doubt માં મૂક્યો, અને predictable result એ re-tapping છે (hook નો 5-times-registered bug). Option A misnames કરે છે: affordance એ છે કે button LOOKS tappable કે નહીં (separate issue); અહીં tap DID happen, પણ unconfirmed ગયું. Option C overreaches કરે છે (no feedback એ crash ની બરાબર નથી). Option D dangerously wrong છે: action પછી silence એ classic usability failure છે. Feedback નું job એ loop ને close કરવાનું છે: દરેક user action ને visible reaction મળવું જોઈએ.
Think first
Affordance vs signifier
Don Norman affordance અને signifier વચ્ચે distinction કરે છે. Register button નો ઉપયોગ કરીને, difference સમજાવો. પછી tap કરો.
Show the answer
Affordance એ action ની possibility છે: button ને tap કરી શકાય છે (tappable region exists છે). Signifier એ perceivable CUE છે જે user ને કહે છે કે affordance ત્યાં છે: raised look, fill colour, shadow જે SIGNAL કરે છે 'આ tappable છે'. Hook નો flat grey button પાસે affordance હતું (એ tappable હતું) પણ signifier નહોતું (કંઈ એવું નહોતું જે user ને કહે), એટલે કોઈ tap નહોતું કર્યું. Design lesson: user જેને PERCEIVE નથી કરી શકે એ affordance useless છે: તમારે signifiers add કરવા પડે જેથી possibility visible થાય. (Everyday exam usage માં બંને ને ઘણીવાર merged કરવામાં આવે છે, પણ split જાણવાથી real understanding show થાય છે.)
Watch out
Interaction-design slips
Actions પછી no feedback: re-tap bug; દરેક action ને visible response જોઈએ (state change, message, spinner).
Invisible affordances: જો it is tappable, તો એને LOOK tappable બનાવો; interactivity ને flat, ambiguous elements માં hide ન કરો.
Bloated flows: flow માં દરેક extra step users ને lose કરે છે; steps cut કરો, dead-ends kill કરો.
Mental model ને ignore કરવું: steps ને order એવી રીતે કરો જેમ USER expect કરે છે, system data store કરે છે તેમ નહીં (technology-centered trap, again).
Theory
Behaviour થી structure
Interaction design એ individual controls અને flows ને કેવી રીતે BEHAVE કરે છે એ shape કર્યું. પણ flow એ assume કરે છે કે user first place માં things ને FIND કરી શકે છે, અને એ product નો content કેવી રીતે ORGANISED છે એના પર depend કરે છે. એ organisation એ INFORMATION ARCHITECTURE છે: next lesson: invisible skeleton જે decide કરે છે કે users register button સુધી navigate કરી શકે છે કે નહીં. Behaviour ને નીચે structure જોઈએ છે.
Summary
Key takeaways
- Interaction design (IxD) user અને product વચ્ચેના dialogue ને shape કરે છે: એ કેવી રીતે behave અને respond કરે છે.
- Affordance: property જે suggest કરે છે કે HOW something ને use કરી શકાય (button જે pressable લાગે); signifier એ તેનો perceivable cue છે.
- Feedback: product નો response જે action happened એ confirm કરે છે; વગર, users doubt માં re-tap કરે છે.
- User flow: goal થી completion સુધીનો steps નો sequence; steps minimise કરો, dead-ends remove કરો, mental model match કરો.
- User જેને perceive નથી કરી શકે એ affordance ને visible બનાવવા signifier જોઈએ.
- અન્ય IxD principles: consistency, mapping, constraints, discoverability.
- Memory hook: affordance invite કરે છે, feedback confirm કરે છે, flow guide કરે છે.