下の図のフォークを見て、それがサラダ用なのか、メイン用なのか見分けるのは簡単ではありません。形状も用途も同じものだからです。両方とも食べ物を突き刺すための、尖った部分をもつ道具ですが、それぞれコースの異なる料理用にデザインされています。
用途は同じでも異なる目的に設計されている
Webデザインの世界でも、スイッチとチェックボックスを扱う際に、フォークと同様の混乱が起こります。どちらを使用するべきか、あまり大きく考えていないデザイナーの方が多いですが、適当に使用すると、ユーザーを混乱させてしまいます。フォークの例のように、異なるコンテキスト（文脈）に対して、UIを使い分ける必要があります。
スイッチとチェックボックスは、ともに設定を適用する際に使われますが、ユーザーが期待する適用のタイミングがそれぞれ違います。
正しい条件下においてUIを使い分けることにより、直感的にどうするべきか見分けられるようになりますが、誤った状況で使用してしまえば、ユーザーに何かおかしいのではないかと思わせてしまうことになります。
スイッチは即時反映が求められる時に
スイッチは、設定をオン・オフにセッティングする際に通常使用されます。スイッチをオンにした時、「on」が表示され次第、アクションが起こることが望まれます。「on」の表示が持つ意味とはこの即時性にあり、UIに限らず、現実の世界のあらゆるスイッチも同様の役割をもっています。
電気のスイッチを押すと、すぐに明かりがつきます。それに遅れがあると、どこか調子が良くないのかと思います。
スイッチはそれ自体がトグルボタンですので、設定を決める際にボタンを押す必要がありません。この状況では送信ボタンを押す行動は想定されないので、もしボタンがあればユーザーの混乱を招きます。
スイッチは、即座に条件が適応される必要がある時だけに使い、ボタンを押す行動が必要であれば、チェックボックスを使いましょう。
チェックボックスはボタン押下が必要になる
チェックボックスは、スイッチのような即座のセッティングには使われません。スイッチと一緒に使用され、ユーザーがボタンを押した後に効果が表れます。ボタンを押す状況では、ユーザーは送信する前に、設定を見直すことができ、ミスや押し間違いなどを防ぐことができます。
左：即時反映ーボタンが押された瞬間に設定が適用される｜右：遅延反映ーボタン押下によってはじめて設定が適用される
見た目から発せられる意味合いは、チェックボックスとスイッチとでは異なります。「on」が即時決定を示すのに対し、チェックマークは選択中という状態を示します。つまりユーザーにとって、チェックボックスよりもスイッチの方が、より早く条件が適用されることが望まれています。
チェックボックスは、たくさんの設定を一度に適応する際に便利です。スイッチだと、ユーザーは設定の適応を一つ一つ待つ必要があります。チェックボックスだと、複数の設定の変更を一度に処理することができます。
ユーザーが頻繁に複数の設定変更を行う状況では、チェックボックスにすることで、時間を省くことができます。反対に、数カ所の変更で済む場合は、スイッチの方が適しています。
スイッチかチェックボックスか決めるには
どちらを使用するかは、機能よりも、そのコンテキストを考慮して決定しましょう。設定の変更に即時性が必要かどうか、またユーザーが設定を適応する前に見直す必要があるかどうか、よく考えて下さい。
現実世界でも、これらと同じような機能が数多くありますが、同じようなものがその条件に必ずしもフィットするとは限りません。特定の状況下で機能を果たすような、ほんの些細な相違点があるかも知れません。このような小さな相違点こそ、デザイナーは作業において、無視してはいけないものです。
