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

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

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

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

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

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

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

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

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

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

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

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

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

नेटवर्क कनेक्शन ठीक होने या वापस आने पर, उपयोगकर्ताओं को सूचना देना

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

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

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

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

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

Material Money ऐप्लिकेशन का वर्शन पुराना है.
Material Money, दरों को कैश मेमोरी में सेव करता है…
मटीरियल के लिए चुकाए जाने वाले पैसों की जानकारी अपडेट कर दी गई है.
…और ऐप्लिकेशन अपडेट होने पर, उपयोगकर्ता को सूचना देता है.

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

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

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

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

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

उपयोगकर्ता को बताएं कि ऑफ़लाइन मॉडल क्या है

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

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

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

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

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

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

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

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

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

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

इंटरफ़ेस में 'ऑफ़लाइन देखने के लिए सेव करें' विकल्प को साफ़ तौर पर दिखाना

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

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

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

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

किसी ऐक्शन की असल लागत दिखाना

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

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

हैक होने से जुड़ी समस्याओं से बचने में मदद करना

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

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

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

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

सभी के लिए डिज़ाइन अनुभव बनाना

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

आसान और साफ़ भाषा का इस्तेमाल करें

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

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

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

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

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

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

ऐसे आइकॉन का इस्तेमाल करें जिनसे जानकारी मिलती हो

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

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

ऑफ़लाइन होने की जानकारी देने वाले अलग-अलग आइकॉन के उदाहरण
कुछ आइकॉन, जिनका मतलब 'ऑफ़लाइन' हो सकता है.

ज़्यादा जानकारी के लिए, Material Design आइकॉन सेट देखें.

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

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

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

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

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

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

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

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

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

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

नतीजा

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

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

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