लोडिंग के लिए UX डिज़ाइन पैटर्न

• लोडिंग स्क्रीन सिस्टम क्या कर रहा है इसकी विज़िबिलिटी देकर user experience को बेहतर बना सकती है।
• सही लोडिंग स्क्रीन बनाने के लिए कुछ बातों पर विचार करना ज़रूरी है।
  • डिज़ाइन से पहले लोडिंग सिस्टम की जाँच करनी चाहिए।
  • क्या लोडिंग user input को ब्लॉक करती है, क्या progress पता चल सकता है, कितना data लाया जा रहा है, mobile experience कैसा है, आदि।
  • क्या यह passive loading है (सिस्टम पहले से लोड करता है), या active loading है (यूज़र की कार्रवाई के अनुसार लोड होता है), आदि।
• एक बार में दिखाई जाने वाली मात्रा के अनुसार बदलाव
  • जटिल components के मामले में उन्हें एक-एक करके दिखाना बेहतर हो सकता है।
  • अपेक्षाकृत सरल components के मामले में load पूरा होने के बाद उन्हें एक साथ दिखाना बेहतर है।
  • यदि components की संख्या अधिक है, तो lazy loading की आवश्यकता होती है।
    • infinite scroll, load more button, paging जैसी approaches का उपयोग।
• आवृत्ति के अनुसार बदलाव
  • अगर चीज़ें लगातार बदलती रहती हैं, तो loading दिखाने वाले UI को न्यूनतम रखना चाहिए।
    • real-time save UI के लिए Google Drive का उदाहरण देखा जा सकता है।
  • अगर कभी-कभी बदलाव होते हैं, तो उन्हें तुरंत यूज़र को दिखाना बेहतर है।
    • जैसे यह बताने वाला popup कि आप जो content देख रहे हैं वह update हो गया है, इसलिए स्क्रीन refresh करें।
• लगने वाले समय के अनुसार बदलाव
  • पहले यह देखना चाहिए कि progress को स्पष्ट रूप से जाना जा सकता है या नहीं, या वह अनिश्चित है।
  • अगर 0.1 सेकंड से कम हो
    • तुरंत परिणाम दिखाना पर्याप्त है।
    • कुछ मामलों में fake loading screen दिखाना और बेहतर हो सकता है।
    • जब काम यूज़र की नज़र में महत्वपूर्ण लगे (जैसे save), या यूज़र को action लेने लायक delay समय देना हो (जैसे mail send के undo button)।
  • अगर 0.1 सेकंड ~ 1 सेकंड के बीच हो
    • यह बहुत आम delay है और यूज़र की नज़र में मुश्किल से आता है, इसलिए loading screen न जोड़ना बेहतर है।
  • अगर 1 सेकंड से अधिक हो
    • 1 सेकंड पार करते ही यूज़र waiting time को महसूस करने लगता है, इसलिए उपयुक्त loading screen जोड़ना अच्छा है।
    • अगर लोड होने वाला component छोटा है, तो loading spinner अच्छा विकल्प है। (जैसे file upload)
    • अगर स्क्रीन बदल रही है, तो skeleton loading screen बेहतर है।
    • अगर image मुख्य content है, तो उसके प्रमुख रंग निकालकर blur effect देना बहुत अच्छा हो सकता है।
  • अगर 2 सेकंड ~ 10 सेकंड के बीच हो
    • "लगभग 5 सेकंड लगेंगे" जैसे time indicator प्रभावी हो सकते हैं।
    • progress bar हमेशा एक अच्छा विकल्प है।
    • अगर प्रक्रिया कुछ चरणों में बनी है, तो उन चरणों को दिखाना भी एक तरीका है।
      • अगर स्पष्ट चरण नहीं भी हों, तो सामान्य messages इस्तेमाल किए जा सकते हैं। (जैसे server से कनेक्ट किया जा रहा है)
  • अगर 10 सेकंड से अधिक लगें
    • अगर progress स्पष्ट रूप से पता चल सकता है, तो percent और remaining time आदि दिखाना अच्छा है। (जैसे file upload का 50%)
      • लेकिन 99% पर अटक जाना बहुत घातक है, इसलिए अगर ऐसी स्थिति हो सकती है तो कोई दूसरा तरीका अपनाना चाहिए।
    • अगर और अधिक समय लगे और progress स्पष्ट न हो, तो यह बताना अच्छा है कि काम पूरा होने पर email आदि से सूचित किया जाएगा, और यूज़र को नियंत्रण देना चाहिए।
    • यह भी अच्छा है कि काम background में चलता रहे और यूज़र की किसी भी कार्रवाई में बाधा न डाले। (जैसे Google Drive में upload progress status)

[thenewseason]

अच्छा लेख, धन्यवाद।

• जो अनुरोध तुरंत प्रोसेस हो जाते हैं, उनमें भी कुछ मामलों में थोड़ी देर के लिए loading दिखाना बेहतर होता है।
• 0.1~1 सेकंड के लिए loading न दिखाना बेहतर है.
  . मैं 250ms तक तो नहीं दिखाता, लेकिन इसे 1 सेकंड तक बढ़ाना ठीक रहेगा या नहीं, यह पक्का नहीं कह सकता।
• 1 सेकंड से ज़्यादा होने पर, अगर स्क्रीन बदल रही हो तो skeleton, नहीं तो spinner इस्तेमाल करें

[rlwnd1104]

ओह, मैं भी loading screen के लिए आधार ढूंढ रहा था! धन्यवाद हाहा

[kuroneko]

• HN थ्रेड

लगता है सारांश थोड़ा ज़्यादा लंबा हो गया... खैर, इसमें काफ़ी अच्छी बातें थीं, इसलिए जितना हो सका उतना लेकर आया हूँ।

यह बात दिलचस्प लगी कि नकली लोडिंग स्क्रीन होने पर भरोसेमंदी और बढ़ जाती है। Hacker News की तरफ़ भी इस विषय पर काफ़ी चर्चा हुई थी.