मेन्यू के हर कोने में फैले आइकन — मदद कीजिए
(blog.jim-nielsen.com)- हर मेन्यू आइटम में आइकन को डिफ़ॉल्ट रूप से जोड़ने की डिज़ाइन प्रैक्टिस तेजी से फैल रही है, और यह अनावश्यक दृश्य शोर पैदा करती है
- Google Sheets और macOS Tahoe संस्करण की मेन्यू प्रणाली इसके प्रतिनिधि उदाहरण हैं, जहाँ लगभग हर मेन्यू आइटम में आइकन जोड़े गए हैं
- कुछ मेन्यू में आइकन होने या न होने का मानदंड स्पष्ट नहीं है, और इससे टॉगल मार्करों के साथ ओवरलैप होकर लेआउट में भ्रम पैदा होता है
- दूसरी ओर, Finder के विंडो अलाइनमेंट मेन्यू की तरह दृश्य समझ में मदद करने वाले आइकन वास्तव में उपयोगी हैं, इसलिए आइकन के संदर्भ-आधारित उपयोग पर जोर ज़रूरी है
- समस्या यह है कि Apple ने अपने पुराने इंटरफेस गाइडलाइन्स में “मनमाने तरीके से आइकन उपयोग न करने” वाला सिद्धांत छोड़ दिया
मेन्यू आइकन के अति-उपयोग की आलोचना
- सभी मेन्यू आइटम पर आइकन चिपकाने का तरीका डिफ़ॉल्ट बनकर फैल रहा है, जिससे इंटरफेस अनावश्यक रूप से जटिल होता जा रहा है
- Google Sheets के “File”, “Edit”, “View” मेन्यू की तरह लगभग हर आइटम पर आइकन लगा है
- यह रवैया “खाली जगह भरने के लिए आइकन बनाकर डालने” की आदत बन सकता है
- यह प्रत्येक मेन्यू के संदर्भ और मानसिक बोझ (cognitive load) को नहीं देखते हुए केवल एक सांचे जैसी दोहरावदार कॉपी-पेस्ट सोच का उदाहरण है
- आइकन का उपयोग संदर्भ देखकर सावधानी से चुना जाना चाहिए
- यह तय करना ज़रूरी है कि आइकन सच में उपयोगिता बढ़ाते हैं या भ्रम पैदा करते हैं
- सिर्फ “हर मेन्यू में आइकन डालते हैं” वाला तरीका डिज़ाइन सोच की कमी दिखाता है
macOS Tahoe के बदलाव
- macOS ने लंबे समय तक इस शैली से दूरी बनाए रखी, लेकिन macOS Tahoe में मेन्यू के व्यापक हिस्से में आइकन जोड़े गए हैं
- Apple मेन्यू, Safari के “Safari”, “File”, “View” मेन्यू में केवल कुछ आइटमों पर ही आइकन दिखते हैं
- “Settings” में आइकन है लेकिन “Privacy Report” में नहीं, यानी सुसंगतता की कमी
- Safari File मेन्यू में कुछ समूहों में आइकन और इंडेंटेशन है, बाकी में नहीं
- “View” मेन्यू में टॉगल/चेक मार्क और आइकन एक साथ मौजूद हैं, जिससे लेआउट/एलाइनमेंट बिगड़ता है
- Mail ऐप के “View” मेन्यू में भी टेक्स्ट, टॉगल और आइकन का मिश्रण जटिल विज़ुअल स्ट्रक्चर बना देता है
- आइकन मौजूद होने का कारण या चयन का मानदंड स्पष्ट नहीं दिखता
आइकन के उपयोगी अपवाद
- Finder के विंडो अलाइनमेंट मेन्यू की तरह जहां आइकन के माध्यम से तुरंत स्थानिक व्यवस्था समझ आती है, वहाँ आइकन बड़ी मददगार साबित होते हैं
- “Top Left”, “Bottom & Top”, “Quarters” जैसे टेक्स्ट की तुलना में विज़ुअल लेआउट आइकन तुरंत समझ दे देते हैं
- ऐसे मामलों में आइकन मानसिक दक्षता बढ़ाने के सकारात्मक उपयोग हैं
- यानी, आइकन को डिफ़ॉल्ट नहीं बल्कि स्थिति-आधारित चयन के रूप में इस्तेमाल किया जाना चाहिए
Apple की गाइडलाइन्स के साथ विरोधाभास
- Apple के 992·2005·2020 मानव-केंद्रित इंटरफेस गाइडलाइन्स (Human Interface Guidelines) में कहा गया था कि “मेन्यू में मनमाने ढंग से आइकन मत इस्तेमाल करें”
- इसमें चेतावनी दी गई थी कि इससे “दृश्य भ्रम” हो सकता है और उपयोगकर्ता उलझ सकते हैं
- उस समय के ‘ना करने वाले उदाहरण’ आज के macOS Tahoe मेन्यू से लगभग समान दिखते हैं
- Apple ने खुद अपनी ही नीति का उल्लंघन किया है
निष्कर्ष
- मेन्यू के हर कोने में दिखने वाले अत्यधिक आइकन दृश्य शोर पैदा करते हैं
- जब Apple ने “सभी मेन्यू में आइकन डालने” की दिशा अपनाई, तो आइकन कम करने की दलील देना कठिन हो गया है
- “जब तक कोई ठोस कारण न हो, डिफ़ॉल्ट सेटिंग में आइकन नहीं होने चाहिए”
- लेखक व्यंग्य में कहता है कि यह अब आइकन-ओवरलोड का दौर है, इसलिए सच में “मदद कीजिए”
3 टिप्पणियां
यह गैर-भाषाई जानकारी है, इसलिए अच्छा भी लग सकता है..
लेकिन.. AI द्वारा बनाए गए वाक्यों जैसा एहसास भी होता है..
बल्कि, जिन applications का हम ज़्यादा इस्तेमाल करते हैं, उनमें टेक्स्ट से अधिक चित्र या रंग ढूंढ़ने की आदत हो जाती है। स्क्रीन के आकार के अनुसार टेक्स्ट के साथ साथ दिखाना है या सिर्फ़ icon इस्तेमाल करना है, यह अलग हो सकता है, लेकिन आम तौर पर मेरा मानना है कि उनका होना बेहतर है।
Hacker News राय
accessibility और localization के नज़रिए से देखें तो, icon+text का संयोजन सबसे आदर्श है
सिर्फ जगह भरने के लिए icon इस्तेमाल करना समस्या है, लेकिन अगर icon और text मेल न खाएँ तो cognitive load और बढ़ जाता है
text छिपाकर किए गए प्रयोगों में भी icon+text का संयोजन सबसे प्रभावी रहा
icons का लगातार एकसमान उपयोग visual और linguistic—दोनों तरह के users के लिए फायदेमंद है, और संकरे viewport वाले माहौल में भी मदद करता है
आखिरकार, मुझे लगता है कि असली सवाल यह है कि “क्या designer पर लागत लगाने की इच्छा है?”
जब text पढ़ना मुश्किल होता है, तब icons बहुत मदद करते हैं
अमेरिका की लगभग 20% आबादी निरक्षर है, और ये लोग icons और button की position को याद करके technology का उपयोग करते हैं
सिर्फ icons हों तो अर्थ समझना मुश्किल होता है, लेकिन दोनों साथ हों तो लगता है जैसे पूरा दिमाग काम कर रहा हो
मुझे लगता है कि menu में icons होने की वजह toolbar की उसी functionality के साथ visual matching करना है
अगर menu में icons न हों, तो यह एक तरह से संकेत बन जाता है कि toolbar में भी वे नहीं हैं
menu और toolbar दोनों customizable थे, और हर item icon+label से बना था
आजकल icon packs (Font Awesome, Material Icons आदि) इतने ज़्यादा हैं कि developers अक्सर “कम से कम कुछ हद तक मिलता-जुलता” icon चुन लेते हैं
हमारी team भी कभी-कभी custom icons बनाती है, लेकिन इसकी लागत ज़्यादा होने से ज़्यादातर हम Google की विशाल library में से कोई ठीक-ठाक विकल्प ढूँढ़ लेते हैं
“अगर icon जोड़ने की कोई वजह नहीं है, तो default रूप से उसे मत डालो” — इस दावे पर मुझे लगता है कि जिन users की visual memory मजबूत होती है, वे अक्सर इस्तेमाल होने वाले menu के icons याद रखकर उन्हें और तेज़ी से ढूँढ़ सकते हैं
मैं व्यक्तिगत रूप से shortcuts याद रखता हूँ, इसलिए icons से ज़्यादा hotkey conflicts मुझे परेशान करते हैं
पुराने Gmail में link और attachment icons लगभग एक जैसे थे, इसलिए मैं अक्सर भ्रमित हो जाता था, लेकिन हाल में उन्हें paperclip shape में बदला गया है, जिससे काफ़ी सुधार हुआ है
उदाहरण में मुझे सबसे ज़्यादा खटकने वाली चीज़ menu sections के बीच indentation की असंगति थी
कुछ items में ही icon हो तो सिर्फ वही line indented होती है, और जिनमें नहीं है वे नहीं होतीं, लेकिन check mark होने पर पूरा हिस्सा indented हो जाता है — यह असंतुलित लगता है
Apple से उम्मीद थी कि वह ऐसी चीज़ों को ज़्यादा refined तरीके से संभालेगा, इसलिए थोड़ा अफ़सोस हुआ
एक cartoonist जिसे मैं पहले follow करता था, वह silhouette design की अहमियत पर ज़ोर देता था, और आज के icons भी उसी समस्या से जूझ रहे हैं
AWS dashboard में icons एक-दूसरे से अलग पहचान में नहीं आते और सिर्फ visual noise पैदा करते हैं
इसके उलट, card games की तरह color और shape दोनों को अलग रखकर color-blind users भी पहचान सकें—ऐसा design शानदार है
Google Sheets इस मामले में अच्छा करता है, लेकिन दूसरे examples नहीं
संबंधित लेख, design guideline का पतन, icons वापस लाने का तरीका देखें
इसकी वजह से मुझे लगता है कि macOS की usability काफ़ी घट गई है
browser tabs सब एक जैसे दिखते हैं, इसलिए समझ ही नहीं आता कि कौन-सा tab किस काम का है
Google Docs का icon example मुझे पसंद है
text पढ़े बिना भी add/delete जैसे action types को जल्दी ढूँढ़ा जा सकता है
पहले icons से मोटे तौर पर जगह का पता चलता है, फिर text से detail functionality की पुष्टि हो जाती है
इससे menu navigation का समय घटता है और cognitive load कम होता है
शायद “icon improvement” वाला ticket कहीं दबा पड़ा होगा
Google Docs के example में “Insert Link” पढ़ने से कहीं ज़्यादा तेज़ link icon ढूँढ़ना है
indentation या alignment जैसे features भी standardized icons की वजह से आसानी से मिल जाते हैं
और यह non-English users के लिए भी मददगार है
उदाहरण के लिए, अगर किसी user की Japanese कमजोर हो, तो icons की मदद से वह चाही गई functionality आसानी से ढूँढ़ सकता है
मैं लगभग हर menu item में icons डालता हूँ
इसका नतीजा यह हुआ है कि mental fatigue कम हुई है और selection तेज़ हो गया है
menu जितना complex हो, उतना उसमें colors जोड़कर senses का ज़्यादा उपयोग करना भी अच्छा लगता है
लेकिन icons का meaningful shape होना ज़रूरी है
यहाँ तक कि अगर उनका कोई अर्थ न भी हो, तब भी एक ही icon set में “दूसरा item” ढूँढ़ना text पढ़ने से कहीं तेज़ है
अगर सिर्फ कुछ items में ही icons हों, तो वे special या frequently used functionality जैसी लगती हैं
मुझे यह हर item में icons होने की तुलना में ज़्यादा उपयोगी लगता है
यह एक तरह के reverse tooltip की तरह काम करता है
लेकिन अगर मकसद सिर्फ कुछ items पर ज़ोर देना है, तो icons की बजाय consistent visual distinction या ordering ज़्यादा असरदार लगती है
जो items कम इस्तेमाल होते हैं, उन्हें धीरे-धीरे scan करना भी ठीक है