डिज़ाइन और उपयोगकर्ता अनुभव

अपनी पसंदीदा वेबसाइट या ऐप्लिकेशन के बारे में सोचें—वह कौनसी चीज़ है जो आपको सबसे ज़्यादा पसंद आती है? अब, किसी ऐसी वेबसाइट या ऐप्लिकेशन के बारे में सोचें, जिसे आप नापसंद करते हैं—आपको उसके बारे में क्या पसंद नहीं है? उपयोगकर्ता आपके डिज़ाइन के साथ कैसे इंटरैक्ट करते हैं और आपकी वेबसाइट और ऐप्लिकेशन पर उनका अनुभव अलग-अलग हो सकता है.

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

बिना किसी भेदभाव के सभी को शामिल करने वाला डिज़ाइन

हम सभी संभावित उपयोगकर्ताओं की ज़रूरतों को एक साथ कैसे पूरा कर सकते हैं? सभी को ध्यान में रखकर डिज़ाइन किया गया. सबको शामिल करने वाले डिज़ाइन में लोगों को ध्यान में रखकर बनाए गए तरीके का इस्तेमाल किया गया है. इसमें सभी को शामिल करना, उपयोगिता, और सुलभता को एक साथ शामिल किया गया.

ऐसा वेन डायग्राम जिसमें सुलभता, इनक्लूसिविटी, और उपयोगिता, सभी को शामिल करता है. ये सभी चीज़ें इनक्लूसिव डिज़ाइन के बीच में मिलती हैं.

यूनिवर्सल डिज़ाइन से उलट, जिसमें एक ऐसे डिज़ाइन पर ज़ोर दिया जाता है जिसे ज़्यादा से ज़्यादा लोग इस्तेमाल कर सकें. सभी लोगों के लिए डिज़ाइन से जुड़े सिद्धांतों को किसी खास व्यक्ति या इस्तेमाल के उदाहरण के लिए डिज़ाइन करना और फिर उस डिज़ाइन को अन्य लोगों तक पहुंचाना.

सुलभता को ध्यान में रखकर बनाए गए बिना किसी भेदभाव के सभी को शामिल करने वाले डिज़ाइन के सात सिद्धांत हैं:

  1. तुलना करें और बेहतर अनुभव दें: पक्का करें कि आपके इंटरफ़ेस पर सभी को एक जैसा अनुभव मिले. इससे, लोग अपने कॉन्टेंट की क्वालिटी को कम किए बिना अपने काम को पूरा कर सकेंगे.
  2. स्थिति पर विचार करें: पक्का करें कि आपका इंटरफ़ेस लोगों को अच्छा अनुभव देता हो, चाहे उनकी स्थिति कुछ भी हो.
  3. एक ही स्टाइल में काम करें: जाने-पहचाने तरीके इस्तेमाल करें और उन्हें तर्क के साथ लागू करें.
  4. कंट्रोल देना: पक्का करें कि लोग अपने पसंदीदा तरीके से कॉन्टेंट को ऐक्सेस कर सकें और उससे इंटरैक्ट कर सकें.
  5. ऑफ़र का विकल्प: लोगों को टास्क पूरे करने के लिए अलग-अलग तरीके दें. खास तौर पर, ऐसे तरीके बताएं जो मुश्किल हों या स्टैंडर्ड के मुताबिक न हों.
  6. कॉन्टेंट को प्राथमिकता देना: इन एलिमेंट को कॉन्टेंट और लेआउट में अपने पसंदीदा क्रम में व्यवस्थित करके, उपयोगकर्ताओं को मुख्य टास्क, सुविधाओं, और जानकारी पर फ़ोकस करने में मदद करें.
  7. अहम जानकारी दें: सुविधाओं के मकसद और अहमियत पर ध्यान दें. साथ ही, इस बात पर भी ध्यान दें कि इन सुविधाओं का इस्तेमाल करने पर, अलग-अलग उपयोगकर्ताओं को बेहतर अनुभव कैसे मिलता है.

पर्सोना

नया डिज़ाइन या सुविधा बनाते समय, कई टीमें उपयोगकर्ता पर्सोना पर भरोसा करती हैं. इसकी मदद से, वे इस प्रोसेस को पूरा करते हैं. पर्सोना ऐसे काल्पनिक किरदारों को कहते हैं जिनमें आपके डिजिटल प्रॉडक्ट का इस्तेमाल किया जाता है. ये अक्सर उपयोगकर्ताओं पर की गई रिसर्च में और संख्यात्मक रिसर्च पर आधारित होते हैं.

पर्सोना, डिज़ाइन और डेवलपमेंट की पूरी प्रोसेस में उन सुविधाओं को टेस्ट करने और प्राथमिकता देने का तेज़ और सस्ता तरीका भी देता है. वे बातचीत में असल दुनिया के विचार जोड़कर साइट के कॉम्पोनेंट से जुड़े फ़ैसलों पर ध्यान देने में मदद करते हैं. इससे रणनीति को अलाइन करने और खास उपयोगकर्ता समूहों पर फ़ोकस करने वाले लक्ष्य बनाने में मदद मिलती है.

दिव्यांग लोगों को शामिल करना

दिव्यांगता की वजह से, कुछ समय के लिए, हमेशा के लिए या अचानक होने वाली परेशानियों का सामना करना पड़ सकता है. ये दिव्यांगताएं छूने, देखने, सुनने, और बोलने पर असर डाल सकती हैं.
Microsoft के Inclusive 101 Toolkit में दिया गया पर्सोना स्पेक्ट्रम.

"लोग अलग-अलग होते हैं. मैं सिर्फ़ अपने अनुभव से बात कर सकती हूँ. जब आप एक सुन न पाने वाले व्यक्ति से मिलते हैं, तब आप एक ऐसे व्यक्ति से मिलते हैं जो सुन नहीं सकता है—हम सभी से नहीं."

ID24 से मेरिल इवांस ने इस बारे में बात की: Deaf Tech: Travel Through Time to टाइम टू फ़्यूचर.

पर्सोना का इस्तेमाल, सभी दिव्यांग लोगों को ध्यान में रखकर किए जाने वाले डिज़ाइन टूल के तौर पर किया जा सकता है. ऐसा करने के कई तरीके हैं. आप दिव्यांगों के लिए खास पर्सोना बना सकते हैं, मौजूदा उपयोगकर्ताओं में दिव्यांगता को जोड़ सकते हैं. इसके अलावा, आप हालात के हिसाब से, कुछ समय के लिए और स्थायी दिव्यांगता के लिए एक पर्सोना स्पेक्ट्रम भी बना सकते हैं.

इससे कोई फ़र्क नहीं पड़ता कि आप दिव्यांग लोगों को अपने पर्सोना में किस तरह शामिल करते हैं, लेकिन उन्हें असल लोगों या रूढ़िवादी सोच पर आधारित नहीं होना चाहिए. साथ ही, पर्सोना को लोगों की टेस्टिंग के विकल्प के तौर पर इस्तेमाल नहीं किया जा सकता.

पर्सोना: जेन बेनेट
इस्तेमाल के कुछ खास उदाहरणों के साथ काम करने वाले पर्सोना का उदाहरण देखें.
जेन स्मिथ की लंबाई, लंबे और गहरे काले बालों की है. उसने स्लेटी रंग की लंबी आस्तीन वाली शर्ट और जींस पहनी है
  • नाम: जेन बेनेट
  • उम्र: 57 साल
  • जगह: एसेक्स, यूनाइटेड किंगडम
  • पेशा: UX इंजीनियर
  • दिव्यांग: यंग ऑनसेट पार्किंसन रोग (वाईओपीडी) की वजह से हाथ कांपना
  • लक्ष्य: कोड के सुझाव आसानी से जोड़ने के लिए, बोली को लिखाई में बदलने की सुविधा का इस्तेमाल करें. कम कीस्ट्रोक का इस्तेमाल करके, साइकल चलाने के लिए ऑनलाइन उपकरण ढूंढें.
  • परेशानियां: ऐसी वेबसाइटें जिनमें सिर्फ़ कीबोर्ड से काम करने की सुविधा नहीं होती; टच इंटरैक्शन के लिए छोटे हिस्सों को डिज़ाइन करने वाले ऐप्लिकेशन.

जेन, एक UX इंजीनियर हैं. वे ऐसे पेज डिज़ाइन करती और बनाती हैं जो उनकी कंपनी की साइट को काम के बनाए रखने में मदद करते हैं. वे दिन भर टीम के कई सदस्यों का सपोर्ट करती हैं. वे तकनीक से जुड़ी आग बुझाने में माहिर होती हैं. साथ ही, जब अचानक कोई भी गड़बड़ी होती है, तो डिपार्टमेंट में हर किसी की मदद करने के लिए तैयार रहते हैं.

कंपकंपी की वजह से हिलने-डुलने की उनकी शारीरिक क्षमता खो जाने की वजह से, चूहों का इस्तेमाल करना और भी मुश्किल हो जाता है. वेब पर नेविगेट करने के लिए, वह लगातार कीबोर्ड पर तेज़ी से निर्भर हो रही है. जेन हमेशा से ही अपनी फ़िटनेस के लिए काम करती रही हैं. उन्हें रोड रेसिंग और बीएमएक्स पसंद है. इससे यह बात तब और बढ़ गई, जब उन्हें पिछले साल यंग ऑनसेट पार्किंसन से जुड़ी जानकारी मिली.

दिव्यांगता सिम्युलेटर

पर्सोना बनाने या उसकी नकल करने के लिए, दिव्यांगों के लिए सिम्युलेटर का इस्तेमाल करते समय ज़्यादा सावधानी बरतें.

दिव्यांगता सिम्युलेटर, दो धारियों वाली तलवार है. इसकी मदद से वे सहानुभूति या सहानुभूति जता सकते हैं. यह किसी व्यक्ति, उसकी वजह, और ऐसी चीज़ों पर निर्भर करता है जिन पर काबू नहीं किया जा सकता. सुलभता सुविधाओं के बारे में बात करने वाले कई लोग दिव्यांगों के लिए सिम्युलेटर टूल का इस्तेमाल करने के ख़िलाफ़ हैं. वे दिव्यांग लोगों की बनाई गई फ़िल्मों, डेमो, ट्यूटोरियल, और दूसरे कॉन्टेंट को देखने और उनके अनुभवों के बारे में सीधे तौर पर जानने के सुझाव देते हैं.

"मेरा मानना है कि हमें पूरी तरह से ईमानदार होना चाहिए कि कोई भी सिम्युलेशन गतिविधि कुछ ऐसी सबसे ज़रूरी समझ पर असर नहीं डालती है, जिन्हें हम चाहते हैं कि लोग उनके दिल में और उनके दिमाग में रहें. दृष्टिहीनता हमारी वह विशेषता नहीं है जो हमारी पहचान है. इसमें, दृष्टिहीनता को लेकर गलतफ़हमियां और कम उम्मीदें हमारी सबसे बड़ी रुकावट हैं.

ये ग़लतफ़हमियां, आर्टिफ़िशियल रुकावटें पैदा करती हैं, जो हमें इसमें पूरी तरह से हिस्सा लेने से रोकती हैं. ये गलत सीमाएं, कुछ ऐसी चीज़ों पर निर्भर करती हैं जो हमें पीछे ले जाती हैं."

मार्क रिकोबोनो, नैशनल फ़ेडरेशन ऑफ़ द ब्लाइंड के प्रेसिडेंट

सुलभता का अनुमान

पर्सोना और डिज़ाइन बनाते समय, अपने वर्कफ़्लो में heuristics जोड़ें. अनुमान डिज़ाइन के आसान नियम, जिन्हें जैकब नीलसन और रॉल्फ़ मोलिच ने 1990 में पेश किया था. ये दस सिद्धांत, उपयोगिता इंजीनियरिंग के क्षेत्र में सालों के अनुभव के आधार पर बनाए गए हैं और तब से इनका इस्तेमाल डिज़ाइन और ह्यूमन-कंप्यूटर इंटरैक्शन प्रोग्राम में किया जा रहा है.

साल 2019 में आगे बढ़ा और Deque की डिज़ाइन टीम ने डिजिटल सुलभता पर फ़ोकस करने वाले अनुमान का एक नया सेट बनाया और उसे शेयर किया. उनकी रिसर्च के मुताबिक, अगर सुलभता डिज़ाइन प्रक्रिया का हिस्सा हो, तो किसी वेबसाइट या ऐप्लिकेशन में सुलभता से जुड़ी सभी गड़बड़ियों में से 67% तक से बचने की कोशिश की जा सकती है. इसका सबसे बड़ा असर कोड की एक लाइन लिखने से पहले ही पड़ सकता है.

अनुभवों के मूल सेट की तरह ही, डिज़ाइन तैयार करते समय भी सुलभता के दस अनुमान हैं.

  1. इंटरैक्शन के तरीके और तरीके: उपयोगकर्ता अपनी पसंद के इनपुट के तरीके (जैसे कि माउस, कीबोर्ड, टच वगैरह) का इस्तेमाल करके, सिस्टम से असरदार तरीके से इंटरैक्ट कर सकते हैं.
  2. नेविगेशन और वेफ़ाइंडिंग: उपयोगकर्ता आसानी से नेविगेट कर सकते हैं, कॉन्टेंट ढूंढ सकते हैं, और तय कर सकते हैं कि सिस्टम में वे हमेशा कहां हैं.
  3. संरचना और सिमेंटिक: उपयोगकर्ता हर पेज पर मौजूद कॉन्टेंट के स्ट्रक्चर को समझ सकते हैं. साथ ही, सिस्टम में काम करने के तरीके को भी समझ सकते हैं.
  4. गड़बड़ी की रोकथाम और स्थितियां: इंटरैक्टिव कंट्रोल में, गलतियों को रोकने के लिए स्थायी और सही निर्देश होते हैं. साथ ही, उपयोगकर्ताओं को गड़बड़ी की स्थिति की जानकारी साफ़ तौर पर दी जाती है, जिसमें समस्याएं बताई जाती हैं और गड़बड़ियां होने पर उन्हें ठीक करने का तरीका बताया जाता है.
  5. कंट्रास्ट और समझने में आसान: लोग टेक्स्ट और काम की अन्य जानकारी को आसानी से पहचान सकते हैं और पढ़ सकते हैं.
  6. भाषा और पढ़ने में आसानी: उपयोगकर्ता कॉन्टेंट को आसानी से पढ़ और समझ सकते हैं.
  7. पूर्वानुमान और अनुकूलता: उपयोगकर्ता हर एलिमेंट के मकसद का अनुमान लगा सकते हैं. यह साफ़ है कि हर एलिमेंट, पूरे सिस्टम से कैसे जुड़ा है.
  8. समय और संरक्षण: उपयोगकर्ताओं को अपने काम को पूरा करने के लिए पूरा समय दिया जाता है. साथ ही, समय (जैसे, सेशन) खत्म हो जाने पर भी उनकी जानकारी रहती है.
  9. मूवमेंट और फ़्लैशिंग: उपयोगकर्ता, पेज पर उन एलिमेंट को रोक सकते हैं जो इधर-उधर मूव करते हैं, फ़्लैश होते हैं या फिर ऐनिमेशन वाले होते हैं. इन एलिमेंट से उपयोगकर्ताओं का ध्यान न भटके या उन्हें कोई नुकसान न पहुंचे.
  10. विज़ुअल और ऑडियो वाले विकल्प: उपयोगकर्ता, जानकारी देने वाले किसी भी विज़ुअल या ऑडियो कॉन्टेंट के लिए, टेक्स्ट के आधार पर दिए गए विकल्पों को ऐक्सेस कर सकते हैं.

सुलभता के इन अनुभवों के बारे में बुनियादी समझ लेने के बाद, सुलभता अनुभव को बेहतर बनाने के लिए वर्कशीट का इस्तेमाल करके पर्सोना या डिज़ाइन पर लागू करें और दिए गए निर्देशों का पालन करें. जब आप कई नज़रिए को इकट्ठा करते हैं, तो यह अभ्यास ज़्यादा जानकारी देने वाला होता है.

नेविगेशन और वेफ़ाइंडिंग चेकपॉइंट के लिए सुलभता के अनुमान पर आधारित समीक्षा का एक उदाहरण कुछ ऐसा दिख सकता है:

नेविगेशन और वेफ़ाइंडिंग के लिए चेकपॉइंट Excel (+2 पॉइंट) पास (एक पॉइंट से ज़्यादा) गड़बड़ी मिली (-1 pt) लागू नहीं (0 pt)
क्या सभी ऐक्टिव एलिमेंट पर, फ़ोकस मिलने पर, साफ़ तौर पर दिखने वाला इंंडिकेटर सेट है?
क्या पेज का टाइटल टेक्स्ट सही है और उसमें पेज की खास जानकारी पहले है?
क्या पेज का शीर्षक एलिमेंट और H1 एक जैसे या मिलते-जुलते हैं?
क्या हर मुख्य सेक्शन के लिए सही हेडिंग हैं?
क्या लिंक के मकसद को सिर्फ़ लिंक टेक्स्ट से तय किया गया है या उसका मौजूदा संदर्भ क्या है?
क्या पेज पर सबसे ऊपर, स्किप लिंक दिया गया है और क्या वह फ़ोकस में है?
क्या नेविगेशनल एलिमेंट को व्यवस्थित करने से, वेफ़ाइंडिंग की सुविधा मिलती है?

टीम के सभी सदस्य पेज या कॉम्पोनेंट को देखते हैं और उनकी सुलभता सुविधाओं के बारे में अपने हिसाब से समीक्षा करते हैं. इसके बाद, हर चेकपॉइंट के हिसाब से कुल आंकड़ों की गिनती की जाती है. यहां से यह तय किया जा सकता है कि किसी समस्या को कैसे ठीक किया जाए या डिजिटल सुलभता को बढ़ावा देने में सबसे अहम गलती को कैसे ठीक किया जाए.

सुलभता एनोटेशन

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

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

नीचे दिए गए डिज़ाइन के उदाहरण, Figma के लिए Indeed.com की सुलभता एनोटेशन किट से लिए गए हैं.

बटन की अलग-अलग स्थितियों के लिए इस्तेमाल किए गए विज़ुअल बदलाव की इमेज.
ऐक्शन बटन का डिज़ाइन स्थिति के आधार पर अलग-अलग होता है: डिफ़ॉल्ट, फ़ोकस, होवर, ऐक्टिव, और बंद.
नौकरी के विज्ञापन वाले कार्ड पर इस्तेमाल किए गए तीन अलग-अलग आइकॉन के डिज़ाइन की इमेज.
तीन आइकॉन में वैकल्पिक टेक्स्ट हाइलाइट किया गया है. "नौकरी सेव करें" और "कोई दिलचस्पी नहीं" के आइकॉन, बटन के तौर पर काम करते हैं. इसलिए, कार्रवाई को समझने के लिए वैकल्पिक टेक्स्ट ज़रूरी है. "अपने रिज़्यूमे के साथ लागू करें" के बगल में मौजूद आइकॉन सिर्फ़ सजावटी है. इसलिए, इसके लिए वैकल्पिक टेक्स्ट की ज़रूरत नहीं होती.
महीने और साल के लिए, फ़ॉर्म लेबल से जुड़े इनपुट में एक संबंध की इमेज.
हर इनपुट के साथ कई इनपुट लेबल जोड़े जा सकते हैं, ताकि उपयोगकर्ताओं को संदर्भ समझने में मदद मिल सके.

आपके डिज़ाइन प्रोग्राम के हिसाब से, आपके पास कई सुलभता एनोटेशन स्टार्टर किट चुनने चाहिए. इसके अलावा, अगर आप चाहें, तो अपना सेट भी बनाया जा सकता है. दोनों ही मामलों में, आपको यह तय करना चाहिए कि कौन सी जानकारी, हैंड-ऑफ़ टीम को दी जानी चाहिए और कौनसा फ़ॉर्मैट सबसे अच्छा काम करेगा.

सुलभता एनोटेशन के लिए इन बातों का ध्यान रखा जाना चाहिए:

  • रंग: पैलेट में मौजूद रंगों के सभी अलग-अलग कॉम्बिनेशन के कंट्रास्ट अनुपात शामिल करें.
  • बटन और लिंक: डिफ़ॉल्ट, कर्सर, ऐक्टिव, फ़ोकस, और बंद की गई स्थितियों की पहचान करें.
  • लिंक छोड़ें: डिज़ाइन के छिपे हुए/दिखने वाले पहलुओं को हाइलाइट करें. साथ ही, यह भी हाइलाइट करें कि वे पेज पर कहां लिंक करते हैं.
  • इमेज और आइकॉन: ज़रूरी इमेज/आइकॉन के लिए टेक्स्ट के वैकल्पिक सुझाव जोड़ें.
  • ऑडियो और वीडियो: कैप्शन, ट्रांसक्रिप्ट, और ऑडियो की जानकारी के लिए जगहों/लिंक को हाइलाइट करें.
  • शीर्षक: प्रोग्रामैटिक लेवल जोड़ें और शीर्षक की तरह दिखने वाली सभी चीज़ें शामिल करें.
  • लैंडमार्क: एचटीएमएल या ARIA की मदद से डिज़ाइन के अलग-अलग सेक्शन को हाइलाइट करें.
  • इंटरैक्टिव कॉम्पोनेंट: इनकी मदद से, क्लिक किए जा सकने वाले एलिमेंट, कर्सर घुमाने पर दिखने वाले इफ़ेक्ट, और फ़ोकस एरिया की पहचान की जा सकती है.
  • कीबोर्ड: पहचान करें कि फ़ोकस कहां से शुरू होना चाहिए (ऐल्फ़ा स्टॉप) और नीचे दिए गए टैब का क्रम.
  • फ़ॉर्म: फ़ील्ड लेबल, हेल्पर टेक्स्ट, गड़बड़ी के मैसेज, और सफलता के मैसेज जोड़ें.
  • ऐसे नाम जिन्हें ऐक्सेस किया जा सकता है: यह एट्रिब्यूट की मदद से पता चलता है कि सहायक टेक्नोलॉजी को एलिमेंट की पहचान कैसे करनी चाहिए.