ちっちゃな矢印でもバカにしないで!?
ネットサーフィンをしていて、偶然見つけました。日経新聞 - 大人のレストランガイド
いっけん、とくに奇抜なデザインでもなく、ごく一般的な情報サイトですね。
・・・が、しかし!
細かい部分で、デザイナーの気配りが行き届いている、とても丁寧にデザインされたサイトだと思うのです(^ ^)
このサイト、リンクのある場所が、とても分かりやすいんですね。
小さな矢印の画像が、サイトのユーザビリティを増幅する!
例えば、こちらのページ。
とくに、ページの上段と左列にある、各種リンクテキストに注目してください。
それぞれの項目の先頭に、横向きのオレンジ色の矢印(GIF画像)が付いていますね。
オレンジ色の矢印。
ちっちゃな矢印ですが、実は、この矢印には以下のような重要な役割があります。
[役割その1] クリックを促す
ちょっと抽象的な表現になってしまいますが・・・
右向きの矢印というのは、ある種の「動くエネルギー」を見る者へ伝えます。
「ここはリンクです。まだまだ続きのページがありますよ~!」
「クリックして次へ進んでくださいね~!」
このようなメッセージを、ユーザーに伝える効果があるのです。
立ち止まらずに、次へ、次へ。
どんどんリンクをクリックして、さらに次のページへ進んでもらえるよう、ユーザーに催促しているんですね。
[役割その2] ユーザーの目線を誘導する
「目線を誘導する」
スミマセン、ピッタリの表現ができずムズガユイですが・・・(^ ^;
「目線のガイド役になる」とでも言うのか・・・とにかく、矢印を付けることで、ユーザーの目線の動きをサポートしてあげることが出来るんです。
例えば、上記と同じページの上段。
「エリアで探す」「こだわりで探す」・・・のリンクエリア。
各大項目の先頭にオレンジの矢印を付けることで、ユーザーは、自分が探している情報へのリンクを
よりスピーディーに探すことができます。
「関東・・・は関係ないな。関西でもない。おっ、中部だ。愛知をクリックしよう」
ユーザーの眼球+脳のコンビ(?)は、無意識のうちに、このような手順で情報を認識できるハズ。
トン、トン、トン。
リズミカル、かつ効率的に目線を動かせるんですね。
それもこれも、この矢印のおかげです。
チョコンと付いているオレンジの矢印が、情報をジャンル(=種類)ごとに分類しているから。
ちっちゃな矢印が、ユーザーの目線を誘導する。
ユーザーの手を引いて、目線のナビゲーターとなる。
サイズは、わずか10ピクセル前後。
そんなちっちゃな矢印の画像が、場合によっては重要な役割を果たすこともあるんです。
情報を見やすくするための、ちょっとした工夫。
あなたのサイトでも、ぜひ応用してみてくださいね(^ ^)
さらに突っ込んだデザインノウハウは、メルマガでお届けします!メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る
Powered by