- Play/Pause のような 即時に実行されるアクション と、Shuffle のような 維持される設定 を同じトグルで扱うと、ユーザーは現在の状態と次の動作を混同しやすい
- About Face 2.0 は、2つの選択肢を1つのコントロールに詰め込む flip-flop button を避けるよう勧めており、スペース節約よりも現在の状態を伝えることのほうが重要だと見ている
- 解決策は、
Switch to portrait mode のように 動作を動詞句で書く か、ラジオボタン・チェックボックス・状態ラベル+アクションボタンのように状態と切り替えを分離する方向に近い
- iOS 風のスイッチのようにテキストがボタン内にあると、
ON が現在の状態なのか次の状態なのか曖昧になりうるが、OS X や Windows Metro のように 状態テキストをボタンの外に置く と曖昧さは減る
- Play/Pause の慣例は例外的に次のアクションを示せるが、Shuffle・Like・Auto save のようなオプションは現在の状態を強調し、ツールチップ・色・押下状態・別ラベルで補うほうが安全である
状態表示とアクション表示の衝突
- Play/Pause、Shuffle/Regular Play のように2つの状態を行き来するボタンでは、現在の状態 を見せるのか、クリック後に変わる 遷移先の状態 を見せるのかが中心的な争点となる
- Play/Pause は、ユーザーが「再生開始」または「一時停止」というアクションとして受け取りやすく、停止中には Play、再生中には Pause を表示する慣例が定着している
- Shuffle/Regular Play は再生方式というオプション状態に近いため、切り替え先の状態を表示すると、現在シャッフルなのか順次再生なのかが分かりにくくなることがある
- Xbox 360 内蔵ミュージックプレーヤーは、シャッフルモードのときに通常再生アイコンを表示し、その逆でも逆向きに表示して混乱を招いた事例として扱われている
About Face の勧告: flip-flop button を避ける
- About Face 2.0 は、この種のUIを「避けるべき選択イディオム」である flip-flop button に分類している
- 1つのボタンが2つの相互排他的なオプションを制御すると、スペースは節約できるが、コントロールの第二の責務である 現在の状態の伝達 を満たしにくい
- ボタンに
ON と表示されているとき実際にはオフなら設定状態が不明瞭になり、オフ状態で OFF と表示されていても ON ボタンがどこにあるのか分かりにくくなることがある
- 推奨される解決策は2つある
- ボタンのアクションを
Switch to portrait mode のような動詞句で明示する
- 2つのラジオボタンのように状態選択が見える別のUI手法を使う
アクションボタンと状態ボタンを区別する
- action button と state button は別の考え方で設計すべきである
- Play/Pause のようなアクションなら、クリックしたときに起こることを示す
- Shuffle/Linear のようなオプションなら、現在の状態を示す
- アイコンのみの Shuffle ボタンであれば、シャッフルアイコン自体は固定し、状態に応じて 有効/無効 に見せる方法が適している
- オンの状態では明るくする、または押し込まれたボタンのように見せる
- オフの状態では順次再生であることがすぐ分かる必要がある
- hover が使える環境では、ツールチップを追加してさらに明確にできる
- Play/Pause についても、ラベルを切り替えず
Play ボタンを押下状態で見せれば混乱を減らせるという意見がある
ボタン内テキストが生む曖昧さ
ON と OFF は英語では状態としても切り替え動作としても読めるため、ボタン内に置くと 状態なのか命令なのか が曖昧になりやすい- より明確な語の組み合わせとして、次の表現が提案されている
Enable / DisableEnabled / DisabledStart / StopRunning / Stopped
- ただし、単語選びだけで問題が完全に解消されるわけではない
- ユーザーはボタンテキストが状態なのか命令なのかを依然として判断しなければならない場合がある
Enable と Enabled の違いは、UIの中では十分に明確でないことがある
ボタン外ラベルと状態+アクションの分離
- ボタン自体にテキストを入れず、ボタンの外にテキスト を配置すると、現在の状態と切り替え可能な状態を同時に示せる
- OS X 風のスイッチは、ボタン自体が
ON や OFF と語らず、スイッチ周辺のテキストが状態を表すため、「このボタンは現在の状態なのか、次のアクションなのか」という疑問を減らせる
- Windows Metro UI の方式では、ボタンの色で現在の状態を示し、オプションテキストの下にある
On/Off 表記で現在の状態を再確認させる
Online [Go offline] のように 状態ラベル + アクションボタン を分ける方法もある
Online はクリックできない現在状態のラベルであるGo offline はクリック可能な切り替えアクションである- クリック後は
Offline [Go online] に変わる
- この方式はラジオボタンよりコンパクトでありながら、状態とアクションの視覚的な役割を分離できる
チェックボックス、ラジオボタン、押下状態
- Shuffle のようなオプションは、
Shuffle ラベル付きの チェックボックス で表すと混乱が減る
- 単一の語を使い、チェック状態で有効・無効を示せば、複数語の意味関係を解釈する負担を減らせる
- 否定接頭辞付きの表現は避けたほうがよい
Not, Non-, Un-, Dis-, Im-, Mis-, In-, Il-, Ir- のような接頭辞は、未チェック状態と組み合わさると二重否定のように読まれうる
- Facebook Android アプリの Like ボタンは、オフのときはグレー、オンのときは青で強調される例である
- ただし、色だけでは色覚特性のあるユーザーには十分でない場合がある
実際のUI事例と注意点
- Spotify Web アプリの Shuffle ボタンのように、オフのときは中立色、オンのときは強調色を使う折衷案がある
- Twitter 風の hover 切り替えは、通常時に現在状態を見せ、マウスオーバー時にアクションを見せる方式である
- hover がある環境では機能しうるが、タッチスクリーンでは同じ方法が成り立たないことがある
- iOS 風のスイッチは、両方の状態を1つのコントロール内に見せるが、
ON が現在状態なのか押すと変わる状態なのか曖昧だという批判もある
- Discord の設定UIは、現在状態と将来状態をより明確にしたチェックボックス型トグルの例である
- Evernote の mouseover トグルや、航空機トイレのようなハンドルスイッチのように、状態と操作可能性が同時に伝わる例もある
設計原則
- 1つのコントロールが 状態の伝達 と アクションの伝達 を同時に担うと、曖昧さが生じる
- 現在の状態は、どのような形であれ必ず伝えなければならない
- Play/Pause は音楽が流れている、時間が進んでいるといった外部フィードバックで現在状態を補える
- Shuffle は次の曲が実際にどう選ばれるかを見るまで状態が分かりにくいため、ボタン自体の状態表示がより重要になる
- 単一ボタンで複数状態を循環させる方式は、UIを圧縮し相互排他的な設定をまとめられるが、ユーザーが現在状態を素早く把握できる必要がある
- Play/Pause は強い慣習ゆえに次のアクションを示す例外になりうるが、一般的なオプショントグルでは現在の状態を強調するほうが一貫している
1件のコメント
Hacker News の意見
最近は Microsoft Teams のせいで本当にうんざりしている。デスクトップアプリでは、ミュート中はマイクに斜線が入ったアイコンが表示され、ミュートを解除すると斜線のないマイクに変わるので分かりやすい。
ところがスマホアプリで参加すると、同じ斜線入りマイクアイコンが「現在ミュートではない。このボタンを押すとミュートになる」という意味になる。押した後もアイコンは相変わらず斜線入りマイクのままで、背景だけが反転する。
片方は「マイクをオンにする」ボタンで、もう片方は「ミュートをオンにする」ボタンだから、同じアイコンを使っているのかもしれない。結局、反対の状態でボタンがどう見えるかを知らないと現在の状態を判断できないので、いつも何度か押してみて、このアプリがどちらの方式を使っているのか確認することになる。
これが現実世界の参照物を失った フラット UI の代償なのか気になる。
ライブ音楽や録音用のオーディオミキサーでも、普通は同じパターンを使う。チャンネルがオフになると赤いランプが点く「Mute」ボタンがあり、一部の機材だけがフェーダー上の「ON」ボタンを点灯させてチャンネルが有効であることを示す。
そろそろ会議アプリも、音声はデフォルトでオフというアプローチに移る時期だと思う。発話者が話しているときに UI 要素が点灯する仕組みに、すでに少しずつ現れている。
デバイスを行き来するたびに、脳が一瞬止まる。
オンになっていてもフィードバックの遅延が大きいツールだ。相手が止まっているだけかもしれないし、答える前に考えているのかもしれないので、確信するには二、三回テストしなければならないことが多い。
オン／オフするとすぐ見えるダークモードとは違う。だからボタンがどんな動作をするにせよ、現在の状態を示す視覚的な表示は大いに役立つし、マイクで特に「状態」と「制御」を混ぜようとする試みが多くなるのも驚きではない。
Tesla のオーナーなら共感せずにはいられない。車の UI のトグルボタンがあまりに多様で、一貫性も標準もない。
たとえば空調ボタンは温度を表示するボタンが1つあるだけだが、どう押すか、どれくらい長く押すかによって反応が変わる。短く押すと小さなポップアップ、少し長く押すと空調全体の制御パネルが表示され、数秒押し続けるとオンになっていた空調がオフになることもある。問題は、これらすべてを運転中に道路を見なければならない状況でやらなければならないことだ。
手と目の協調が少しでもずれると、特に運転中に段差を越えたときにはそうなりやすいが、1mm ずれただけで別のボタンを押して意図しない動作を起こす可能性がある。
もう一つの災厄は Bluetooth デバイス接続 UX だ。少なくとも 2012〜2022 年の Model S の実装は、市販製品で見た中でも最悪級の UI の寄せ集めだった。右下のボタンはすでに接続された後も「Connect」と表示され続ける一方、画面の反対側の左上では「Connecting...」と表示された後に接続完了を示す。
これも車内 UI なので、運転中なら一瞬しか見られない。Tesla の Bluetooth UI だけで UI 本の一章を埋められるほど、見事にひどい。
閉じた南京錠はドアがロックされていることを意味し、押すとドアが開く。
トランクの「Open」という単語はトランクが閉じていることを意味し、押すとトランクが開く。
オフにしたいときは、もう一度ボタンを押して全体のコントロールを開き、オフボタンを押す。温度はボタンをクリックした後、左右にスワイプして上げ下げする。
私にはかなり直感的に見える。次に運転するときは長押しでオフにする方法も試してみるつもりで、かなり便利そうだ。
実装がいつもこれほどひどいのを見ると、Bluetooth 仕様自体に深刻にこじれた部分があるのではないかと思う。
以前、NASAのプッシュボタンスイッチをいくつか持っていたのだが、中に電球が2つ入っていた。スイッチがオフのときは両方消えていて、ボタンを押すと黄色い電球が点き、スイッチ操作が受け付けられたことを示す
実際にオンにしようとしていた装置がオンになると緑のランプが点き、黄色のランプは消える。黄色の状態はスイッチをトグルしたことの確認で、緑は望んだ動作が実際に起きたことの確認、というわけで興味深い状態フィードバックの仕組みだ
スイッチの外側にラベルを置く方式もうまく機能する[2]
[1]: https://my737ng.com/wp-content/uploads/2014/08/cp_mcp_header...
[2]: https://i.pinimg.com/originals/2c/37/0a/2c370a3f4018cfa9c3ef...
代わりに各選択肢ごとにボタンを置き、現在状態に該当するボタンが点灯するようにした。たとえばオン/オフのトグルは「on」と「off」の2つのボタンに変えた。最初はどちらもグレーで、ハードウェアから状態がオンだというSOHを受け取るとonボタンが緑、オフならoffボタンが赤になる
通信がしばらく途切れたら、すべての色を淡くして状態が古くなったことを示す。ボタンを押すと、新しい状態が返ってくるまでは以前の状態を表示し続けるが、そのボタン群だけを淡く表示する
ユーザーは、UIがどの状態だと思っていようと、いつでもonまたはoffを直接命令できた。一方トグルでは「別の状態」にしか変えられない
ラジオボタンも、状態名が書かれたボタンのグループに置き換え、UIが現在だと思っている項目だけに色を付けた。ほとんどの中立状態は青、オペレーターが強調したい良い/注意/悪いの意味がある場合は緑/黄/赤を使った
変わった設計だったが、オペレーターたちはおおむね特別な訓練なしに理解した。ボタンはボタンらしく見えてクリック可能に見え、間隔によって1つのグループであることが分かり、90年代のUIではグレーが標準だったので、色の違うボタンが現在状態として自然に目立った
今のように、UI要素が美的理由やコンバージョン誘導のためにどんな色でも使われ、たまにしか情報を伝えない環境でもそうなるかは分からない。NASAのボタンのように命令状態と受信状態を同時に見せる実験もしたが、どれもより混乱を招いた
チェックボックスよ、1990〜2009年。完璧で曖昧さがなかったのに、スマートフォンのデザイナーたちはなぜか嫌った
チェックしていないと「Not Urgent」、チェックすると「Urgent」と表示される。何度か素早くチェックして、緊急ではないことを示したつもりで送信を押してしまった
ブラウザ標準のチェックボックスは、スマートフォンで親指で押すには小さすぎて、頻繁に使うにはつらい
私が見た最悪の例はTeslaのダッシュボード画面UIだ。車の絵の上に、ボタンには見えないラベルが付いていて「Open」と書かれている
これはその部分が開いているという意味だとはっきり読めるが、実際の意味はそうではない。そのラベルは該当部分を開くボタンで、ユーザーには知りようがない
全体としてTeslaのUXは他の車よりはるかに進んでいるが、こういう小さなことがあまりにいらだたしい
人によって感じ方が違うようだ
「Do open」や「Is open」のように書けば避けられそうだが、ネイティブには不自然に聞こえるのだろうか？
トグルボタンの核心的な問題は、1つのオブジェクトがシステムの状態と、それを変える動作を同時に含んでいる点にある。
そのため、ボタンに表示されている「ON」が現在の状態なのか、押すと実行される動作なのかがはっきりしない。
解決策は、状態と動作をある程度切り分けること。方法はいくつかあり、リンク先の回答の1つのように、ラベルをボタンの外側に置くやり方がある。
スイッチではなく、Teams の例のようなトグルボタンなら、アイコンはそのままにして、ボタンの別の属性を変えればよい。たとえば、何十年も問題なく行われてきたように、押された状態のままにして「ON」状態を示す、といった具合だ。
結論には同意するが、現在の状態が何であるかと、トグルを切り替えるとどの状態になるのかの両方が明確であるべきだ。あまりにも頻繁に、トグルを切り替えてみて初めて、切り替える必要がなかったと分かる。
再生/一時停止の点は興味深い。結論とは逆に見えるからだ。しかしこれは、よく理解されている物理的な前例に従っているもので、たいてい音楽や動画が再生中かどうかも明確だ。そのため、ボタンのアイコンが変わらなくても、ユーザーは押すと何が起きるか理解できる。
トグルと UI に戻ると、トグルの色を薄いグレーから少しだけさらに薄いグレーに変えるのは、極めて役に立たない。ラベルを付けてほしい。ラベルがデザインモチーフに合わないなら、もっと優れたデザイナーを雇うべきだ。
ソフトウェアデザイナーたちはこれに従わず、再生/一時停止アイコンを互いに入れ替える方式を作り、新たな混乱を生んだ。ユーザーフレンドリーな理由というより、スキューモーフィックな 3D ボタンが流行遅れになったためだ。
状態表示の唯一の利点は、問題が起きたときにある。特にオーディオでは非常によくある。ミュート、ヘッドホンの取り外し、Linux のオーディオドライバーがまた壊れる、といった状況だ。
今でも再生/一時停止ボタンを見ると少し認知的不協和を覚えるし、一時停止ボタンが正確に何を意味するのか 100% 確信できないので、問題があるときは単に2回押してみることもある。
たとえば Spotify には、すべてのボタンの後ろにラベルを付けるスペースはない。アルバムアートを表示するスペースも必要だし、私はそれを望んでいる。
より良いデザイナーの問題ではなく、スペースの制約は実際に存在する。ある機能は1回のタップですぐ使える必要がある。シャッフルをポップアップメニューの奥に隠したくはない。
トグルボタンは現在の状態を示すべきだ。チェックボックスが良い例だ。
Muted []とMuted [x]はかなり明確だ。難しくなるのは、デザイナーが言葉と視覚デザインのつながりが明確でない UI を作るときだ。たとえば
Mute Off [---( )]、Mute On [( )---]のようなものは、状態説明に動作を混ぜ込んでいて、何を意味するのか分からない。Loudspeaker [()---] Crossed-out loudspeakerMuted [x]は何かが失敗したという意味に読める可能性がある。別の意味として理解するには、コンピューター UX の学習が必要であり、それは明白さの反対だ。あるいは「X marks the spot」のように、ミュートしたいときにクリックすべき対象という意味かもしれない。
[1] Unicode U+2714 https://www.compart.com/en/unicode/U+2714
[2] 例 https://www.githubstatus.com/
トグルボタンはデザイナーの意図が分からないため混乱しやすい。両方の選択肢を同時に見せない限り、分かりにくい。
Mute On[---()]Offボタンはクリックされるために存在するので、クリックすると何が起きるのかを伝えなければならない。
アナログスイッチのように、両方を示すべきだ。現在の状態を明確かつ誤解なく示しつつ、同時に変更後の状態も示すべきだ。
Apple の左右スライダー式トグルは、これを実にうまく実現している。トグルが現在どこにあるのか、どこへ切り替わるのか、現在の設定で機能が有効なのかを青い背景で、無効なのかをグレーの背景で明確に見せている。
私が好きだったデザインの1つに、スイッチの横にステータスランプがあり、状態がオンになるとそのランプが点灯するというものがあったが、今は見つけられない。
一番良かったのは、非同期処理の遅延も解決していた点だ。スイッチを押すとスイッチが切り替わり、少し後にランプが点灯する。インタラクションが実際に何かをしたという確信を与えてくれて、とても満足感があった。
状態なのか動作なのかが問題だ。特定のデザインは曖昧ではなかったのかもしれないが、説明だけではそうは言えない。
もちろん、ユーザーがそもそも画面の明るさを上げすぎていない場合に限って通用するだろうが。