トグルボタンは現在の状態を表示すべきか、それとも切り替わる先の状態を示すべきか？ (2010)

 (ux.stackexchange.com)
3 ポイント 投稿者 GN⁺ 2024-02-13 | 1件のコメント | WhatsAppで共有

トグルボタンは現在の状態を表示すべきか、それとも切り替わる先の状態を示すべきか？

  • トグルボタンはユーザーに現在の状態を知らせる役割も果たすべき。
  • トグルボタンが「オン」の状態で「オフ」を表示すると、混乱を招く可能性がある。
  • ボタンやメニューでフリップフロップ型のコントロールを使うのは避けるべき。

トグルスイッチは現在の状態と切り替わる先の状態の両方を表示できる

  • ボタンの外側にテキストを置いて、現在の状態と切り替わる先の状態の両方を示す方法がある。
  • たとえば、iOS のスイッチデザインは、状態が「オン」のときは青色で表示され、「オフ」のときはそうならない。
  • OS X のスイッチデザインには曖昧さがなく、ユーザーは現在の状態を明確に把握できる。

Twitter のトグルボタン利用は避けるべき

  • Twitter のトグルボタンはマウスオーバー時には情報を提供するが、タッチスクリーンでは混乱を招く可能性がある。

英語で "on" と "off" は副詞にも形容詞にもなりうる

  • ボタンには動詞または形容詞を使って、明確なラベルを付けるのがよい。
  • 例: 「有効化/無効化」、「開始/停止」

状態と動作を区別することが重要

  • トグルが動作を表す場合は（例: 再生/一時停止）、クリックしたときに実行される動作を表示すべき。
  • トグルがオプションを表す場合は（例: シャッフル/通常再生）、現在の状態を表示すべき。

チェックボックスの使用も検討できる

  • 状態の切り替えを「はい/いいえ」の質問に要約できるなら、チェックボックスの使用が適している可能性がある。

トグルボタンの代わりに、状態と動作の両方を示す方法を使う

  • 無効な状態のときはボタンを強調せず、有効な状態のときは強調して状態を示す。

トグルボタンを使わないことも検討できる

  • たとえば、シャッフル/通常再生の場合は、「シャッフル」というラベル付きのチェックボックスを使える。

Facebook の「いいね！」ボタンは優れたトグルボタンの例

  • Facebook Android アプリでは、「いいね！」ボタンは無効な状態では灰色、有効な状態では青色で表示される。

現在の状態と動作の両方を表示するのが最も明確

  • 無効な状態を示すラベルと、有効な状態に変更できるクリック可能なボタンを一緒に提供するのがよい。

GN⁺の意見:

  • トグルボタンのデザインはユーザー体験に大きな影響を与える可能性があり、現在の状態と切り替わる先の状態を明確に示すことが重要。
  • OS X のスイッチデザインは、ユーザーに混乱を与えず、直感的に現在の状態を理解できるようにする優れた例。
  • この記事は、ソフトウェア開発者がユーザーインターフェースを設計する際に考慮すべき重要な要素を示しており、より良いユーザー体験を作る助けになる。

関連記事

1件のコメント

 
GN⁺ 2024-02-13
Hacker Newsの意見

  • Microsoft Teamsのミュートボタンをめぐる混乱

    • Teamsアプリでは、ミュートボタンは斜線の入ったマイクとして表示され、ミュートが有効なときにマイクがオフであることを意味する。
    • 電話アプリでは、同じアイコンがミュートではない状態を示し、背景色が塗られた状態に変わることでミュート状態を表す。
    • ボタンが現在の状態を示すこと自体には問題はないが、状態が切り替わったときにどう見えるかを把握している必要がある。
    • この混乱は、「フラットUI」デザインにおいて、現実世界の参照なしにデザイン要素を読み取らなければならないことから生じる問題かもしれない。

  • テスラ車のUIにおける一貫性のないトグルボタンの問題

    • HVACシステムのボタンは、タッチの仕方や押している時間によって異なる反応をする。
    • 運転中は画面を一瞬しか見られない状況で、わずかなタッチミスによって意図しない操作が発生することがある。
    • テスラのBluetooth接続UIは非常にわかりにくい設計で、運転中はなおさら問題になる。

  • NASAのプッシュボタンスイッチにおける状態フィードバックの仕組み

    • スイッチがオフのときはすべてのランプが消えており、スイッチを押すと黄色のランプが点灯し、実際に目的の装置がオンになると黄色のランプが消えて緑のランプが点灯する。
    • これは、スイッチを押したことの確認と、実際に動作したことの確認の両方を提供する。

  • チェックボックスが姿を消したことへの惜しさ

    • チェックボックスは完璧で曖昧さがなかったが、スマートフォンのデザイナーには好まれなかった。

  • テスラのダッシュボード画面UIのわかりにくい設計

    • 「Open」と表示されたラベルはその部分が開いていることを明確に示すが、実際には部品を開くためのボタンであることをユーザーは理解できない。

  • トグルボタンの問題点と解決策

    • トグルボタンは、システムの状態とその状態を変更する操作を同時に含んでいるため、混乱を招きうる。
    • 現在の状態を示す「ON」が、実際には「OFF」に切り替える操作を意味することがある。
    • 状態と操作を分離することが解決策であり、ボタンの外側にラベルを書く、あるいはアイコンはそのままにしてボタンの別の属性を変えるといった方法がある。

  • トグルボタンの非同期性の問題

    • ボタンを押してもシステムの状態がすぐには変わらないことがあり、望む状態に確実に切り替えるために何度も押す必要がある。
    • 各状態に対応する別々のボタンがあれば、何度押しても問題はない。

  • Appleのスライダートグルデザインの利点

    • Appleのスライダートグルは、現在の状態と切り替わる状態の両方を明確に示している。
    • 有効な機能は青い背景、無効な機能は灰色の背景で区別される。

  • トグルボタンには現在の状態と切り替え後の状態を明確に示す必要がある

    • 現在の状態が何か、トグルを変更したときにどの状態に変わるのかを明確にしなければならない。
    • 再生/一時停止ボタンは物理的な先行事例に従っており、メディアが再生中かどうかが明確なので、アイコンが変わらなくてもユーザーは理解できる。
    • トグルの色を少し変える程度では役に立たず、ラベルが必要である。