キャンセルボタンに色をつけてはいけない理由
Post on:2019年4月16日
sponsors
キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？
キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。
キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度が上がります。また、ボタンが3個以上だったり、ラベルが違っていると、ユーザーは余計に戸惑います。
Why Cancel Buttons Should Never Have a Color
by UX Movement
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
キャンセルボタンに色をつけてはいけない理由
キャンセルボタンとは正確に言うと、何をするものでしょうか？
キャンセルボタンの役割はユーザーが操作した現在のスクリーンを閉じて、前のスクリーンに戻すものです。ユーザーはシステムに不要な変更を加えないようにするための保護手段として、この否定的なボタンを使用します。
ユーザーを安心させるには、キャンセルボタンを押させて行動を促すのではなく、安全へのフォールバックとして示すべきです。これが、キャンセルボタンに色を付けてはいけない理由です。
ニュートラルボタンのためのニュートラルカラー
ボタンの色は行動への呼びかけを示します。キャンセルボタンを押してもシステムが変更されることはないため、キャンセルボタンを押してもアクションは実行されません。したがって、色で強調することは絶対に避けてください。色を付けてしまうと、アクションが実行される印象をユーザーに与えます。その代わりにボタンには、何の変化も起こらず、そこからの脱出方法であるという印象を与えるべきです。
キャンセルが、左: アクションに見える、右: アクションに見えない
キャンセルボタンはニュートラルを意味するため、ニュートラルカラーにする必要があります。ユーザーはキャンセルボタンに色が付いていないことに気付くと、そのボタンが安全へのフォールバックであると素早く認識します。これは間違って確認画面に進んでしまった時に戻りたいことを望むユーザーにとって不可欠です。
スクリーン上の各ボタンに色が付いている場合、それらのボタンは注目を集めるために競合しています。色がたくさんあると、ユーザーは各アクションをより深く考えることができます。ニュートラルカラーのキャンセルボタンは、それらと競合せずに決定しやすくなります。アクションを実行する準備ができているユーザーは、キャンセルボタンに気を取られることはありません。
キャンセルに適したラベルとは
すべてのキャンセルボタンに「キャンセル」というラベルがあるわけではありませんが、機能は同じです。コンテキストに応じて例えば、「今ではなく」「いいえ」「後で」「スキップ」などのラベルがキャンセルボタンに付くことがあります。ボタンに無効な動作がある場合は、同じ機能を果たすため、キャンセルボタンとして扱う必要があります。
左: 分かりにくい例、右: 分かりやすい例
スクリーンに表示されるボタンが多いほど、明確なラベルが必要になります。すべてのボタンに色が付いていると、キャンセルできることが明確になりません。しかし、キャンセルボタンがニュートラルカラーの場合は、ボタンの選択がより直感的になります。
グレーを使う時は十分に暗くする
ボタンにグレーを使用する時は、グレーを十分に暗くすることが重要です。十分に暗くないと、ボタンは判読できず、無効状態（disabled）になっているように見えます。
左: 明るいグレーは見にくい、右: 暗いグレーは見やすい
ボタンが見やすいか確認するには、Contrast CheckerなどのWCAG 2.0コントラスト比ツールで色のコントラストを確認するのがよいでしょう。使用しているグレーがアクセシビリティガイドラインに合格しているかどうかが分かります。
キャンセルボタンはニュートラルにする
多くの場合、ユーザーが確認画面をアクティブにした時にはアクションを起こす準備ができています。しかし、間違ってアクティブにした場合、アクションを起こす考えを変えた場合には、キャンセルボタンをクリックして安全を確保させる必要があります。
色がつけられたキャンセルボタンは、間違ったシグナルが送られます。色がつけられていると、ユーザーはアクションへの呼びかけとして知覚します。ユーザーがより自由に操作できるように、キャンセルボタンはニュートラルにします。
sponsors
