Theory
Thing को Test करने के लिए Thing मत Build कीजिए
यहाँ एक tempting mistake है: यह पता लगाने के लिए कि FestConnect की नई registration screen काम करती है या नहीं, बस इसे BUILD कर दीजिए: code कीजिए, style कीजिए, ship कीजिए, देखिए क्या होता है।
और अगर यह ग़लत निकली? आपने weeks waste कर दिए, और अब fix का मतलब है real code फिर से लिखना।
Architects एक building construct नहीं करते यह discover करने के लिए कि rooms ग़लत जगह हैं: वे पहले BLUEPRINTS draw करते हैं। Designers wireframes (blueprint) और prototypes (clickable draft) के साथ यही करते हैं, code की एक line exist करने से पहले idea को CHEAPLY test करते हुए।
Theory
Wireframe: Skeletal Blueprint
एक wireframe एक screen का low-fidelity, skeletal layout है: यह दिखाता है चीज़ें कहाँ जाती हैं (structure, content, hierarchy) visual detail के बिना: कोई real colours, fonts या images नहीं, बस grey boxes, placeholder text और labels।
Visuals क्यों strip out करें? attention को उस पर focus करने के लिए जो PEHLE matter करता है: layout और flow। FestConnect की registration screen का एक wireframe answer देता है 'क्या form एक sensible order में है? क्या button वहाँ है जहाँ users expect करते हैं?' अभी तक कोई blue के shade पर argue किए बिना।
Fidelity detail की मात्रा है: low-fi (rough boxes, fast, cheap) बनाम high-fi (detailed, near-final looking)। Low से शुरू कीजिए।
Theory
Prototype: Clickable Draft
एक wireframe static है। एक prototype interactive है: एक clickable model जो SIMULATE करता है product कैसे काम करता है, ताकि आप build करने से पहले real users के साथ flow TEST कर सकें।
Prototype के forms:
- paper prototype: paper पर drawn screens; एक human 'computer play' करता है, sheets swap करते हुए जब user 'tap' करता है: astonishingly effective और almost free
- digital prototype: एक design tool में बना (Figma एक common one है), एक real device पर clickable
आप 5 first-years को एक prototype हाथ में देते हैं, कहते हैं 'Garba Night के लिए register कीजिए', और WATCH करते हैं (usability testing, Unit 2): flow problems को catch करते हुए जब वे fix करने में minutes खर्च करते हैं, weeks नहीं।
At a glance
Fidelity Ladder (cheap से expensive तक)
| Stage | यह क्या है | बदलने की Cost |
|---|---|---|
| Sketch | Rough hand-drawn ideas | Seconds |
| Low-fi wireframe | Grey boxes + labels, सिर्फ़ structure | Minutes |
| Prototype | Flow का clickable model | Low |
| High-fi mockup | पूरा visual design, near-final look | Higher |
| Built product | Real coded product | Highest |
Quiz
Early wireframes को deliberately low-fidelity (grey boxes, कोई colour नहीं) क्यों रखें, उन्हें polished बनाने के बजाय?
- क्योंकि designers अभी polished work नहीं बना सकते
- Feedback को structure और flow पर focus करने के लिए, बदलाव को cheap रखने के लिए, और क्योंकि लोग rough work को ज़्यादा honestly critique करते हैं
- Low-fi wireframes developers को दिया जाने वाला final deliverable हैं
- Colour किसी भी design में कभी इस्तेमाल नहीं होता
- Design को users से hide करने के लिए
Show the answer
Feedback को structure और flow पर focus करने के लिए, बदलाव को cheap रखने के लिए, और क्योंकि लोग rough work को ज़्यादा honestly critique करते हैं
Low fidelity 3 payoffs वाला एक deliberate choice है: यह attention को layout और flow पर रखता है (button के shade पर नहीं), यह बदलने में cheap है (cost-of-change curve), और: subtly important: लोग ROUGH work को ज़्यादा honestly critique करते हैं, जबकि एक polished mockup 'finished' दिखता है और exactly वह criticism discourage करता है जो आपको चाहिए। Option A intent का insult करता है (यह strategic है, एक limitation नहीं)। Option C ग़लत है: wireframes high-fi design और build से PEHLE आते हैं। Option D over-generalise करता है (colour matter करता है, बस बाद में)। Option E purpose को invert कर देता है (आप feedback gather करने के लिए low-fi work SHOW करते हैं)। Purpose से rough, cheaply सीखने के लिए।
Think first
Polished-Mockup Trap
आप एक stakeholder को एक beautiful, finished-looking mockup दिखाते हैं और feedback माँगते हैं। Grey boxes दिखाने से LESS useful criticism आपको क्यों मिल सकती है? फिर tap कीजिए।
Show the answer
एक polished mockup done दिखता है, तो लोग assume करते हैं big decisions settled हैं और fundamental changes suggest करने में hesitate करते हैं: 'यह finished दिखता है, मैं उन्हें इसे redo नहीं करवाना चाहता'। वे small चीज़ों पर nitpick करते हैं (एक colour, एक word) structure question करने के बजाय। Grey-box wireframes signal करते हैं 'यह rough है, अभी भी figure out हो रहा है', जो honest structural feedback INVITE करता है: 'असल में पूरा flow backwards है'। यही वजह है designers exactly deep critique provoke करने के लिए early low-fi work दिखाते हैं। Counter-intuitive rule: artefact जितना rougher होता है, feedback उतनी ही braver और useful होती है। Fidelity signal करती है आप बदलाव के लिए कितने open हैं।
Watch out
Wireframe/Prototype Slips
Wireframing से पहले Building: एक idea test करने के लिए code करना weeks waste करता है; पहले sketch और prototype कीजिए (cost-of-change)।
बहुत जल्दी Polish करना: बहुत जल्दी high fidelity honest feedback suppress करता है और visuals पर effort waste करता है जो cut हो सकते हैं।
Wireframe बनाम Prototype Confusion: एक wireframe एक STATIC layout है; एक prototype INTERACTIVE है (clickable, testable)।
User Test Skip करना: एक prototype exist करता है real users के साथ TEST होने के लिए, सिर्फ़ internally admire होने के लिए नहीं।
Theory
Structure Sketch हो गई, अब Paths
Wireframes हर screen को lay out करते हैं; prototypes उन्हें flows में link करते हैं। इस unit में बचा एक structural piece यह है कि users उन screens के बीच कैसे MOVE करते हैं: NAVIGATION: वे menus, tabs, links और breadcrumbs जो उस information architecture की visible expression हैं जो आपने दो lessons पहले बनाई थी। Navigation systems Unit 3 बंद करते हैं, और फिर Unit 4 आख़िरकार सब कुछ अच्छा LOOK कराता है: typography, colour और visual design।
Summary
Key takeaways
- एक wireframe एक low-fidelity skeletal layout है: structure और content placement, कोई visual detail नहीं (grey boxes, labels)।
- एक prototype एक interactive/clickable model है जो product को simulate करता है users के साथ flows test करने के लिए।
- Fidelity detail का level है: low-fi (rough, fast, cheap) बनाम high-fi (detailed, near-final)।
- Prototypes paper (एक human computer play करता है) या digital (Figma जैसे tools) हो सकते हैं।
- Ladder: sketch -> wireframe -> prototype -> high-fi mockup -> built product, cost में बढ़ते हुए।
- Early work low-fi रखिए: यह feedback को structure पर focus करता है, बदलने में cheap रहता है, और honest critique invite करता है।
- Memory hook: building बनाने से पहले blueprint draw कीजिए।