वेबसाइट और मोबाइल ऐप्स के लिए खाली राज्य पृष्ठ कैसे डिज़ाइन करें
खाली राज्य पृष्ठ उपयोगकर्ता अनुभव में महत्वपूर्ण भूमिका के साथ कम ज्ञात डिजाइन तत्व हैं। अपने सरलतम रूप में, खाली राज्य हैं जब उपयोगकर्ता पहली बार किसी ऐसे पृष्ठ पर जाते हैं, जहां कोई सामग्री उपलब्ध नहीं होती है, तो पृष्ठ लेआउट देखे जाते हैं.
इसमें मोबाइल एप्लिकेशन, सामाजिक नेटवर्क या यहां तक कि खाली ब्लॉग श्रेणियां शामिल हो सकती हैं। उद्देश्य यह है कि एक खाली पृष्ठ वितरित किया जाए की तरह लगता है एक गैर-रिक्त पृष्ठ। आगंतुक चाहिए सामग्री की कमी को आसन्न सामग्री के साधन के रूप में पहचानें.
मैं कवर करना चाहता हूं कि खाली राज्य पृष्ठ कैसे काम करते हैं और वे इतने महत्वपूर्ण क्यों हैं। इंटरफ़ेस डिजाइनरों को इन बिंदुओं पर विचार करना चाहिए और जब भी उपयुक्त हो, उन्हें खाली राज्यों में लागू करने का प्रयास करना चाहिए। लेकिन शुरू करने के लिए आइए देखें कि एक खाली राज्य कैसे कार्य करता है और यह कैसे इंटरफ़ेस को मूल्य प्रदान करता है.
खाली राज्यों का मूल्य
एक महान खाली राज्य डिजाइन की सुंदरता सादगी में है। खाली पन्ने समझाते हैं पृष्ठ पर क्या होना चाहिए एक बार कुछ सामग्री है। यह खाली इनबॉक्स की तरह निष्क्रिय हो सकता है, या यह सक्रिय रूप से खाली ट्विटर फीड की तरह उपयोगकर्ता की प्रतीक्षा कर सकता है.
खाली पृष्ठ उबाऊ, नीरस और भ्रामक भी होते हैं। खाली अवस्थाएँ मार्गदर्शन प्रदान करना उपयोगकर्ताओं को यह समझने में मदद करने के लिए कि वे क्या देख रहे हैं। भले ही यह एक रिक्त पृष्ठ हो, अतिरिक्त संदर्भ मदद करता है.
खाली राज्यों का भी एहसास होता है “ताज़गी” नए खातों के साथ जिनका कोई मौजूदा डेटा नहीं है.
Redditor Bambo_Ocha द्वारा किए गए इस परीक्षण ने खाली राज्य डिजाइनों के लिए 20 अलग-अलग ऐप की जाँच की। विभिन्न डिज़ाइन शैलियाँ CTA बटन, नमूना डेटा और यहां तक कि संक्षिप्त ट्यूटोरियल वॉकथ्रू के साथ हुईं.
उपयोगकर्ताबेस पर पनपने वाले ऐप्स को खाली राज्यों को डिज़ाइन करना चाहिए उपयोगकर्ता गतिविधि को प्रोत्साहित करें. यह गतिविधि सामग्री प्रकाशित करना, मित्रों को जोड़ना, फ़ोटो अपलोड करना या ऐप के लिए जो कुछ भी बनाया गया हो सकता है। तुकापिक से नीचे की स्क्रीन एक बेहतरीन उदाहरण है.
लेकिन खाली राज्य पृष्ठों का मूल्य तब भी होता है, जब कोई कार्रवाई की आवश्यकता नहीं होती है। ये डिज़ाइन मुख्य रूप से जानकारी प्रदान करने के लिए बनाए गए हैं.
स्थैतिक जानकारी बस के रूप में मूल्यवान है और यह खाली राज्य होने के लिए स्वाभाविक रूप से बुरा नहीं है। उदाहरण के लिए यह पेज डिज़ाइन ट्रैकिंग ऐप डैशबोर्ड से कोई वर्तमान मैट्रिक्स नहीं दिखाता है। उपयोगकर्ता कुछ मैट्रिक्स जोड़ना चाहते हैं, लेकिन डैश को खाली छोड़ना बुरा नहीं है.
इसी तरह के स्थिर डिजाइन खाली ब्लॉग अभिलेखागार या खाली संदेश फ़ोल्डर के लिए बहुत अच्छा काम कर सकते हैं। यह पूरी तरह से स्वीकार्य है कि कोई संदेश प्रदर्शित न हो। लेकिन पृष्ठ बिना किसी संदर्भ के पूरी तरह से खाली नहीं होना चाहिए.
महत्वपूर्ण पृष्ठ तत्व
एक खाली राज्य पृष्ठ पर सबसे महत्वपूर्ण तत्व है प्रसंग. यह ग्राफिक्स, टेक्स्ट या दोनों के रूप में आ सकता है। आप उपयोगकर्ताओं को सूचित करना चाहते हैं कि पृष्ठ खाली क्यों है और किस प्रकार का डेटा हो सकता है (ईमेल, ट्वीट, मित्र प्रोफ़ाइल, आदि).
जबकि पाठ वेब पर प्राथमिक संचार माध्यम है, आप ग्राफिक्स और आइकन के मूल्य को नजरअंदाज नहीं कर सकते.
DigitalOcean में एक शानदार डैशबोर्ड है जिसमें खाली राज्य ग्राफिक्स हैं जो स्पष्ट रूप से उनकी बात को स्पष्ट करते हैं। उनकी कंपनी रचनात्मक ब्रांडिंग और स्वच्छ टाइपोग्राफी का उपयोग करती है इसलिए यह कोई आश्चर्य की बात नहीं है कि उनके खाली राज्य पृष्ठ इतने निराशाजनक हैं.
खाली राज्य डिजाइन का एक और महत्वपूर्ण पहलू है कार्रवाई बटन पर कॉल करें. यह आमतौर पर एक बटन की तरह बनाया गया है, हालांकि हाइपरलिंक भी ठीक काम करता है.
लक्ष्य उपयोगकर्ताओं को कार्रवाई करने और उनकी खाली स्थिति को साफ़ करने में मदद करना है। चाहे इसके लिए डेटा जोड़ने या साइट पर कार्रवाई करने की आवश्यकता हो, CTAs उपयोगकर्ताओं को खाली अवस्था को साफ़ करने के लिए आवश्यक अगले चरण पर मार्गदर्शन करते हैं.
ड्रॉपबॉक्स में दो सीटीए बटन के साथ एक शानदार डिजाइन है। जब भी एक ड्रॉपबॉक्स उपयोगकर्ता के पास कोई फ़ोल्डर नहीं होता है, वे या तो एक नया फ़ोल्डर बना सकते हैं या पृष्ठ पर एक नमूना फ़ोल्डर जोड़ सकते हैं.
उपयोगकर्ता गतिविधि को प्रोत्साहित करना
कॉल टू एक्शन बटन सक्रिय तत्व हैं लेकिन याद रखें कि पेज कॉपी बताती है उपयोगकर्ता क्या कर रहा है. कोई भी बिना जाने क्यों बटन पर क्लिक नहीं करता है.
गतिविधि को प्रोत्साहित करने का सबसे अच्छा तरीका है कि आप अपने खाली राज्य पृष्ठ पर शानदार कॉपी लिखें। संपूर्ण प्रवाह पर उपयोगकर्ता गतिविधि को प्रोत्साहित करने वाली सामग्री प्रवाह के माध्यम से उपयोगकर्ताओं को निर्देशित करें.
मोडस्पॉट द्वारा यह खाली राज्य गुणवत्ता डिजाइन और प्रोत्साहन सामग्री का एक शानदार उदाहरण है.
आइकन का उपयोग यह प्रदर्शित करने के लिए किया जाता है कि उपयोगकर्ता को साइट पर क्या जोड़ना चाहिए। बटन उपयोगकर्ताओं के लिए एक तीर बिंदु कुछ पाठ को प्रोत्साहित करने वाले व्यवहार के साथ क्लिक करना चाहिए। यह उन सभी तत्वों के साथ एक शानदार खाली डिज़ाइन है, जिनकी आप अपेक्षा करते हैं.
इसी तरह गमरोड खाली राज्य विभिन्न संभावित कार्यों को लक्षित करने के लिए दो विकल्प प्रदान करता है। उपयोगकर्ता बिक्री शुरू करने के लिए एक डिजिटल उत्पाद या एक भौतिक उत्पाद जोड़ सकते हैं.
पेज पर मौजूद अन्य लिंक गाइड और संपर्क विवरणों में मदद करने के लिए नेतृत्व करते हैं। सब कुछ अविश्वसनीय रूप से सुव्यवस्थित है और अच्छी तरह से एक साथ जुड़ा हुआ है.
वेब बनाम मोबाइल ऐप्स
सभी माध्यमों के लिए खाली राज्य पृष्ठों को समान डिज़ाइन रुझानों का पालन करना चाहिए। लेकिन स्मार्टफोन की तुलना में डेस्कटॉप पर उपयोगकर्ता अनुभव के साथ कुछ मामूली अंतर हैं.
बड़ी स्क्रीन पर वेबसाइट और कमरा है अतिरिक्त बटन के लिए। वेब पेज भी हो सकते हैं बड़े नेविगेशन तत्व जो साइट पर लोगों को कहीं और आकर्षित कर सकता है.
इसे एक समान शैली में हल किया जा सकता है जैसा कि Nusii अपने प्रस्ताव पृष्ठ पर करता है। जहां कोई प्रस्ताव नहीं है उपयोगकर्ता को निर्देशित किया जाता है “प्रस्ताव जोड़ें” शीर्ष नेविगेशन बार में बटन.
मोबाइल एप्लिकेशन में समान समस्याएं हो सकती हैं लेकिन स्क्रीन बहुत छोटी हैं। यह बनाता है कार्रवाई में उपयोगकर्ताओं को आकर्षित करने के लिए बहुत आसान है.
मुझे लगता है कि कम विकल्पों के साथ मोबाइल एप्लिकेशन को सरल रखना सबसे अच्छा है। बहुत विशिष्ट उपयोगकर्ता प्रवाह की ओर कार्रवाई और बिंदु को प्रोत्साहित करने के लिए नेत्र कैंडी के रूप में दृश्यों का उपयोग करें.
खाली राज्य डिजाइन उदाहरण
शायद खाली राज्य डिजाइन के बारे में जानने का सबसे अच्छा तरीका कुछ उदाहरणों का अध्ययन करना है। शानदार वेब गैलरी emptystat.es विभिन्न वेबसाइटों से लेकर मोबाइल एप्लिकेशन तक खाली राज्य पृष्ठों को क्यूरेट करती है.
मैंने आपके ध्यान के योग्य कुछ उदाहरणों को हाथ से उठाया है जो खाली राज्य डिजाइन को सबसे अच्छी तरह से चित्रित करते हैं। यदि आपके पास कोई और सुझाव है तो हमें बेझिझक बताएं.
DigitalOcean फ्लोटिंग आईपी
वेबफ्लो बीटा
Invision
बिट बकेट
कोई पिन किए गए समूह नहीं
फेसबुक संदेश
LayerVault
वर्कआउट की चुनौतियां
बफर खाली
वर्ड ऐप दस्तावेज़
एवरनोट चैट्स
Beamly Android के लिए
श्रव्य ऑडियो पुस्तकें
पॉकेट ऐप
बीबीसी माय न्यूज़
गिटहब विकी पेज
Chrome बुकमार्क प्रबंधक
मैक इनफिनिट ऐप
खाली फेसबुक फीड