デザイナーのためのWebサイトナビゲーションガイド【優れたWebサイトにするために】

明確で慎重なナビゲーションは、アプリが優れた第一印象を作り出すために利用できる最良の機会の1つです。

あなたはどのように “明快でシンプルで一貫性のある”ナビゲーションを作成しますか？以下は、Webの基本的なナビゲーション規則です。

 

 

グローバルナビゲーション

Webデザイナーは、永続的なナビゲーション（またはグローバルナビゲーション）という用語を使用して、アプリケーションのすべてのページに表示される一連のナビゲーション要素を表現します。

一貫性のある外観ですべてのページの同じ場所にナビゲーションが表示されているだけで、あなたが同じアプリにいることを即座に確認できますこれは考えているよりも重要です。（行動科学でも実証されている。）

 

 

セクション – 重要な部分

セクション（主ナビゲーションとも呼ばれる）は、アプリのメインセクション（アプリの階層の最上位レベル）へのリンクです。

いくつかの設計では、永続的ナビゲーションには、セカンダリナビゲーション（現在のセクションのサブセクションのリストのこと）を表示するためのスペースも含まれます。

他のセクションでは、セクション名にマウスを当てるかクリックをするとドロップダウンメニューが表示されます。また、クリックするとセクションの先頭ページに移動し、セカンダリナビゲーションが表示されます。

 

 

パンくず – あなたのガイド

「あなたはここにいる」インジケータのように、パンくずはWebアプリケーション上のどこにいるかを示します。

パンくずは自明のものであり、多くの場所を占有することはなく、ホームに戻ったり、ページを自在に閲覧するための便利で一貫した方法を提供します。

パンくずリストには、ホームページから自分の現在の場所へのパスが表示され、アプリの階層内で上位レベルに簡単に戻ることができます。

 

パンくずリストを実装するためのベストプラクティスをいくつか紹介します。

 

1.一番上に置く

パンくずリストは、ページの上部にある場合に最も効果的なようです。これはおそらく、文字や文字を雑誌や雑誌のページ番号などのアクセサリのように見せかけるためです。

2.レベル間で>を使用する

トライアルとエラーは、レベル間の最善のセパレータが「より大きい」演算子（>）であることを示していると思われます。

3.太字の最後の項目

リストの最後の項目は、現在のページの名前でなければなりません。太字にすると、それに見合った印象を与えます。それはあなたがいるページなので、当然それはリンクではありません。

 

 

タブ

タブは、バインダーのタブやファイル引き出しのフォルダーのタブと同様に、セクションからはみ出しているものを分割します。また、タブをクリックすることで簡単にセクションを開くことができます。

モールとチョコレートで考えるならタブは、ショッピングモールの部門の棚に似ています。彼らはあなたに正確に何を期待するかを伝えます。さまざまな種類のチョコレートをさまざまな棚に置いて購入させることができます。

 

タブが良い理由は以下です。

 

1.自明である

タブを見たら、一目で何を示していてどう操作すべきかが分かります。

2.見逃しがたい

ユーザビリティテストを行うと、Webページの上部にある水平ナビゲーションバーを見落とされる頻度に驚いています。しかし、タブは視覚的に独特で、見落としにくいです。ナビゲーション以外の何かを間違えるのは難しいので、ナビゲーションとコンテンツの間で一目で分かりやすいような仕組みを作ります。

3.滑らかである

Webデザイナーは、ページを視覚的に面白くするために常に苦労しています。正しく実行された場合、タブはデザインに磨きを加えて有用な目的を果たします。

 

 

結論

ナビゲーションを理解することは難しく、実装することはさらに困難です。しかし、あなたが何をするにしても、実装するナビゲーションは、エンドユーザが見たいものであることを確認する必要があります。

 

 

▼こちらの記事もおすすめです！

 

 

 

 

※本記事はUX — The Designer’s Guide To Website Navigationを翻訳・再構成したものです。