こんにちは、にゃんこ師匠です。最近はめっきり寒くなって、起きるとベッドが3匹の猫に占拠されています。暖房の節約になってるんでいいのですが。

さて、今回は前回に続き「アクセシビリティに配慮した注意と警告に最適の色 [2/3]」

不適切な色の扱い

前回取り上げた色覚異常の方々への配慮はもちろんの事、短時間での判別となると人の刷り込み学習にも配慮する必要があります。

例えば、以下の例ー
20141003006

トリック的な使い方の例です。一見すると安全と危険は色で判別できそうですが、文字を見ると内容が色と矛盾していることが分かります。こうした誤解を受ける使い方は大きな離脱に繋がるので注意しましょう。

個性にもよりますが、どうしても色の方に信頼性を置いてしまう人が多いのではないでしょうか?

こうした色による反応は「本能的なもの」+「子供時代から学習した経験」で強化されるため、理屈より先に体が反応する場合も少なくありません。

上記の例で言うと、背景色が「緑」だと「危険」と書かれていてもピンと来ない。逆に「黄色」に高いコントラストの「黒字」で書かれていると、「安全だよ」というよりは「安全を確保しなさい」と警告を受けているような気分になります。

このような反応はスペクトル(色空間)で考えると分かりやすくなります。

色空間にみる安全と危険の色

■ スペクトル
Spectrum4websiteEval
http://ja.wikipedia.org/wiki/色空間

一目瞭然ですが緑を境に左が安全色、右が危険色です。あなたが直感的に感じる印象=多くの人が感じる印象なので、上記のように色を分解してみると整理しやすいかと思います。

フォームに置き換えると

フォームであれば「必須項目」は目立つように「赤」であるべきですし、入力フィールドも赤系の色を使うのが適切でしょう。

警告は「黄色、または赤色」で、送信ボタンは「未入力の場合は黄色」、「入力が完了しているなら緑・青系」の送信ボタンに置き換わるとユーザは理解しやすくなります。

例外事項

ただし、送信ボタンに限って言えば、議論が分かれるケースがあります。「未入力の場合は黄色」「入力が完了しているなら緑・青系」は、入力を完了させるというミッションには向いています。

その一方で緑・青系は冷静にする=クールダウンさせるので、最後のクリックを躊躇させる要因になるかもしれない、コンバージョン率低下の要因にならないか十分な検証が必要になります。

この点は入力フォーム専用のログ解析で十分チェックする事をお薦めします。

イメージ写真はクリエイティブコモンズ・ライセンスに基づき掲載しています。 写真掲載元:Julio César Cerletti García