[起] このボタンを押すと何が起こるの！？
皆さんはこちらのパスワード入力UIを見て、赤丸で囲った部分のボタンを押すと何がどうなると思いますか？
- 入力内容が伏せ字に置き換えられる状態になる
- 入力内容がそのまま見える状態になる(↑と逆の状態)
結構人によって意見が割れるのではないかと思っています。
実際、既存のアプリケーションにおいてもどちらのパターンが採用されているかはまちまちだったりするのです。
度々話題にも上がっているようですね。
ちなみに私はこういったUIを実装するたびに、あるいはアプリケーション上で遭遇するたびに「あれ？どっちがどっちの状態の時に表示するアイコンなんだっけ？」と混乱します。
[承] なぜ２つの実装パターンで割れているの？ボタンは常に押下した際の振る舞いをユーザーに知らせるべき？
前項のパスワード入力欄の切り替えボタンをそのまま例として、まずそれぞれのパターンの実装意図を考察してみます。
パターンA
こちらのパターンは「現在の状態」をアイコンで表現し、それを押下することで「その逆の状態にする」挙動をするパターンで、これは「システムの状態」にフォーカスしたUIデザインであると考えられます。
ユーザーはアイコンを見ることですぐにシステムの状態を把握できますが、押下した際の挙動はコンテクストを基にユーザーが推測する必要があります。
パターンB
対してこちらは「押下した際に移行する状態」をアイコンで表現し、それを押下することで「表示の通りの状態にする」挙動をするパターンになります。こちらは「ボタンを押下した際のシステムの振る舞い」にフォーカスしたものと考えられます。
これは「何をするか」を明記した多くのテキスト付きのボタンと同じロジックに基づいたものであり、個人的にはしっくりきていたパターンです。反面、トグルスイッチ機能を持つボタンであるにも関わらず現在の状態をこれ単体では直接表現できないデメリットを抱えています。(現在の状態は表示しているアイコンの示す状態の逆である、と推測は可能です)
テキスト付きボタンは押下時の振る舞いを表現することが多いですよね。画像はMaterial UIのButtonより
ここで、トグルスイッチ機能を持つボタンが持つ課題が2つあることが分かります。
- 多くのテキスト付きボタンと同様「ボタンを押すと何が起こるのか」を表現する必要がある
- 現在のシステムの状態を表現する必要がある
後者がこの手のボタン特有の課題となっており、どちらを取るかでパターンが分かれています。
この時点で、ボタンUIのデザインの一貫性を考えると「ボタンを押すと何が起こるのか」を優先的にボタン内に表示する方が良いのではないか？押して何が起こるのかが明示されていないボタンって怖くない？と私は思っていました。
システムの状態を表現することはボタンの責務に無く、それは他のUIで表現してボタンの近くに添えてあげたら良いのかもしれない。 その点、パスワード入力欄については「入力内容がどう表示されているか」がそのまま現在の状態として確認できるし、動画プレイヤーの再生/一時停止ボタンなんかは「パターンB」だけど「動画が再生されているかどうか」の状態はプレイヤー本体より視覚/聴覚で確認できますよね。
さて、ここまでで皆さんはどう思ったでしょうか？
[転] あれ？ミュート切り替えボタンは？
基本的にボタンは「パターンB」で実装するのが良さそうだよね、という文脈で思考を進めているうちにふと気づきました。ミュート切り替えボタンって「パターンA」で実装されることが一般的だけど、なんの違和感も感じたことないかも...。
パスワード入力欄の表示切り替えボタンや、動画プレイヤーの再生ボタンと何が違うのでしょうか？また、そもそも「トグルスイッチ機能を持つボタン」の実装パターンについて、「一般的なテキスト付きボタン」を取り上げて「同様に、ボタンを押下した際のシステムの振る舞いを表示するべき」と考えるのは間違いなのでしょうか？
一旦これまでに出てきたボタンUIの例についてまとめてみます。
| ボタンUI | 一般的な実装パターン | 現在の状態がボタン以外の部分で視覚的に分かるか？ |
|---|---|---|
| パスワード入力欄の表示切り変え | A?/B? | (Yes)[1] |
| 動画プレイヤーの再生/一時停止 | B | Yes |
| ミュート切り替え | A | No |
恣意的なまとめ方にも見えるかと思いますが、そのまま読み取ると「現在の状態がボタン以外の部分で視覚的に分かるか？」によって実装パターンが分けられるのではないか？という仮説が立てられそうです。
また、ミュートボタンについて調べてる時に見つけたこちらの記事でも似たようなことが述べられていました。(とても興味深い記事だったので是非併せて読んでみてください🙌)
[結] 結局パスワード入力欄の表示切り替えボタンはどう実装したら良い？
「パターンA/Bどちらで実装するか」という問いに対してなら、個人的には「パターンA」での実装(ミュート切り替えボタンと同様、現在の状態をアイコンで表現)が良さそうかなと思いました。当初は「パターンB」派ではあったのですが、ミュート切り替えボタンに対する操作感を想像すると、表示切り替えボタンについても同様に考えられそうだなと感じたためです。
さらにアイコンボタンによる実装に拘らないなら、チェックボックスを添えて「パスワード表示非表示についての操作ができる」ことを明記するのが、少なくとも「誰にでも分かりやすい」UIではあるかなと思いました。
また、前項でも添付させていただいた以下の記事の後半部分に記述されている、ボタンのデザインの決定に関する評価フローはとても参考になるなと思いました。
-
入力値が空だとNo ↩︎
Discussion