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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

डिफ़ॉल्ट रूप से ऑफ़लाइन होने पर इस्तेमाल करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

मतलब बताने वाले आइकॉन का इस्तेमाल करें

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

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

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

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

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

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

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

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

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

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

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

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

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

नतीजा

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

नेटवर्क कनेक्शन ठीक से काम न करने वाले कनेक्शन को बनाते समय, इन दिशा-निर्देशों को ध्यान में रखें:

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