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

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

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

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

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

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

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

सुलभता पर आधारित, सभी के लिए डिज़ाइन के सात सिद्धांत हैं:

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

पर्सोना

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

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

दिव्यांगता को शामिल करने में मदद करने वाली सेवा

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

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

ID24 टॉक में बधिर के लिए टेक्नोलॉजी: बीते समय से लेकर आने वाले समय तक की यात्रा पर बातचीत करने वाली मेरल इवांस.

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

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

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

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

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

किसी बीमारी या स्थिति का अनुभव देने वाले गेम

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

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

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

इन गलतफ़हमियों की वजह से, हमारे लिए पूरी तरह से हिस्सा लेना मुश्किल हो जाता है. साथ ही, इन गलत सीमाओं की वजह से हम आगे नहीं बढ़ पाते."

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

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

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

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

हेयुरिस्टिक्स के मूल सेट की तरह ही, डिज़ाइन करते समय सुलभता से जुड़े 10 हेयुरिस्टिक्स का ध्यान रखना चाहिए.

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

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

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

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

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

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

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

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

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

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

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

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

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

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