UIコンポーネントの名称についてはM3とHIGでそれぞれ異なるという話を書きました。それぞれで概念が違うので呼び方が違うのは仕方ないですが、改めて名称が統一していないので困りますね。

改めて私の整理も含め、スマホやシステムUIでよく見かけるこのスイッチのUIの機能を書きたいと思います。前提として私はこれらをトグルボタンと呼んでいました。

M3ではスイッチと呼び、HIGではトグルとして呼びます。名称が違いますね。

M3のユースケースを見ていくと、

• スイッチに移動する

• スイッチのオンとオフを切り替える

スイッチオンを行うと、アイコンにチェックマークが入り、色合いも濃くなるためユーザーに視覚的にも表現を与えてくれます。ユーザーが起こした行動に対してシステム側が反応していることを確認できます。

HIGの中身を見ていきます。
下記のように、概念的な内容にそこまで変わりはありません。

トグルボタンとトグルスイッチの使い分け

トグルとスイッチにそれぞれの呼び方があるのは理解したが、さらにややこしい内容が出てきました。トグルボタンとトグルスイッチの違いがある。詳細は下記リンクで元ネタ確認できます。（ややこしい…）

元ネタの海外記事はこちら

よくある間違いで左では検索フィルター内でトグルスイッチを使用している。トグルスイッチはシステムの状態を管理するために使用するため、右側のようなiPhoneのシステム設定の時に使用するのが正しい。

ユーザーはスイッチをオンにするとすぐに効果が表れるように期待します。検索フィルター内で使用する場合は、保存ボタンを押すまで検索フィルターが適応することはないため、左側での使用はNG。

またスイッチはアプリの設定画面で使用されるが、例外ではアプリ内で、ライトモードとダークモードを切り替える時は使用可能。

トグルスイッチに近しいチェックボックスとの違いは？

トグルスイッチとトグルボタンについて理解しました。トグルスイッチに近しいチェックボックスについても書きます。

チェックボックスには、未選択、選択、不確定の3つの状態がある。
トグルスイッチは、システム上のオンオフの切り替えができる状態。

チェックボックス使用時の例としては、メール設定時でチェックボックスを使用した場合、いくつかの設定項目のSAVE or Cancelを行う必要がある。

その他にも、いくつかの関連したアイテムから選択させる場合にもチェックボックスを使用できる。Yes or Noの選択肢にもチェックボックスは使用ができる。

このようにトグルスイッチに近しいUIコンポーネントとしてチェックボックスが存在しており、使うパターンがプロダクトでは必要になることがあるため、それぞれのUIコンポーネントの理解と自分なりの定義を定めようと思う。

まとめ

• トグルスイッチは状態。トグルボタンは行動のために使用する。

• トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します

• なんでもかんでもトグルスイッチを使用しない。トグルボタンやチェックボックスでの比較も考える。