Web関連

ナビゲーション設計に必要なユーザビリティとファインダビリティ

ナビゲーションとはウェブサイトにおいては、
ユーザーを目的の情報へとスムーズに導くための機能のことです。
膨大な情報の中から目的の情報を探すとなった場合に、
ナビゲーションはウェブサイトにおける必須の機能といえるでしょう。

今回はナビゲーションを設計する際、おさえるべきポイントについて考えてみたいと思います。

ユーザービリティとファインダビリティ

ナビゲーションの使い方としては、見るだけでなく、クリックするという行動も
必要となります。
そのためナビゲーションは「見る」、「使う(クリックする)」という
2つの行動を考慮した作りにする必要があるのです。

ナビゲーションには共通の考えとして、ユーザビリティ(使いやすさ)を
考慮した設計が大切だと言われますが、ファインダビリティ(見つけやすさ)も考慮する必要があるのです。

この2つのことはウェブサイト制作においても当てはまります。
どちらか一方を満たしていれば良いというわけではなく、
ユーザビリティ、ファインダビリティの両立が必要になるのです。

ハンバーガーメニューから見るナビゲーション

例えば、ナビゲーションを「見る」という行為に比重を置いたサイトにする場合、
画面中央に大きく表示することでそれは満たされるでしょう。

ナビゲーションを「使う」という行為に比重を置いたサイトにする場合、
ページを移動する際にナビゲーションをクリックしたときにはじめて表示することでそれは満たされます。

少しわかりやすく例を出すとモバイルサイトなどでよく用いられるハンバーガーメニューです。
ハンバーガーのように見える「三」のマークアイコンのことです。
画面幅が狭いスマートフォンでは、情報をできる限りコンパクトにする必要があるため、
ナビゲーションの集約という考えで設計した結果である一方で、
そこにナビゲーションがあるという規制概念が浸透してきたからこそ、成立した仕様と考えたほうが良いでしょう。

 

ナビゲーションのまとめ

先ほど例に挙げたハンバーガーメニューはモバイルサイトの画面内にコンパクトに表示することができ、
デザイン面でも優れています。
しかしクリックをしなければナビゲーションを見ることができないということは、
「ファインダビリティ」の考慮を考えると少しユーザーのリテラシーに頼っているところがあるのかもしれません。

たとえば、ハンバーガーメニューの「三」というアイコンだけではなく、「メニューという文字」を入れるだけで、
「ファインダビリティ」の問題は解消することができます。

このように、ユーザビリティ、ファインダビリティを両立させたナビゲーションこそが
ユーザーフレンドリーな設計であると言えるでしょう。

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

ホームページ制作

スマートフォンサイトに適したUI設計とは(1)前のページ

数年後には常識!?開発を変える『APIエコノミー』とは次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. AIに求められているものは、実は意外な物だった
  3. 新型コロナウイルスで日本の働き方改革が起こる
  4. 大手企業も注目するMaaS(Mobility as a Service)とは何か…

関連記事

  1. Web関連

    【ホームページ制作】Google認定パートナーになってみよう!

    皆さん暑い中仕事に励んでいることと思います。この記事を見つけた人は…

  2. SNS関連

    ビジネス特化のソーシャルメディア「Linkedin」

    さて今回はソーシャルメディアについて触れていこうかと思うのですが、みな…

  3. Web関連

    テレビCMとは違う?動画広告の面白さとは

    皆さんは1日にテレビ以外の動画をどれぐらい見ていますか?1時間も見…

  4. Web関連

    近ごろ話題のワークショップ型ディスカッションを考えてみた

    ワークショップ型ディスカッションという言葉を聞く機会が多くなってきたな…

  5. Web関連

    ミュージシャンのWebを利用したプロモーション

    こんにちは。音楽が好きで好きでたまらない杉山です。昨今、Webを活用…

  6. Web関連

    Webデザイナーなら知っておくべき!誰でも実践できる写真構図のポイント

    最近寒くなってきましたね。そんななか、11月末に箱根までバイク…

おすすめ記事

最近の記事

  1. DX(デジタルトランスフォーメーション)・デジタルシフトへの…
  2. テレワークだけでは足りない?デジタルシフトなど、アフターコロ…
  3. デジタル化が旅行・観光業を救う!?ウィズコロナ・アフターコロ…
  4. 非接触がこれからの常識。ウィズコロナ・アフターコロナはIoT…
  5. キャッシュレス決済はウィズコロナでのウイルス対策に繋がってい…

アーカイブ

  1. Web関連

    Webサイトの裏側までこだわるアートなHTMLソースコード集
  2. Web関連

    聞いた事ある?マーケティングオートメーション
  3. Web関連

    気を付けて!常時SSL移行に失敗しないための4つのチェック項目
  4. SNS関連

    上手く活用できていますか?企業としてのTwitter活用術
  5. Web関連

    一石三鳥!?マルチデバイスに対応したブラウザ「Blisk」
PAGE TOP