トグルスイッチ

定義

トグルスイッチは、オンとオフという2つの状態を行き来するコントロールです。照明のスイッチのように、 触れた瞬間に状態が変わり、その変化がすぐに反映される点が肝心です。中には左右に動く小さなノブがあり、 ノブの位置と背景の色が一緒に変わることで、今がオンなのかオフなのかを示します。 保存ボタンを別に押す必要はなく、指で触れたその瞬間に設定が適用される。これが、トグルをほかの入力と はっきり区別する最大の特徴です。だからトグルは、常に2つのうちどちらか一方に答えが決まる、シンプルな オン・オフだけに向いています。

なぜ重要か

トグルは、ユーザーがすぐに結果を確かめたい設定によく合います。通知をオンにしたり、ダークモードを 切り替えたりするように、押した途端に結果が現れると、ユーザーは自分の操作がちゃんと効いたという確信を 得られます。この即時性のおかげで、設定画面は軽やかで分かりやすく感じられます。ただし、すぐに適用される 性質のため、取り消しにくい危険な操作には向きません。また、状態を色だけに頼って示すと、色の区別が 難しいユーザーはオンとオフを見分けられなくなります。だから、誰もが状態を読み取れるように、位置や形でも 一緒に表すという気配りがとりわけ大切です。よくできたトグルは、説明がなくても、今の状態とこれから起きる 変化を同時に想像させてくれます。

よくある間違い

• 保存ボタンが別にあるフォームの中にトグルを入れて、その場で適用される動作と保存後に適用される動作が 混ざってしまうケースです。ユーザーはトグルを押した瞬間にもう適用されたと思い込んでいるのに、保存を 押さないと反映されないとしたら、オンにしたつもりの設定が実際にはオフのまま、という混乱が生まれます。
• オンかどうかを色だけで示してしまうことです。色覚特性のあるユーザーには緑と灰色が似て見えるため、 今がオンなのかオフなのか、まったく区別できなくなってしまいます。
• トグルの横のラベルを状態の名前にしてしまうことです。「オン」とだけ書いておくと、このスイッチを 押したときにオンになるのかオフになるのか迷わせてしまいます。ラベルには機能の名前を書き、状態は ノブで示すべきです。

実務のヒント

• トグルは、保存の手順なしにその場で適用されるオン/オフ設定だけに使いましょう。通知のオン・オフのように、 結果がすぐ反映されてこそ自然な場所に向いていて、保存ボタンと一緒に使うフォーム項目には チェックボックスのほうが適しています。
• 状態を色だけで知らせず、ノブの位置でも一緒に表しましょう。オンになるとノブが右端へ動くようにすれば、 色の区別が難しいユーザーも、位置を見るだけで状態をすぐに読み取れます。
• トグルの横のラベルには、今の状態ではなく機能の名前を書きましょう。「オン」ではなく「プッシュ通知」の ように機能を書けば、このスイッチが何をオン・オフするのか一目で分かります。状態はノブの位置と色で すでに十分に伝わっているので、ラベルまで状態を繰り返す必要はありません。

関連概念