Theory
वह Icon जिसे कोई नहीं पढ़ पाया
FestConnect के navigation ने sleek दिखने के लिए icon-ONLY buttons इस्तेमाल किए: हर section के लिए एक छोटा symbol, कोई words नहीं। Clean, modern, minimal।
और users को कोई idea नहीं था आधे का मतलब क्या है। वह symbol क्या था: schedule? tickets? profile? पता लगाने के लिए वे randomly tap करते रहे।
Icons words से fast communicate कर सकते हैं: एक magnifier instantly 'search' कहता है। पर एक ambiguous icon कुछ भी communicate नहीं करता, या ग़लत चीज़ करता है। यह lesson icons और imagery को genuinely understanding AID करने के लिए इस्तेमाल करने के बारे में है, user की कीमत पर clever दिखने के लिए नहीं।
Theory
Iconography: Symbols जो (Should) बोलें
Iconography icons: simple symbolic graphics इस्तेमाल करना है actions, objects या ideas को compactly और language-independently represent करने के लिए।
Good icons ये होते हैं:
- recognisable/universal: search के लिए एक magnifier, home के लिए एक house, delete के लिए एक trash can
- style में consistent: सब एक family से (all outline, या all filled), एक jumble नहीं
- simple: small sizes पर clear
- ambiguous होने पर labelled: icon को एक word के साथ pair कीजिए
Crucial truth: ज़्यादातर icons TRULY universal नहीं हैं। Hamburger, share icon, एक heart-बनाम-bookmark: users इन्हें अलग तरह से interpret करते हैं। Doubt होने पर, एक LABEL add कीजिए: एक icon-plus-text pairing अकेले किसी से भी clearer है।
Theory
Imagery: Purpose वाली Pictures
Imagery photos, illustrations और graphics हैं जो meaning, emotion, context या engagement add करते हैं।
अच्छे से इस्तेमाल होने पर, पिछले साल की roaring Garba Night की एक photo FestConnect को alive और real feel कराती है। बुरी तरह इस्तेमाल होने पर, एक random smiling-stock-people photo कुछ नहीं add करती और 'filler' चिल्लाती है।
Good imagery यह होती है:
- purposeful और relevant: यह meaning add करके अपनी जगह earn करती है, decorate करके नहीं
- high quality और culturally appropriate (audience के लिए real, relatable images)
- distracting या slow नहीं: heavy images जो register button को नीचे push करती हैं या hostel wifi पर lag करती हैं experience को HARM करती हैं
Illustrations भी explain कर सकते हैं (एक diagram) या personality add कर सकते हैं: पर हमेशा user की service में, कभी empty ornament की तरह नहीं।
Quiz
FestConnect minimal दिखने के लिए icon-only navigation इस्तेमाल करता है, और users बता नहीं पाते icons का मतलब क्या है। Best fix क्या है?
- Icons को बड़ा बनाइए; size ambiguity solve करता है
- हर icon को एक clear text label के साथ pair कीजिए; ज़्यादातर icons universally understand नहीं होते
- सारे icons हटा दीजिए और सिर्फ़ long paragraphs इस्तेमाल कीजिए
- Balance के लिए और decorative icons add कीजिए
- हर icon के लिए एक अलग bright colour इस्तेमाल कीजिए
Show the answer
हर icon को एक clear text label के साथ pair कीजिए; ज़्यादातर icons universally understand नहीं होते
Problem MEANING है, visibility नहीं, और reliable fix हर icon को एक text label के साथ pair करना है: क्योंकि ज़्यादातर icons (search और home जैसे कुछ के अलावा) universally understand नहीं होते, और icon-plus-label अकेले किसी से भी clearer है। Option A एक ambiguity problem को एक size problem की तरह treat करता है (एक बड़ा unclear icon अब भी unclear है)। Option C wordiness में over-correct करता है, icons की real value discard करते हुए। Option D और ambiguity ADD करता है। Option E उन्हें prettier बनाता है पर clearer नहीं। Principle: यह मत मान लीजिए कि एक icon obvious है; जब meaning miss हो सकती है, इसे label कीजिए। Sleekness worthless है अगर users navigate नहीं कर सकते।
Think first
Stock-Photo Test
FestConnect का designer home screen पर generic smiling students की एक बड़ी photo add करना चाहता है 'engagement के लिए'। वह test दीजिए जो decide करता है एक image belong करती है या नहीं, और इस पर rule कीजिए। फिर tap कीजिए।
Show the answer
Test: क्या यह image MEANING add करती है या यह decoration है? एक purposeful image कुछ real communicate करती है (पिछले साल की actual Garba crowd fest की energy और authenticity convey करती है); anonymous smiling students की एक generic stock photo कुछ specific convey नहीं करती, filler जैसी feel होती है, और hostel wifi पर page को slow भी कर सकती है। Ruling: generic stock photo REJECT कीजिए; इसके बजाय पिछले साल की fest की एक REAL photo इस्तेमाल कीजिए, जो genuine context और emotion add करती है। Imagery को understanding या authentic engagement में मदद करके अपनी जगह earn करनी चाहिए: 'यह space भरती है' या 'यह lively दिखती है' कोई reason नहीं है। हर image के पास एक job होनी चाहिए।
Watch out
Icon/Imagery Slips
Icon-Only Navigation: यह assume करना कि icons obvious हैं; ambiguous वालों को label कीजिए।
Inconsistent Icon Styles: outline और filled, thin और thick mix करना; एक family रखिए।
Decorative Stock Imagery: random photos जो कुछ नहीं add करतीं; relevant, purposeful, authentic images इस्तेमाल कीजिए।
Heavy/Slow Images: large files poor connections पर lag करती हैं और content नीचे push करती हैं; optimise कीजिए।
कोई Alt Text नहीं: accessibility के लिए images को text alternatives चाहिए (Unit 5); सिर्फ़ visual पर rely मत कीजिए।
Theory
कई Elements, एक Identity
अब आपके पास सारे visual materials हैं: type, colour, layout, hierarchy, icons, imagery। पर एक product जहाँ हर screen अलग fonts, colours और icon styles इस्तेमाल करती है broken feel होता है, जैसे कई apps एक साथ stitch किए गए हों। Unit 4 का final lesson वह force है जो इन्हें एक recognisable whole में unify करता है: BRANDING और CONSISTENCY: हर FestConnect screen को unmistakably उसी trustworthy product का हिस्सा बनाना।
Summary
Key takeaways
- Iconography actions/ideas को compactly और language-independently represent करने के लिए simple symbolic graphics इस्तेमाल करता है।
- Good icons recognisable होते हैं, style में consistent, simple, और meaning ambiguous होने पर labelled।
- ज़्यादातर icons universal नहीं हैं; doubt होने पर icon को text के साथ pair कीजिए (icon-only nav अक्सर confuse करता है)।
- Imagery (photos, illustrations) को meaning, emotion या context add करना चाहिए: purposeful और relevant, decorative filler नहीं।
- Good imagery high quality है, culturally appropriate है, और product को slow या distract नहीं करती।
- Icons और images दोनों को accessibility care चाहिए (labels, alt text); सिर्फ़ visual पर rely मत कीजिए।
- Memory hook: एक icon या image के पास एक job होनी चाहिए, वरना यह belong नहीं करती।