टेक्स्ट लेबल्स क्यों ज़रूरी हैं (सिर्फ आइकन काफ़ी नहीं हैं)

• टेक्स्ट लेबल्स (text labels) का मज़बूती से समर्थन किया गया है
• आधुनिक इंटरफेस में आइकन इतने ज़्यादा हो गए हैं कि उपयोगकर्ताओं को उनके अर्थ समझने में बहुत अधिक संज्ञानात्मक संसाधन खर्च करने पड़ते हैं
• इसकी वजह से काम की गति धीमी हो जाती है और बार-बार अक्षम अनुभव का सामना करना पड़ता है
• सिर्फ आइकन से अर्थ पहुँचाना आसान नहीं है, और अधिकांश आइकन टेक्स्ट लेबल्स के बिना अधूरे होते हैं

# आइकन से पैदा होने वाली समस्याएँ

1. अधिकांश आइकन तुरंत स्पष्ट अर्थ नहीं दे पाते

• यह तर्क दिया जाता है कि “अच्छे आइकन” अपने आप अर्थ बता सकते हैं, लेकिन व्यवहार में किसी भी आइकन को समझने में संज्ञानात्मक बोझ लगता है
• उदाहरण के लिए, "कूड़ेदान आइकन" अपेक्षाकृत स्पष्ट रूप से Delete का अर्थ देता है, लेकिन "पेंसिल आइकन" अस्पष्ट है
  • लिखना? संपादन? ड्रॉ करना? बनाना?
• संदर्भ (Context) अर्थ को पूरक कर सकता है, लेकिन इसके लिए भी अतिरिक्त संज्ञानात्मक प्रयास चाहिए

2. इंटरफेस में आइकन जितने बढ़ते हैं, नेविगेशन उतना कठिन हो जाता है

• फीचर्स बढ़ने पर सिर्फ आइकन के आधार पर उनमें अंतर करना मुश्किल हो जाता है
• 5-7 फीचर्स तक आइकन से फर्क समझा जा सकता है, लेकिन 15-20 होने पर save/share/edit/create जैसे मिलते-जुलते आइकन एक-दूसरे से भ्रमित हो सकते हैं
• समान कार्य वाले आइकनों के बीच अंतर कमजोर पड़ने से पठनीयता घटती है

3. आइकन का अर्थ अक्सर सिर्फ एक खास इंटरफेस के भीतर ही समझ आता है

• उपयोगकर्ताओं को अलग-अलग इंटरफेस वातावरणों (web browser, operating system, app आदि) के बीच आना-जाना पड़ता है
• एक इंटरफेस में इस्तेमाल होने वाला आइकन किसी दूसरे वातावरण में बिल्कुल अलग अर्थ रख सकता है
• खासकर जब standard icon sets (Google Material Design आदि) का उपयोग किया जाता है, तब एक ही आइकन अलग अर्थों में इस्तेमाल होने पर भ्रम और बढ़ जाता है

# टेक्स्ट लेबल्स इंटरफेस को क्या फायदे देते हैं

1. सिर्फ टेक्स्ट भी अधिक कुशल होता है

• हमारा मस्तिष्क शब्दों को तेज़ी से पहचानने के लिए अनुकूलित है
  • परिचित शब्दों को हर अक्षर अलग-अलग पढ़े बिना भी तुरंत समझा जा सकता है
  • इसके विपरीत, अधिकांश आइकनों के लिए नई visual language सीखनी पड़ती है, इसलिए अधिक प्रयास चाहिए
• टेक्स्ट सूची को ऊपर से नीचे पढ़ा जा सकता है, लेकिन सिर्फ आइकन होने पर क्षैतिज और ऊर्ध्वाधर दोनों दिशाओं में स्कैन करना पड़ता है
  • खासकर mobile वातावरण में जब एक जैसे दिखने वाले आइकन पंक्ति में हों, तो दृश्य भ्रम बढ़ जाता है

2. टेक्स्ट आइकन को और अधिक प्रभावी बनाता है

• जब टेक्स्ट लेबल्स जोड़े जाते हैं:
  • आइकन का अर्थ अधिक स्पष्ट हो जाता है और नेविगेशन तेज़ हो जाता है
  • डिज़ाइनर पर सिर्फ एक आइकन से पूरा अर्थ समझाने का दबाव कम हो जाता है

3. टेक्स्ट-केंद्रित इंटरफेस में आइकन एक महत्वपूर्ण visual element बन सकते हैं

• आइकन visual anchor की भूमिका निभाते हैं, और टेक्स्ट के साथ मिलकर सबसे प्रभावी इंटरफेस प्रदान करते हैं

आइकन और टेक्स्ट के बीच संतुलन खोजना

• आइकन और टेक्स्ट लेबल्स के बीच चयन करते समय, उपयोगकर्ता के संज्ञानात्मक बोझ को ध्यान में रखना चाहिए
• सिर्फ आइकन वाला UI पहली नज़र में साफ़-सुथरा लग सकता है, लेकिन वास्तव में उपयोगकर्ता पर अर्थ निकालने का बोझ डालकर अक्षम हो सकता है
• समाधान यह नहीं है कि कोई “परफेक्ट आइकन” खोज लिया जाए
  → महत्वपूर्ण यह है कि आइकन और टेक्स्ट को मिलाकर सर्वोत्तम अनुभव दिया जाए

# बेहतर UI design के लिए मुख्य सिद्धांत

1. सिर्फ आइकन से सब कुछ व्यक्त करने की कोशिश न करें
2. टेक्स्ट लेबल्स जोड़ने से पठनीयता और accessibility बेहतर होती है
3. आइकन और टेक्स्ट प्रतिस्पर्धी नहीं, बल्कि एक-दूसरे के पूरक तत्व हैं
4. यह ध्यान रखें कि app या website पूरे डिजिटल वातावरण में कैसे उपयोग की जाती है
5. इंटरफेस ऐसा बनाएं कि उपयोगकर्ता उसे ‘व्याख्यायित’ न करे, बल्कि ‘तुरंत समझ’ सके

निष्कर्ष: "सुंदर दिखने वाला UI" नहीं, "आसानी से समझ आने वाला UI" ज़्यादा महत्वपूर्ण है

• जब भी नया आइकन बनाने या टेक्स्ट लेबल हटाने का प्रलोभन हो, एक बार फिर सोचें
• वास्तव में साफ़ डिज़ाइन वह नहीं है जो "सरल दिखे", बल्कि वह है जो "समझने में आसान हो"

[ndrgrd]

लगता है कि आइकन का इस्तेमाल केवल उन्हीं स्थितियों में करना चाहिए जहाँ उन्हें एक नज़र में समझा जा सके, और लंबे समय तक दबाने पर सहायक टेक्स्ट दिखाने की सुविधा भी ज़रूर होनी चाहिए।

[nemorize]

हम उन स्थितियों को बेहद सीमित रखते हैं जहाँ केवल icon का इस्तेमाल किया जाता है.

• जब किसी self-explanatory icon को self-explanatory जगह पर रखा जाए (ऊपर-बाएँ में ChevronLeft, ऊपर-दाएँ में Vertical3Dots)
• जब उस icon के दिखने के लिए user interaction ज़रूरी हो, और उसी interaction area में वही icon label के साथ भी दिखाया जाता हो (नोटिफ़िकेशन बंद करने की action में उस element पर BellOff icon)
• जब उसके बाद स्पष्ट numerical data आता हो (like, dislike, समय)
• जब tooltip, tutorial आदि के ज़रिए उस icon या icon के समूह का उद्देश्य समझाने वाला फीचर शामिल हो
  ** जब customer ऐसा request करे, haha;

[GN⁺]

Hacker News राय

• संतुलन महत्वपूर्ण है। मेनू में कुछ आइकन हों तो वे एंकर पॉइंट की तरह काम करते हैं और मेनू को एक अलग "आकृति" देते हैं
  • अगर हर मेनू आइटम में आइकन हो, तो यह भ्रम पैदा करता है
• 1990 के दशक से UI रिसर्च यह दिखाती रही है कि पहचान के लिए labels, icons से बेहतर होते हैं
  • अब display technology बेहतर है, लेकिन design trends और localization में आलस्य के कारण text हटाने की प्रवृत्ति है
  • usability guidelines होने के बावजूद उन्हें नज़रअंदाज़ किया जाता है, क्योंकि UI design एक संवेदना-आधारित पेशा बन गया है
  • उदाहरण के लिए, Apple की iOS Human Interface Guidelines स्पष्ट रूप से कहती हैं कि tab bar में icons और text labels दोनों शामिल होने चाहिए
  • कई designers इन guidelines को पढ़ते ही नहीं हैं
• यह अटकल है कि कई studies यूरोप और अमेरिका में अलग तरह से reproduce होंगी
  • अमेरिका के road signs मुख्य रूप से text-आधारित होते हैं
  • यूरोप में छोटे-छोटे देश ज़्यादा हैं, इसलिए वहाँ pictograms का उपयोग होता है
  • यूरोपियन लोग, अमेरिकियों की तुलना में, pictograms से अर्थ बेहतर समझ लेते हैं
• दुनिया के अधिकांश हिस्से बहुत पहले ध्वन्यात्मक लिपियों पर जा चुके हैं
  • pictograms की तुलना में ध्वन्यात्मक लिपियाँ श्रेष्ठ हैं
  • icons वैकल्पिक हैं और text अनिवार्य है
• जब मैं किसी खास विषय में व्यस्त होता हूँ, तो वह अक्सर अगले दिन HN पर दिखाई देता है
  • मैंने अपने 27 महीने के बेटे के लिए एक छोटा drawing app बनाया; शुरुआत में सिर्फ icons इस्तेमाल किए, लेकिन वह उलझ गया
  • text labels जोड़ने पर visual confusion कम हो गया
• icons ठीक हैं, लेकिन mouse hover पर tooltip या alt-text style label न हो तो काफ़ी झुंझलाहट होती है
  • नया software सीखना धीमा हो जाता है और documentation या video tutorials ढूँढ़ने पड़ते हैं
• UX Myth — यह मिथक कि icons usability को बेहतर बनाते हैं
• मुझे icons और उनके हर जगह फैलाव से हमेशा नफ़रत रही है
  • मैं text के पक्ष में तर्क देता हूँ, लेकिन उसे अच्छी प्रतिक्रिया नहीं मिलती
  • कई लोग यह नई परिकल्पना रखते हैं कि बहुत से लोग धीमे पाठक हैं
  • मेनू के सभी labels पढ़ने में लगभग 1 सेकंड लगता है
  • text की व्याख्या करना, icons की तुलना में, कभी धीमा नहीं होता
  • मैं इस बात से सहमत हो गया हूँ कि धीमे पाठकों को ध्यान में रखना चाहिए
• मैं text को खालीपन के खिलाफ बचाना चाहता हूँ
  • text labels छोटे हैं और उनके आसपास पर्याप्त जगह है
  • text पर ज़ोर दिया जा सकता है और visual scan आसान बनाया जा सकता है
  • अंतिम समाधान यह है कि users को designers की गलतियों को नज़रअंदाज़ करने की क्षमता दी जाए
  • यह रेखांकित किया गया कि text recognition, icon recognition से आसान है
  • icons कम जगह लेते हैं और अधिक efficient होते हैं
• मैंने यह कहावत सुनी है: "एक तस्वीर हज़ार शब्दों के बराबर होती है, लेकिन अक्सर एक ही काफ़ी होता है"