UI再考 - スイッチ編

スイッチとはなんなのか

スイッチは状態を切り替えるUIである。ONにした瞬間から特定の機能が定常的に動くようになり、またOFFにした瞬間にその機能は止まる。
切り替える動作を持つのではなく、切り替えた後の状態を持つ。

だからスイッチは「現在どういう状態か」と「どうすれば切り替えられるか」と「切り替えるとシステムの機能が変化すること」がわからなければいけない。
WebUIのスイッチは電気的なスイッチのメタファーであるが、その電気スイッチを表す以下の図は必要3条件のうち前者2条件を満たしている。WebUIは専門家以外も使うので、3条件を全て満たす必要がある。

使われているスイッチ

現在一般的に使われているスイッチには以下のものがある。

iOSで使われているスイッチは、「現在どういう状態か」が明確にわかるようになっているが、Androidのスイッチは現在の状態に関して誤解を招くかもしれない。丸いUIの下の横長のUIが、「状態Aと状態Bを表す」のか「現在の状態を表す」のか明確でないためである。

だがいずれのスイッチも、「どうすれば切り替えられるか」について間違ったアフォーダンスを与えている。これらのスイッチからは「左右にフリックする」という意味がアフォードされるが、実際にしてほしい行動はタップである。

より良いスイッチ

anthonyは電源アイコンを用いた以下の形のスイッチを提案した。これはコンピュータに馴染みのあるユーザにとってはスイッチの必要3条件を全て満たしており、従来のものより優れている。

ただ、電源アイコンや電源ボタンに馴染みの少ないユーザにとっては「どうすれば切り替えられるか」が分かりにくいものであるように思う。
「押すもの」というメタファーとしてより普遍的な円を用いて、以下のようなUIを使うのが良いのではないだろうか。

ちなみに

Zennの記事は右上に「公開する」というラベルのついたトグルスイッチがある。このスイッチをクリックすると、その右にある「下書き保存」ボタンが「公開する」ボタンへ変化する。間違ったスイッチの使い方の一つの例である。

参考

• Human Interface Guidelines
• トグルスイッチの誤用をやめよう
• その機能はオンかオフか？ トグルスイッチが招く混乱とは