すべてのボタンがアクションを実行するわけではありません。たとえばトグルボタンなどは、アプリの状態を変えるために使われます。１つのコントロールで複数の機能をもつので、UIのスペースを節約することができます。トグルボタンは押すと状態が瞬時に切り替わりますが、それ故に正しく設計しないと問題が発生します。
反転したカラースキーム vs 通常のカラースキーム
トグルボタンの課題は、現在の状態をいかに明らかにできるかというところにあります。視覚的な手がかりが明確でない場合、ユーザーはアクティブな状態を認識できないことがよくあります。これにより、誤ったオプションを選択してしまい、意図しない状態を引き起こしてしまう可能性があります。
特に混乱が起きやすいのは、現在の状態を示す視覚的な手がかりが反転色である場合です。このトグルボタンは一般的ですが、最適解ではありません。ユーザーには、暗い色のボタンがアクティブ状態を示しているかどうかがわかりません。明るい色のボタンが「オン」に見えるユーザーもいるので、選択したオプションのボタンを逆に取り違えてしまいます。
反転したカラースキームでは視覚的な手がかりが濃い塗りつぶしのみに対して、通常のカラースキームを用いると、塗りつぶしや文字の太さ、ボーダーの太さなど、複数の視覚的な手がかりを提供でき、双方の関係性がわかりやすくなります。
反転色は、ボタンが互いに明確になりすぎて問題なのです。ボタンの外観が異なっている場合、ユーザーが比較したときにどちらが強調されているかを見分けるのは困難です。
トグルボタンは、ユーザーがボタンを比較しつつアクティブな選択肢を見つけられるように、ある程度似たようなスタイルにする必要があります。それがわかってはじめて、選択が可能になります。比較のためのベースラインがなければ、ユーザーは視覚的な手がかりが何なのかわかりません。
反転したカラースキームを使用する代わりに、明るい背景に濃いテキストでトグルボタンを表示するような通常のカラースキームを使用します。違いは、選択したオプションに視覚的な手がかりが増えることです。色や薄い塗りつぶし、太字のテキストラベル、および暗い色の枠線を使用してハイライトを示します。選択されていないオプションでは、中間色、明るい色の枠線、テキストラベルを使用することで、コントラストの差を出します。
通常のカラースキームは、反転色と比較して、アクティブ状態を示す４つの視覚的な手がかりを提供します。選択されたオプションに明確な変化がある一方、選択されていない方はミニマルなままで、変化をつけることができます。双方の比較において、どちらのボタンがより視覚的に重要であるかがわかります。
トグルで混乱を招かないために
直感的なトグルボタンを作るコツは、反転色ではない通常の配色を使用することです。アクティブな状態を認識しやすくし、混乱を減らします。視覚的な手がかりがはっきりしないと、ユーザーは間違いを犯します。より直感的なスタイルをトグルボタンに適用することで、トグルの動作をよりシンプルにすることができます。
