Theory
वह Button जिसे कोई Press नहीं कर पाया
एक FestConnect tester screen को घूरता है। 'Register' text वहाँ है, पर flat, grey, unadorned: यह tappable नहीं LOOK करता, तो वे कभी उसे tap नहीं करते। वे इसे tap करते हैं, wait करते हैं, कुछ होता नहीं दिखता, तो वे 4 बार और tap करते हैं: और accidentally 5 बार register हो जाते हैं।
दो failures, दोनों INTERACTION के बारे में: button ने एक tap INVITE नहीं किया, और यह CONFIRM नहीं हुआ कि tap landed। Interaction design user और product के बीच की conversation का craft है, और यह lesson इसके 3 core principles हैं।
Theory
Interaction Design, और इसके पहले दो Principles
Interaction design (IxD) एक user और product के बीच के dialogue को design करना है: यह कैसे behave करता है, respond करता है, और guide करता है।
Affordance: एक property जो suggest करती है कोई चीज़ कैसे USE की जा सकती है। एक raised, coloured button press करने को AFFORD करता है; underlined blue text click करने को afford करता है। वह visible cue जो एक affordance reveal करता है एक signifier है (एक shadow, एक colour, एक icon)। Good affordances का मतलब है users बताए बिना जानते हैं क्या करना है।
Feedback: product का वह response जो CONFIRM करता है एक action हुआ। Tap होने पर button darken होता है, एक spinner work in progress दिखाता है, submit के बाद एक 'Registered!' message आता है। बिना feedback के, users बता नहीं सकते कि यह काम किया या नहीं: तो वे re-tap करते हैं।
At a glance
3 Named Interaction-Design Principles
| Principle | यह क्या करता है | FestConnect Example |
|---|---|---|
| Affordance | Suggest करता है कोई चीज़ कैसे USE की जा सकती है | एक raised, coloured Register button जो tappable दिखता है |
| Feedback | Confirm करता है एक action HAPPEN हुआ | Tap पर button darken होता है; submit के बाद 'Registered!' message |
| User flow | Goal से completion तक का PATH | Open -> event pick कीजिए -> form fill कीजिए -> confirm कीजिए -> done |
Theory
User Flows: Done तक का Path
तीसरा principle single controls से पूरी JOURNEY तक zoom out करता है। एक user flow उन steps की sequence है जो एक user एक goal पूरा करने के लिए लेता है।
FestConnect का registration flow: app open कीजिए → एक event pick कीजिए → form fill कीजिए → confirm कीजिए → done।
एक flow design करने का मतलब है: STEPS minimise कीजिए (हर extra screen लोगों को खोती है), DEAD-ENDS हटाइए (users को कभी बिना आगे या पीछे जाने के रास्ते के trap मत कीजिए), और user के MENTAL MODEL से match कीजिए (order Rahul को natural लगना चाहिए, database को नहीं)। एक great button waste है अगर इसके आस-पास का flow एक maze है। Flows वह जगह है जहाँ interaction design user के actual goal से मिलता है।
Quiz
एक FestConnect user 'Submit' tap करता है और screen कुछ नहीं दिखाता: कोई spinner नहीं, कोई message नहीं, कोई change नहीं। कौन सा interaction-design principle missing है, और user likely क्या करेगा?
- Affordance missing है; user colour बदल देगा
- Feedback missing है; यह काम किया या नहीं यह sure न होने पर, user re-tap करेगा, possibly कई बार submit करते हुए
- User flow missing है; app crash हो जाएगा
- कुछ missing नहीं है; silence अच्छा design है
- Consistency missing है; fonts बदल जाएँगे
Show the answer
Feedback missing है; यह काम किया या नहीं यह sure न होने पर, user re-tap करेगा, possibly कई बार submit करते हुए
Action ने कोई response produce नहीं किया, तो FEEDBACK missing है: product यह confirm करने में fail हुआ क्या हुआ, user को doubt में छोड़ते हुए, और predictable result re-tapping है (hook का 5-बार-registered bug)। Option A इसे misname करता है: affordance इस बारे में है कि button tappable दिखता है या नहीं (एक अलग issue); यहाँ tap DID happen, यह बस unconfirmed रह गया। Option C overreach करता है (कोई feedback crash के बराबर नहीं है)। Option D dangerously ग़लत है: एक action के बाद silence एक classic usability failure है। Feedback का job loop close करना है: हर user action एक visible reaction deserve करता है।
Think first
Affordance बनाम Signifier
Don Norman एक affordance को एक signifier से distinguish करते हैं। Register button इस्तेमाल करते हुए, difference explain कीजिए। फिर tap कीजिए।
Show the answer
एक affordance एक action की possibility है: button TAP हो सकता है (एक tappable region exist करता है)। एक signifier वह perceivable CUE है जो user को बताता है कि affordance वहाँ है: raised look, fill colour, वह shadow जो SIGNAL करता है 'यह tappable है'। Hook में flat grey button के पास affordance THA (यह tappable था) पर एक signifier की कमी थी (कुछ भी user को नहीं बताता था), तो किसी ने tap नहीं किया। Design lesson: एक affordance जो user PERCEIVE नहीं कर सकता वह useless है: possibility visible बनाने के लिए आपको signifiers add करने चाहिए। (Everyday exam usage में दोनों अक्सर merge हो जाते हैं, पर split जानना real understanding दिखाता है।)
Watch out
Interaction-Design Slips
Actions के बाद कोई Feedback नहीं: re-tap bug; हर action को एक visible response चाहिए (state change, message, spinner)।
Invisible Affordances: अगर यह tappable है, इसे TAPPABLE दिखाइए; interactivity को flat, ambiguous elements में मत छुपाइए।
Bloated Flows: एक flow में हर extra step लोगों को खोता है; steps काटिए, dead-ends kill कीजिए।
Mental Model Ignore करना: steps को उस order में रखिए जो USER expect करता है, उस order में नहीं जिसमें system data store करता है (technology-centered trap, फिर से)।
Theory
Behaviour से Structure तक
Interaction design ने shape किया individual controls और flows कैसे BEHAVE करते हैं। पर एक flow assume करता है user पहली जगह चीज़ें FIND कर सकता है, और यह depend करता है product का content कैसे ORGANISED है इस पर। वह organisation INFORMATION ARCHITECTURE है: अगला 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 करती है कोई चीज़ कैसे USE हो सकती है (एक button जो pressable दिखता है); एक signifier इसका perceivable cue है।
- Feedback: product का response जो confirm करता है एक action हुआ; बिना इसके, users doubt में re-tap करते हैं।
- User flow: goal से completion तक steps की sequence; steps minimise कीजिए, dead-ends हटाइए, mental model से match कीजिए।
- एक affordance जो users perceive नहीं कर सकते उसे visible बनाने के लिए एक signifier चाहिए।
- अन्य IxD principles: consistency, mapping, constraints, discoverability।
- Memory hook: affordance invite करता है, feedback confirm करता है, flow guide करता है।