शास्त्र। अच्छा या बुरा? हमेशा की तरह, यह निर्भर करता है

प्रतीक हर जगह हैं। इंटरनेट ™ the से हजारों नि: शुल्क वेक्टर आइकन किटों में से एक को डाउनलोड करें और अपने आर्टबोर्ड पर हैमबर्गर, कबाब और आवर्धक चश्मे के आकार में पिक्सेल फेंकना शुरू करें और आपको खुद ही एक डिज़ाइन मिल गया है। लेकिन क्या आपने यह सोचना बंद कर दिया है कि किसी आइकन का इस्तेमाल कब करना है, और कब नहीं? कब किस आइकन का उपयोग करें?

यह टुकड़ा आइकनोग्राफी के बारे में एसईईके यूएक्स टीम से कुछ मस्किंग और कुछ शोधों को साझा करता है, जो उम्मीद करता है कि आप कला के इन छोटे-छोटे 8 टुकड़ों के पीछे यूएक्स जटिलताओं के बारे में अधिक जानते हैं।

स्थिर तत्वों के रूप में प्रतीक

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

प्रतीक अच्छे हैं

अच्छी तरह से डिज़ाइन किया गया, और आसानी से पहचाने जाने योग्य, आइकन उन सूचनाओं को जल्दी से संवाद कर सकते हैं, जिनके लिए उपयोगकर्ता स्कैनिंग कर सकता है - उदाहरण के लिए, उन होटलों के लिए खोज परिणामों के एक पृष्ठ को स्कैन करना, जिनके पास वाईफाई है, या किसी संपत्ति में बेडरूम की संख्या। हम इसे सुलभ कार पार्क, बाथरूम के लिए संकेत और जहर के लिए सार्वभौमिक प्रतीक के प्रतीक में देखते हैं।

एक संपत्ति लिस्टिंग के लिए बेडरूम, बाथरूम और कार रिक्त स्थान की संख्या के लिए Realestate.com.au प्रतीक

प्रतीक अंतरिक्ष को बचाते हैं, और घर्षण को कम करते हुए हर लिस्टिंग के खिलाफ जानकारी के एक ही टुकड़े को फिर से पढ़ने की आवश्यकता को हटाकर संज्ञानात्मक भार को कम करते हैं।

आइकन के बिना आरईए डिजाइन घर्षण को बढ़ाता है

प्रतीक एक इंटरफ़ेस के रूप में सुधार कर सकते हैं, दृश्य अपील जोड़ सकते हैं जो (कथित) UX और उत्पाद की प्रयोज्य को बढ़ाने के लिए जाना जाता है। इसे एस्थेटिक-यूएबिलिटी प्रभाव के रूप में जाना जाता है और आप इसके बारे में यहां (एनएन / जी) पढ़ सकते हैं।

जब आइकन टेक्स्ट के साथ जोड़े जाते हैं, तो यह सूचना को रिले करने के लिए एक वैकल्पिक तंत्र देकर एक्सेसिबिलिटी में सुधार कर सकता है - विज़ुअल क्लू वाला टेक्स्ट - जो संज्ञानात्मक मुद्दों वाले व्यक्तियों के लिए अच्छा है, कम दृष्टि जो आइकन को ठीक से नहीं देख सकते हैं आदि।

NAB का चैट आइकन स्पष्ट है

आइकन उन लोगों के लिए नेविगेशन के साथ भी मदद कर सकते हैं जो इंटरफ़ेस की भाषा को गैर-प्राथमिक भाषा (या बिल्कुल नहीं) के रूप में बोलते हैं (या पढ़ते हैं)। मैं इंटरफ़ेस पर पाठ को पढ़ने में सक्षम नहीं हो सकता, लेकिन आइकन मुझे इस बात की समझ दे सकते हैं कि मुझे कैसे नेविगेट करना है, या मैं कैसे खोज रहा हूं। यह वास्तविक दुनिया में भी सच है और यही कारण है कि हमारे पास बाथरूम, हवाई अड्डों, लिफ्ट आदि के लिए मानकीकृत आइकन हैं।

मेरे खराब कैटलन के बावजूद मैं आइकनों की बदौलत बार्सिलोना में अपने कपड़े सफलतापूर्वक धोने में सक्षम था

चिह्न खराब हैं

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

पाठ के बिना, एक फूल and स्पा और वेलनेस सेंटर का प्रतिनिधित्व करता है ’?

आइकन के लिए आइकन थोड़ा मूल्य प्रदान करते हैं और इंटरफ़ेस में शोर जोड़ते हैं।

बाईं ओर के डिजाइन में, आइकन कोई मूल्य नहीं जोड़ते हैं इसलिए हमने उन्हें हटा दिया और शोर कम कर दिया

ऑल्ट-टेक्स्ट के बिना प्रतीक, स्क्रीन रीडर उपयोगकर्ताओं के लिए भ्रमित कर रहे हैं। विशेष रूप से अगर यह सिर्फ 'सेव जॉब' के बजाय 'स्टार' की तरह कुछ पढ़ता है। टेक्स्ट लेबल दृष्टिबाधित उपयोगकर्ताओं के लिए इस भ्रम को कम करने में मदद करते हैं।

प्रतीक व्यक्तिपरक हैं। एक ही आइकन का मतलब अलग-अलग वेबसाइटों पर अलग-अलग चीजों से हो सकता है (उदाहरण के लिए 'सेविंग के लिए स्टार और' रेटिंग के लिए स्टार ')। एक ही आइकन का मतलब अलग-अलग संदर्भों में अलग-अलग चीजों से हो सकता है (जैसे शेयर के लिए एक तीर, उत्तर, आगे, अगला)। प्रतीक अनिर्णायक हो सकते हैं।

सभी अलग-अलग लॉन्ड्री आइकन का क्या मतलब है? स्रोत

प्रतीक का उद्देश्य भ्रामक हो सकता है

क्या यह एक स्थिर आइकन या एक इंटरैक्टिव तत्व है? कभी-कभी आइकन क्लिक करने योग्य होते हैं और एक क्रिया करते हैं, यह विशेष रूप से भ्रमित हो सकता है जब क्लिक करने योग्य तत्व सीधे गैर-क्लिक करने योग्य तत्वों के बगल में और फ्लैट डिजाइन में होते हैं।

तारा मोटा है, इसलिए मुझे पता है कि यह क्लिक करने योग्य है - लेकिन क्या औसत उपयोगकर्ता है? यह दूसरे, गैर-एक्शन, आइकन से अलग है - इसका मतलब औसत उपयोगकर्ता के लिए क्लिक करने योग्य है?

हमें यह सुनिश्चित करने की आवश्यकता है कि यह स्पष्ट है कि यह तत्व क्लिक करने योग्य है, जिसे हम बर्दाश्त कहते हैं - खासकर जब यह बिना किसी पाठ के केवल एक आइकन है।

इंटरैक्टिव तत्वों के रूप में प्रतीक

वह आइटम देखें, जिसे आप किसी ऐप या वेबसाइट पर आसानी से ढूंढना चाहते हैं? बस काम बांका ’सहेजें’ आइकन मारा! लेकिन क्या, वास्तव में, एक सेव आइकन है?

कौन सा आइकन, कब?

यह skeuomorphism के युग में एक डिस्क का एक आइकन हुआ करता था - जहाँ सॉफ़्टवेयर में किसी वस्तु को उसके वास्तविक विश्व समकक्ष के साथ दर्शाया जाता था, इस उदाहरण में एक फ्लॉपी डिस्केट icon। फ्लॉपी डिस्क को कभी अपग्रेड नहीं मिला क्योंकि हम डिस्क से सीडी और यूएसबी से क्लाउड पर चले गए, लेकिन इसका अर्थ अभी भी ज्ञात है। आपने शायद उस बच्चे की लोककथा को सुना होगा जिसने कहा था "वाह, किसी 3-डी ने सेव आइकन को प्रिंट किया है!" 3 1/2 इंच की फ्लॉपी डिस्क IRL देखकर।

आप इसे आज भी Microsoft Office उत्पादों में देख सकते हैं।

Microsoft सहेजें आइकन

Airbnb पर एक संपत्ति अलग रखने के लिए दिल पर क्लिक करें on

Airbnb एक संपत्ति सहेजें
मैं इस जगह से प्यार करता हूँ, शायद मैं यहाँ रहूँगा!

हालाँकि शायद मैं इस जगह से प्यार नहीं करता, हो सकता है कि यह सिर्फ कुछ है जिसे मैं आगे के मूल्यांकन के लिए बाद में रखना चाहता हूं, क्योंकि यह एक यात्री के रूप में मेरी जरूरतों को पूरा कर सकता है। Airbnb ने संभवतः स्टार आइकन को चुना है क्योंकि यह पहले से ही रेटिंग के लिए उपयोग किया जाता है, और शायद हम बचत से 'प्यार' को दूर करना चाहते हैं, विशेषकर उन मामलों में जहां यह कुछ ऐसा नहीं है जो उपयोगकर्ता कर रहा है (ऐसा कुछ जो एक आवश्यकता है, एक मजेदार छुट्टी नहीं है। )।

ट्विटर जैसे उत्पादों ने इस लाइन को धुंधला कर दिया - मैं सामाजिक सत्यापन (जैसे इंस्टाग्राम और फेसबुक) के रूप में दिल को मार सकता हूं या बाद में इसे पुनः प्राप्त करने के लिए इसे खुद को बचाने के लिए उपयोग कर सकता हूं। दिल का उपयोग नहीं करने की इच्छा विशेष रूप से सच है, जहां पहले से ही इसका अर्थ कुछ और है - जैसे कि इंस्टाग्राम और फेसबुक पर, जैसे कि इंस्टाग्राम और फेसबुक, जो स्क्यूओमॉर्फिक डिजाइन पर वापस चले गए हैं और एक बुकमार्क पर फैसला किया है जो ’सेव’ represent का प्रतिनिधित्व करता है। एक भौतिक वस्तु के साथ अपना स्थान ढूंढें जैसे आपने एक किताब में किया था (या अपने जलाने पर)।

मध्यम बुकमार्क बाद के लिए एक कहानी है

एक स्टार के बारे में क्या? ️ यदि मुझे बचाने के लिए कुछ 'स्टार' है, तो क्या इसका मतलब यह मेरा पसंदीदा है? यदि कोई उपयोगकर्ता वापस आता है और सूची में एक आइटम देखता है तो क्या इसका मतलब है कि हम इसे एक अच्छे मैच के रूप में सुझा रहे हैं? या उन्होंने इसे बचा लिया?

स्लैक पर एक संदेश सितारा

अमेज़ॅन ने इन सभी मुद्दों को एक साथ टाला है, केवल टेक्स्ट List ऐड टू लिस्ट ’, सैंस आइकन वाले बटन के साथ।

अमेज़न - सूची में जोड़ें

पाठ के साथ प्रतीक, और उचित व्यय, एक स्पष्ट कार्रवाई है और अधिक उपयोगी हैं। यह स्क्रीन रीडर का उपयोग करने वालों, कम अनुभूति वाले लोगों आदि के लिए कार्यों को बहुत अधिक सुलभ बनाता है।

लेबल आइकन के संदर्भ में जोड़ते हैं

प्रतीक की समझ

आइकन क्रियाओं को भ्रमित करने के अलावा, बहुत कम आइकन हैं जो सार्वभौमिक रूप से समझे जाते हैं।

SEEK में हमने आइकनोग्राफी की समझ के बारे में शोध का एक टुकड़ा आयोजित किया।

हमने पहले प्रतिभागियों से पूछा कि वे किस आइकन पर क्लिक करने की अपेक्षा करेंगे ताकि बाद में हम नौकरी छोड़ सकें (हमने 'सेव' शब्द से परहेज किया क्योंकि हम उन्हें प्राइम नहीं करना चाहते थे)। यह एक नि: शुल्क पाठ उत्तर था जहां वे बता सकते हैं कि वे किस प्रतीक को देखने की उम्मीद करेंगे।

कल्पना करें कि ऊपर की छवि में काले वर्ग द्वारा छिपाया गया एक आइकन (एक प्रतीक या चित्र) है, और यह आइकन वह है जिसे आप बाद में काम पर लगाने के लिए क्लिक करेंगे। आप किस प्रतीक या चित्र की अपेक्षा करेंगे?

सबसे लोकप्रिय प्रतिक्रिया थी:

  1. एक स्टार आइकन (24%)
  2. सामान्य उत्तर के रूप में "सहेजें" (15%) *
  3. फ्लॉपी डिस्क (11%)
  4. फ़ाइल / फाइलिंग कैबिनेट (6%)

* यह स्पष्ट नहीं है कि उत्तरदाताओं का क्या मतलब है "बचाओ", क्योंकि कई विस्तृत नहीं थे। कुछ ने प्रतिक्रियाएँ लिखीं जैसे कि "फ्लॉपी डिस्क सेव आइकन" या "सेव आइकन यानि डिस्केट", हालाँकि यह स्पष्ट नहीं है कि सभी "उत्तरदाता" उत्तरदाताओं का यही अर्थ है।

इसके अलावा, SEEK वेबसाइट पर एक स्टार का उपयोग किया जाता है, इसलिए यह संभव है कि उत्तरदाताओं को तिरछा किया जाए, जो यह जानते हैं कि वे काले वर्ग के पीछे हैं।

हमने एक ट्विटर पोल के समान सवाल पूछा, जिसमें 4 विकल्प थे, और बहुसंख्यक उत्तर ने फ्लॉपी डिस्क का मतलब बचाओ!

ट्विटर पोल - किस आइकन का मतलब है सेव?

एक फ़्लॉपी डिस्क को अभी भी सार्वभौमिक रूप से समझा जा सकता है, लेकिन डिज़ाइनर के रूप में हम नहीं चाहते कि प्राचीन तकनीक हमारे इंटरफेस को अव्यवस्थित करे, इसलिए हम एक स्टार या हार्ट में चले गए हैं। क्या हमें एक आइकन की आवश्यकता है? सिर्फ ‘सेव’ बटन ही क्यों?

अगला, हमने प्रतिभागियों को इंटरफ़ेस से और लेबल के बिना अलग-थलग 4 आइकन दिखाए, और पूछा कि वे किन शब्दों या वाक्यांशों या क्रियाओं को आइकन से जोड़ते हैं।

आप इस आइकन के साथ किन शब्दों, वाक्यांशों या क्रियाओं को जोड़ते हैं?

किसी भी आइकन को सार्वभौमिक रूप से नहीं समझा गया था और प्रतिभागियों के पिछले अनुभवों और तकनीक-बचत के आधार पर व्याख्या के लिए खुला था। यह सुझाव देता है कि माउस के बगल में लेबल रखने से प्रयोज्य और उपयोग में आसानी बढ़ जाएगी। यह एक्सेसिबिलिटी दिशानिर्देशों का भी पालन करता है जहां हमें किसी कार्रवाई का संदर्भ देने के लिए दृश्य सुरागों पर निर्भर नहीं होना चाहिए - संदर्भ + दृश्य संकेत = प्रयोग करने योग्य

उत्तरदाताओं ने अपने पाठ प्रतिक्रियाओं में इस भावना को प्रतिध्वनित किया:

"ज्यादातर चीजें ऑनलाइन मुझे भ्रमित करती हैं, हर दृष्टि [sic] समान कार्य करने के लिए समान आकृतियों का उपयोग क्यों नहीं कर सकती है?"
"प्रतीक थोड़ा भ्रमित हो सकते हैं क्योंकि वे उपयोगकर्ता के लिए काफी व्यक्तिपरक हैं और उनकी स्थिति का उपयोग किया जाता है"
"मैं चीजों को सरल रखना पसंद करता हूं - प्रक्रिया में नेविगेट करने के लिए जटिल साइट के बिना काम की खोज करना काफी तनावपूर्ण है"

बुकमार्क आइकन प्रतिभागियों के लिए सबसे अधिक संभावना है कि वे यह नहीं जानते कि यह क्या किया है, हालांकि कई लोग यह समझते थे कि यह बाद में काम को अलग कर देगा। कुछ लोगों ने सोचा था कि नौकरी / कंपनी पुरस्कार जीत रही थी या उनके लिए एक अच्छा मैच था। कुल मिलाकर, इसका मतलब समझा गया था:

  • बुकमार्क (38%)
  • पता नहीं / निश्चित नहीं (11%)
  • सहेजें (11%)
  • झंडा (9%)

हार्ट आइकन प्यार और सोशल मीडिया पोस्ट (इंस्टाग्राम या ट्विटर से पूर्व ज्ञान) को पहचानने से जुड़ा था। उत्तरदाताओं जो SEEK से परिचित थे, ने उत्तर दिया कि इसका उपयोग सहेजे गए खोजों के लिए किया गया था। हालांकि कुल मिलाकर, उत्तरदाताओं ने इसे बाद में कुछ अलग करने के लिए दृढ़ता से नहीं जोड़ा। यह सकारात्मक भावनाओं (प्यार, जैसे, खुशी) के साथ अधिक जुड़ा हुआ था। दिल आइकन का मतलब समझा गया था:

  • प्यार (54%)
  • जैसे (35%)
  • पसंदीदा (21%)

कुछ वास्तव में इस्तेमाल किए जा रहे दिल के विचार की तरह नहीं थे:

"प्यार, नौकरी विज्ञापन के लिए लागू नहीं"

स्टार को बाद में या महत्वपूर्ण के लिए कुछ चिह्नित करने के लिए समझा गया था। हालांकि, यह भी एक संकेतक माना जाता था कि नौकरी उनके लिए एक अच्छा मैच थी, या कंपनी की रेटिंग। स्टार को इस रूप में देखा गया था:

  • पसंदीदा (37%)
  • सहेजें (20%)
  • स्टार (17%)
  • महत्वपूर्ण (10%)
  • रेटिंग (8%)

शेयर तीर का अर्थ "आगे" से "अगले" करने के लिए बहुत गलत समझा गया था, हालांकि संदर्भ से बाहर दिखाया गया था:

  • अगले पृष्ठ पर (या किसी ईमेल को आगे बढ़ाएं) (81%)
  • ईमेल का जवाब देना (10%)
  • शेयर (8%)

पूर्व ज्ञान समझ को प्रभावित करता है

हमारे द्वारा डिज़ाइन की गई किसी भी चीज़ की तरह, हमें अपने लक्ष्य उपयोगकर्ताओं के साथ अपने आइकन की समझ का परीक्षण करने की आवश्यकता है। एक व्यक्ति के लिए एक त्रिकोण केवल एक त्रिकोण हो सकता है, लेकिन एक भौतिक विज्ञानी या गणितज्ञ के लिए यह स्पष्ट हो सकता है कि इसका अर्थ है 'परिवर्तन'।

मैंने एक बार 3 सेकंड में नीचे स्क्रिबल के साथ PEDIA का गेम जीता। इसका क्या मतलब है? आपके लिए, शायद कुछ भी नहीं। लेकिन मेरे लिए, और मेरे PEDIA के साथी, यह मेरी पूडी पेनी है। हमारी प्रतियोगिता खुश नहीं थी।

क्या इसका मतलब आपको पेनी है?

प्रसंग मायने रखता है

दूसरे तीर के बगल में एक तीर के दूसरे तरीके की संभावना का मतलब 'अगला' है, जबकि अगर यह दिल के बगल में होता है तो यह स्पष्ट हो सकता है कि इसका मतलब 'शेयर' है। संदर्भ में परीक्षण चिह्न।

यदि आप इसे पसंद करते हैं, तो आपको इस पर एक लेबल लगाना चाहिए

यदि आप चाहते हैं कि अधिकांश उपयोगकर्ता यह समझने में सक्षम हों कि आइकन क्या करते हैं, तो लेबल का उपयोग करें। उपयोगकर्ता परीक्षण में पाया गया कि उपयोगकर्ता 88% समय के लेबल के साथ आइकन टैप करने पर क्या होगा, इसका सही अनुमान लगाने में सक्षम थे। लेबल के बिना आइकन के लिए, यह संख्या 60% तक गिर गई। गैर-प्रचारित आइकन के लिए यह समय के केवल 34% तक गिर गया। उनके शोध के बारे में यहाँ और पढ़ें।

TL; DR- क्या मुझे आइकन का उपयोग करना चाहिए? कौन सा प्रतीक?

निर्भर करता है।

अपने आप से पूछें, क्या यहाँ आइकन का उपयोग किया गया है:

  • वे जो खोज रहे हैं उसे खोजने में उपयोगकर्ता की सहायता करें?
  • संज्ञानात्मक भार कम करें?
  • उत्पाद की दृश्य अपील में जोड़ें?

चुना गया आइकन है:

  • उपयोगकर्ताओं के लिए, दिए गए संदर्भ में समझ में आता है? क्या इसे समझने के लिए लक्ष्य समूह के साथ परीक्षण किया गया है?
  • स्पष्ट रूप से क्लिक करने योग्य?
  • प्रयोज्यता और समझ बढ़ाने के लिए पाठ के साथ समझौता?

यदि आपने ऊपर हां में जवाब दिया है, तो आप संभवतः एक आइकन का उपयोग कर सकते हैं।

जब वे आइकन का उपयोग न करें:

  • कोई मूल्य नहीं देने की अपील;
  • इंटरफ़ेस अव्यवस्था;
  • व्याख्या के लिए खुले हैं।