पावर यूज़र्स के लिए डिज़ाइन
ज़्यादातर प्रोडक्ट पहली बार आने वाले यूज़र के लिए डिज़ाइन होते हैं और लौटकर आने वाले एक्सपर्ट को छोड़ देते हैं। पावर-यूज़र UX की पाँच परतें, उन्हें थामे रखने वाले नियम, और एक ऑडिट जिससे आप सीधे शुरू कर सकते हैं।
जो यूज़र हर बटन पर क्लिक करता है, वह कब का जा चुका है। जो आपके प्रोडक्ट के अंदर रहता है, वह दिन में बीस बार उसे खोलता है और उसने एक छिपा हुआ इंटरफ़ेस रट रखा है, जिसे शायद आपने डिज़ाइन ही नहीं किया। अगर किसी और के प्रोडक्ट में इससे बेहतर छिपा इंटरफ़ेस है, तो एक्सपर्ट चला गया, और पैसे यही कोहोर्ट देता है।
मेनस्ट्रीम UX फ़र्स्ट-रन और एक्टिवेशन की बातें करता है। एक्सपर्ट इनमें से कुछ भी नहीं देखता। वह आपका प्रोडक्ट आठ सौवीं बार खोलता है, Cmd-K दबाता है, और या तो काम उड़ाता हुआ निकल जाता है या गुस्से में छोड़ देता है क्योंकि आपका पैलेट पाँच बेकार नतीजे दिखाता है। पावर-यूज़र UX दूसरा प्रोडक्ट है, और ज़्यादातर टीमों ने अभी तक इसे शिप ही नहीं किया।
दिखने वाले प्रोडक्ट के पीछे छिपा प्रोडक्ट
हर बेहतरीन प्रोडक्ट के अंदर दो प्रोडक्ट होते हैं। एक दिखने वाला, नए यूज़र के लिए, और एक छिपा हुआ, उस यूज़र के लिए जो पहले से जानता है।
दिखने वाला प्रोडक्ट है बटन, मेन्यू, टूलटिप और टूर। छिपा प्रोडक्ट है कीस्ट्रोक, कमांड पैलेट, सेव्ड व्यूज़, मल्टी-सिलेक्ट और रूट से एड्रेस होने वाली स्टेट। पहला पहले सेशन को समझने लायक बनाता है। दूसरा अगले हज़ार सेशन को तेज़ बनाता है।
Linear दोनों जानबूझकर शिप करता है। नया यूज़र एक साफ़ इनबॉक्स देखता है जिसमें एक स्पष्ट मुख्य एक्शन है। एक्सपर्ट g फिर i दबाकर इनबॉक्स पर कूदता है, c से इश्यू बनाता है, shift-click से मल्टी-सिलेक्ट करता है, और हर सेव्ड व्यू एक शेयर करने लायक URL है। एक ही प्रोडक्ट। दो प्रोडक्ट। दोनों डिज़ाइन किए हुए।
पावर यूज़र वो कोहोर्ट हैं जिन्हें खोना आप बर्दाश्त नहीं कर सकते
पहली बार आने वाला यूज़र शोर मचाता है और एक्सपर्ट चुप रहता है, इसलिए ज़्यादातर टीमें शोर वाले के लिए ऑप्टिमाइज़ करती हैं। पावर यूज़र महीने में ज़्यादा दिन प्रोडक्ट खोलते हैं, हर सीट पर ज़्यादा रेवेन्यू देते हैं, और बाकी सभी कोहोर्ट के मिलाकर से ज़्यादा नए यूज़र लाते हैं। वे सबसे ज़ोर से छोड़कर भी जाते हैं, क्योंकि उन्हें तीन प्रतिस्पर्धी प्रोडक्ट में पता चल चुका है कि तेज़ होना कैसा लगता है।
इसका हल "शॉर्टकट जोड़ दो" नहीं है। हल यह है कि पावर-यूज़र सरफ़ेस को फ़र्स्ट-क्लास प्रोडक्ट मानें, जिसका अपना डिज़ाइन बजट और रोडमैप हो।
पावर-यूज़र UX की पाँच परतें
पावर-यूज़र UX कोई एक फ़ीचर नहीं है। यह पाँच परतें हैं जो मिलकर असर बढ़ाती हैं। ज़्यादातर प्रोडक्ट एक या दो शिप करते हैं। सबसे अच्छे पाँचों शिप करते हैं और परतें एक-दूसरे को मज़बूत करती हैं।
1. कमांड पैलेट
Cmd-K पैलेट सर्च और एक्ट की एकीकृत सतह है। एक कीस्ट्रोक प्रोडक्ट के हर एक्शन, रूट और ऑब्जेक्ट को सामने ले आता है, हाल के और बार-बार इस्तेमाल के हिसाब से रैंक करके। Linear का पैलेट पैमाना है। Raycast ने इसी प्रिमिटिव पर पूरी OS लेयर खड़ी कर दी। Notion, Vercel, GitHub और Slack सभी अपना पैलेट शिप करते हैं।
सच्चा पैलेट एक ही इनपुट में कंटेंट और एक्शन दोनों खोजता है, हर नतीजे के पास कीस्ट्रोक हिंट दिखाता है, और इनलाइन आर्गुमेंट लेता है। "Move issue to in progress" चार क्लिक की चेन की जगह एक कमांड में चलता है। विफलता का रूप है सिर्फ़ सर्च वाला पैलेट: जो बॉक्स डॉक्यूमेंट ढूँढ ले पर एक्शन ट्रिगर न कर सके, वह भ्रम में जीने वाला सर्च बार है। Cmd-K का मकसद है ढूँढो और करो। पैलेट की डिफ़ॉल्ट स्टेट क्यों मायने रखती है, यह खाली स्टेट ही प्रोडक्ट हैं में बताया गया है।
2. फ़र्स्ट-क्लास सिस्टम के रूप में कीबोर्ड शॉर्टकट
शॉर्टकट किसी हेल्प मोडल में छिपी बाइंडिंग की सूची नहीं हैं। वे एक सिस्टम हैं जिसमें खोजे जा सकना, एकरूपता और क्रमिक गहराई है। Superhuman सबसे ऊँचा पैमाना है। हर एक्शन की एक की है, चीटशीट प्रोडक्ट में ही मिलती है, और ऑनबोर्डिंग माउस से पहले कीबोर्ड सिखाती है।
Linear एक लेटर-पेयर सिस्टम चलाता है जो बढ़ता जाता है। पहला अक्षर सरफ़ेस का नाम बताता है (g यानी go), दूसरा मंज़िल का (i इनबॉक्स, p प्रोजेक्ट, m मेरे इश्यू)। यूज़र एक नियम सीखता है और पचास शॉर्टकट खुल जाते हैं। Notion कमांड के लिए स्लैश और पैलेट के लिए Cmd-K देता है। Figma एक-अक्षर वाले टूल देता है (V मूव, R रेक्टैंगल, F फ्रेम, T टेक्स्ट)। Gmail के कीबोर्ड शॉर्टकट बीस साल बाद भी ईमेल के लिए सबसे ऊँचा पैमाना हैं।
सिस्टम ही प्रोडक्ट है। इक्का-दुक्का शॉर्टकट का ढेर सिस्टम नहीं है, वह एक बैकलॉग है जिसे टीम हटाना भूल गई।
3. सेव्ड व्यूज़, फ़िल्टर, बुकमार्क
एक्सपर्ट प्रोडक्ट को अपने वर्कफ़्लो के इर्द-गिर्द ढाल लेता है। Linear के सेव्ड व्यू साइडबार में दिखते हैं, लॉगआउट के बाद भी बचे रहते हैं, URL से शेयर होते हैं और लाइव अपडेट होते हैं। Notion के फ़िल्टर्ड डेटाबेस व्यू कंटेंट के लिए यही करते हैं। Stripe की सेव्ड सर्च वही सटीक फ़िल्टर रखती है जो गड़बड़ियाँ पकड़ता है। Vercel हर बुकमार्क के साथ टीम और प्रोजेक्ट पिन करता है ताकि सही डैशबोर्ड एक कीस्ट्रोक दूर रहे।
जो बात टल नहीं सकती: सेव्ड स्टेट एड्रेस होने लायक होनी चाहिए। हर सेव्ड व्यू का एक URL हो जो लॉगआउट, डिवाइस बदलने और टीममेट को शेयर करने के बाद भी चले। जो स्टेट सिर्फ़ localStorage में रहती है, वह तभी गायब हो जाती है जब यूज़र दूसरे लैपटॉप पर प्रोडक्ट खोलता है।
4. बल्क ऑपरेशन
एक्सपर्ट दिन में सौ ऑब्जेक्ट छूता है। प्रोडक्ट या तो इसे सपोर्ट करता है या इसकी सज़ा देता है। Linear का shift-click से मल्टी-सिलेक्ट और फिर B से बल्क अपडेट कैनोनिकल है। Notion के डेटाबेस पर मल्टी-सिलेक्ट आपको तीस पंक्तियों का स्टेटस, असाइनी और टैग एक ही चाल में बदलने देता है। Gmail के शॉर्टकट और shift-J की वजह से ही बड़े पैमाने पर इनबॉक्स झेलने लायक रहता है।
बल्क ऑपरेशन में तीन गुण चाहिए। सिलेक्शन साफ़ दिखे। एक्शन कीबोर्ड से पहुँच में हो। अनडू असली हो। राइट-क्लिक मेन्यू के पीछे का बल्क एक्शन वह बल्क एक्शन है जिसे आप इस्तेमाल नहीं करेंगे, और एक-कीस्ट्रोक अनडू के बिना बल्क एक्शन पहली बार गड़बड़ होते ही भरोसा तोड़ देता है।
5. सिर्फ़ पावर यूज़र के सरफ़ेस
कुछ सरफ़ेस सिर्फ़ एक्सपर्ट के लिए होते हैं। Figma API कंसोल, Raycast एक्सटेंशन लाइब्रेरी, Notion डेटाबेस एडमिन व्यू, Vercel CLI, Cron और Notion Calendar की सिर्फ़-कीबोर्ड टाइम-ब्लॉक लेयर। यह वही गहराई की परत है जिसके अंदर एक्सपर्ट रहता है।
Raycast सबसे साफ़ रूप है। बेस प्रोडक्ट एक कमांड पैलेट है। एक्सपर्ट एक्सटेंशन और कस्टम स्क्रिप्ट इंस्टॉल करता है जो पैलेट को निजी OS लेयर बना देते हैं। Notion के डेटाबेस भी यही आकार रखते हैं: शुरुआती को एक सूची दिखती है, एक्सपर्ट को रोलअप और फ़ॉर्मूला वाला रिलेशनल डेटा मॉडल।
पैटर्न है क्रमिक गहराई। प्रोग्रेसिव डिस्क्लोज़र का सिद्धांत ही आधार-विचार है: गहराई एक कीस्ट्रोक दूर रहती है, होम स्क्रीन पर नहीं।
कमांड पैलेट के अंदर
Cmd-K पैलेट सबसे अहम पावर-यूज़र सरफ़ेस है, और ज़्यादातर टीमें कमज़ोर पैलेट शिप करती हैं। पाँच तत्व मज़बूत पैलेट को वेश बदले सर्च बार से अलग करते हैं।
बढ़िया पैलेट नतीजों को हाल के और बार-बार इस्तेमाल से रैंक करता है, हर नतीजे के पास कीस्ट्रोक हिंट दिखाता है, इनलाइन आर्गुमेंट लेता है, संदर्भ तक सीमित रहता है, और एक Esc से बंद हो जाता है। Linear का पाँचों करता है। Raycast पाँचों करता है और पैलेट को पूरा प्रोडक्ट बना देता है। ज़्यादातर पैलेट दो करते हैं, और यूज़र उन्हें अनदेखा करना सीख लेता है।
पावर-यूज़र UX डिज़ाइन करने के पाँच नियम
पाँच नियम असली पावर-यूज़र सरफ़ेस को हेल्प फ़ुटर में फेंकी गई शॉर्टकट सूची से अलग करते हैं। चार पूरे करें तो सरफ़ेस आमतौर पर काम करता है। दो पूरे करें तो एक्सपर्ट चला जाता है।
- हर एक्शन की एक की हो। अगर यूज़र माउस से कर सकता है, तो कीबोर्ड से भी कर पाए।
- कीज़ को दिखाए बिना सामने लाएँ। पैलेट में, टूलटिप में, मेन्यू की पंक्तियों में कीस्ट्रोक हिंट। शॉर्टकट उसी पल दिखे जब यूज़र माउस की ओर हाथ बढ़ाए, किसी सेटिंग पेज में दबा न हो।
- मल्टी-सिलेक्ट साफ़ दिखे। दिखने वाले चेकबॉक्स या स्पष्ट shift-click पैटर्न। जिस बल्क एक्शन का यूज़र को पता ही नहीं, वह बल्क एक्शन है ही नहीं।
- सेव्ड स्टेट एड्रेस होने लायक हो। URL-आधारित, टिकाऊ, शेयर करने लायक। जो स्टेट सिर्फ़ ब्राउज़र में रहती है, वह गायब हो जाती है।
- पावर सरफ़ेस एक कीस्ट्रोक दूर रहे। Cmd-K, स्लैश या एक अक्षर। अगर एक्सपर्ट को वहाँ नेविगेट करके जाना पड़े, तो वह फ़ीचर पेज है, पावर सरफ़ेस नहीं।
जो प्रोडक्ट पाँच में से चार पूरे करता है, वह एक्सपर्ट के हाथों में जीवित लगता है। जो दो करता है, वह ऐसी वेबसाइट लगता है जिसमें कुछ कीबोर्ड ट्रिक ऊपर से ठोक दी गई हों।
वे एंटी-पैटर्न जो बताते हैं कि टीम एक्सपर्ट को भूल गई
पाँच पैटर्न बाकी सबसे ज़्यादा पावर-यूज़र सरफ़ेस को मारते हैं।
ब्राउज़र से टकराने वाले शॉर्टकट। वेबऐप के अंदर Ctrl-W या Ctrl-T को दोबारा बाइंड करने से टैब बंद हो जाता है और यूज़र का बिना सेव किया काम चला जाता है। इसकी जगह Cmd-K के अंदर नेमस्पेस बनाएँ।
सिर्फ़ तीन क्लिक गहरे हेल्प मोडल में दर्ज शॉर्टकट। Settings, Help, Keyboard Shortcuts के पीछे की चीटशीट वह है जिसे यूज़र कभी नहीं देखेगा। कीज़ को एक्शन के पल पर सामने लाएँ। Superhuman चीटशीट को फ़र्स्ट-क्लास स्क्रीन के रूप में देता है। ज़्यादातर प्रोडक्ट इसे फ़ुटर लिंक बनाकर देते हैं जिसे कोई क्लिक न करे तो अच्छा।
राइट-क्लिक माँगने वाला मल्टी-सिलेक्ट। कॉन्टेक्स्ट मेन्यू के अंदर का बल्क एक्शन चेंजलॉग के लिए होता है, यूज़र के लिए नहीं।
बुनियादी शॉर्टकट पर Pro-टियर पेवॉल। कुछ प्रोडक्ट कीबोर्ड शॉर्टकट, पैलेट या सेव्ड व्यूज़ को "Pro" प्लान के पीछे बंद कर देते हैं। शॉर्टकट फ़ीचर नहीं है, वह तरीका है जिससे फ़ीचर इस्तेमाल होता है। उसे बंद करना खुद प्रोडक्ट को बंद करना है।
लॉगआउट के बाद गायब होने वाले सेव्ड व्यू। जो फ़िल्टर सिर्फ़ localStorage में रहता है, वह यूज़र के दूसरे डिवाइस पर प्रोडक्ट खोलते ही मिट जाता है। सर्वर पर सहेजें, यूज़र से जोड़ें, और URL को उसे ढोने दें।
पावर-यूज़र ऑडिट
किसी भी प्रोडक्ट को इन सात सवालों से गुज़ारें। दो या ज़्यादा में फेल हुए तो तिमाही ख़त्म होते-होते एक्सपर्ट किसी और के प्रोडक्ट पर होगा।
- क्या हर मुख्य एक्शन का कीबोर्ड शॉर्टकट है? शीर्ष बीस एक्शन की सूची बनाकर जाँचें। अगर तीन से ज़्यादा में माउस चाहिए, तो कीबोर्ड लेयर अधूरी है।
- क्या कोई Cmd-K पैलेट है जो खोजता भी है और करता भी है? सर्च बार नहीं। ऐसा पैलेट जो कमांड चलाए, आर्गुमेंट ले और शॉर्टकट हिंट दिखाए।
- क्या शॉर्टकट संदर्भ में खोजे जा सकते हैं? टूलटिप, पैलेट हिंट, मेन्यू लेबल। यूज़र को शॉर्टकट एक्शन करते हुए सीखना चाहिए, डॉक्स पढ़कर नहीं।
- क्या मल्टी-सिलेक्ट कीबोर्ड से चलता है, साफ़ अनडू के साथ? Shift-click, फिर कीस्ट्रोक एक्शन, फिर एक-की अनडू। कोई भी कड़ी गायब हो तो चेन टूट जाती है।
- क्या सेव्ड व्यू URL से एड्रेस होने लायक और टिकाऊ हैं? URL कॉपी करें, दूसरे ब्राउज़र में पेस्ट करें, लॉग इन करें। अगर व्यू लोड नहीं होता, तो सेव्ड स्टेट नाटक है।
- क्या पावर सरफ़ेस कहीं से भी एक कीस्ट्रोक दूर हैं? कंसोल, API सरफ़ेस, एक्सटेंशन लाइब्रेरी। अगर एक्सपर्ट को पहुँचने के लिए नेविगेट करना पड़े, तो वे फ़ीचर पेज हैं, पावर सरफ़ेस नहीं।
- क्या प्रोडक्ट कीबोर्ड को फ़र्स्ट-क्लास नागरिक मानता है? ब्राउज़र से टकराने वाले शॉर्टकट नहीं। पेवॉल वाले शॉर्टकट नहीं। सिर्फ़-माउस वाले बल्क एक्शन नहीं।
जो प्रोडक्ट सातों पास करता है, वह डिफ़ॉल्ट रूप से एक्सपर्ट को रोक लेता है। जो तीन या ज़्यादा में फेल होता है, वह उसे Linear, Raycast या उस प्रतिस्पर्धी के हाथों खो देता है जिसने दूसरा प्रोडक्ट जानबूझकर शिप किया। एंटी-डैशबोर्ड इसी अनुशासन का लेआउट वाला पक्ष है, और विज़ुअल हायरार्की वाला लेख बताता है कि एक्सपर्ट घनत्व को कैसे पढ़ता है।
यह प्रोडक्ट में कहाँ फ़िट बैठता है
पावर-यूज़र UX फ़र्स्ट-रन UX का जोड़ीदार है। बिना ऑनबोर्डिंग की ऑनबोर्डिंग उस यूज़र को संभालती है जिसने प्रोडक्ट कभी नहीं देखा। यह लेख उस यूज़र को संभालता है जिसने उसे नौ सौ बार देखा है। जानबूझकर फ्रिक्शन डिज़ाइन करना का विचार यहाँ उल्टा लागू होता है: नए यूज़र के लिए सही पल पर फ्रिक्शन प्रोडक्ट सिखाता है। एक्सपर्ट के लिए हर गैरज़रूरी फ्रिक्शन एक टैक्स है। लैंडिंग पेज डिज़ाइन के सिद्धांत और वेब डिज़ाइन के सिद्धांत इसी अनुशासन के मार्केटिंग-पेज और पूरे-प्रोडक्ट वाले रूप बताते हैं।
छिपा प्रोडक्ट जानबूझकर बनाइए
दिखने वाले प्रोडक्ट को लॉन्च पोस्ट और डेमो वीडियो मिलता है। छिपे प्रोडक्ट को रिन्यूअल और माउथ-टू-माउथ मिलता है। Linear, Raycast, Superhuman, Notion, Cron, Figma, Gmail, Vercel, Slack, GitHub, Stripe और Cursor में एक गुण साझा है। उन्होंने उस यूज़र के लिए असली दूसरा प्रोडक्ट शिप किया जो पहले से जानता है।
ज़्यादातर टीमें पहला प्रोडक्ट शिप करती हैं और दूसरे को संयोग से होने देती हैं। यही वह चुनाव है जिसकी कीमत एक्सपर्ट चुकाता है। कीबोर्ड लेयर चुनिए। पैलेट चुनिए। सेव्ड-व्यू सिस्टम चुनिए। बल्क एक्शन चुनिए। पावर सरफ़ेस चुनिए। चक्रवृद्धि असर ही उस प्रोडक्ट के बीच का फ़र्क है जिसे एक्सपर्ट सहता है और उसके जिसका वह प्रचार करता है।
FAQ
पावर-यूज़र UX क्या है?
पावर-यूज़र UX वह डिज़ाइन परत है जो उस यूज़र को ध्यान में रखती है जो प्रोडक्ट को पहले से जानता है। इसमें कमांड पैलेट, कीबोर्ड लेयर, सेव्ड व्यू और फ़िल्टर, बल्क ऑपरेशन और सिर्फ़ पावर यूज़र के सरफ़ेस आते हैं। नए यूज़र को इसकी ज़रूरत नहीं। एक्सपर्ट इसके अंदर रहता है।
क्या हर प्रोडक्ट में Cmd-K कमांड पैलेट होना चाहिए?
लगभग हर प्रोडक्टिविटी प्रोडक्ट में होना चाहिए। पैलेट सर्च और एक्ट की एकीकृत सतह बन जाता है और एक्सपर्ट को एक कीस्ट्रोक देता है जो हर एक्शन खोलता है। Linear, Raycast, Notion, Vercel, GitHub और Slack सभी एक शिप करते हैं। जिन कंज़्यूमर प्रोडक्ट में एक ही मुख्य एक्शन है, वे इसे छोड़ सकते हैं। ज़्यादातर B2B और प्रोज़्यूमर टूल नहीं छोड़ सकते।
बिना टूर के कीबोर्ड शॉर्टकट कैसे सिखाएँ?
शॉर्टकट को हर बार एक्शन के पास दिखाएँ। टूलटिप हिंट, पैलेट हिंट, मेन्यू लेबल। Superhuman चीटशीट को ऐसी फ़र्स्ट-क्लास स्क्रीन के रूप में देता है जिसे यूज़र बुला सकता है। Linear हर शॉर्टकट पैलेट और मेन्यू में दिखाता है। यूज़र काम करते-करते कीबोर्ड सीख लेता है।
दूसरा प्रोडक्ट शिप कीजिए
अगर आप ऐसी टीम चाहते हैं जो कीबोर्ड लेयर, कमांड पैलेट और सेव्ड-स्टेट सिस्टम को अंत की सफ़ाई की जगह प्रोडक्ट के हिस्से के रूप में डिज़ाइन करे, तो Brainy को हायर करें। हम छिपा प्रोडक्ट जानबूझकर बनाते हैं, ताकि एक्सपर्ट कल आपका टूल खोले और कल से ज़्यादा तेज़ महसूस करे।
Want a product where the expert user gets a real surface instead of a help-menu footer? Brainy designs the keyboard layer, the command palette, and the saved-state system as part of the product, not as cleanup.
Get Started
