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

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

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

सभी को ध्यान में रखकर टेक्नोलॉजी और डिज़ाइन बनाना

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

एक वेन डायग्राम, जिसमें सुलभता, बिना किसी भेदभाव के सभी को शामिल करना, और इस्तेमाल करने में आसानी, ये सभी 'सभी को ध्यान में रखकर डिज़ाइन करना' के तौर पर बीच में मिलते हैं.

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

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

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

पर्सोना

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

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

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

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

ID24 की टॉक Deaf Tech: Travel Through Time from Past to Future में मेरल इवांस.
दिव्यांगता स्थायी, अस्थायी या किसी स्थिति की वजह से हो सकती है. दिव्यांगता की वजह से, छूने, देखने, सुनने, और बोलने में समस्या हो सकती है.
यह Microsoft के Inclusive 101 Toolkit के पर्सोना स्पेक्ट्रम का हिस्सा है.

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

आपके पर्सोना में दिव्यांग लोगों को शामिल करने का तरीका चाहे जो भी हो, वे नहीं होने चाहिए. साथ ही, पर्सोना कभी भी उपयोगकर्ता टेस्टिंग का विकल्प नहीं होते.

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

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

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

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

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

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

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

इन गलतफ़हमियों की वजह से, बनावटी रुकावटें पैदा होती हैं. इनकी वजह से, हम पूरी तरह से हिस्सा नहीं ले पाते. साथ ही, ये झूठी सीमाएं हमें पीछे धकेलती हैं."

मार्क रिकोबोना, नैशनल फ़ेडरेशन ऑफ़ द ब्लाइंड के अध्यक्ष.

सुलभता से जुड़े ह्यूरिस्टिक्स

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

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

मूल ह्यूरिस्टिक्स की तरह ही, ऐक्सेसिबिलिटी के लिए दस ह्यूरिस्टिक्स होते हैं. डिज़ाइन प्लान करते समय, इन पर ध्यान देना ज़रूरी है.

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

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

नेविगेशन और रास्ता ढूंढने से जुड़े चेकपॉइंट के लिए, सुलभता के सिद्धांतों के आधार पर की गई समीक्षा का उदाहरण यहां दिया गया है:

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

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

सुलभता से जुड़ी एनोटेशन

अपने डिज़ाइन को डेवलपमेंट टीम को सौंपने से पहले, आपको सुलभता एनोटेशन जोड़ने चाहिए.

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

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

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

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

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

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

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