Web関連

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

0

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

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

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

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

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

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

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

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

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

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

 

ナビゲーションのまとめ

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

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

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

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

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

関連するサービス

ホームページ制作

0

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    業種別に採用サイトの違いをまとめてみた

    2016年度の就職活動もはじまり、新しい採用サイトを公開する企業も増え…

  2. Web関連

    若い者には負けないぞ!Webでおじいちゃんたちが大活躍!

    あなたのおじいちゃんは今何をしていますか?最近、「マイ・インターン」…

  3. Web関連

    休日はストリーミング配信サイトを利用してゆっくり過ごそう

    お盆や年末年始など、長期の休日はどうお過ごしでしょうか?ここぞとばか…

  4. Web関連

    仕事に役立つ?!武士道的精神三ヶ条

    こんにちは、IAの鑓水です!私は小学校から中学校まで剣道、高校は合気道…

  5. Web関連

    意外と気づかない?Webデザインには不可欠なフリー素材の落とし穴

    突然ですが、私は専門学校時代はゲーム作りをやっていました。あく…

  6. Web関連

    テレビ会議システムについて

    皆さんは、テレビ会議システムを使ったことは、ありますか?テレビ会議シ…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    【Web制作会社に聞いた】ランディングページの基礎を知ろう!
  2. Web関連

    HTML5での動画再生が主流になってきた!
  3. Web関連

    注目度急上昇中!Instagramで始めるアンバサダーマーケティング!
  4. Web関連

    パララックスデザインとUI・UX
  5. Web関連

    Web制作会社社員だからこそ知りたい!手書きの案件メモを整理するためにやっている…
PAGE TOP