設定画面などでは、よく状態を切り替えるボタンが置かれています。
例えば以下のようなものです。
- サウンドのON/OFF
- 難易度の設定（EASY/NORMAL/HARDなど）
- 画質の設定（低画質/高画質モードなど）
ゲーム内容によっては、設定項目ではなくゲームに直接関わる部分で「状態を切り替えるボタン」が置かれることもあります。
この「状態を切り替えるボタン」のデザインについて、気をつけなけらばならないことがあります。
紛らわしいにも関わらずよく見るデザイン
みなさんは下のようなON/OFF切り替えボタンを見たとき、
- 「ON」と書いてあるときはON状態である（押すとOFFになる）
- 「ON」と書いてあるボタンを押すとON状態になる（現在はOFFである）
のどちらだと感じるでしょうか？
文の伝え方や状況によっても捉え方は多少変わるかもしれませんが、実際にTwitterでアンケートを取ってみました。
その結果・・・
面白いことに、ほぼ半々です。
つまり約半分のユーザーが勘違いしてしまう、とてもよくないUIであることが分かります。
なぜ認識が分かれるのか
なぜ正反対の意見を持つ人が両方とも一定数いるのでしょうか。
普段使うツールやゲームのUIに影響を受けているのか、人それぞれ捉え方が違っています。
というのも、このボタンが「状態を表している」のか「機能を表している」のかが分からないということが、意見の分かれる要因です。
「ON」と書かれている時にON状態だと感じた人は「表示が現在の状態を表している」と捉え、
「ON」と書かれている時にOFF状態だと感じた人は「表示がボタンの機能を表している」と捉えたのです。
ちなみに個人的には前者の方がしっくりきます。
それでは、どのような切り替えボタンにすればユーザーの捉え方を統一できる、分かりやすいUIになるのでしょうか。
今回は状態を切り替えるボタンについて、デザイン例をたくさん挙げてみました。
状態切り替えボタンのデザイン例
ひとつずつ紹介していきます。
色で状態を表す
まずは色で状態を表す方法。
テキストだけだと曖昧になってしまいますが、「ON」を目立つ色で、「OFF」を目立たない色のボタンで表示すると「状態を表している感」が強くなります。
これは目立つ色が表示された時に「アクティブだ」と感じるため、状態を表していると捉えやすいことが要因と思われます。
レイアウトの変更もなく簡単に改善できるのですが、これでも曖昧であることには変わりありません。
状態を表すものを別に作る
ボタン1つで状態を表そうとせずに、状態を表すだけのものをボタンと別に作る方法です。
例えばこちら。
ボタンの隣にライトのようなものを配置し、点灯状態でON/OFFを示します。
他にも、サウンドの場合であればスピーカーアイコンを置くのもアリ。
アイコン自体をボタンにするパターンもよく見かけますが、個人的にはボタンだと少し分かりづらいので微妙。選択肢としてはアリではあると思います。
ボタンを複数個並べる
無理にボタン1つで表そうとせず、ボタンを状態の種類分並べる方法。
現在の状態のボタンは目立つ色（or 明度の低い色）にし、押し込まれているような見た目に変えます。
必要な空間が広くなってしまうというデメリットはありますが、シンプルで分かりやすい上に状態が何種類あっても理論上対応できます。
また、ボタン同士をくっつけたデザインもアリ。
端以外の頂点は角丸にしないのが良いです。
矢印ボタンで選択する
状態名はテキストで表示し、両側に状態を変更する矢印ボタンを配置する方法。
誰もが直感的に分かるデザインな上に、状態の種類がいくつあっても一定の領域に収まるという利点があります。
気をつける点としては矢印ボタンが小さくなりがちなので、特にスマホの場合は最低限タップしやすい大きさを確保すること。
状態が3つ以上ある場合にはこの方法がおすすめ。
チェックボックス風ボタンを使う
ON/OFFの2値切り替えの場合に限るのですが、チェックボックス風ボタンを使う方法もあります。
この方法のメリットは、文字の表示が不要なので非常に狭い範囲で表現することができるという点。
あまりスペースを取れない場合には絶大な力を発揮します。
チェックマークを表示/非表示するとより分かりやすいかもしれません。
Android端末のチェックボックスが参考になるかも。
iOS風トグルを使う
iOSでよくあるトグルを使う方法で、こちらもON/OFFの2値切り替えのみに使えます。
iOSユーザーなら特に馴染みのあるUIで、文字がなくても意味が分かりやすい表現です。
iOS風トグルをUnityで実装する方法を丁寧に記事にまとめたので、もしUnityで使いたい方はこちらを参考にしてください。素材もあります。
また、文字も一緒に表示することでより分かりやすくするのもおすすめ。
このように四角っぽくデザインするのもかっこいいですね。
文字も一緒に表示する場合にはON/OFF以外の意味を持たせることも理論上可能ではありますが、「トグル=ON/OFFを切り替えるもの」という暗黙のルールがあるのでおすすめできません。
視覚以外で状態を伝える
これは使える場面が限られてくるのですが、見た目で表現するのではなく聴覚や触覚に状態を伝える方法もあります。
例えば、
- サウンドのON/OFF切り替えで、ONになった時にのみ効果音を再生
- バイブのON/OFF切り替えで、ONになった時にのみ振動を発生
のような方法です。
もちろんこれまで挙げてきた視覚的に表現する方法と組み合わせると、より効果的です。
まとめ
状態切り替えボタンのデザイン例をたくさん挙げてみました。
テキストのみで状態を表すのは誤解を招くので、誰もが分かるデザインを心がけましょう。
テキストのみで表現している場合、とりあえず最初に挙げた例のようにボタンの色を変えるだけでも誤解は減ると思います。
色を変えるだけであればレイアウトの調整は不要なので、最低限これだけでも対応しておくことをおすすめします。
- テキストのみの状態切り替えボタンは認識がばらける
- 状態切り替えボタンのデザインには工夫が必要
- サウンドや振動を組み合わせるとより効果的
- 色を変えるだけならレイアウト調整不要なので行うべき
コメント