NN-Groupのスタッフによる記事の翻訳は、製品チームの設計者に簡単でわかりやすい指示を与える必要性によって促されました。これは、必要に応じて参照できます。先日記事が公開されたので、翻訳すると同時に役立つ資料をみんなと共有することにしました。ヒントをくれたYuraVetrovに感謝します。元の記事はここにあります。
スポイラー： 2つの異なるシステム状態を切り替えるコントロールは、現在の状態と、ユーザーがそのコントロールをクリックした場合にシステムが入る状態の両方をユーザーに明確に伝える必要があります。
最近のクライアントとのWebExミーティングで、マイクをオンにできないと思ってパニックになりました。私は6時間のプレゼンテーションをしなければなりませんでした-サウンドをオンにすることさえできない場合、どうすればいいですか？取り消し線の付いたマイクアイコンをクリックし続けましたが、何をしてもマイクは取り消し線が引かれていました。
スクリーンショットは次のとおり
です。WebExデスクトップアプリケーションのコントロールパネル：
上-音が出ない。
下-ミュート状態
パニック状態で、アイコンの色の変化にまったく気づきませんでした。両方の状態でマイクが交差したという事実にもかかわらず、アイコンの赤い色は、ボタンがアクティブであり、無効になっていることを示しているはずであることがわかりました。
ユーザーがこの問題の犠牲になるのを何度も見てきました。ミュートボタンは、2つのシステム状態（ミュートとミュート解除）を切り替えるために使用されますが、問題は、ユーザーが現在の状態と移行中の状態を簡単に見分けられないことです（また、アイコンデザインのベストプラクティスとは異なり、WebExの実装にはテキストがありませんミュートボタンラベル）。
2つの情報、2つのコントロール
ユーザーが2つの可能な状態間を移動できる状況（簡単にするためにオンとオフと呼びましょう）では、ユーザーに関連し、関連しているものの同一ではない2ビットの情報があります。
- システムの現在の状態-オンまたはオフ。マイクを使用した例では、ミュートまたはミュート解除。
- , — , , ( Unmute Mute).
それらを実装する明白な方法は、ステータスインジケータと状態変更ボタンの2つの異なるUI要素を持つことです。
たとえば、Teslaアプリでは、コントロール画面はこのアプローチを採用しています。車がロックされていることを示すステータスインジケーターと、ロック解除ボタンがあります。ステータスライトをクリックしても何も起こりませんが、コントロールをクリックすると車両のロックが解除されます。
Tesla for iPhone :(
左）ロック解除ボタンの上にあるアイコンはステータスインジケーターとして機能します。[ロック解除]ボタンは、ユーザーがクリックした場合に何が起こるかを明確に示す状態切り替えボタンです。
（右）ユーザーが車両のロックを解除すると、ボタンの状態とラベルが変わります。
情報の2つの状態、1つのコントロール
ただし、現在の状態と次に来る状態の2つの状態を持つシステムがある場合、それらは互いに補完し合う必要があります。言い換えれば、2つの情報（状態と次に何が起こるか）が単一のコントロール（状態トグルボタン）を使用して通信できると想定できます。ユーザーが（少なくとも理論的には）1つの状態を知っている場合、クリックの結果を推測できるためです。
ただし、決定には時間と認知的努力が必要であり、迅速に対応する時間がほとんどない場合が多いことを忘れないでください。例のように：私はマイクをオンにしようとしましたが、誰もが私を待っているか、私を無視して会話を続けています。つまり、立ち止まってインターフェースについて考えたり、結論を出したりする時間がありません。
状態は他の信号から簡単に識別できる場合があります。たとえば、ビデオプレーヤーでは、将来の状態を示すコントロール（[再生]ボタン）は1つだけです。ただし、ビデオが再生されていることを理解するのに十分な信号があります。ユーザーは音声を聞いたり、画面上の画像の変化を確認したりできます。
YouTube：ビデオの再生中は、再生アイコンが一時停止に置き換えられます。アイコンは、ボタンが押されたときにシステムが入る状態を示します。
状態と次のことを示すために単一のコントロールを使用する必要がある場合、それをどのように示す必要がありますか？
この状況では、2つの選択肢が考えられます。
- , , , , .
. , «», «» « ».
, , , Tesla OBS .
OBS Studio: «Start Recording» «Stop Recording» .
(, ), , . , YouTube . - .
/: , « ». , , , .
Word B () (), , , . .
WebExの例に戻りましょう。振り返ってみると、WebExは1つのコントロールを使用して現在の状態と次に何が起こるかを示し、2番目の設計上の決定（アクティブな状態の通知）を実装したことがわかります。残念ながら、アクティブなインジケーターとしての赤は、いくつかの理由で悪い選択でした。
- 赤はインターフェイスで任意に使用されます。たとえば、X（終了）ボタンも赤であり、これはアクティブであることを意味するものではありません。（赤がアクティブな状態を表す場合、赤十字はどういう意味ですか？私はすでに会議を離れていますか？）
- 別の色（青）は、ビデオやチャットなどの他のボタンのアクティブ状態を示すために使用されます（つまり、青いビデオアイコンは、ビデオがオンになっていることを示します）。
アクティブ状態の明確なインジケータがない場合、ユーザーはボタンのラベルに依存して何が起こっているかを判断する必要があり、アイコンのラベルが変更されていない場合、これは単に混乱を引き起こします。
ちなみに、iPhoneのPhoneアプリは同じ実装を使用していますが、WebExよりも一貫性があり、アクティブな状態を示すために白い塗りつぶしを使用している点が異なります。これらの設定を行っても、ボタンのアクティブ状態を判別することは困難です。
IPhone iPhoneアプリ：[ミュート]ボタンはアイコンを変更しませんが、白い塗りつぶしでアクティブな状態を示します（左）。白は間違いなくカスタムカラーよりも優れた色合いですが、アクティブ状態の強力な指標ではありません。
推奨事項
では、ステータスインジケータとして機能する状態トグルボタンの一般的な推奨事項は何ですか？最も安全な解決策は、Teslaの例のように、現在の状態用と状態切り替えアクション用の2つのUI要素を使用することです。
必要に応じて、ズームと同じように、2つを1つのコントロールに組み合わせることができます。そのミュート制御は、2つの別個のコンポーネントで構成されています。
- ユーザーがこのコントロールをクリックした場合に何が起こるかを示すテキストラベル。
- システムの現在の状態を示すアイコン
それらのいずれかをクリックすると、状態が変更されます。
ズームデザインでは、アイコンは現在の状態を表すことを意味し、ラベルはユーザーがボタンをクリックした場合に何が起こるかを示します。アイコンまたはラベルをクリックすると、状態が変わります。
オン/オフするときの目標は、ユーザーが両方をすばやく理解できるようにすることです。
- 現在の状態
- このコントロールをクリックするとどうなりますか
システムが通過する2つの状態を推定します。
これらが2つの反対の状態であることは明らかですか？
- そうでない場合は、現在の状態用と別の状態に移行するアクション用の2つのコントロールを備えた設計を支持します。
- (, , ), , , .
(, , ), ?
- , , ( ) .
- , — .
( Mute)?
- , .
- , .
時間をありがとう、UXHorn tgチャンネルに登録してください。ここでは、UXと研究に関する最も興味深い記事を一貫して投稿しています。