खाली अवस्थाओं में UX फ़ीडबैक
1) खाली राज्य क्या हैं और उनकी क्यों जरूरत है
एक रिक्त अवस्था एक स्क्रीन/विजेट है जहां मुख्य सामग्री अस्थायी रूप से अनुपस्थित है: पहली कार्रवाई से पहले, सफाई के बाद, शून्य परिणाम के साथ, डाउनलोड त्रुटि के साथ, बिना अधिकार/पहुंच के।
रिक्त स्थिति लक्ष्
समझाएं "यह यहाँ क्यों खाली है";
अनुभाग का मूल्य दिखाएं;
एक स्पष्ट अगला चरण सुझाएँ (या चुनने के लिए अधिक)
चिंता कम करें और संवारने से रोकें।
अच्छा खाली अवस्था = संदर्भ + लाभ + क्रिया।
2) खाली राज्य टाइपोलॉजी
1. पहली बार खाली-उपयोगकर्ता ने अभी तक कुछ भी बनाया/कॉन्फ़िगर नहीं किया है।
2. शून्य खोज/फ़िल्टर: क्वेरी ने कोई परिणाम नहीं दिया।
3. अस्थायी शून्य: डाटा लोड किया जा रहा है या कतार चल रही है।
4. प्रतिबंध/सही: कोई पहुंच नहीं, अपर्याप्त सत्यापन स्तर।
5. उपयोगकर्ता क्लीयर: रीसायकल बिन/इतिहास साफ।
6. तकनीकी समस्या: नेटवर्क/सेवा विफलता, रिट्रे।
3) डिजाइन सिद्धांत
प्रासंगिकता: हम शून्यता के एक विशिष्ट कारण के बारे में बात कर रहे हैं।
मूल्य → क्रिया: पहले यह खंड क्यों, फिर क्या करना है।
एक मुख्य सीटीए: यदि आवश्यक हो - माध्यमिक (अधिक/एफएक्यू सीखें)।
संक्षिप्तता और विशिष्टता: 1-2 वाक्य + स्पष्ट बटन।
दृश्य समर्थन: आइकन/चित्रण अर्थ का समर्थन करता है, विचलित नहीं करता है।
मृत सिरों से बचना: हमेशा आगे का एक रास्ता है।
स्वर स्थिरता: दोस्ताना और शांत; महत्वपूर्ण चरणों (भुगतान, सुरक्षा) में कोई मजाक नहीं।
A11y और स्थानीयकरण: स्क्रीन रीडर द्वारा पढ़ ने योग्य, सही ढंग से झुकाव, लाइनों की लंबाई को ध्यान में रखता है।
4) खाली अवस्था फ्रेम (टेम्पलेट)
शीर्षक (वैकल्पिक, 1 पंक्ति) - दावा मूल्य या कारण।
पाठ (1-2 वाक्य) - "खाली क्यों है" + "आगे क्या है।"
प्राथमिक सीटीए मुख्य लक्ष्य कार्रवाई है।
द्वितीयक एसीएस/लिंक - सहायता/नियम/प्रलेखन।
दृश्य (वैकल्पिक) - 24-96 पीएक्स का आसान चित्रण, ओवरलोड न करें।
वाक्यांश टेम्पलेट:5) स्क्रिप्टेड पैटर्न
5. 1 ऑनबोर्डिंग/पहला शून्य
लक्ष्य: पहली सफल कार्रवाई की ओर ले जाएं।
पाठ: "व्यक्तिगत सिफारिशों को देखने के लिए, एक प्रोफ़ाइल भरें और लीड का चयन करें।"
सीटीए: पॉपुलेट प्रोफाइल/लीड्स चुनें।
टिप: एक सूक्ष्म बल/समय संकेतक जोड़ें: "इसमें ~ 1 मिनट लगेगा।"
5. 2 खोज/फ़िल्टर = शून्य परिणाम
उद्देश्य: अनुरोध को समायोजित करने में मदद करें।
पाठ: "कुछ भी नहीं मिला "लाइव लाठी। "कोशिश करें "लाठी" या "प्रदाता: एक्स "फ़िल्टर" को हटा दें
सीटीए: "रीसेट फ़िल्टर" माध्यमिक: "ओपन डायरेक्टरी"।
5. 3 भुगतान/बटुआ खाली
उद्देश्य: विधि जोड ़/पहले पुनः पूर्ति को उत्तेजित करना।
पाठ: "अपने भुगतान विधि को सहेजें - रिफिल और निकासी तेजी से चलेगी।"
सीटीए: "भुगतान विधि जोड़ें" माध्यमिक: "नियम और शुल्क।"
5. 4 सत्यापन/पहुंच
उद्देश्य: पारदर्शी रूप से प्रतिबंध और वापसी मार्ग की व्याख्या
पाठ: "यह खंड पहचान पुष्टि के बाद उपलब्ध है। आमतौर पर इसमें 2 मिनट तक का समय लगता है"
CTA: "सत्यापित हो जाओ" माध्यमिक: "यह आवश्यक क्यों है?"
5. पारगमन/अस्थायी शून्य में 5 डेटा
लक्ष्य: चिंता की प्रतीक्षा को कम करने के लि
पाठ: "अपना डेटा एकत्र कर रहा है। इसमें आमतौर पर 30 सेकंड तक का समय लगता है। आप एक पृष्ठ छोड़ सकते हैं - हम आपको सूचित करेंगे जब सब कुछ तैयार होगा"
सीटीए: "समझने योग्य" माध्यमिक: "आगे क्या होता है?"
5. 6 सफाई/हटाने के बाद
लक्ष्य कार्रवाई की पुष्टि करना और अगले कदम का सुझाव देना है।
पाठ: "इतिहास साफ हो गया। अगले रिफिल के बाद नए लेनदेन दिखाई देंगे"
सीटीए: "टॉप अप।"
5. 7 त्रुटि/पुनरावृत्ति
लक्ष्य: वसूली का एक स्पष्ट रास्ता।
पाठ: "डाटा लोड करने में विफल. अपना नेटवर्क जाँचें या फिर कोशिश करें"
सीटीए: "दोहराएं" माध्यमिक: "सिस्टम स्थिति।"
6) माइक्रोटेक्स: रेडी-मेड टेम्पलेट्स
पहला शून्य (निर्देशिका/पसंदीदा):- "चयनित खेल यहाँ दिखाई देंगे जब आप पहला जोड़ेंगे। [पसंदीदा में जोड़ें]"
- "{query}" के लिए कुछ नहीं मिला। निवेदन को परिष्कृत करें या फिल्टर रीसेट करें। [फिल्टर रीसेट करें]"
- "आपके पास अभी तक कोई सहेजे गए तरीके नहीं हैं। अपने भुगतान को गति देने के लिए एक कार्ड या बटुआ जोड़ें। [विधि जोड़ें]"
- "आयु की पुष्टि के बिना सुविधा उपलब्ध नहीं है। ~ 2 मिनट लगेंगे। [उम्र की पुष्टि करें] [क्यों?]"
- "हम पिछले 24 घंटों के आंकड़ों की गिनती कर रहे हैं... यह आमतौर पर 30 सेकंड तक होता है। हम आपको एक अधिसूचना दिखाएंगे जब आप किया जाएगा"
- "सेवा अनुपलब्ध है। हम पहले से ही मरम्मत कर रहे हैं। कृपया बाद में कोशिश करें या स्थिति की जाँच करें। [दोहराएँ] [सिस्टम स्थिति]"
7) दृश्य भाषा और चित्र
सीटीए के साथ बहस करने से बचने के लिए हल्के मोनोक्रोम/टू-टोन चित्र का उपयोग करें।
आयाम और इंडेंट - एक सामग्री कार्ड (दृश्य स्थिरता) की तरह।
तनावपूर्ण परिदृश्यों (भुगतान/सुरक्षा) में विनोदी दृश्यों को चित्रित न करें।
8) स्थानीयकरण और उपलब्धता
लाइनों की लंबाई के लिए स्टॉक रखें (DE/TR लंबा)।
स्थानीय स्तर पर संख्यात्मक प्रारूपों, मुद्रा, तारीखों का अनुवाद करें
स्क्रीन पाठकों के लिए: रोल = "स्थिति, आरिया-लाइव =" विनम्र/मुखर "गतिशीलता के लिए।
केवल छवि में अर्थ न रखें: पाठ के साथ डुप्लिकेट करें।
320 px readability और WCAG कंट्रास्ट के लिए जाँच करें।
9) मेट्रिक्स और प्रयोग
कुंजी मेट्रिक्स:- मुख्य खाली सीटीए पर सीटीआर;
- "पहली सफलता" (सक्रियण घटना) में रूपांतरण;
- पहली क्रिया का समय
- प्रगति के बिना स्क्रीन पर वापसी की आवृत्ति;
- शून्य खोज परिणामों का प्रतिशत
- परिदृश्य समर्थन के लिए कहता है।
- एक विशिष्ट बनाम सामान्य हेडर;
- CTA क्रिया क्रिया बनाम तटस्थ;
- समय अनुमान जोड़ ना
- एक माध्यमिक सीटीए (एफएक्यू) की उपस्थिति और बटन का क्रम;
- दृश्य के बिना चित्रण बनाम आइकन बनाम।
10) एंटी-पैटर्न
स्पष्टीकरण या कदम के बिना "यहाँ खाली है"।
महत्वपूर्ण चरणों में चुटकुले (भुगतान, सुरक्षा)।
संदर्भ के बिना एक और सीटीए सीखें।
निष्क्रिय ग्रहणी: "जोड़ाजाना चाहिए। "सक्रिय रूप से लिखें: "जोड़ें.."
लंबे पैराग्राफ: 1-2 वाक्य अधिकतम।
रूपों में लेबल के बजाय प्लेसहोल्डर - बिगड़ जाता है - और समझ।
छिपी हुई बाधाएं ("तात्कालिक", हालांकि देरी संभव है)।
11) प्री-रिलीज़चेकलिस्ट
- यह स्पष्ट है कि यह खाली क्यों है?
- क्या एक वाक्य में अनुभाग का मूल्य है?
- क्या एक मुख्य सीटीए है और यदि आवश्यक हो, तो एक माध्यमिक है?
- क्या पाठ छोटा (≤ 140 वर्ण) और विशिष्ट है?
- यदि उपयुक्त हो तो अतिरिक्त समय/प्रयास का अनुमान लगा
- टोन स्क्रिप्ट (शांत/सहायक) से मेल खाता है?
- स्थानीयकरण और A11y जाँच की गई (आरिया विशेषताएँ, कंट्रास्ट)?
- छवि सीटीए पर हावी नहीं है?
12) उदाहरणों से पहले/बाद में
खेल कैटलॉग (पहला शून्य)
इससे पहले: "अभी तक यहाँ कुछ भी नहीं है"
के बाद: "अपना टेप इकट्ठा करें। 3 पसंदीदा शैलियों का चयन करें - चलो सिफारिश करना शुरू करें। [शैलियों का चयन करें]"
शून्य खोज
इससे पहले: "कुछ नहीं मिला"
बाद में: "उच्च-सीमा रूले" द्वारा कोई परिणाम नहीं हैं। "हाई-लिमिट" फ़िल्टर निकालें या कोशिश करें "रूले। "[फिल्टर रीसेट करें]"
भुगतान
इससे पहले: "कोई भुगतान विधियाँ नहीं"
बाद में: "अपने कार्ड या बटुए को बचाएं - पुनः पूर्ति और वापसी तेज हो जाएगी। [विधि जोड़ें] [शुल्क और शर्तें]"
सत्यापन
इससे पहले: "कोई पहुंच नहीं"
के बाद: "पहचान की पुष्टि के बाद अनुभाग उपलब्ध है। ~ 2 मिनट लगते हैं। [सत्यापित हो] [यह क्यों मायने रखता है]"
13) एक डिजाइन प्रणाली में एम्बेडिंग
UI किट में प्रॉप्स के साथ State घटक जोड़ें:- 'शीर्षक' (स्ट्रिंग, वैकल्पिक)
- 'बॉडी' (लघु पाठ 1-2 वाक्य)
- 'primaryaction {लेबल, onClick}'
- 'सेकंडरी एक्शन {लेबल, href/onClick}'
- 'आइकन/चित्रण' (वैकल्पिक)
घटक के बगल में i18n फ़ाइलों में ग्रंथों को संग्रहीत करें, कुंजियों और विवरणों को बनाए रखें, टोन-मैप (स्थितियों के लिए टोन और लेक्सिकॉन) को जोड़ें।
14) त्वरित निर्माता (प्रतिलिपि और उपयोग)
पैटर्न 1 - पहला शून्य:- शीर्षक: "पहले चरण के साथ शुरू करें"
- पाठ: "जैसे ही आप रुचियों का चयन करेंगे, यहां सिफारिशें होंगी।"
- सीटीए: "लीड्स का चयन करें"
- द्वितीयक: "यह कैसे काम करता है?"
- पाठ: "{query}" द्वारा कुछ नहीं मिला। फ़िल्टर रीसेट करें या क्वेरी को परिष्कृत करें"
- सीटीए: "रीसेट फ़िल्टर"
- द्वितीयक: "कैटलॉग"
- पाठ: "उम्र की पुष्टि के बाद उपलब्ध सुविधा। यह आमतौर पर 2 मिनट तक होता है"
- सीटीए: 'उम्र की पुष्टि करें'
- द्वितीयक: "यह आवश्यक क्यों है?"
- पाठ: "हम दिन के लिए डेटा एकत्र करते हैं। यह आमतौर पर 30 सेकंड तक होता है। हम आपको बताएंगे कि यह कब किया जाएगा"
- सीटीए: "अच्छा"
फाइनल धोखा शीट
संदर्भ + मान + क्रिया - एक "स्टैक" में।
दृश्य वजन में कोई प्रतिस्पर्धा नहीं के साथ एक मुख्य सीटीए।
लघु और विशिष्ट: 1-2 वाक्य।
हमेशा गतिरोध से बाहर निकलने का रास्ता: कोई मृत-अंत स्क्रीन नहीं।
स्थानीयकरण और A11y घटक स्तर पर हैं।