web design uiMay 1, 202610 min read

एंटी-डैशबोर्ड

ज़्यादातर डैशबोर्ड डेटा के कब्रिस्तान हैं, जिन्हें चुनाव से डरने वाली टीमें बनाती हैं। एंटी-डैशबोर्ड अपनी राय रखता है, एक्शन को पहले रखता है और सिर्फ़ एक सवाल का जवाब देता है। देखिए यह कैसा दिखता है।

By Boone
XLinkedIn
the anti dashboard

ज़्यादातर डैशबोर्ड डेटा के कब्रिस्तान हैं। बारह विजेट, आठ पैलेट, चार टाइम होराइज़न, और इस बारे में शून्य राय कि यूज़र को सबसे पहले क्या देखना चाहिए। टीम ने इसे डेटा-ड्रिवन कहा और शिप कर दिया। यूज़र इसे एक बार खोलता है, अजनबी की तरह नज़र दौड़ाता है, और फिर कभी नहीं खोलता।

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

डैशबोर्ड फ़ैसले हैं, डेटा नहीं

डैशबोर्ड नंबर जमा करने की जगह नहीं है। यह फ़ैसले लेने की जगह है। अगर स्क्रीन "अब मुझे क्या करना चाहिए" का जवाब नहीं देती, तो वह ऊपर से चार्ट लाइब्रेरी चिपकाई हुई सजावट है।

ज़्यादातर प्रोडक्ट टीमें इस सवाल को टाल देती हैं, क्योंकि जवाब देने के लिए राय चाहिए। विजेट की दीवार में बुफ़े जैसी सुरक्षा है। हर मेट्रिक शिप करने पर कोई दोषी नहीं ठहराता, दोष सिर्फ़ एक चुनने पर मिलता है। तो टीम कुछ नहीं चुनती, और कीमत यूज़र अपने ध्यान से चुकाता है।

Linear का इनबॉक्स हर इश्यू एक साथ नहीं परोसता। वह पहले प्राथमिकता से, फिर SLA से सॉर्ट करता है, और स्क्रीन इतनी छोटी है कि सचमुच साफ़ की जा सके। Vercel का प्रोजेक्ट व्यू फ़ोल्ड के ऊपर 20 चीज़ें नहीं दिखाता। वह डिप्लॉय टाइमलाइन और URL दिखाता है, और डेवलपर यही तो पूछ रहा होता है। दोनों टीमों ने एक पक्ष चुना।

Voxel फ्रेमवर्क डायग्राम: एक पेडेस्टल पर कोरल रंग का एक प्रश्नचिह्न, जो एक सियान एक्शन बटन में जा रहा है, और चार फीके ग्रे विजेट फ्रेम के किनारों पर धकेले गए हैं
Voxel फ्रेमवर्क डायग्राम: एक पेडेस्टल पर कोरल रंग का एक प्रश्नचिह्न, जो एक सियान एक्शन बटन में जा रहा है, और चार फीके ग्रे विजेट फ्रेम के किनारों पर धकेले गए हैं

विफलता के पाँच तरीके

जो भी डैशबोर्ड "अब मैं क्या करूँ" की परीक्षा में फ़ेल होता है, वह पाँच पहचाने जाने वाले तरीकों में से किसी एक से फ़ेल होता है। हर एक आज भी प्रोडक्शन में चल रहा है।

Salesforce का कब्रिस्तान। बारह विजेट जिन्हें कोई नहीं खोलता, 4x3 ग्रिड में, क्योंकि वायरफ़्रेम पर यही फ़िट हुआ था। वे इसलिए हैं कि किसी ने एक बार माँगा था और किसी के पास एक भी हटाने का अधिकार नहीं था। जो ध्यान किसी एक चीज़ को मिलता है, वह बाकी सबसे चुराया हुआ है।

मेट्रिक कैरोसेल। एक क्षैतिज पट्टी में छह KPI, हर एक में नंबर, प्रतिशत और नन्हा स्पार्कलाइन। न संदर्भ, न तुलना, न सुझाया गया एक्शन। यूज़र को धुंधला सा लगता है कि वह जानकार है, और वह किसी पर अमल नहीं करता।

सॉरोन की आँख वाला व्यू। हर इवेंट, हर लॉग लाइन, हर वेबहुक, रियल टाइम में, स्क्रॉल होता हुआ। कुछ भी हाइलाइट नहीं, सब धुँधला। प्राथमिकता के बिना रियल-टाइम डेटा घड़ी पर चलता शोर है।

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

एग्ज़ीक्यूटिव वैनिटी डैशबोर्ड। नंबर बढ़ते हैं, हर चार्ट हरा है, हर तिमाही ट्रैक पर है। कोई फ़ैसला नहीं होता क्योंकि ज़रूरत ही नहीं। डैशबोर्ड बस इसलिए है कि बोर्ड डेक में उसका स्क्रीनशॉट लगे।

Voxel एंटी-पैटर्न ग्रिड: चार लेबल वाली टाइलें, GRAVEYARD में बारह नन्हे विजेट, CAROUSEL में बार्स की पट्टी, SAURON में फ़ीड की लकीरों की बाढ़, और ASSEMBLE में बिखरे ढीले voxel टुकड़े
Voxel एंटी-पैटर्न ग्रिड: चार लेबल वाली टाइलें, GRAVEYARD में बारह नन्हे विजेट, CAROUSEL में बार्स की पट्टी, SAURON में फ़ीड की लकीरों की बाढ़, और ASSEMBLE में बिखरे ढीले voxel टुकड़े

बढ़िया डैशबोर्ड एक सवाल का जवाब देता है

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

Stripe Dashboard का होम इसका जवाब देता है: "आज बिज़नेस कैसा चल रहा है।" आज की रेवेन्यू, कल से तुलना, और तीन चीज़ें जिन्हें इंसान चाहिए: एक फ़ेल पेमेंट, एक डिस्प्यूट, एक वेरिफ़िकेशन रिक्वेस्ट। बाकी Stripe बस एक क्लिक दूर है।

Cursor का प्रोजेक्ट पेन जवाब देता है: "मैं कहाँ था और क्या कर रहा था।" एक तरफ़ फ़ाइल ट्री, ऊपर आख़िरी प्रॉम्प्ट, बीच में एडिटर। न टेलीमेट्री, न यूसेज चार्ट। स्क्रीन ही काम है।

Cron और Notion Calendar जवाब देते हैं: "आगे क्या है।" अगला इवेंट दिन के ऊपर बैठा है, हफ़्ता उसके नीचे। न अनंत स्क्रॉल, न महीने का हीट मैप जो ध्यान के लिए लड़े। राय यह है कि अगला इवेंट महीने के आकार से ज़्यादा मायने रखता है।

Raycast वाली चाल: डैशबोर्ड का डैशबोर्ड जैसा दिखना ज़रूरी नहीं

Raycast सबसे साफ़ रूप है। सर्च बार ही डैशबोर्ड है। कोई विजेट नहीं, बस एक इनपुट। कुछ अक्षर टाइप करो और सही चीज़ सामने आ जाती है।

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

प्रोग्रेसिव डिस्क्लोज़र इसके नीचे का सिद्धांत है। अभी जो एक चीज़ मायने रखती है, वही दिखाइए। लंबी पूँछ तभी खोलिए जब यूज़र संकेत दे कि उसे चाहिए।

एंटी-डैशबोर्ड के पाँच नियम

ये नियम मिलकर असर करते हैं। पाँच में से चार निभाइए तो डैशबोर्ड आम तौर पर चलता है। दो निभाए तो आपने कब्रिस्तान शिप कर दिया।

नियम 1: प्रति स्क्रीन एक सवाल

हर डैशबोर्ड व्यू ठीक एक सवाल का जवाब देता है। उसे लिख लीजिए। अगर कोई विजेट जवाब के हिस्से के रूप में सही नहीं ठहराया जा सकता, तो वह इस व्यू पर शिप नहीं होता। दूसरे सवालों को दूसरे व्यू मिलते हैं, ऊपर टैब लगाकर वही व्यू नहीं।

Stripe का होम "आज बिज़नेस कैसा है" का जवाब देता है। Vercel का प्रोजेक्ट व्यू "इस डिप्लॉय की हालत क्या है" का। Linear का इनबॉक्स "अभी मेरा ध्यान किस पर चाहिए" का। अलग सवालों के लिए अलग सतहें। कोई भी तीनों बनने की कोशिश नहीं करता।

नियम 2: एक प्राथमिकता सूची, जिसे प्रोडक्ट सॉर्ट करे

स्क्रीन पर एक सूची है, और उसे प्रोडक्ट सॉर्ट करता है। यूज़र नहीं। कोई कस्टमाइज़ होने वाला कॉलम हेडर नहीं। प्रोडक्ट "यूज़र को आगे क्या करना चाहिए" के जवाब के आधार पर क्रम चुनता है। क्रम ही राय है।

Linear प्राथमिकता फिर SLA से सॉर्ट करता है। Stripe Atlas चारों एक्शन कार्ड इस आधार पर सॉर्ट करता है कि अगला बिज़नेस कदम किससे खुलता है। Superhuman VIP और इरादे के संकेत से सॉर्ट करता है, सख़्त उल्टे कालक्रम से नहीं। प्रोडक्ट वह काम कर रहा है जो यूज़र करना नहीं चाहता।

नियम 3: समझदार टाइम होराइज़न, एक बार चुना हुआ

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

ट्रांज़ैक्शनल बिज़नेस के लिए रेवेन्यू डैशबोर्ड का डिफ़ॉल्ट आज होता है। रिटेंशन डैशबोर्ड का इस हफ़्ते। फ़ाइनेंस डैशबोर्ड का इस महीने। जो डैशबोर्ड बिना डिफ़ॉल्ट के खुलता है और डेट पिकर इनपुट का इंतज़ार करता है, वह यूज़र को पहले ही खो चुका है।

नियम 4: हर नंबर एक एक्शन से जुड़ा हो

एक्शन से कटा नंबर सजावट है। एंटी-डैशबोर्ड हर प्रमुख नंबर को अगली चाल का हुक मानता है। आज की रेवेन्यू फ़ेल पेमेंट से जुड़ती है। ओपन इश्यू ट्रायाज क्यू से। डिप्लॉय टाइम बिल्ड लॉग से।

Stripe Atlas का चार-कार्ड लेआउट सबसे साफ़ उदाहरण है। हर कार्ड एक नंबर और एक बटन है। "रेवेन्यू में $0, अपना पेमेंट इंटीग्रेशन सेट करें।" "0 कर्मचारी, अपना पहला हायर करें।" यूज़र कभी ऐसे आँकड़े पर नहीं फँसता जिसके आगे रास्ता न हो।

नियम 5: लंबी पूँछ छिपाइए

एंटी-डैशबोर्ड मानता है कि 80% मेट्रिक 5% यूज़र्स के लिए 5% समय मायने रखते हैं। वे मेट्रिक किसी टैब, "और" लिंक या अलग एनालिटिक्स व्यू के पीछे रहते हैं। होम स्क्रीन सवाल है, इंडेक्स नहीं।

मेट्रिक छिपाना जोखिम भरा लगता है क्योंकि कोई उसी को माँगेगा जो आपने हटाया। इलाज यह है कि उसे ढूँढने लायक बनाइए, दिखाने लायक नहीं। सर्च और समर्पित एनालिटिक्स सतह लंबी पूँछ संभाल लेते हैं।

Voxel डिसीज़न ट्री: पाँच उतरते कार्ड जिन पर ONE QUESTION, ONE LIST, TIME HORIZON, ACTION TIED, HIDE TAIL लिखा है, पतली कोरल कनेक्टर लाइनों से जुड़े
Voxel डिसीज़न ट्री: पाँच उतरते कार्ड जिन पर ONE QUESTION, ONE LIST, TIME HORIZON, ACTION TIED, HIDE TAIL लिखा है, पतली कोरल कनेक्टर लाइनों से जुड़े

देखते ही हटाने लायक एंटी-पैटर्न

ये लगभग हर ऑडिट में मिलते हैं। हर एक इस बात का सुराग है कि टीम राय शिप करने की जगह फ़ीचर्स के पीछे छिप रही है।

हर स्क्रीन पर हर मेट्रिक। रेवेन्यू, रिटेंशन, चर्न, MAU, NPS और CSAT एक फ्रेम में सवाल नहीं, बचाव है। भूमिका-आधारित या टास्क-आधारित व्यू में बाँटिए।

प्रोडक्ट की राय के बदले "कस्टमाइज़ होने वाले विजेट"। "यूज़र अपना डैशबोर्ड खुद कॉन्फ़िगर कर सकते हैं" का अनुवाद करिए: "टीम तय नहीं कर पाई कि क्या मायने रखता है।" जब डिफ़ॉल्ट मज़बूत हों तो कस्टमाइज़ेशन असली फ़ीचर है, और जब न हों तो बहाना।

लाइव एक्टिविटी फ़ीड जिसे कोई नहीं पढ़ता। सिस्टम के हर इवेंट की स्क्रॉल होती सूची। डिबग लॉग के लिए काम की, डैशबोर्ड पर बेकार। डिज़ाइनर्स के लिए डेटा विज़ुअलाइज़ेशन वाला ब्रेकडाउन बताता है कि बिना हायरार्की के रियल-टाइम बस महँगा शोर क्यों है।

वह एम्प्टी स्टेट जो यूज़र से अपना डैशबोर्ड खुद डिज़ाइन करवाता है। "शुरू करने के लिए साइडबार से विजेट खींचें।" प्रोडक्ट पहली ही स्क्रीन पर मान रहा है कि उसकी कोई राय नहीं। एम्प्टी स्टेट ही प्रोडक्ट हैं वाला ब्रेकडाउन बताता है कि पहली स्क्रीन एक्टिवेशन सतह है, होमवर्क नहीं।

वे टैब जो असली जवाब छिपाते हैं। ऊपर छह टैब, सबसे ज़रूरी डेटा तीसरे टैब पर। या तो तीसरा टैब ऊपर लाइए, या मान लीजिए कि पहले और दूसरे टैब उतने ज़रूरी नहीं जितना टीम ने सोचा था।

पहले और बाद, एक फ्रेम में

कब्रिस्तान से एंटी-डैशबोर्ड तक का बदलाव आम तौर पर लेआउट का फ़ैसला होता है, फ़ीचर का नहीं। वही डेटा, सवाल के इर्द-गिर्द रैंक किया हुआ।

Voxel पहले-और-बाद का स्प्लिट फ्रेम: BEFORE में बारह एक जैसे विजेट का घना ग्रिड, AFTER में ऊपर एक विशाल हीरो स्टैट, नीचे तीन एक्शन पंक्तियाँ, और सबसे नीचे दूसरे दर्जे के विजेट का धीमा फ़ुटर
Voxel पहले-और-बाद का स्प्लिट फ्रेम: BEFORE में बारह एक जैसे विजेट का घना ग्रिड, AFTER में ऊपर एक विशाल हीरो स्टैट, नीचे तीन एक्शन पंक्तियाँ, और सबसे नीचे दूसरे दर्जे के विजेट का धीमा फ़ुटर

"पहले" 4x3 का ग्रिड है जहाँ हर खाना ध्यान के लिए लड़ता है। "बाद" में विज़ुअल हायरार्की से स्क्रीन तीन ज़ोन में बँटती है: सवाल से जुड़ा हीरो स्टैट, अगली चाल से जुड़ी छोटी एक्शन सूची, और जिज्ञासु यूज़र के लिए धीमा फ़ुटर। कुछ डिलीट नहीं हुआ, टीम ने बस चुना है कि किन फ़ीचर्स को खास सीट मिलेगी।

डैशबोर्ड ऑडिट

किसी भी प्रोडक्ट डैशबोर्ड को इन सात सवालों से गुज़ारिए। अगर हर एक का साफ़ "हाँ" में जवाब नहीं दे सकते, तो डैशबोर्ड पूरा नहीं हुआ।

  1. यह व्यू कौन सा एक सवाल हल करता है? इसे वाक्य में लिखिए। अगर टीम वाक्य पर सहमत नहीं हो सकती, तो टीम ने अभी डैशबोर्ड डिज़ाइन नहीं किया, विजेट सजाए हैं।
  2. क्या एक एक्शन से जुड़ा एक प्रमुख नंबर है? तीन टकराते आँकड़े नहीं। एक हीरो नंबर, एक साफ़ अगली चाल, बाकी हर तत्व लैंडिंग पेज के हीरो सेक्शन की तरह उसके नीचे रैंक किया हुआ।
  3. क्या प्राथमिकता सूची प्रोडक्ट सॉर्ट करता है, यूज़र नहीं? अगर जवाब है "यूज़र जैसे चाहे सॉर्ट कर सकता है," तो प्रोडक्ट ने पक्ष नहीं चुना। डिफ़ॉल्ट ही राय है।
  4. यह व्यू किस टाइम होराइज़न पर डिफ़ॉल्ट होता है, और क्यों? डिफ़ॉल्ट सवाल से मेल खाना चाहिए। सोचे-समझे डिफ़ॉल्ट के बिना टॉगल इस बात का सुराग है कि टीम ने टाल दिया।
  5. आपने क्या छिपाने का फ़ैसला किया? अगर जवाब "कुछ नहीं" है, तो टीम ने काम नहीं किया। छिपी मेट्रिक राय का सबूत हैं।
  6. क्या एम्प्टी स्टेट प्रोडक्ट को आगे बढ़ाता है, या अटकाता है? अगर वह यूज़र से विजेट कॉन्फ़िगर करवाता है, तो आपने होमवर्क को प्रोडक्ट बनाकर शिप किया है। उसे एक तैयार एक्शन से बदलिए।
  7. अगर नया यूज़र यह स्क्रीन खोले और दूसरी कभी न देखे, तो क्या वह प्रोडक्ट समझ पाएगा? होम व्यू औज़ार जितना ही सेल्स पिच भी है।

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

सही जगह पर घर्षण

एंटी-डैशबोर्ड मिनिमलिज़्म के लिए मिनिमलिज़्म नहीं है। यह सही जगह पर घर्षण है। होम व्यू आसान है, लंबी पूँछ एक क्लिक ज़्यादा कठिन। वह ढलान ही डिज़ाइन है। जानबूझकर घर्षण डिज़ाइन करना वाला ब्रेकडाउन बताता है कि कुछ घर्षण फ़ीचर क्यों होता है।

अक्सर पूछे जाने वाले सवाल

डैशबोर्ड और एंटी-डैशबोर्ड में क्या फ़र्क है?

पारंपरिक डैशबोर्ड हर वह मेट्रिक दिखाने की कोशिश करता है जो यूज़र चाह सकता है। एंटी-डैशबोर्ड एक सवाल का जवाब देता है और हर दिखने वाले नंबर को एक्शन से जोड़ता है। पारंपरिक वर्शन बुफ़े है। एंटी-डैशबोर्ड फ़ैसले की सतह है।

क्या हर प्रोडक्ट डैशबोर्ड में कस्टमाइज़ेशन होना चाहिए?

लगभग किसी प्रोडक्ट डैशबोर्ड को गहरे कस्टमाइज़ेशन की ज़रूरत नहीं। ज़्यादातर टीमें डिफ़ॉल्ट चुनने से बचने के लिए कस्टमाइज़ेशन शिप करती हैं। लगभग हर रिटेंशन माप में मज़बूत डिफ़ॉल्ट, कॉन्फ़िगर होने वाले विजेट से जीतते हैं। कस्टमाइज़ेशन को पावर-यूज़र सतहों के लिए रखिए, होम व्यू के लिए नहीं।

होम स्क्रीन पर डैशबोर्ड को कितने KPI दिखाने चाहिए?

जवाब से जुड़ा एक हीरो स्टैट, और तीन से पाँच सेकेंडरी एक्शन। पाँच के बाद आँख प्राथमिकता का क्रम खो देती है और डैशबोर्ड मेट्रिक कैरोसेल बन जाता है। लंबी पूँछ को गहरी एनालिटिक्स सतह के पीछे छिपाइए।

पक्ष चुनिए, फिर स्क्रीन शिप कीजिए

डैशबोर्ड डिज़ाइन प्रोडक्ट की सबसे कठिन समस्या नहीं है। यह सबसे ज़्यादा टाली जाने वाली है। टीमें महीनों विजेट सजाती रहती हैं क्योंकि एक को दूसरे पर चुनना जोखिम लगता है। एंटी-डैशबोर्ड उसी जोखिम को असली काम मानता है। सवाल चुनिए। प्राथमिकता चुनिए। टाइम होराइज़न चुनिए। चुनिए कि क्या छिपाना है।

2026 में जीतने वाले डैशबोर्ड सबसे ज़्यादा डेटा वाले नहीं हैं। वे सबसे ज़्यादा राय वाले हैं। Linear, Vercel, Stripe, Cursor, Cron, Raycast, GitHub, Notion और Superhuman में एक बात साझा है। उन्होंने पक्ष चुना, और स्क्रीन उस पक्ष को ढोती है।

अगर आप ऐसी टीम चाहते हैं जो प्रोडक्ट डैशबोर्ड को विजेट ग्रिड की जगह फ़ैसले की सतह की तरह डिज़ाइन करे, तो Brainy को हायर कीजिए। हम राय को डिफ़ॉल्ट लेआउट में शिप करते हैं।

Want a dashboard that ships an opinion instead of a wall of widgets? Brainy designs product dashboards that pick a side and earn the screen.

Get Started

More from Brainy Papers

Keep reading