ページナビゲーションのユーザビリティ7つのポイント

6a868cf5dc21f38f348f322a96ba0a0d_m

この記事は約 3 分で読めます。


サイト内のページ同士をユーザが行き来するために必要なナビゲーション。

ナビゲーションといってもいろいろな種類がありますが、このナビゲーションこそ、サイト内でユーザが最もクリックする部分かと思います。

っという訳でその部分の使いやすさは重要ですね。
このページでは、ナビゲーションに関するユーザビリティを考える際に検討すべき点を整理してみました。

1.全ページで同じレイアウトで、同じ位置に設置する

img_usability_navigation01
右図のピンク色に塗った部分が、一般的にナビゲーションと呼ばれる部分です。
特に横に長い上部にあるナビゲーションをグローバルナビゲーションといいますが、ここにサイト内での最も上位の項目を配置する事が多いかと思います。
そしてそのために多くのクリックが集まる部分です。
そのような部分は、確実に全ページ同じように、同じ項目を配置させましょう。

ページごとに異なるものを配置していると、ユーザは迷ってしまい、挙げ句の果てにはサイトが分りにくく離脱してしまう原因となってしまいます。

2.ナビゲーションにあるメニューの項目は分りやすい名称にする

専門用語や、その業界の言葉などは使わないようにしましょう。
会社のサイト(コーポレートサイト)などであれば特にその点は気をつけないといけません。

いつも専門家ばかりが見ているとは限りませんので、ナビゲーションには一般的な名詞を名称とすると良いです。

3.メニューの項目数は、欲張って多くしないようにする

人が一度に認識できる項目の数が 7 ± 2 といわれています。
まずは「HOME」をつけるのと、「お問い合わせフォーム」などのどのページからも訪れてもらいたいページをグローバルナビゲーションには追加しておきますが、そのような項目を考えているとすぐに7個にはなってしまいそうです。

あまり多すぎると、デザイン的にも見にくくなってしまうし、ユーザからみて見やすいサイトではなくなってしまいます。

項目数は7±2 なので、5〜9個

9個もあると多い様な印象ですが、、、私の場合は、これまでの平均では5〜7個程度の項目数にしております。

4.パンくずリストを全ページに設置する

どのページにもつける必要があります。
「パンくずリスト」とは

のように表示されるメニューです。

見た事ありますよね?

このナビゲーションがあると現在サイトの構成の中で、どのページにいるのかが分りやすくなります。
そしてその1つ上の階層にはどのようなページがあるのか?なども把握できるため、情報量は少ないですが、一瞬でサイト内の位置関係を把握できるナビゲーションになります。

5.いまどの場所にいるかを分るようにする。

上記の「パンくずリスト」でもそうですが、現在サイト内のどの位置に居るかが分ると、ユーザにとってその際とはとても使いやすいサイトとして認識されるでしょう。

グローバルメニューでは、下図のように現在いるページに該当するメニューの色を変化させたりする事で、現在自分のいる位置が分りやすくなります。
img_usability_navigation02

6.全てのページから3クリック以内で目的のページにたどり着けるようにする

お問い合わせや資料請求などのサイトのゴール部分のページに対し、
ユーザがどのページを見ていても3クリック以内で移動できるのが理想的です。

ユーザが「お問い合わせしてみよう!」っと思ったときに、すぐにそのページへの移動方法が分らないと、離脱されてしまう可能性があります。
そのような事の無いように、「3クリック以内」を心がけましょう。

7.お問い合わせフォームへのリンクを目立たせる

これはユーザビリティというか、サイトのゴールへ到達しやすいように、すぐに分るように目がたせる事が重要です。
img_usability_navigation03

サイト制作の基本中の基本!
これが出来ていなければ、サイトとはいえない!っというくらいに
ここまで整理した6つのポイントは重要です。しっかり抑えて、
サイト制作をしてみましょう!

コンテンツマーケティングの教科書7ステップガイド

成功しているECサイト店長は知っている
コンテンツマーケティングで継続的なネット集客を実現し、売上アップに成功するための最新の方法を理解できます!

STEP-1 コンテンツマーケティングとは?
STEP-2 “コンセプト”と“ペルソナ”を設定する
STEP-3 集客用ブログを構築する(Wordpress編)
STEP-4 集客用ブログを構築する(SNS活用編)
STEP-5 無料オファー設定・LPの作成方法
STEP-6 ステップメールでファン・顧客を作る方法
STEP-7 リピーターを獲得するメールマガジン活用方法

ダウンロード

最新の記事情報が取得できます。