क्या toggle button को वर्तमान स्थिति दिखानी चाहिए, या वह स्थिति जिसमें यह बदलेगा? (2010)

 (ux.stackexchange.com)
3 पॉइंट द्वारा GN⁺ 2024-02-13 | 1 टिप्पणियां | WhatsApp पर शेयर करें

क्या toggle button को वर्तमान स्थिति दिखानी चाहिए, या वह स्थिति जिसमें यह बदलेगा?

  • toggle button का काम उपयोगकर्ता को वर्तमान स्थिति बताना भी होना चाहिए।
  • अगर toggle button On स्थिति में हो लेकिन Off दिखाए, तो यह भ्रम पैदा कर सकता है।
  • button या menu में flip-flop control के उपयोग से बचना चाहिए।

toggle switch वर्तमान स्थिति और बदली जाने वाली स्थिति, दोनों दिखा सकता है

  • button के बाहर text रखकर वर्तमान स्थिति और बदली जाने वाली स्थिति, दोनों दिखाने का एक तरीका है।
  • उदाहरण के लिए, iOS switch design में स्थिति On होने पर वह नीले रंग में दिखता है और Off होने पर ऐसा नहीं होता।
  • OS X switch design में कोई अस्पष्टता नहीं होती, इसलिए उपयोगकर्ता वर्तमान स्थिति को साफ़ तौर पर समझ सकता है।

Twitter के toggle button के उपयोग से बचना चाहिए

  • Twitter का toggle button mouse over पर जानकारी देता है, लेकिन touch screen पर यह भ्रम पैदा कर सकता है।

अंग्रेज़ी में "On" और "Off" क्रिया-विशेषण और विशेषण, दोनों हो सकते हैं

  • button पर verb या adjective का उपयोग करके स्पष्ट label देना बेहतर है।
  • उदाहरण: Enable/Disable, Start/Stop

स्थिति और क्रिया में अंतर करना महत्वपूर्ण है

  • जब toggle किसी क्रिया को दर्शाता है (जैसे: Play/Pause), तब click करने पर होने वाली क्रिया दिखानी चाहिए।
  • जब toggle किसी विकल्प को दर्शाता है (जैसे: Shuffle/Normal Play), तब वर्तमान स्थिति दिखानी चाहिए।

checkbox के उपयोग पर विचार किया जा सकता है

  • अगर स्थिति परिवर्तन को Yes/No सवाल में समेटा जा सकता है, तो checkbox का उपयोग उपयुक्त हो सकता है।

toggle button के बजाय स्थिति और क्रिया, दोनों दिखाने वाली विधि का उपयोग करें

  • निष्क्रिय स्थिति में button को highlight न करें, और सक्रिय स्थिति में highlight करके स्थिति दिखाएँ।

toggle button का उपयोग न करने पर भी विचार किया जा सकता है

  • उदाहरण के लिए, Shuffle/Normal Play के मामले में Shuffle label वाला checkbox इस्तेमाल किया जा सकता है।

Facebook का Like button एक अच्छे toggle button का उदाहरण है

  • Facebook Android app में Like button निष्क्रिय होने पर gray और सक्रिय होने पर blue दिखता है।

वर्तमान स्थिति और क्रिया, दोनों दिखाना सबसे स्पष्ट है

  • निष्क्रिय स्थिति का label और स्थिति बदलने के लिए एक clickable button साथ में देना सबसे अच्छा है।

GN⁺ की राय:

  • toggle button design उपयोगकर्ता अनुभव पर बड़ा प्रभाव डाल सकता है, और वर्तमान स्थिति व बदली जाने वाली स्थिति को स्पष्ट रूप से दिखाना महत्वपूर्ण है।
  • OS X का switch design इसका अच्छा उदाहरण है, जो उपयोगकर्ता को भ्रमित किए बिना वर्तमान स्थिति को सहज रूप से समझने देता है।
  • यह लेख software developers को user interface design करते समय विचार करने योग्य महत्वपूर्ण बिंदु देता है, जिससे बेहतर user experience बनाने में मदद मिल सकती है।

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-02-13
Hacker News राय

  • Microsoft Teams के mute बटन को लेकर भ्रम

    • Teams app में mute बटन पर कटी हुई माइक्रोफ़ोन आइकन दिखती है, और जब mute सक्रिय होता है तो इसका मतलब होता है कि माइक्रोफ़ोन बंद है.
    • फ़ोन app में वही आइकन unmuted स्थिति दिखाती है, और background color भर जाने पर mute स्थिति दिखाई जाती है.
    • बटन का मौजूदा स्थिति दिखाना अपने आप में समस्या नहीं है, लेकिन स्थिति बदलने पर वह कैसा दिखेगा, यह भी पता होना चाहिए.
    • यह भ्रम शायद 'flat UI' डिज़ाइन में, वास्तविक दुनिया के संदर्भ के बिना डिज़ाइन तत्वों को समझने की समस्या से आता है.

  • Tesla वाहन UI में असंगत toggle बटन की समस्या

    • HVAC सिस्टम के बटन touch करने के तरीके और press की अवधि के अनुसार अलग तरह से प्रतिक्रिया देते हैं.
    • ड्राइविंग के दौरान जब स्क्रीन पर सिर्फ़ एक नज़र डालने का समय होता है, तब हल्की-सी touch गलती से अनचाहा operation हो सकता है.
    • Tesla का Bluetooth connection UI बहुत भ्रमित करने वाला डिज़ाइन है, और ड्राइविंग के दौरान यह और भी ज़्यादा समस्या बन जाता है.

  • NASA के push button switch का state feedback mechanism

    • जब switch बंद होता है तो सारी lights बंद रहती हैं, switch दबाने पर पीली light जलती है, और जब वास्तव में इच्छित device चालू हो जाता है तो पीली light बंद होकर हरी light जलती है.
    • इससे switch दबाए जाने की पुष्टि भी मिलती है और वास्तविक operation की पुष्टि भी.

  • checkbox के गायब हो जाने पर अफ़सोस

    • checkbox पूरी तरह स्पष्ट था और उसमें कोई ambiguity नहीं थी, लेकिन smartphone designers उसे पसंद नहीं करते थे.

  • Tesla dashboard screen UI का भ्रमित करने वाला डिज़ाइन

    • 'Open' लिखा हुआ label साफ़ तौर पर दिखाता है कि वह हिस्सा खुला है, लेकिन उपयोगकर्ता यह नहीं समझ पाता कि वह वास्तव में उस पार्ट को खोलने वाला बटन है.

  • toggle बटन की समस्याएँ और समाधान

    • toggle बटन में सिस्टम की स्थिति और उस स्थिति को बदलने वाली क्रिया दोनों एक साथ शामिल होती हैं, इसलिए भ्रम हो सकता है.
    • मौजूदा स्थिति दिखाने वाला 'ON' असल में 'OFF' में बदलने वाली क्रिया का मतलब दे सकता है.
    • समाधान यह है कि state और action को अलग किया जाए; बटन के बाहर label लिखा जाए, या icon वही रखा जाए और बटन की दूसरी विशेषताएँ बदली जाएँ.

  • toggle बटन की asynchronous समस्या

    • बटन दबाने पर सिस्टम की स्थिति तुरंत नहीं बदल सकती, इसलिए मनचाही स्थिति पक्की करने के लिए कई बार दबाना पड़ सकता है.
    • अगर हर स्थिति के लिए अलग बटन हों, तो कई बार दबाने पर भी समस्या नहीं होती.

  • Apple के slider toggle डिज़ाइन के फ़ायदे

    • Apple का slider toggle मौजूदा स्थिति और बदलने वाली स्थिति, दोनों को स्पष्ट रूप से दिखाता है.
    • सक्रिय feature को नीले background से और निष्क्रिय feature को ग्रे background से अलग दिखाया जाता है.

  • toggle बटन में मौजूदा स्थिति और बदलने वाली स्थिति, दोनों का स्पष्ट संकेत ज़रूरी

    • यह साफ़ होना चाहिए कि मौजूदा स्थिति क्या है, और toggle बदलने पर कौन-सी स्थिति आएगी.
    • play/pause बटन भौतिक दुनिया के पुराने उदाहरणों का पालन करता है, और media चल रहा है या नहीं यह स्पष्ट होने के कारण icon बदले बिना भी उपयोगकर्ता उसे समझ सकता है.
    • toggle के रंग में हल्का-सा बदलाव मददगार नहीं होता; label की ज़रूरत होती है.