トグルスイッチの誤用をやめよう

トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状態や選択肢について理解する必要があります。

文脈上の状態 vs システムの状態

トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります。トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。文脈上の状態のトグルはユーザーが見ようとしている現在の画面にのみ影響を及ぼしますが、システムの状態のトグルはアプリ全体に影響を及ぼします。

トグルスイッチを文脈上の状態のために使うという間違いを犯しているアプリがたくさんあります。よくある間違いは検索フィルターにスイッチを使う例です。フィルターは検索の環境だけに使われるもので、システム全体に対してではありません。ですから、選択操作に適切なコントロールはチェックボックスであり、スイッチではありません。

ユーザーはスイッチをオンにするとすぐに効果が現れると期待します。しかし、検索フィルターの設定は「保存」ボタンを押すまでは有効になりません。別のボタンのせいで効果が現れるのが遅れるとすれば、スイッチを使うのは誤りです。スイッチ自体が状態を有効化する「ボタン」です。スイッチ用の独立したボタンは必要ありません。

一般的にアプリの設定画面にスイッチが使われています。そこでユーザーがシステムの状態を管理するからです。しかしスイッチをアプリに影響のあるモードのトグルにも使えます。下の画像はプライバシーモードとダークモードの例です。

0か1の選択 vs 対立する選択

スイッチは０か１の選択のためのもので、対立する選択のためのものではありません。０か１の選択はオンかオフか、言い換えれば真か偽か、という状態を表します。対立する選択は、ユーザーのタスクに関係する互いに異なる２つの状態の選択肢です。

アプリの中には対立する選択にトグルスイッチを使うという間違いを犯しているものがあります。そういうアプリではスイッチの両側に選択肢のラベルが置かれ、親指をどちらに向けてタップするかによって状態を変更します。これはスイッチの間違った使い方で、視覚的なヒントが明瞭でないためユーザーが混乱します。それだけでなく、スイッチで２つの状態は選択できてもユーザーが欲しいかもしれないオフ状態がありません。

対立する選択をするときにはトグルボタンが適切なコントロール部品です。上のサンプルでは、「リスト表示」と「マップ表示」がユーザーがトグルする対立的選択です。このような状況ではトグルボタンがスイッチよりも有効です。なぜなら選択肢がひとまとまりになっていてユーザーが一度に見ることができるからです。また、ユーザーは目で確認しながら選択肢をダイレクトに選ぶことができます。

状態 vs 行動

スイッチは状態のために、そしてボタンは行動のために使います。絶対にボタンの代わりとしてスイッチを使うべきではありません。ユーザーが混乱してしまいます。コールトゥアクション（CTA）を見ると、ユーザーはスイッチではなくボタンを操作しようとします。

このアプリではトグルスイッチをダウンロード用のボタンに使っています。ダウンロードは持続的な状態ではなく１回だけの行動なので、これはスイッチの誤った使い方です。スイッチを切り替えるとコンテンツがダウンロードされますが、そのあとに終了します。スイッチをオフにしてもダウンロードを止めるわけではないので、ユーザーに誤解を与えます。

スイッチを使うための３つの条件

アプリでトグルスイッチの使用を検討するときには、状況が以下の３つの条件に合っているかチェックしてください。条件に合っていればトグルスイッチを正しく使っていると確信を持てます。

トグルスイッチの条件

１. 利用環境ではなくシステムの状態のトグルに使っている

２. 対立的選択肢ではなくバイナリ選択肢を示している

３. 行動を起こすのではなく、状態を有効化している