इस पेज पर डिज़ाइन से जुड़े दिशा-निर्देश दिए गए हैं. इनमें बताया गया है कि धीमे नेटवर्क और ऑफ़लाइन, दोनों पर बेहतरीन उपयोगकर्ता अनुभव कैसे तैयार किया जा सकता है.
इंटरनेट की क्वालिटी पर कई चीज़ों से असर पड़ता है, जैसे कि:
- नेटवर्क की सेवा देने वाली कंपनी का कवरेज ठीक नहीं है.
- खराब मौसम की जानकारी.
- बिजली कटना.
- स्थायी "डेड ज़ोन" में जाना, जैसे कि उन इमारतों में शामिल होना जिनके लिए दीवारें, नेटवर्क कनेक्शन को ब्लॉक कर देती हैं.
- कुछ समय के लिए "डेड ज़ोन" में जाना. जैसे, ट्रेन से यात्रा करते समय और टनल से गुजरते समय.
- टाइम-बॉक्स किए गए इंटरनेट कनेक्शन, जैसे कि हवाई अड्डों या होटलों के इंटरनेट कनेक्शन.
- ऐसे सांस्कृतिक रीति-रिवाज जिनके लिए किसी खास समय या दिन में इंटरनेट का सीमित ऐक्सेस चाहिए या सीमित तौर पर इंटरनेट की ज़रूरत होती है.
डेवलपर के तौर पर आपका लक्ष्य अच्छा अनुभव देना है, ताकि कनेक्टिविटी में होने वाले बदलावों के असर को कम किया जा सके.
तय करें कि खराब इंटरनेट कनेक्शन का इस्तेमाल करने वाले उपयोगकर्ताओं को क्या दिखाना है
सबसे पहला सवाल यह है कि आपके ऐप्लिकेशन के लिए, इंटरनेट कनेक्शन की सफलता और असफलता कैसी होती है. एक सफल कनेक्शन होना, आपके ऐप्लिकेशन का सामान्य ऑनलाइन अनुभव होता है. कनेक्शन टूट जाने पर, आपका ऐप्लिकेशन ऑफ़लाइन और धीमे नेटवर्क पर कैसा काम करता है, यह दोनों शामिल होता है.
यह तय करने के लिए कि कनेक्शन की गड़बड़ी को कैसे ठीक किया जाए, खुद से ये ज़रूरी UX सवाल पूछें:
- किसी कनेक्शन की सफलता या असफलता का पता लगाने के लिए आपको कितना इंतज़ार करना पड़ता है?
- सफलता या असफलता का पता लगाने के दौरान क्या किया जा सकता है?
- कनेक्ट न हो पाने पर आपको क्या करना चाहिए?
- आप उपयोगकर्ता को कैसे बताते हैं कि क्या हो रहा है?
उपयोगकर्ताओं को उनकी मौजूदा स्थिति और स्थिति में बदलाव के बारे में बताएं
उपयोगकर्ता को ऐप्लिकेशन की स्थिति के बारे में बताएं. साथ ही, यह भी बताएं कि नेटवर्क में कोई गड़बड़ी होने पर, उपयोगकर्ता कौनसी कार्रवाइयां कर सकता है. उदाहरण के लिए, किसी सूचना में ये चीज़ें दिख सकती हैं:
ऐसा लगता है कि आपका इंटरनेट कनेक्शन खराब है. चिंता न करें! नेटवर्क वापस आ जाने पर मैसेज भेज दिए जाएंगे.
![Emoजॉय इमोजी मैसेजिंग ऐप्लिकेशन, उपयोगकर्ता को स्थिति में बदलाव की सूचना देता है.](https://web.dev/static/articles/offline-ux-design-guidelines/image/the-emojoy-emoji-messagin-70c51ef118a7.png?authuser=6&hl=hi)
![I/O 2016
ऐप्लिकेशन, स्थिति में बदलाव होने पर, उपयोगकर्ता को सूचना देता है.](https://web.dev/static/articles/offline-ux-design-guidelines/image/the-o-2016-app-informing-f644b43fd92eb.png?authuser=6&hl=hi)
इंटरनेट के बेहतर होने या पहले जैसा होने पर उपयोगकर्ताओं को सूचना दें
आपके ऐप्लिकेशन पर यह निर्भर करता है कि उपयोगकर्ता को कैसे पता चलता है कि उसका इंटरनेट कनेक्शन बेहतर हो गया है. मौसम या स्टॉक मार्केट ट्रैकर जैसी मौजूदा जानकारी को प्राथमिकता देने वाले ऐप्लिकेशन को जल्द से जल्द अपने-आप अपडेट होना चाहिए और उपयोगकर्ता को इस बारे में बताना चाहिए.
हमारा सुझाव है कि आप मटीरियल डिज़ाइन टोस्ट एलिमेंट जैसे विज़ुअल क्यू का इस्तेमाल करके उपयोगकर्ता को बताएं कि आपका वेब ऐप्लिकेशन "बैकग्राउंड में" अपडेट हो गया है. इसमें सर्विस वर्कर की मौजूदगी और मैनेज किए जा रहे कॉन्टेंट को अपडेट करने, दोनों की जानकारी शामिल होती है. यहां फ़ंक्शन का एक उदाहरण दिया गया है.
इसका एक उदाहरण Chrome प्लैटफ़ॉर्म की स्थिति है. यह ऐप्लिकेशन अपडेट होने के बाद, उपयोगकर्ता को एक नोट पोस्ट करता है.
![मौसम की जानकारी देने वाले ऐप्लिकेशन का उदाहरण.](https://web.dev/static/articles/offline-ux-design-guidelines/image/an-example-weather-app-656cb36f8252f.png?authuser=6&hl=hi)
![Chrome की स्थिति
टोस्ट का इस्तेमाल करती है.](https://web.dev/static/articles/offline-ux-design-guidelines/image/chrome-status-uses-toast-0157248fc0b6d.png?authuser=6&hl=hi)
कुछ ऐप्लिकेशन में, उन्हें पिछली बार अपडेट किए जाने का समय दिखाया जा सकता है. उदाहरण के लिए, यह खास तौर पर मुद्रा बदलने वाले ऐप्लिकेशन के लिए फ़ायदेमंद है.
![मटीरियल
मनी ऐप्लिकेशन पुराना हो गया है.](https://web.dev/static/articles/offline-ux-design-guidelines/image/the-material-money-app-be-d96547b7d1b9b.png?authuser=6&hl=hi)
![सामग्री
के पैसे अपडेट कर दिए गए हैं.](https://web.dev/static/articles/offline-ux-design-guidelines/image/material-money-has-been-u-1b9996995200f.png?authuser=6&hl=hi)
समाचार ऐप्लिकेशन, लोगों को नए कॉन्टेंट के बारे में बताने वाली एक सामान्य सूचना दिखा सकते हैं. इसके लिए, टैप-टू-अपडेट करें. किसी लेख के अपने-आप अपडेट होने की सुविधा इस्तेमाल करने पर, उपयोगकर्ता उस लेख में अपनी जगह खो देंगे.
![उदाहरण के लिए, समाचार ऐप्लिकेशन, Tailपीस अपनी सामान्य स्थिति में है](https://web.dev/static/articles/offline-ux-design-guidelines/image/an-example-news-app-tail-33ace032d408.png?authuser=6&hl=hi)
![समाचार ऐप्लिकेशन
Tailपीस का उदाहरण, जब वह अपडेट होने के लिए तैयार हो](https://web.dev/static/articles/offline-ux-design-guidelines/image/example-news-app-tailpie-a423153089499.png?authuser=6&hl=hi)
कॉन्टेक्स्ट के हिसाब से मौजूदा स्थिति दिखाने के लिए, यूज़र इंटरफ़ेस (यूआई) को अपडेट करें
हर यूज़र इंटरफ़ेस (यूआई) एलिमेंट का अपना कॉन्टेक्स्ट और व्यवहार हो सकता है. यह इस बात पर निर्भर करता है कि उसे कनेक्ट करने की ज़रूरत है या नहीं. इसका एक उदाहरण कोई ई-कॉमर्स साइट होगी, जिसे ऑफ़लाइन ब्राउज़ किया जा सकता है, लेकिन कनेक्शन फिर से शुरू होने तक कीमत और 'खरीदें' बटन को बंद रखा जा सकता है.
प्रासंगिक स्थितियों के अन्य रूपों में डेटा शामिल हो सकता है. उदाहरण के लिए, वित्तीय ऐप्लिकेशन Robinहुड, रंग और ग्राफ़िक्स का इस्तेमाल करके उपयोगकर्ता को बताता है कि शेयर बाज़ार कब खुला है. पूरा इंटरफ़ेस सफ़ेद रंग का हो जाता है और बाज़ार बंद होने पर धूसर हो जाता है. जब किसी स्टॉक का मूल्य बढ़ता या घटता है, तो हर एक स्टॉक विजेट अपनी स्थिति के आधार पर हरे या लाल हो जाता है.
उपयोगकर्ता को बताएं कि वह ऑफ़लाइन मॉडल क्या है
ज़्यादातर उपयोगकर्ता हमेशा इंटरनेट से जुड़े रहते हैं. आपको उन्हें यह बताना होगा कि उनके पास कनेक्शन न होने पर आपके ऐप्लिकेशन में क्या बदलाव होते हैं. उन्हें बताएं कि बड़ा डेटा कहां सेव किया जाता है और उन्हें डिफ़ॉल्ट सेटिंग बदलने के लिए सेटिंग दें. इन आइडिया को बताने के लिए, यूज़र इंटरफ़ेस (यूआई) डिज़ाइन के कई कॉम्पोनेंट (जैसे कि जानकारी देने वाली भाषा, आइकॉन, सूचनाएं, रंग, और तस्वीरें) का एक साथ इस्तेमाल करें. इसका इस्तेमाल पूरी कहानी बताने के लिए, डिज़ाइन के किसी एक विकल्प पर भरोसा करने के बजाय किया जाता है.
डिफ़ॉल्ट रूप से ऑफ़लाइन होने पर इस्तेमाल करें
अगर आपके ऐप्लिकेशन को ज़्यादा डेटा की ज़रूरत नहीं है, तो उस डेटा को डिफ़ॉल्ट रूप से कैश मेमोरी में सेव करें. अगर उपयोगकर्ता सिर्फ़ नेटवर्क कनेक्शन से अपना डेटा ऐक्सेस कर पा रहे हैं, तो वे ज़्यादा परेशान हो सकते हैं.
कोशिश करें कि आपको ज़्यादा से ज़्यादा अनुभव मिले. कनेक्शन के अस्थिर होने से आपका ऐप्लिकेशन गैर-भरोसेमंद हो जाता है. ऐसा ऐप्लिकेशन जो नेटवर्क के काम न करने की वजह से होने वाले असर को कम करता है, उसे इस्तेमाल करने वालों को खुशी होती है.
समाचार साइटें, ताज़ा खबरों के अपने-आप डाउनलोड होने और उन्हें अपने-आप सेव करने से फ़ायदा उठा सकती हैं. हो सकता है कि वे सिर्फ़ टेक्स्ट डाउनलोड करके डेटा बचा सकें. इससे लोग इंटरनेट कनेक्शन के बिना आज की खबरें पढ़ सकते हैं. उपयोगकर्ता के व्यवहार के हिसाब से, इस व्यवहार में बदलाव किया जा सकता है. इसके लिए, आपको समाचार की उन कैटगरी को डाउनलोड करने को प्राथमिकता देनी होगी जिन्हें उपयोगकर्ता सबसे ज़्यादा देखते हैं.
![Tailपीस, अलग-अलग डिज़ाइन विजेट का इस्तेमाल करके, लोगों को ऑफ़लाइन होने की जानकारी देता है.](https://web.dev/static/articles/offline-ux-design-guidelines/image/tailpiece-informs-user-3cf8f64ad441c.png?authuser=6&hl=hi)
![Tailपीस में एक विज़ुअल इंडिकेटर होता है. इससे पता चलता है कि कौनसे सेक्शन ऑफ़लाइन इस्तेमाल के लिए तैयार हैं.](https://web.dev/static/articles/offline-ux-design-guidelines/image/tailpiece-has-visual-ind-e45dbae7b63c5.png?authuser=6&hl=hi)
जब ऐप्लिकेशन ऑफ़लाइन इस्तेमाल के लिए तैयार हो, तब उपयोगकर्ता को इसकी सूचना दें
जब कोई वेब ऐप्लिकेशन पहली बार लोड होता है, तो उपयोगकर्ता को यह बताना चाहिए कि वह ऑफ़लाइन इस्तेमाल के लिए तैयार है या नहीं. स्क्रीन के नीचे मैसेज के ज़रिए, कार्रवाई के बारे में कम शब्दों में सुझाव देने वाले विजेट की मदद से ऐसा करें. जैसे, जब कोई सेक्शन सिंक किया गया हो या फ़ाइल डाउनलोड की गई हो.
पक्का करें कि आप जिस भाषा का इस्तेमाल कर रहे हैं, वह आपकी ऑडियंस के लिए सही हो. साथ ही, जहां भी यह लागू हो वहां एक ही वाक्यांश का इस्तेमाल करें. गैर-तकनीकी ऑडियंस अक्सर "ऑफ़लाइन" शब्द को ठीक से नहीं समझ पाती हैं, इसलिए कार्रवाई पर आधारित ऐसी भाषा का इस्तेमाल करें जिससे आपकी ऑडियंस जुड़ाव महसूस करे.
![I/O ऐप्लिकेशन ऑफ़लाइन है.](https://web.dev/static/articles/offline-ux-design-guidelines/image/io-app-offline-e8851102c8a54.png?authuser=6&hl=hi)
![Chrome स्थिति साइट ऑफ़लाइन है.](https://web.dev/static/articles/offline-ux-design-guidelines/image/chrome-status-site-is-off-aa745a23d2117.png?authuser=6&hl=hi)
इंटरफ़ेस में 'ऑफ़लाइन सेव करें' को साफ़ तौर पर दिखाएं
अगर किसी ऐप्लिकेशन में बहुत ज़्यादा डेटा इस्तेमाल होता है, तो पक्का करें कि ऑफ़लाइन इस्तेमाल के लिए कोई आइटम जोड़ने के लिए एक स्विच या पिन मौजूद हो. फ़ाइलें अपने आप डाउनलोड सिर्फ़ तभी हों, जब उपयोगकर्ता ने सेटिंग मेन्यू के ज़रिए इस व्यवहार के बारे में खास तौर पर पूछा हो. पक्का करें कि पिन या डाउनलोड यूज़र इंटरफ़ेस (यूआई) उपयोगकर्ता को साफ़ तौर पर दिख रहा हो और उसे दूसरे यूज़र इंटरफ़ेस (यूआई) एलिमेंट से छिपाया न गया हो.
इसका एक उदाहरण ऐसा म्यूज़िक प्लेयर हो सकता है जिसके लिए बड़ी फ़ाइलों की ज़रूरत होती है. उपयोगकर्ता को डेटा से जुड़ी लागत के बारे में पता होता है, लेकिन हो सकता है कि वह प्लेयर का ऑफ़लाइन इस्तेमाल करना चाहे. बाद में इस्तेमाल करने के लिए संगीत डाउनलोड करने के लिए उपयोगकर्ता को पहले से योजना बनानी होगी. इसलिए, हो सकता है कि आप ऑनबोर्डिंग के दौरान उपयोगकर्ता को इसके बारे में शिक्षित करें.
यह बताएं कि ऑफ़लाइन क्या उपलब्ध है
साफ़ तौर पर बताएं कि आपने क्या विकल्प दिए हैं. आपको "ऑफ़लाइन लाइब्रेरी" या कॉन्टेंट इंडेक्स के लिए, एक टैब या सेटिंग दिखानी पड़ सकती है. इससे, उपयोगकर्ता देख सकेंगे कि उन्होंने अपने डिवाइस पर क्या सेव किया है और कौनसी जानकारी सेव करनी है. पक्का करें कि सेटिंग कम शब्दों में हों. साथ ही, इस बारे में साफ़ तौर पर बताएं कि डेटा कहां सेव किया जाएगा और उसे कौन ऐक्सेस कर पाएगा.
किसी कार्रवाई की असल लागत दिखाना
कई उपयोगकर्ता, 'डाउनलोड करने' के साथ-साथ ऑफ़लाइन मोड में भी काम करते हैं. उन देशों के उपयोगकर्ता जहां नेटवर्क कनेक्शन नियमित रूप से काम नहीं करते या उपलब्ध नहीं होते, वे अक्सर अन्य उपयोगकर्ताओं के साथ कॉन्टेंट शेयर करते हैं. इसके अलावा, इंटरनेट कनेक्टिविटी न होने पर, कॉन्टेंट को ऑफ़लाइन इस्तेमाल के लिए सेव करते हैं.
डेटा प्लान इस्तेमाल करने वाले लोग, कभी-कभी कीमत के डर से बड़ी फ़ाइलें डाउनलोड करने से बचते हैं. इसलिए, हो सकता है कि आप उनसे जुड़ा शुल्क दिखाना चाहें, ताकि उपयोगकर्ता किसी खास फ़ाइल या टास्क के लिए सही तुलना कर सकें. उदाहरण के लिए, ऊपर बताया गया म्यूज़िक ऐप्लिकेशन यह पता लगा सकता है कि उपयोगकर्ता किसी डेटा प्लान में है या नहीं. साथ ही, वह फ़ाइल का साइज़ दिखा सकता है, ताकि उपयोगकर्ता किसी फ़ाइल की कीमत देख सके.
हैक किए गए अनुभव को रोकने में मदद करना
अक्सर उपयोगकर्ता किसी अनुभव को हैक किए जाते हैं. हालांकि, उन्हें यह पता नहीं होता कि वे उसे इस्तेमाल कर रहे हैं. उदाहरण के लिए, क्लाउड-आधारित फ़ाइल-शेयरिंग वेब ऐप्लिकेशन के पहले, उपयोगकर्ताओं के लिए बड़ी फ़ाइलें सेव करना और उन्हें ईमेल में अटैच करना आम बात थी, ताकि वे किसी दूसरे डिवाइस से उन फ़ाइलों में बदलाव करना जारी रख सकें. अच्छे यूज़र इंटरफ़ेस (यूआई) से उन समस्याओं को हल किया जा सकता है जिन्हें उपयोगकर्ता हल करने की कोशिश कर रहे हैं. इसके लिए उन्हें हैक किए गए अनुभव की वजह से परेशानी नहीं होनी चाहिए. उदाहरण के लिए, उपयोगकर्ताओं के लिए ईमेल में बड़ी फ़ाइलें अटैच करने के बजाय, उन्हें एक से दूसरे डिवाइस पर शेयर करने का तरीका बताएं.
अनुभवों को एक से दूसरे डिवाइस पर ट्रांसफ़र करना
अस्थिर नेटवर्क के लिए काम करते समय, कनेक्शन में सुधार होते ही सिंक करने की कोशिश करें ताकि अनुभव ट्रांसफ़र किया जा सके. उदाहरण के लिए, मान लें कि यात्रा के लिए इस्तेमाल होने वाला कोई ऐप्लिकेशन, बुकिंग के ज़रिए इंटरनेट कनेक्शन बंद कर देता है. कनेक्शन दोबारा शुरू होने पर ऐप्लिकेशन, उपयोगकर्ता के खाते से सिंक हो जाता है. इससे उपयोगकर्ता अपने डेस्कटॉप डिवाइस पर बुकिंग जारी रख पाता है और अनुभव को बेहतर बनाता है.
उपयोगकर्ता को बताएं कि उसका डेटा किस स्थिति में है. उदाहरण के लिए, यह दिखाया जा सकता है कि ऐप्लिकेशन सिंक हुआ है या नहीं. जहां भी हो सके, उन्हें समझाएं, लेकिन बहुत ज़्यादा मैसेज भेजने की कोशिश न करें.
सभी को ध्यान में रखकर डिज़ाइन किए गए प्रॉडक्ट बनाना
अपना उपयोगकर्ता अनुभव (UX) डिज़ाइन करते समय, काम के डिज़ाइन वाले डिवाइस, आसान भाषा, स्टैंडर्ड आइकॉनोग्राफ़ी, और काम की तस्वीरों का इस्तेमाल करें. इनकी मदद से, उपयोगकर्ता बिना किसी रुकावट के अपना काम पूरा कर सकते हैं.
आसान और साफ़ भाषा का इस्तेमाल करें
अच्छे UX का मतलब सिर्फ़ आपका इंटरफ़ेस डिज़ाइन करना नहीं है. इसमें वह पाथ शामिल होता है जिस पर उपयोगकर्ता आपके ऐप्लिकेशन से गुज़रता है. साथ ही, इसमें वे सभी चीज़ें भी शामिल होती हैं जो इस दौरान उन्हें मिलती हैं. इसमें वह भाषा भी शामिल है जिसका इस्तेमाल ऐप्लिकेशन में उस सफ़र के बारे में बताने के लिए किया जाता है. यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट या ऐप्लिकेशन की स्थिति के बारे में बताते समय, मुश्किल शब्दों का इस्तेमाल करने से बचें. "ऑफ़लाइन" शब्द का मतलब अक्सर इतना साफ़ नहीं होता कि उपयोगकर्ता को यह बताया जा सके कि आपका ऐप्लिकेशन क्या कर रहा है.
![सर्विस वर्कर आइकॉन का सही उदाहरण नहीं है.](https://web.dev/static/articles/offline-ux-design-guidelines/image/a-service-worker-icon-is-9ab93716e75ef.png?authuser=6&hl=hi)
![डाउनलोड आइकॉन एक अच्छा उदाहरण है.](https://web.dev/static/articles/offline-ux-design-guidelines/image/a-download-icon-is-good-53eec1dd7a257.png?authuser=6&hl=hi)
सभी को ऐक्सेस करने लायक उपयोगकर्ता अनुभव देने के लिए, अलग-अलग डिज़ाइन वाले डिवाइसों का इस्तेमाल करना
स्थिति या स्थिति में बदलाव दिखाने के लिए भाषा, रंग, और विज़ुअल कॉम्पोनेंट का इस्तेमाल करें. स्थिति दिखाने के लिए सिर्फ़ रंग का इस्तेमाल करने पर, लोगों को इस पर ध्यान देना मुश्किल हो सकता है. इसके अलावा, ऐसा हो सकता है कि वे लोग भी उन्हें पूरी तरह ऐक्सेस न कर पाएं जिन्हें देखने में परेशानी होती है. वेब डिज़ाइन, बंद एलिमेंट के लिए स्लेटी रंग का इस्तेमाल करता है. इसलिए, स्लेटी रंग के यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल करके, यह दिखाया जा सकता है कि आपका ऐप्लिकेशन ऑफ़लाइन है. इससे यह भ्रम हो सकता है कि ऐप्लिकेशन ऑफ़लाइन होने पर क्या कर सकता है. खास तौर पर तब, जब स्थिति दिखाने के लिए सिर्फ़ रंग का इस्तेमाल किया जाता है.
ग़लतफ़हमियों से बचने के लिए, उपयोगकर्ता को ऐप्लिकेशन के बारे में अलग-अलग तरीकों से बताएं. उदाहरण के लिए, रंग, लेबल, और यूज़र इंटरफ़ेस (यूआई) के कॉम्पोनेंट.
![एक अच्छा उदाहरण, जो गड़बड़ी दिखाने के लिए रंग और टेक्स्ट का इस्तेमाल करता है.](https://web.dev/static/articles/offline-ux-design-guidelines/image/a-example-uses-color-t-d090f90d2476a.png?authuser=6&hl=hi)
![सिर्फ़ रंग का इस्तेमाल करना सही नहीं है.](https://web.dev/static/articles/offline-ux-design-guidelines/image/a-bad-example-using-colo-8e9dd82778ffc.png?authuser=6&hl=hi)
मतलब बताने वाले आइकॉन का इस्तेमाल करें
अपने आइकॉन के साथ, काम के टेक्स्ट लेबल इस्तेमाल करना न भूलें. अकेले आइकॉन उलझन में डाल सकते हैं खास तौर पर इसलिए क्योंकि वेब पर 'ऑफ़लाइन' का कॉन्सेप्ट नया है. भ्रम की स्थिति बनाने वाले आइकॉन के अन्य मामलों में,'सेव करें' को दिखाने के लिए फ़्लॉपी डिस्क का इस्तेमाल करना शामिल है. इससे उन कम उम्र के उपयोगकर्ताओं के लिए इसका इस्तेमाल नहीं किया जा सकता जिन्होंने कभी फ़्लॉपी डिस्क नहीं देखी है. साथ ही, 'हैमबर्गर' मेन्यू आइकॉन भी इस्तेमाल किया जा सकता है.
ऑफ़लाइन आइकॉन को पेश करते समय, इंडस्ट्री स्टैंडर्ड के हिसाब से विज़ुअल इस्तेमाल करें. साथ ही, टेक्स्ट लेबल और जानकारी दें. उदाहरण के लिए, ऑफ़लाइन सेव करने के लिए डाउनलोड आइकॉन का इस्तेमाल किया जा सकता है. सिंक करने की सुविधा से जुड़ी कार्रवाई के लिए, सिंक आइकॉन इस्तेमाल किया जा सकता है. स्थिति दिखाने के लिए ऐसे आइकॉन का इस्तेमाल करते समय सावधानी बरतें जिन्हें सेव या डाउनलोड करने की कार्रवाई समझा जा सकता है.
![ऑफ़लाइन दिखाने के लिए, आइकॉन के अलग-अलग उदाहरण](https://web.dev/static/articles/offline-ux-design-guidelines/image/various-icon-examples-co-a2e7adbcf4246.png?authuser=6&hl=hi)
ज़्यादा प्रेरणा के लिए, मटीरियल डिज़ाइन आइकॉन सेट देखें.
स्केलेटन लेआउट और फ़ीडबैक देने के अन्य तरीके इस्तेमाल करें
जब आपका ऐप्लिकेशन कॉन्टेंट लोड हो रहा हो, तो उपयोगकर्ता को दिखाएं कि यह लोड हो रहा है, ताकि उन्हें यह न दिखे कि वह ठीक से लोड हुआ है. इसका एक तरीका यह है कि आप कंकाल लेआउट का इस्तेमाल करें. यह आपके ऐप्लिकेशन का एक वायरफ़्रेम वर्शन होता है, जो कॉन्टेंट लोड होने के दौरान दिखता है. एक प्रीलोडर यूज़र इंटरफ़ेस (यूआई) इस्तेमाल करें. इसमें उपयोगकर्ता को एक टेक्स्ट लेबल होना चाहिए, जिससे उपयोगकर्ता को पता चल सके कि ऐप्लिकेशन लोड हो रहा है. इसके अलावा, वायरफ़्रेम के लिए धीरे से पल्स करने वाला ऐनिमेशन भी इस्तेमाल किया जा सकता है, जिससे उसे यह महसूस होगा कि वह लाइव है और लोड हो रहा है. इससे उपयोगकर्ता को भरोसा दिलाया जाता है कि कुछ हो रहा है. साथ ही, दोबारा सबमिशन को या बेवजह रीफ़्रेश होने से रोकने में मदद मिलती है.
![स्केलेटन लेआउट का उदाहरण.](https://web.dev/static/articles/offline-ux-design-guidelines/image/a-skeleton-layout-example-be82e48f16f75.png?authuser=6&hl=hi)
![लोड किए गए लेख का उदाहरण.](https://web.dev/static/articles/offline-ux-design-guidelines/image/a-loaded-article-example-daa80c34d8194.png?authuser=6&hl=hi)
सुझाव देकर किसी कार्रवाई की स्थिति दिखाएं. उदाहरण के लिए, अगर कोई उपयोगकर्ता किसी दस्तावेज़ में ऑफ़लाइन बदलाव कर रहा है, तो फ़ीडबैक के डिज़ाइन को बदलें, ताकि वह ऑनलाइन रहने पर उसके डिज़ाइन से अलग दिखे. हालांकि, फिर भी दिखाएं कि उनकी फ़ाइल "सेव की गई" थी और इंटरनेट से कनेक्ट होने पर सिंक हो जाएगी. इससे, उपयोगकर्ता को यह जानकारी मिलती है कि आपका ऐप्लिकेशन कैसे काम करता है. साथ ही, उन्हें यह भरोसा होता है कि उनके टास्क या ऐक्शन को सेव किया जा चुका है. इससे उनका ऐप्लिकेशन इस्तेमाल करने का भरोसा बढ़ जाता है.
कॉन्टेंट ब्लॉक न करें
कुछ ऐप्लिकेशन में, उपयोगकर्ता कोई कार्रवाई कर सकता है, जैसे कि नया दस्तावेज़ बनाना. कुछ ऐप्लिकेशन नए दस्तावेज़ को सिंक करने के लिए, एक सर्वर से कनेक्ट करने की कोशिश करते हैं. साथ ही, यह दिखाने के लिए कि वे लोडिंग मोडल डायलॉग दिखाते हैं, जो पूरी स्क्रीन को कवर करता है. यह तब काम कर सकता है, जब उपयोगकर्ता के पास अच्छा इंटरनेट कनेक्शन हो, लेकिन अगर नेटवर्क ठीक से काम न करे, तो वह इस कार्रवाई से नहीं बच पाएगा. इसलिए, यूज़र इंटरफ़ेस (यूआई) उन्हें कुछ और करने से रोकता है.
कॉन्टेंट ब्लॉक करने वाले नेटवर्क अनुरोधों से बचें. उपयोगकर्ता को ऐप्लिकेशन ब्राउज़ करना और कनेक्शन बेहतर होने पर पूरे किए जाने वाले टास्क सूची में शामिल करना जारी रखने दें.
अगले एक अरब लोगों के लिए डिज़ाइन
कई इलाकों में, कम कीमत वाले डिवाइस आम बात है, कनेक्टिविटी भरोसेमंद नहीं होती, और कई लोगों के लिए डेटा बहुत महंगा होता है. डेटा के साथ पारदर्शी और किफ़ायती रहकर अपने उपयोगकर्ताओं का भरोसा जीतें. खराब कनेक्शन पर लोगों की मदद करने के तरीकों के बारे में सोचें और अपने काम को तेज़ी से करने के लिए इंटरफ़ेस को आसान बनाएं. बहुत ज़्यादा डेटा डाउनलोड करने से पहले हमेशा उपयोगकर्ताओं से सवाल पूछें.
लैगी कनेक्शन का इस्तेमाल करने वाले उपयोगकर्ताओं को कम बैंडविड्थ के विकल्प दें. धीमे नेटवर्क कनेक्शन पर छोटी ऐसेट उपलब्ध कराएं या अच्छी या हल्की क्वालिटी वाली ऐसेट चुनने का विकल्प दें.
नतीजा
उपयोगकर्ता अनुभव को ऑफ़लाइन इस्तेमाल करने के लिए, शिक्षा सबसे अहम है, क्योंकि उपयोगकर्ता इसके बारे में नहीं जानते. उसे सीखने में मदद करने के लिए, जाने-पहचाने कॉन्सेप्ट के साथ जुड़ाव बनाने की कोशिश करें. जैसे, यह समझाना कि बाद में इस्तेमाल करने के लिए डाउनलोड करना डेटा को ऑफ़लाइन डाउनलोड करने जैसा ही है.
नेटवर्क कनेक्शन ठीक से काम न करने वाले कनेक्शन को बनाते समय, इन दिशा-निर्देशों को ध्यान में रखें:
- यह किसी नेटवर्क कनेक्शन की सफलता, विफलता, और अस्थिरता के लिए डिज़ाइन किया गया है.
- डेटा महंगा हो सकता है, इसलिए उपयोगकर्ता का ध्यान रखें.
- दुनिया भर के ज़्यादातर उपयोगकर्ताओं के लिए, टेक्नोलॉजी का इस्तेमाल पूरी तरह से मोबाइल पर होता है.
- आम तौर पर, लो-एंड डिवाइस ऐसे होते हैं जिनमें कम स्टोरेज, मेमोरी, और प्रोसेसिंग पावर होते हैं. साथ ही, इनमें छोटे डिसप्ले और कम टचस्क्रीन की क्वालिटी होती है. पक्का करें कि परफ़ॉर्मेंस, आपकी डिज़ाइन प्रोसेस का हिस्सा है.
- उपयोगकर्ताओं को ऑफ़लाइन होने पर, अपना ऐप्लिकेशन ब्राउज़ करने की अनुमति दें.
- उपयोगकर्ताओं को उनकी मौजूदा स्थिति और राज्यों में हुए बदलावों के बारे में बताएं.
- अगर आपके ऐप्लिकेशन में ज़्यादा डेटा नहीं है, तो डिफ़ॉल्ट रूप से ऑफ़लाइन उपलब्ध कराने की कोशिश करें.
- अगर ऐप्लिकेशन में बहुत ज़्यादा डेटा है, तो उपयोगकर्ताओं को ऑफ़लाइन इस्तेमाल के लिए डाउनलोड करने का तरीका बताएं.
- एक डिवाइस से दूसरे डिवाइस पर अनुभव शेयर करने की सुविधा पाएं.
- लोगों को आइडिया देने के लिए भाषा, आइकॉन, इमेज, टाइपोग्राफ़ी, और रंग का एक साथ इस्तेमाल करें.
- लोगों की मदद करने के लिए, उन्हें भरोसा दिलाएं और सुझाव, शिकायत या राय दें.