業界あるある―わかりやすいサイトの法則

Webサイト制作における「一般的に気を付けるべき」「通例とされている」事があります。
ここではそんな【業界あるある】をお伝えします。

【あるある】はたくさんあります。

前回は視線に合わせたサイト制作についての基本をお伝えしましたが、
第3回目の今回は、見ている人に伝わりやすいサイトを作るための、
ディレクションの法則をお伝えします。

わかりにくいサイトは、見ているだけでストレス！

インターネット上にはたくさんのWebサイトが存在します。
過去の経験から「このサイトは見にくいなぁ」と思った事はありませんか？

調べ物をしていて訪れたサイト。
欲しい物を買うために訪れたサイト。

色々な状況が考えられると思いますが、見づらいサイトに訪れた時、
あなたはどういう行動をとりましたか？

私ならば、そのサイトから離れ、もっと見やすいサイトを再検索します。

理由はその方が早いからです。

難解なサイトを読み解くのは時間がかかりますよね？

『いやいや、再検索をかけるのは君だけだろう』と思ったアナタ。

別に私の性格の問題ではないのです。

実はこの行動、脳が受けたストレスを回避するために行っているからです。

脳がストレスを感じている？

脳がストレスを感じる言葉で言っても解りにくいと思いますので、
実際に脳のストレスを体験できる、簡易テストを行ってみましょう。

次の４つの「文字」を、左から順に声に出して読んでください。

正解は、「あか、あお、みどり、くろ」です。
迷わずすぐに読めましたか？？

読むのに少し時間がかかりませんでしたか？
これは、文字を確認する前に視覚の色味情報が入り、脳が混乱するせいです。

この反応の遅れは、名前がついており「ストループ効果」と言われています。

では次は、文字に塗られている色名を、左から声に出して読んでください。

正解は、「あか、みどり、あお、くろ」です。

こちらも脳が混乱して、読むのに時間がかかりませんでしたか？
これは「逆ストループ効果」です。

色は右脳で、文字は左脳で認識していると言われていますが、
右脳と左脳では、認識までの処理速度が違うと言われているので、
正しく認識するまでに時間がかかります。

すぐ判断しなくてはならない時に、この混乱が脳にとっては「ストレス」になります。

Webで気を付けたいストループ効果の例

ストループ効果がわかったところで、
実際Webサイトではどういったところでストループ効果が発動するのか？
例を用いて、ご紹介します。

下記のボタン画像を見てみましょう。なんだか、違和感を感じませんか？

一般的に、時間をイメージした際…左から右に時間軸が流れている認識があります。
Microsoft Wordや、Excelの戻るや進む。Webブラウザの戻るや進む。
どちらも「進む＝右」。「戻る＝左」に矢印は向いています。

一般的なイメージに反すると、それはストレスに感じてしまいます。

上記のボタンが設置されたサイトに訪れ、次のページへ移動しようとした時、
ボタンの文字を読む人はどのくらいいるでしょうか？
多くの人が文字は読み飛ばし、イメージだけで右のボタンを押してしまうのではないでしょうか？

そして、右ボタンを押したことでページが「戻ってしまう」と、混乱することでしょう。

つまり、元々イメージがある物に対してメッセージを持たせた時、
正しく伝えるためには、イメージとの整合性がとれているか？が、大切になります。

花屋サイトのファーストビューが、プールの写真だったらどうでしょうか？
見に来た人は、「あれ？サイトを間違ってしまったかな？」と混乱する事でしょう。

伝わりやすいデザインや配置、イメージがあるという事を、
きちんと認識することが大切です。

ストループ効果を与えない！相手に伝わるディレクションとは？

今までの事を踏まえ、下記の画像を見てみましょう。
どこがおかしいか、わかりますか？？

一見すると、問題ないように見えますが、
「お電話でお問い合わせ」を大きく宣伝していながら、
電話番号の表示がとても小さく、見ている人にとって「伝わりにくいデザイン」になっています。

瞬時に判別しにくく、電話番号を「探す」事が必要なので、
見づらいサイト＝ストレスを感じるサイトに捉えられてしまいます。

ストレスを感じるサイトは、離脱の原因です。

電話で問い合わせてほしいのか、メールで問い合わせてほしいのか？
まずは整理し、電話でのお問い合わせを頂きたいのであれば、
電話番号は大きく表示するようにしましょう。