इस आर्टिकल में फैक्ट और एविडेंस के साथ GUI आइकॉन के बारे बताने की कोशिश की जा रही है।

टेबल ऑफ़ कंटेंट
1. आइकॉन क्या है?
2. आइकॉन का हिस्ट्र
3. आइकॉन का ऑब्जेक्टिव
4. आइकॉन का यूज़िबिलिटी
4.1. सिर्फ आइकॉन या टेक्स्ट लेबल के साथ आइकॉन?
4.1.आइकॉन के पोजिशन लेफ्ट या राइट ?
4.1.आइकॉन कब राइट में रखे?
4.1.आइकॉन स्टाइल ‘सॉलिड या आउटलाइन’?
4.1.किस स्टाइल को यूज़ करे ?
5. कुल मिलाकर
6. आर्टिकल के स्रोत

आइकॉन क्या है?

आइकॉन एक ऑब्जेक्ट, एक्शन या आईडिया का विज़ुअल रिप्रजेंटेशन है, आइकॉन पोर्ट्रोग्राम और आइडोग्राम के रूप में होता है। जो GUI (ग्राफ़िक यूजर इंटरफ़ेस) पर डिस्प्ले होता है ताकि यूजर को इंटरफ़ेस पर नेविगेट करने में मदद मिल सके। यदि ऑब्जेक्ट, एक्शन या आईडिया यूज़र्स के लिए तुरंत क्लियर नही है तो यह एक डेकोरेटिव के सिवा कुछ नही है। जो आँखो को देखने के लिए अच्छा है पर कंफ्यूज़न व फ्रॉस्टेड होगा। जिससे यूज़र्स को टास्क कम्पलीट करने में परेशानी होती है।

पिक्टोग्राम: एक आइडियोलॉजी है जो फिजिकल ऑब्जेक्ट की अपने पिक्चर की समानता के थ्रू ऑब्जेक्ट का मीनिंग बताती है।

आइडियोग्राम : एक ग्राफ़िक सिंबल है जो किसी आईडिया और कांसेप्ट को रिप्रेजेंट करता है। [Wikipedia (Link-0)]

आइकॉन का हिस्ट्री

1973 में जेरोक्स ऑल्टो दुनिया का पहला GUI (ग्राफिकल यूजर इंटरफेस) आधारित कंप्यूटिंग सिस्टम था। डॉ. डेविड कैनफील्ड स्मिथ ने 1975 में अपने थीसिस “पैग्मेलियन: ए क्रिएटिव प्रोग्रामिंग एनवायरमेंट” में कंप्यूटिंग के साथ “आइकॉन” टर्म्स को एसोसिएट किये। डॉ. स्मिथ ने एक सिनेरियो में “विजुअल एंटिटीज़” की कल्पना की जिसे आइकॉन कहा जाता है।

जेरोक्स ऑल्टो एक रिसर्च कंप्यूटर के रूप में बनाया गया था इसलिये ये कमर्शियल रिलीज के लिए अवेलेबल नही था। डॉ. स्मिथ ने बाद में ज़ेरॉक्स स्टार के प्रिंसिपल डिज़ाइनर के रूप में काम किया फिर 1981 में ज़ेरॉक्स स्टार को रिलीज किया गया था, जिसमे ऑल्टो के कई डिज़ाइन फीचर्स थे। जेराक्स आइकॉन ह्यूमन इंटरेक्शन के लिये एक विचार डेमोस्ट्रेट करता था।

यह एप्पल लिसा (1983) के लिए इंस्पेरेशन का स्रोत था। आज जो हम आइकॉन यूज़ करते है उसकी एक लंबी जर्नी है; जो ब्लाक&वाइट से होते हुए स्कुओमोर्फिक, कलर&3डी , शेड&ग्रे, ट्रांसपेरेंट मास्क, पिक्सेल क्रम्बस , रीयलिस्टिक&ग्लासी, फ्लैट&आउटलाइन आइकॉन्स तक रहा। 30 सालो के जर्नी में कुछ ऐसे आइकॉन्स है जो नही बदले जैसे: कैलक्युलेटर, डाक्यूमेंट्स, फोल्डर, ट्रैश इत्यादि। [Wikipedia,iconofhistory (Link-1)]

नीचे देखे आइकॉन्स किस समय कितना बदला।

आइकॉन का ऑब्जेक्टिव

एक रिसर्च में पाया गया कि लोग किसी ऑदर टाइप ऑफ डेटा के बजाय विजुअल डेटा को बेटर प्रोसेस करते है। पार्टिसिपेट द्वारा पढ़े गए लेशन को इमेज के साथ 65% और टेक्स्ट के साथ 10% ही याद कर पाये[picture supperiority effect (Link-3)]। यानी हमारा दिमाग 90% हिस्सा विजुअल डेटा के रूप में भेजता है। 65% ऑनलाइन यूज़र्स विजुअल लर्नर होते है, जो 80% देखकर और 20% पढ़कर याद करते है [80/20 Principle (Link-4)]।

मतलब आइकॉन को यूज़ करने से किसी इम्फोर्मेशन को जल्दी से जल्दी डिलीवर कर सकते है। जो एक बेटर यूजर एक्सपेरिएंस प्रदान करता है। लेकिन याद रहे कि गलत आइकॉन विज़ुअल नॉइज़ पैदा कर सकता है।

आइकॉन यूज़िबिलिटी

आइकॉन को सबसे पहले ह्यूमन्स और वर्ड्स के बीच में एक मीनिंगफुल कम्यूनिकेट होना चाहिए। जो शब्दो का सटीक अर्थ बता सके।

सिर्फ आइकॉन या टेक्स्ट लेबल के साथ आइकॉन?\

बहुत कम आइकॉन यूनिवर्सल होते है जो सभी कल्चर में देखे जाते है। यूनिवर्सली समझे जाने वाले आइकॉन बहुत अच्छे से काम करते है जैसे: प्रिंट, क्लोज, प्ले, पॉज इत्यादि। किसी भी यूज़र की समझ प्रीवियस एक्सपेरिएंस पर बेस होता है। ज्यादातर आइकॉन के एक स्टैंडर्ड यूजेजे की कमी के कारण, अकेला कॉम्युनिकेट नही कर पाते इसलिए टेक्स्ट लेबल को कम्यूनिकेट करने और क्लटर को कम करने के लिए लगाया जाता हैं [Icon Usability — July , 2014 (Link-7)]। एक आर्टिकल ‘द प्रॉब्लम विथ आईकॉन्स’ एक अच्छा एग्जाम्पल देता है कि किसी टेक्स्ट लेबल के बिना आइकन के अर्थ का अनुमान लगाना कितना मुश्किल है [smallfarmdesign (Link-8)]।

डॉन नॉरमन का कहना है कि गूढ़ (इनस्क्रुटेबल)आईकॉन्स डिवाइस के फेस को फीका कर देते है भले की रिसर्च कम्युनिटी ने लंबे टाइम तक प्रेजेंट किया हो। लोग लिमिटिड नंबर ऑफ आईकॉन्स से ज्यादा याद नही कर सकते है। आइकॉन ‘प्लस’ लेबल के साथ या लेबल के बिना बेटर है कौन याद कर सकता है? और अंत मे जब डाउट में हो तो हमेशा याद रखे कि सबसे अच्छा आइकॉन एक टेक्स्ट लेबल होता है [Thomas Byttebier (@bytte) — Mar 23, 2015 (Link-9)]। कुल मिलाकर आइकॉन के साथ टेक्स्ट लेबल यूज़ करना जरूरी है।

आइकॉन के पोजिशन लेफ्ट या राइट ?

आप देखें होंगे कि ज्यादातर आइकॉन की पोजिशन लेफ्ट में होता है और टेक्स्ट लबेल राइट में, पर ऐसा क्यों ?

इसके तीन कारण है-

कारण 1: लोग लेफ्ट से राइट स्कैन करते है।

ऑयट्रैकिंग रिसर्च के अनुसार लोग लेफ्ट से राइट स्कैन करते है क्योंकि दुनिया के अधिकांश भाषा लेफ्ट से राइट पढ़ी जाती है। तो इस बेस पर स्टैण्डर्ड आइकॉन लेफ्ट में होता है क्योंकि इमेज को लोग टेक्स्ट से जल्दी याद करते है [Eyetracking: NNGroup (Link-10)]।

कारण 2: हमारा ब्रेन पिक्चर को लेफ्ट से प्रोसेस करता है।

आपने कभी सोचा है कि शॉपिंग साइटों पर इमेजेज हमेशा लेफ्ट में ही क्यों रहती है?

ऐसा इसलिए जब आप अपने डिज़ाइन में इमेज या ग्राफ़िक को लेफ्ट साइड में रखते है तो प्रोसेसिंग फ्लुएंसीय इनक्रीस होती है। जिससे लोग आपके डिज़ाइन को जल्दी और ज्यादा समझते है [Alter & ppenheimer,2009 (Link-11)]। क्योकि हमारा ब्रेन 2 हेमिस्फेर में बटा हुआ है जिसे लेफ्ट ब्रेन कोर्टेक्स और राइट ब्रेन कोर्टेक्स कहते है। हमारी न्यूरो एनाटामी स्ट्रक्चर इस तरह है की विजुअल कोर्टेक्स अपोजिट काम करता है।

लेफ्ट व्यू फील्ड (LVF ) में राइट हेमिस्फर (RM) के द्वारा सबसे पहले इन्फोर्मेव रिसीव और प्रोसेस होता है और राइट व्यू फील्ड (RVF ) में लेफ्ट हेमिस्फर (LM) के द्वारा इन्फोर्मेव रिसीव और प्रोसेस होता है [(Bourne, 2006, pp. 374 (Link-12)]। जो आँखो से ब्रेन कोर्टेक्स तक विजुअल पाथवे बनाते है।

राइट हेमिस्फर (RM) प्रमीरी विजुअल कॉर्टेक्स होता है

क्योकि राइट हेमिस्फर(RM) ज्यादा सूटेबल है पिक्टोरियल इनफार्मेशन को प्रोसेस करने में और लेफ्ट हेमिस्फरे ज्यादा लॉजिकल और वर्बल प्रोसेस होता है। लेफ्ट साइड के इमेज टेक्स्ट के मैसेज को प्रोसेस और इनहैंस करते है [Grobelny & Michalski, 2015, pp.87 (Link-13)]

कारण 3: टेक्निकल समस्या

शुरुआती दिनों में आइकॉन की पोजीशन राइट रहती थी पर उनके साथ कंसिस्टेंसी के प्रॉब्लम थी। लीस्ट मेनू आइटम में कोई टेक्स्ट लेबल की लेंथ बड़ी और किसी की छोटी होती है। राइट पोजीशन पर आइकॉन रखने पर आइकॉन कभी पास कभी दूर होती है जो टॉप-बॉटम से एलाइनमेंट नही बन पाती है। अगर एलाइनमेंट बनाये तो ज्यादा स्पेस रखनी पड़ती है जो फिट्स थ्योरी और गेस्टाल्ट थ्योरी दोनों का उलंघन करती है।

आइकॉन कब राइट में रखे?

जैसे की हम जानते है आइकॉन बस विज़ुअली पहचान के लिए नही होता। कुछ एक्शनएबल आइकॉन होते है जो एक्शन लेने को स्टिमुलेट करते है। कुछ राइट पोजीशन में रहते है जैसे: एरो, शेयर इत्यदि या फिर जब टेक्स्ट लेबल ज्यादा इम्पोर्टेन्ट होता है। जो डिज़ाइन कॉन्टेक्स्ट पर डिपेंड होता है।

आइकॉन स्टाइल ‘सॉलिड या आउटलाइन’ ?

आइकॉन के स्टाइल हमारे कॉगनिटिव परफॉर्मेंस पर इफ़ेक्ट करता है।

एक रिसर्च स्टडी “Filled-in vs. Outline Icons: The Impact of Icon Style on Usability” [Apr 2014 (Link-14)], इस स्टडी में ये निर्धारित करने की कोशिश की क्या ‘सिग्नल-कलर फ्लैट’ आइकॉन यूजर द्वारा जल्दी और सटीक रूप से सेलेक्ट किया जायेगे? जब उन्हें सॉलिड और आउटलाइन स्टाइल में प्रेजेंट किया जाएगा? एक एप्लीकेशन डेवेलोप किया गया, जो पार्टिसिपेट को डिस्ट्रक्शन करने वाली एक अर्रे से इंडीकेट किया गया था।

टेस्ट वेब में अवेलेबल कराया गया था जो 1260 पार्टिसिपेट द्वारा पूरा किया गया था। टेस्ट में यूज़ होने वाले 20 यूनिक आइकॉन में से डिफरेंट ‘आउटलाइन आइकॉन’ के पहचाने की टाइम को थोड़ा ज्यादा कर दिया। लेकिन जब आइकॉन ब्लैक कलर बैकग्राउंड से विपरीत वाइट कलर में प्रेजेंट किये गए थे, पर्सनल आइकॉन के लिए। तो आइकॉन स्टाइल के इफ़ेक्ट इंकॉनसिस्टेंसीय थे और कुछ एक्ससेप्शनल को छोड़कर। इस स्टडी में से कन्क्लूजन निकला कि एक आइकॉन दूसरे आइकॉन के स्टाइल के कॉम्पेयर में बेटर नही थे।

जनरली सॉलिड आइकॉन आउटलाइन आइकॉन के कॉम्पेयर में तेजी से आईडेंटिफाय थे। लेकिन कुछ एक्ससेप्शनल(अपवाद) थे। कुछ आइकॉन में टास्क टाइम में कोई डिफरेंट नही था।

(Characteristic Cue) कैरेक्टरिस्टिक क्यू (ख़ास संकेत) जिसे आइकॉन को पहचानें और सेलेक्ट की स्पीड और एक्यूरेसी से माप जाता है। एक स्पेशल टाइप का इंडिकेशन जो किसी ऑब्जेक्ट के कैरेक्टर को बताता है।

उदाहरण के तौर पर: एक कमेंट आइकॉन की ‘टेल’ इसकी ख़ास इंडिकेशन है। इसके बिना ये केवल एक सर्कल है। लॉक आइकॉन की ‘कीहोल’ इसकी कैरेक्टरिस्टिक क्यू है। इसके बिना ये एक बैग लग रहा है। स्टडी में यूज़ किये गए लॉक आइकॉन में कोई कीहोल नही था। ये सबसे ज्यादा मिसआइडेंटिफाय आइकॉन था जो एक चौथाई फेलियर हुआ।

ये कैरेक्टरिस्टिक क्यू है जो यूज़र को आइकॉन रिकॉगनिशन के लिए भरोसा करवाते है। आइकॉन का यूज़ करते टाइम मेक स्योर की इसमें सभी कैरेक्टरिस्टिक क्यू इंडीकेट है जिसे आइडेंटिफाय करने की जरूरत हो। यदि कोई आइकॉन किसी डिफरेंट आइकॉन की तरह दिखता है तो कैरेक्टरिस्टिक क्यू ऐड कर सकते हैं।

सॉलिड आइकॉन कब फास्टर होता है ?

अधिकांश आइकॉन रियल वर्ल्ड में फिजिकल ऑब्जेक्ट्स को रिप्रेजेंट करते है। ये ऑब्जेक्ट एक सॉलिड फॉर्म में है और सिल्हूट(ब्लैक कलर से फिल) आइकॉन के रूप में दिखाई देते हैं। यही कारण है कि सॉलिड आइकॉन पहचानने में तेज होते हैं।

आइकॉन को एक आउटलाइन के रूप में देखना एक रीयलिस्टिक रिप्रेजेंटेशन नही है फिर भी जो देखने के लिए सबसे ज्यादा इस्तेमाल किया जाता हैं।

स्टडी में पाया गया कि थम्ब, सीज़र्स, फ़ोन, एंड टूल्स आइकॉन सॉलिड स्टाइल में पहचानने के लिए तेज थे। इसका कारण यही है कि इनके आउटलाइन स्टाइल में कैरेक्टरिस्टिक इंडिकेशन पर नैरो इनर स्पेस(अंदर की तरफ कम जगह होना ) हैं। जो विजुअल नॉइज़ पैदा करते है।

उन ऑब्जेक्ट के लिए सॉलिड आइकॉन का यूज़ करना सबसे अच्छा है, जिसमे नैरो इनर स्पेसिंग है। सिल्हूट फॉर्म एक सरल शेप प्रदान करता है। जिससे आइकॉन ज्यादा पहचाननें योग्य हो जाते है।

आउटलाइन आइकॉन कब फास्टर होता है ?

स्टडी में आउटलाइन स्टाइल में 3 आइकॉन्स जो फास्टर पहचाने गए थे। कमेंट बब्बल, ट्रैश और KEY इन आइकॉन में सूक्ष्म लक्षण होते है, जो शेप के बाहरी किनारो पर दिखाई देते है। इस वजह से एक आउटलाइन स्टाइल उन क्यूज(संकेत) को नोटिस करना आसान बनाती है।

कमेंट बबल की ‘टेल’ को सॉलिड के रूप में याद करना आसान है. लेकिन आउटलाइन स्टाइल के रूप में ज्यादा क्लियर है। ट्रैश के कैप को सॉलिड स्टाइल में नोटिस करना हार्ड है, लेकिन आउटलाइन में ज्यादा दिखाई देती है। KEY की टीथ सूक्ष्म है लेकिन दाँतदार किनारो की आउटलाइन स्टाइल में ज्यादा अलग है।

जब किसी आइकॉन के कैरेक्टरिस्टिक क्यू सूक्ष्म होते है और शेप के किनारों पर दिखाई देते है,और जिसमे इनर स्पेसिंग ज्यादा होती हो; तो आउटलाइन स्टाइल का यूज़ करें। ये संकेत को ज्यादा शांत बनाते है। जिसके परिणामस्वरूप फास्टर रिकॉग्निशन होती है।

स्टाइल कब अंतर नही बनाता?

स्टडी में कुछ आइकॉन्स पाए गए जो किसी भी स्टाइल में पहचानना आसान था। जैसे: स्टार, शॉपिंग कार्ट एंड फ्लैग आइकॉन्स दोनों में सिमिलर टाइम पहचानने में लगा था।

इसका मतलब है कि आइकॉन की आउटलाइन स्टाइल यूजर को धीमा नही करती है। इसका कारण ‘वाइड इनर स्पेस’ के अंतर के कारण होता है, जो विसुअल नॉइस को कम करता है इनर स्पेसिंग जितना काम होगा उतना ही ज्यादा नॉइज़ पैदा होगा। जो आइकॉन को पहचानने में दिक्कत करती है।

किस स्टाइल को यूज़ करे ?

आउटलाइन आइकॉन्स हमे देखने मे साफ और सुंदर लगते है, लेकिन आउटलाइन आइकॉन खालीपन को दर्शता है जबकि सॉलिड आइकॉन भरा हुआ प्रतीत होता है। पर सभी प्लेटफॉर्फ़ चाहे वेब या मोबाइल एप्लीकेशन हो हर जगह ज्यादातर आउटलाइन आइकॉन इस्तेमाल किया जाता है। क्यो ?

इसके दो कारण समझ में आते है;

कारण 1: लंबी पतली लाइन ब्यूटी को कॉन्वेय करता है।

रिसर्चर इस बात को कन्फर्म करते है कि लंबी पतली लाइने देखने में ज्यादा सुंदर देखती है।

2003 किये गए एक स्टडी, जो बताती है की “टाइपफेस जो वेट में हल्के होते हैं (चौड़ाई में और स्ट्रोक मोटाई में) को नाजुक, कोमल और फेमिनिन के रूप में देखा जाता है जबकि भारी टाइप्स स्ट्रांग होते हैं, एग्रेसिव और मैस्कुलिन…” [(Brumberger, 2003, pp. 208 (Link-15)]।

लेकिन ऐसा क्यो होता है और कोई भी शेप की पतली लाइन पर्सनालिटी को कैसे प्रभावित कर सकती है? तो इसका उत्तर मिलता है “एसोसिएटिव नेटवर्क थ्योरी” [Anderson, 1983 (Link-16)]।

हर कोई अपने आस-पास के वस्तुऐ व् लोगो को देखकर सुंदरता की एक कल्पना करता है ज्यादातर कल्चर में सुंदर लोग लंबे और पतले होते है यही वजह है कि ब्यूटी के लिए एक स्टैण्डर्ड बन चुका है।

कारण 2: आउटलाइन स्टाइल में विज़ुअल कॉम्प्लेक्सिटी की कमी

यूजर इंटरफ़ेस पेज पर आउटलाइन स्टाइल आइकॉन ज्यादा क्लियर दिखते है। क्योकि इसमे विजुअल एलिमेंट कम होते है।

एक स्टडी में ह्यूमन कॉगनिटिव में विज़ुअल कॉम्प्लेक्सिटी के इफ़ेक्ट [“Visual complexity and aesthetic perception of web pages(Link-17)] की जांच करते हुए लेनी, साइमन, सीन बेछोफेर ने यह परिकल्पना(हाइपोथीसिस) की कि:

विज़ुअल एलिमेंट की क्वांटिटी को कथित कॉम्प्लेक्सिटी के साथ पॉजिटिव रूप से कोरेलेटेड किया जाता है। तो ज्यादा एलिमेंट का मतलब ज्यादा कॉम्प्लेक्सिटी
विज़ुअल एलिमेंट की क्वांटिटी को कथिक एस्थेटिक(सौंदर्य) से साथ नेगेटिव रूप से कॉरेलेटेड है। इसका मतलब है कि कम विज़ुअल स्टिमुली(प्रोत्साहन) अधिक एस्थेटिक्स रिजल्ट पैदा करता हैं।
विज़ुअल कॉम्प्लेक्सिटी सीधे एस्थेटिक क़्वालिटी से रिलेटेड है ।

अब एक बात क्लियर है कि ज्यादा विसुअल एलिमेंट ब्यूटी क्वालिटी को कम करता है ।

कुल मिलाकर

आइकॉन यूज़ करने से पहले अपने प्रोडक्ट और यूज़र के बारे में अच्छी तरह से जान ले। असेसबिलिटी और यूज़िबिलिटी का स्पेशल ध्यान रखे।
आइकॉन से साथ लेबल यूज़ करें।
आइकॉन हमेशा लेफ्ट पोजीशन में रखे
आइकॉन स्टाइल में कंसिस्टेंसी रखे लेकिन यूज़िबिलिटी का ध्यान रखें।
आउटलाइन आइकॉन को यूज़ करें। लेकिन ज्यादा पतले आइकॉन की विजिबिलिटी कम हो जाती है जो विजुअल इम्पैर विज़न वाले लोगो के लिए ठीक नही है।

आर्टिकल के स्रोत

Link-0 https://en.wikipedia.org/wiki/Icon_(computing)#Overview
Link-1 https://historyoficons.com/
Link-1 https://en.wikipedia.org/wiki/Graphical_user_interface
Link3 https://en.wikipedia.org/wiki/Picture_superiority_effect
Link-4 https://en.wikipedia.org/wiki/Pareto_principle
Link-5 http://misrc.umn.edu/workingpapers/fullpapers/1986/8611.pdf
Link-6 http://news.mit.edu/2014/in-the-blink-of-an-eye-0116
Link-7 https://www.nngroup.com/articles/icon-usability/
Link-8 http://www.smallfarmdesign.com/blog/2009/12/28/the-problem-with-icons/
Link-9 https://thomasbyttebier.be/blog/the-best-icon-is-a-text-label
Link-10 https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/
Link-11 http://web.princeton.edu/sites/opplab/papers/alteropp09.pdf
Link-12 http://www.statsart.com/PDF/Bourne_06_Laterality.pdf
Link-13 https://www.researchgate.net/publication/268504007_The_role_of_background_color_interletter_spacing_and_font_size_on_preferences_in_the_digital_presentation_of_a_product
Link-14 https://cdr.lib.unc.edu/concern/masters_papers/6w924g35w
Link 15 http://rid.olfo.org/doc/rhetoftypography.pdf
Lini 16 http://act-r.psy.cmu.edu/wordpress/wp-content/uploads/2012/12/66SATh.JRA.JVL.1983.pdf
Link-17https://www.researchgate.net/publication/220961844_Visual_complexity_and_aesthetic_perception_of_web_pages

Other link
https://faculty.washington.edu/chudler/vispath.html#:~:text=Right%20and%20left%20visual%20information,is%20on%20the%20right%20side.

https://en.wikipedia.org/wiki/Visual_system#:~:text=The%20visual%20system%20comprises%20the,non%2Dimage%20photo%20response%20functions.

UXशाला

ग्राफिक यूजर इंटरफ़ेस ‘आइकॉन्स क्या,क्यों कब, कैसे और कहाँ यूज़ करे?