Web関連

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

0

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

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

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

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

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

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

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

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

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

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

 

ナビゲーションのまとめ

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

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

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

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

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

関連するサービス

ホームページ制作

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    【バズるコラム】休みなしで10年記事を書き続けた無名ブロガーの「10分で書けるコラム」

    ・コラムをたくさん書いて新規ユーザーを獲得したい・でも、書く時間が…

  2. Web関連

    クラウドビジネスの動向。世の中のサービスちょっとだけ調べてみました。

    こんにちは、コンサルの横山です。会社の掃除をすることが多くなってきまし…

  3. Web関連

    レスポンシブデザインのサイトをわずか3日で仕上げる驚異的な方法

    最近の私の中での流行りは「故事成語」です。>故事成語/故事成句…

  4. SNS関連

    マーケティングツールとしてSNSを使いたい

    消費者のロイヤリティーを向上させるマーケティングが重要マーケティン…

  5. Web関連

    導入に迷ったら。マーケティングオートメーションツールを比較!

    いくつか登場してきたマーケティングオートメーションツールですが、最近で…

  6. Web関連

    次のITビジネスフィールドは宇宙だ!!

    こんにちは、チーフ・ソーシャル・レスポンスビリティ・オフィサーの藤田で…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    メリットづくしのレスポンシブ・ウェブデザインとは?
  2. Web関連

    就活生目線から見た!こんなリクルートサイトが使いやすい!
  3. Web関連

    電子書籍が良い理由
  4. AI関連

    働き方改革と企業が持つ問題を解決する新たな技術
  5. SNS関連

    上手く活用できていますか?企業としてのTwitter活用術
PAGE TOP