ऑफ़लाइन UX डिज़ाइन से जुड़े दिशा-निर्देश

धीमे नेटवर्क और ऑफ़लाइन के लिए वेब अनुभव डिज़ाइन करने के लिए एक गाइड.

मुस्तफ़ा कुर्तुल्दु
मुस्तफ़ा कुर्तुल्दु
थॉमस स्टाइनर
थॉमस स्टाइनर

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

किसी नेटवर्क कनेक्शन की क्वालिटी कई चीज़ों से प्रभावित हो सकती है, जैसे:

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

आपका लक्ष्य अच्छा अनुभव देना है, ताकि कनेक्टिविटी में होने वाले बदलावों के असर को कम किया जा सके.

यह तय करें कि खराब इंटरनेट कनेक्शन होने पर, उपयोगकर्ताओं को क्या दिखाया जाए

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

किसी नेटवर्क कनेक्शन की सफलता या असफलता के बारे में विचार करते समय, आपको खुद से ये ज़रूरी UX सवाल पूछने चाहिए:

  • किसी कनेक्शन के सफल या न होने के बारे में पता लगाने के लिए, आपको कितना इंतज़ार करना पड़ता है?
  • सफलता या असफलता का पता चलने के दौरान, क्या किया जा सकता है?
  • फ़ेल होने पर आपको क्या करना चाहिए?
  • आप उपयोगकर्ता को ऊपर दी गई जानकारी कैसे देते हैं?

उपयोगकर्ताओं को उनकी मौजूदा स्थिति और मौजूदा स्थिति में बदलाव के बारे में बताएं

उपयोगकर्ता को उन दोनों कार्रवाइयों के बारे में बताएं जो नेटवर्क के बंद होने और ऐप्लिकेशन के काम करने की मौजूदा स्थिति के दौरान भी की जा सकती हैं. उदाहरण के लिए, किसी सूचना में यह कहा जा सकता है:

ऐसा लगता है कि आपका इंटरनेट कनेक्शन खराब है. चिंता न करें! नेटवर्क बहाल हो जाने पर मैसेज भेज दिए जाएंगे.

Emojoy इमोजी मैसेज सेवा ऐप्लिकेशन, उपयोगकर्ता को स्थिति में बदलाव की सूचना देता है.
अगर स्टेटस में जल्द से जल्द कोई बदलाव होता है, तो उपयोगकर्ता को साफ़ तौर पर सूचना दें.
I/O 2016 ऐप्लिकेशन, उपयोगकर्ता को स्थिति में बदलाव की सूचना देता है.
Google I/O ऐप्लिकेशन ने "टोस्ट" का इस्तेमाल करके, उपयोगकर्ता को उसके ऑफ़लाइन होने की जानकारी दी.

इंटरनेट के बेहतर होने या पहले जैसा होने पर उपयोगकर्ताओं को सूचना दें

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

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

इसका एक उदाहरण Chrome Platform Status होगा, जो ऐप्लिकेशन अपडेट होने के बाद उपयोगकर्ता को एक नोट पोस्ट करेगा.

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

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

MaterialMoney ऐप्लिकेशन का वर्शन पुराना है.
मटीरियल मनी कैश मेमोरी दरें...
मूल धन अपडेट किया गया
...ऐप्लिकेशन के अपडेट होने पर उपयोगकर्ता को सूचना देती है.

समाचार ऐप्लिकेशन जैसे ऐप्लिकेशन, लोगों को नए कॉन्टेंट के बारे में जानकारी देने के लिए टैप-टू-अपडेट की आसान सूचना दिखा सकते हैं. अपने आप अपडेट होने से उपयोगकर्ता अपनी मौजूदा जगह खो देंगे.

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

काम की मौजूदा स्थिति दिखाने के लिए, यूज़र इंटरफ़ेस (यूआई) को अपडेट करना

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

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

उपयोगकर्ता को इस तरह की जानकारी दें, ताकि वे समझ सकें कि ऑफ़लाइन मॉडल क्या है

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

डिफ़ॉल्ट रूप से, ऑफ़लाइन इस्तेमाल करने का अनुभव देना

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

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

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

उपयोगकर्ता को बताएं कि ऐप्लिकेशन को ऑफ़लाइन इस्तेमाल के लिए कब इस्तेमाल किया जा सकता है

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

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

I/O ऐप्लिकेशन ऑफ़लाइन है.
जब ऐप्लिकेशन ऑफ़लाइन इस्तेमाल के लिए तैयार हो जाता है, तब Google I/O 2016 ऐप्लिकेशन उपयोगकर्ता को सूचना देता है...
Chrome स्थिति साइट ऑफ़लाइन है.
...और इसी तरह Chrome Platform की स्थिति साइट भी, जिसमें इस्तेमाल किए गए स्टोरेज की जानकारी शामिल है.

ज़्यादा डेटा वाले ऐप्लिकेशन के लिए, 'ऑफ़लाइन होने पर भी सेव करें' को इंटरफ़ेस का हिस्सा बनाएं

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

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

साफ़ तौर पर बताएं कि क्या ऑफ़लाइन उपलब्ध है

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

किसी कार्रवाई की असल लागत दिखाना

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

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

हैक किए गए अनुभवों को रोकने में मदद करना

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

अनुभवों को एक से दूसरे डिवाइस पर ट्रांसफ़र करना

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

उपयोगकर्ता को उसके डेटा की मौजूदा स्थिति के बारे में बताएं. उदाहरण के लिए, यह दिखाया जा सकता है कि ऐप्लिकेशन सिंक हुआ है या नहीं. जहां भी हो सके, छात्र-छात्राओं को जानकारी दें, लेकिन बहुत ज़्यादा मैसेज भेजने से बचें.

बिना किसी भेदभाव के सभी को ध्यान में रखकर डिज़ाइन तैयार करें

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

आसान और कम शब्दों में लिखी गई भाषा का इस्तेमाल करें

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

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

उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, अलग-अलग डिज़ाइन वाले कई डिवाइसों का इस्तेमाल करना

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

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

यह न करें
यह एक खराब उदाहरण है, जिसमें सिर्फ़ रंग का इस्तेमाल किया गया है.
क्या हो रहा है, यह बताने के लिए रंगों का इस्तेमाल करने से बचें.
ऐसा करें
एक अच्छा उदाहरण, जिसमें गड़बड़ी दिखाने के लिए रंग और टेक्स्ट का इस्तेमाल किया गया है.
मतलब बताने के लिए, कई डिज़ाइन एलिमेंट का इस्तेमाल करें.

ऐसे आइकॉन इस्तेमाल करें जिनसे मतलब साफ़ तौर पर समझ आए

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

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

ऑफ़लाइन दिखाने वाले आइकॉन के अलग-अलग उदाहरण

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

सुझाव देने के अन्य तरीकों के साथ, स्केलेटन लेआउट का इस्तेमाल करना

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

आधारभूत लेआउट का उदाहरण.
लेख को डाउनलोड करने के दौरान, आधारभूत प्लेसहोल्डर का लेआउट दिखाया जाता है...
लोड किए गए लेख का उदाहरण.
...जो डाउनलोड पूरा होने के बाद असली कॉन्टेंट से बदल जाता है.

कॉन्टेंट को ब्लॉक न करें

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

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

अगले एक अरब लोगों के लिए डिज़ाइन

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

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

नतीजा

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

अस्थिर नेटवर्क कनेक्शन के लिए डिज़ाइन करते समय, इन दिशा-निर्देशों को याद रखें:

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