- Context menu विज़ुअल शोर को कम करते हैं और interaction cost घटाते हैं, लेकिन इनके साथ कम information scent और कम discoverability का trade-off जुड़ा होता है
- ये पोस्ट, फ़ोटो, कैलेंडर इवेंट जैसी किसी खास object से जुड़े secondary या अतिरिक्त actions को एक साथ देने के लिए उपयुक्त हैं, और kebab (⋮)·meatball (⋯) आइकन आम तौर पर “और देखें/अतिरिक्त actions” के रूप में पहचाने जाते हैं
- अगर आइकन का आकार, contrast या position ठीक न हो, तो लोग आइकन को देख ही नहीं पाते या उसका अर्थ गलत समझ लेते हैं, और महत्वपूर्ण actions छिपाने पर वे ढूँढने में मुश्किल core features बन जाते हैं, जिससे user experience खराब होता है
- इन्हें प्रभावी ढंग से इस्तेमाल करने के लिए सिर्फ secondary actions रखना, संबंधित content के पास रखना, केवल एक-दो actions न छिपाना, hamburger से भूमिका अलग रखना, accessibility सुनिश्चित करना जैसे एकसमान नियम ज़रूरी हैं
- अच्छी तरह डिज़ाइन किया गया context menu layout को सरल और focus को बेहतर करने वाला tool बन सकता है, लेकिन ज़्यादा या गलत इस्तेमाल होने पर उलझन, अतिरिक्त clicks और सीखने का बोझ बढ़ाने वाला जोखिम भी बन सकता है, इसलिए इसका सावधानी से उपयोग करना चाहिए
Context menu का अवलोकन
- Context menu किसी खास UI element, स्क्रीन क्षेत्र, data fragment या application view से जुड़े relevant actions के समूह को समेटने वाला menu होता है
- पोस्ट में Edit, Pin, Delete, फ़ोटो में Share, Download, Set as Background, और कैलेंडर इवेंट में Delete, Reschedule, Duplicate, Invite जैसे actions शामिल हो सकते हैं
- ऐसे menu आम तौर पर कभी-कभी ज़रूरी लेकिन हमेशा दिखाने की आवश्यकता न होने वाले secondary features को आसानी से उपलब्ध कराने के लिए उपयोग किए जाते हैं
- desktop पर right-click·trackpad two-finger click, touch environment में long press, और अब बढ़ती संख्या में kebab (⋮)·meatball (⋯) icons trigger के रूप में इस्तेमाल हो रहे हैं
Kebab·meatball icons की पहचान और सीमाएँ
- शोध प्रतिभागियों ने kebab (⋮)·meatball (⋯) icons को कुल मिलाकर “यहाँ और options/दूसरे actions छिपे हैं” के अर्थ में समझा
- mobile और desktop दोनों में यह समझ बनी रहती है, और जब guidelines का सही पालन किया जाता है तब यह और अधिक एकसमान होती है
- इन icons को “अस्थायी रूप से छिपाए गए functions/icons के set को खोलने वाले switch” की तरह लिया जाता है
- साथ ही, इन icons का information scent कम होता है, इसलिए user अक्सर यह जाने बिना click करता है कि पीछे ठीक-ठीक कौन से options होंगे
- जब icon content से बहुत दूर हो, बहुत छोटा हो, या low-contrast design किया गया हो, तब लोग context menu को नोटिस ही नहीं करते ऐसे उदाहरण भी देखे गए
Context menu के फायदे और trade-offs
- फायदों की दृष्टि से context menu visual noise कम करने, layout सरल बनाने और focus बनाए रखने में मदद करते हैं
- लेकिन इसके साथ ये usability समस्याएँ भी आती हैं
- ढूँढने में कठिनाई (findability में कमी): अगर icon छोटा, धुंधला या task focus area से दूर हो, तो यह आसानी से छूट जाने वाला element बन जाता है
- Information Scent की कमी: menu में क्या है, इसका अनुमान लगाना कठिन होता है, जिससे यह तय करना मुश्किल हो जाता है कि इसे दबाना उपयोगी होगा या नहीं
- गलतफहमी की संभावना: अगर placement या usage सही न हो, तो user इसे progress indicator या carousel control समझ सकता है
- इसलिए context menu का उपयोग करना है या नहीं, यह layout constraints, user expectations और task priorities के संतुलन में तय होना चाहिए
1. Context menu में केवल secondary और non-core actions ही रखें
- Context menu का स्थान उच्च उपयोग वाले core actions के लिए नहीं, बल्कि अतिरिक्त और कम प्राथमिकता वाले actions के लिए है
- जो features core flow का हिस्सा नहीं हैं, लेकिन कुछ हद तक उपयोगी हैं, उन्हें research-based judgment से चुनकर छिपाने की सलाह दी जाती है
- बार-बार उपयोग होने वाले ज़रूरी actions को context menu के पीछे नहीं छिपाना महत्वपूर्ण है
- उदाहरण के लिए, AT&T chat interface में End Chat को context menu के अंदर रखना core exit action को छिपाने का खराब उदाहरण है
- जब महत्वपूर्ण task menu के पीछे छिपा दिया जाता है, तो user feature ढूँढ नहीं पाता या बार-बार किए जाने वाले काम में लगातार असुविधा झेलता है
2. Context menu को उस content के पास रखें जिस पर उसका असर पड़ता है
- user spatial proximity के आधार पर elements के बीच संबंध समझते हैं, इसलिए context menu icon की position से यह साफ़ दिखना चाहिए कि action किस object से जुड़ा है
- अगर menu केवल किसी खास element पर लागू होता है, तो icon को उस element के अंदर या उसके ठीक बगल में रखना चाहिए
- अगर action पूरे field या पूरे transaction पर लागू होता है, तो उसे उस क्षेत्र के पास रखना चाहिए जहाँ संबंधित information इकट्ठी हो
- icon को random जगह पर या ऐसी जगह पर रखना जहाँ उसका किसी element से संबंध न दिखे, इससे बचना चाहिए
- Ramp.com के उदाहरण की तरह, अगर छोटा और low-contrast kebab icon स्क्रीन के नीचे दाईं ओर अलग पड़ा हो, तो यह समझना मुश्किल होता है कि वह किस element के लिए है, जिससे discoverability और relevance दोनों घटते हैं
3. Icon size और contrast पर्याप्त रखें ताकि visibility सुनिश्चित हो
- context menu icons को अक्सर dense screens या complex applications में इतना subtle बना दिया जाता है कि वे दिखते ही नहीं
- icon में पर्याप्त size और contrast होना चाहिए, और संभव हो तो इसे hover के बिना भी हमेशा visible रखना बेहतर है
- परखी हुई visual design guidelines का पालन करते हुए स्पष्ट color contrast और साफ़ border/background का उपयोग सुझाया जाता है
- icon को केवल hover state में दिखाना, या minimalism के नाम पर बहुत अधिक फीका बना देना, discoverability घटाता है
- Ramp वाले उदाहरण की तरह छोटा, low-contrast और दूर रखा गया kebab icon आसानी से छूट सकता है,
- जबकि Rippling mobile app की तरह border box, काले dots और सफ़ेद background का संयोजन tapability और information scent बढ़ाने वाला अच्छा उदाहरण है
4. Context menu में केवल संबंधित actions को ही समूहित करें
- context menu के options एक ही object/element/hierarchy से तार्किक रूप से जुड़े actions होने चाहिए
- उदाहरण के लिए, अगर वह file के लिए है, तो उसमें Duplicate, Share, Delete जैसे file-related actions ही होने चाहिए
- जहाँ संभव हो, menu icon के पास कुछ actions को सीधे दिखाकर “और किस तरह के actions छिपे हो सकते हैं” इसका information scent देना भी उपयोगी है
- global actions और किसी खास element के actions को एक ही menu में मिलाना, या असंबंधित actions को साथ रखना, इससे बचना चाहिए
- ऐसा मिश्रण clarity, findability, spatial memory और cognitive load सभी के लिए नुकसानदायक होता है
- Slack desktop app की तरह, message पर लगे menu में केवल message-related actions छिपाना और पूरे thread से जुड़े actions को अलग स्थान पर रखना एक अच्छा उदाहरण है
5. पूरे interface में icon और behavior को एकसमान रखें
- context menu icons को पूरे product में एक ही function, behavior और appearance के साथ बनाए रखना चाहिए
- अगर meatball या kebab icon को context menu के लिए चुना गया है, तो उसे दूसरे उद्देश्य के लिए reuse न करें, सिर्फ उसी अर्थ में इस्तेमाल करें
- एक जगह वही icon hidden content expand करने के लिए, दूसरी जगह popup खोलने के लिए, और तीसरी जगह side panel खोलने के लिए इस्तेमाल करना टालना चाहिए
- ऐसा उपयोग user के mental model और trust को नुकसान पहुँचाता है, और सीखने व याद रखने की क्षमता कम करता है
- Google search results में देखा जा सकता है कि sponsored result का kebab icon My Ad Center modal खोलता है, जबकि सामान्य result का kebab दाईं ओर panel खोलता है, यानी behavior और placement एकसमान नहीं हैं
- इससे Like/Block/Report/Share/Save जैसे उपयोगी actions छिपे रह जाते हैं, और user के लिए यह अनुमान लगाना कठिन हो जाता है कि वही icon दबाने पर अब क्या होगा
6. अगर icon अस्पष्ट हो तो tooltip या label से उसका अर्थ स्पष्ट करें
- kebab·meatball icons अपने आप में कम अर्थ वाले abstract icons हैं, इसलिए छोटा सा text hint भी usability को काफी बेहतर बना सकता है
- जहाँ संभव हो, visible label या hover पर tooltip दें, ताकि यह स्पष्ट हो सके कि menu में किस प्रकार के actions हैं
- उदाहरण के लिए Post Actions, Message Options जैसे target element को शामिल करने वाले स्पष्ट label उपयोग करें
- सिर्फ Options जैसे अस्पष्ट शब्द, या Ellipses जैसे केवल icon के आकार का वर्णन करने वाले label से बचें
- Patagonia के उदाहरण में image zoom action को meatball icon से map करना और hover label में Ellipses दिखाना अर्थ संप्रेषण की विफलता का उदाहरण है
- इसके विपरीत Notion desktop app में hover पर “Style, Export, and more…” जैसा tooltip जो menu के अंदर मौजूद actions के प्रकार का संकेत देता है, information scent को काफी बढ़ाता है
- यह tooltip menu की content के अनुसार context के हिसाब से बदलता भी है
7. Context menu icons का उपयोग केवल actions दिखाने के लिए करें, content expand करने के लिए नहीं
- meatball·kebab icons को अतिरिक्त actions/options खोलने के संकेत के रूप में पहचाना जाता है, इसलिए इन्हें text या image expand करने के लिए उपयोग न करना बेहतर है
- आंशिक text खोलने या image बड़ा करने के लिए Read more, Expand जैसे स्पष्ट text labels उपयोग करने की सलाह दी जाती है
- Etsy review के उदाहरण में review के नीचे meatball icon से पूरा text खोलना information scent की कमी वाला खराब उदाहरण है
- वही feature Google reviews में More text link के रूप में दिया गया है, जो context expansion action के लिए अधिक उपयुक्त अभिव्यक्ति है
- Google review के ऊपर kebab icon का सिर्फ Report action देना भी आगे आने वाले “सिर्फ एक-दो actions न छिपाएँ” वाले guideline का उल्लंघन है
8. केवल एक-दो actions के लिए context menu का उपयोग न करें
- जहाँ संभव हो, अगर केवल एक या कुछ ही actions देने हों, तो उन्हें सीधे interface में दिखाना बेहतर है
- एक-दो options को बेवजह menu के पीछे छिपाने से बचाई गई जगह बहुत कम होती है, लेकिन clicks और discoverability की लागत बढ़ जाती है
- खासकर जब “x”, trash can, report flag जैसे मानक icons उपलब्ध हों, तब उन्हें फिर से meatball/kebab के नीचे छिपाना लाभकारी नहीं है
- Weather.com के उदाहरण में kebab icon पर click करने से वह सिर्फ एक Delete button वाला काला button बन जाता है,
- इस स्थिति में शुरुआत से ही Delete को सीधे दिखाने पर स्क्रीन space लगभग उतनी ही लगती, इसलिए उसे छिपाने का कोई खास कारण नहीं बनता
- इसके विपरीत Pinterest के उदाहरण में, pin पर mouse लाने पर Save (ऊपर दायाँ button) और Share (नीचे दायाँ icon) जैसे महत्वपूर्ण actions सीधे दिखते हैं
- यह core actions को context menu में न छिपाकर, ज़रूरत पड़ने पर तुरंत उपलब्ध कराने का अच्छा pattern है
9. Hamburger icon को context menu trigger के रूप में उपयोग न करें
- hamburger icon (☰) को व्यापक रूप से global/main navigation के प्रतीक के रूप में पहचाना जाता है,
- जबकि kebab·meatball icons (⋮·⋯) किसी खास element/item से जुड़े contextual actions का स्थापित pattern हैं
- hamburger icon का उपयोग केवल site/app की global navigation के लिए करें, और contextual actions के लिए kebab·meatball icons का उपयोग करने की सलाह दी जाती है
- hamburger icon को content के पास रखकर contextual actions के लिए उपयोग करना, या उल्टा kebab·meatball में account settings या site-wide preferences जैसे global actions भरना, इससे बचना चाहिए
- ऐसा मिश्रण दोनों patterns के अर्थ को धुंधला करता है और user के mental model को तोड़कर hesitation और misses पैदा करता है
- Banana Republic chat के उदाहरण में, chat window के नीचे बाईं ओर hamburger icon दबाने पर Save Transcript नाम का केवल एक contextual action मिलता है
- यह न सिर्फ hamburger को global nav के बजाय context menu की तरह इस्तेमाल करता है, बल्कि सिर्फ एक action छिपाकर 8वें guideline का भी उल्लंघन करता है
10. Keyboard और screen reader accessibility ज़रूर सुनिश्चित करें
- context menu का उपयोग सिर्फ mouse या touch users ही नहीं, बल्कि अन्य लोग भी कर सकें; इसके लिए keyboard और screen reader से भी इसे खोला और navigate किया जा सके ऐसी संरचना चाहिए
- menu को Tab·Enter·arrow keys से खोला और चलाया जा सके, और menu items को screen reader पढ़ सके तथा focus move और execute किया जा सके
- ऐसे menus से बचना चाहिए जो केवल click या tap से ही पहुँच में हों, या standard accessibility patterns को तोड़ने वाले custom interactions पर निर्भर हों
- accessibility को प्राथमिकता देने वाला design केवल disabled users ही नहीं, बल्कि power users के लिए भी efficiency देता है, और inclusive design standards का पालन करने में मदद करता है
निष्कर्ष
- context menu interface को सरल बनाए रखते हुए, ज़रूरत पड़ने पर अतिरिक्त actions देने वाला शक्तिशाली tool है
- खासकर layout को साफ़ रखने और काम पर फोकस बनाए रखते हुए आवश्यक होने पर ही अतिरिक्त options खोलने के pattern में यह उपयोगी है
- लेकिन इसकी discoverability और clarity सीमित होती है, इसलिए इसका उपयोग हमेशा सावधानी से करना चाहिए
- इसे केवल सचमुच secondary actions के लिए उपयोग करें, और position, consistency, information scent और accessibility सबको ध्यान में रखकर डिज़ाइन करें
- मुख्य संदेश यह है कि visual minimalism और वास्तविक usability के बीच संतुलन बनाया जाए,
- context menu सबसे अधिक प्रभावी तब होता है जब वह core flow को छिपाए बिना interface को व्यवस्थित करने वाले tool के रूप में इस्तेमाल हो
अभी कोई टिप्पणी नहीं है.