トグルスイッチの使いどころを考える

2023.5.11

学びの共有

今回の記事ではトグルスイッチのUIについて考えてみたいと思います。

トグルスイッチは、オンとオフなどの相反する状態を切り替えることができるUIコンポーネントです。スマートフォンでの使用から広がったUIパーツであるようですが、最近はPCの画面でもよく使用されるようになりました。
最近は WindowsでもMacでもシステム設定アプリでトグルスイッチを使用しています。

トグルスイッチの利用状況、まだ難しいところもある？

トグルスイッチがUIパーツとして普及してきたと感じますが、最近の開発におけるデザインのフィードバックで「わかりにくい」というものがありました。この際はチェックボックスをON/OFFの意味で使用することになりました。
PCのUIデザインにおいては、慣れの問題もあるのか、状態を選択するUIとしてまだ認識されづらいものがあるのかもしれません。この場合はトグルスイッチがベストであっても、PCではラジオボタンやチェックボックスでの対応を選択すべき場面となりそうです。
実際のユーザーテストやフィードバックでは、ON/OFFの状態を設定するものとしてのUIの認知はまだ少し弱いのかなという印象があります。

Macについても macOS Monterey まではチェックボックスやラジオボタンで対応していたものが、macOS Ventura からトグルスイッチに変わった設定項目があり、混乱したところがあったように思います（Apple的には macOS も iOS や iPadOS に設定のUIを近づけて統一させたい意向があったのではないかと感じます）。

設定するもののUIとして、慣れ親しんだパターンは強くユーザーの認知負荷を下げる効果もあるので、使い所は慎重になる必要がありそうです。
ただ、トグルスイッチは設定などでの状態や情報が即時更新できる利点があるので、世の中の認知レベルや使用するユーザーにあわせながらも場面に適切なUIパーツを選んでいけるようになるのが理想であると思います。先にも書いたように、最近のWindowsやMacで設定のUIにも使用されるようになったので今後のUIに対する認知の状況は変わっていくのかもしれませんが。

トグルスイッチの効果的に使うポイント

先にトグルスイッチのUIを選択することのネックになりそうな状況を書きましたが、トグルスイッチを使うと決めた場合の使用ポイントをまとめてみます。

明確に状態がわかる表示
簡潔で適切なラベルの情報提供
即時反映される内容に使用

明確に状態がわかる表示

トグルスイッチのデザインは、オンとオフの状態を明示する必要があります。
オンとオフの2つの状態を視覚的に表示することで、状態や機能がオンとオフ（有効化と無効化）であることを示します。トグルスイッチのシグニファイアによって、このUIの意図や操作を理解できるようになっています。

そのため、トグルスイッチは現在の状態がわかるよう明確に状態が認識できるものにすべきです。
とくにオンの状態はアクティブな状態をわかりやすくしたいです。目立つ色、アクセントになる色を使って明解な視覚表現がいいでしょう。
オフの状態についてはグレースケールの色を使うなどオンの状態と比べて弱い表現であると、トグルスイッチの状態の表現にコントラストがつけられることができそうです。

またトグルスイッチの丸い箇所 Thumb について、Thumb が右の位置にあるのがオン状態、左の位置にあるのがオフ状態である傾向があります。ユーザーが慣れているトグルスイッチの表現との一貫性の点でもこのルールに則るのがいいと思います。

簡潔で適切なラベルの情報提供

トグルスイッチのラベルは短く直接的で明確なテキストにします。
トグルスイッチには「オン/オフ」「有効/無効」の状態を選ぶ対象は何か、簡潔にわかるラベルが必要です。
トグルスイッチとラベルなどのテキストの情報が適切に関連付けられていない場合、ユーザーはトグルスイッチの目的や意味を正確に理解することができなくなります。ユーザーがラベルを読んだだけで、トグルスイッチが何を制御しているのかを理解できるようにする必要があります。

ラベルはオンの状態・有効の状態を中心にしたテキストにすると、トグルスイッチのコンテキストとラベルが揃うかたちになるはずです。
「プレビューを表示しますか？」よりも「プレビューを表示（する）」のように、直接的な表現でトグルスイッチの状態や動作を表す動詞を使用するとよさそうです。
トグルスイッチのラベルは、長い文や冗長な表現ではない、よりマイクロコピーの工夫が必要そうです。

即時反映される内容に使用

トグルスイッチは、切り替え操作をしたときに即時に反映される必要があります。
現実の世界のスイッチを押せばすぐ電気が点くように、即座に状態の変化などのフィードバックを行うのが現実の世界のスイッチの動きにも則した期待される動作です。このシンプルなインタラクションにより、ユーザーは直感的に操作を行うことができます。

ユーザーがトグルスイッチを操作したときその変更の反映のために「保存」や「送信」ボタンをクリックする必要はありません。
変更や入力を有効にするためにユーザーが保存の追加の操作を行う必要がある場合は、トグルスイッチではなくチェックボックスやラジオボタンのUIを使用することが検討した方がよいかもしれません。
なので、トグルスイッチは自動保存されるようなものや自動的に反映される設定や内容の入力に適したUIであります。

まとめ

改めて、トグルスイッチについての使い方について考えてみました。
チェックボックスやラジオボタンに通じるような入力UIのコンポーネントですが、トグルスイッチを使用できるシーンも適切なものは限られるところもありそうです。UIで入力する内容の保存や反映がポイントとしては大きくありそうなので、使用する場面は慎重に検討すべき点もあるように思いました。
（先に書いたPCでトグルスイッチが受け入れづらそうなフィードバックが出てくる問題もこの辺りの検討が必要なのかもしれません）

場面を選べば効果的にシンプルな操作を提供できるUIであるので、UIとしての特徴を押さえながらうまく使っていきたいと思います。

参考：

投稿者 Imanishi Emi

UIデザイングループリード。
制作会社でプロモーションサイトや広告のデザイン制作、受託開発会社にてサービスのUIデザインを経験し、Gaji-Laboに参加。ユーザーが使いやすいインターフェースデザインづくりと、フロントエンドで実現するUIデザインの橋渡しについて考えます。
実際にインターフェースを試したりフィクションの世界のUIにヒントをもらいながら、心地よく使えるデザインを考えるのが好き。