こんにちは、こんばんは、にゃんこ師匠です。

前回のここで書いたように、最初の数秒で離脱は出始めています。このほんの一瞬の離脱を回避するためには視線移動に合わせて適切な色を置くような、工夫が必要です。

前進色と後退色

色には前進色と後退色があります。
2014110502

前進色と後退色を近接して配置すると前進色の方が近くに見えます。「目立つ」というのは周辺の色のバランスと、何色を使っているかで決まるのです。

2014110504

短時間でユーザに必要な情報がある事を理解させるためには、色に対する反応が重要です。(一部の色覚異常の方々を除けば)色による反応を引き出す事は、効果的な手法と言えます。

空白とポイント

単に前進色と後退色の対比だけでは理解が遅くなるケースもあります。意思疎通が出来ていない状態で、相手に「意識させたい意図」を伝えるには、空白も重要です。

2014110506

上図のように、色の対比があると、まず、色の対比の意味を解釈することから始まり反応が鈍ります。右下の図のように周囲の空白と前進色の組み合わせは反応を導きやすくなります。

しかし、その反面、反応が強すぎて、ボタンなどに使うと内容をよく読まずにクリックするような高い反射があります。この場合、飛んだページでの離脱が極端に増えるなど、別の問題が発生するので要注意です。

ジャンプ率

文字、文章を瞬間的に認知させるためには周辺の文字とのサイズ対比が重要です。文字のジャンプ率はデザインの基本で、なおかつ定番(必ずデザイン上意識する)でもあります。

こちらは簡単に改善ができます。例えば見出しと説明文、重要な所と、詳細な説明は常にサイズが異なっていれば良いのです。

2014110507

このように、意識すれば誰でも改善できるメソッドは、直ぐにでも実行でき、離脱の改善に役立てるので覚えておきましょう。