最近のWebのUIデザインで採用されているナビゲーションのパターン16種類のまとめ

最近のWebのUIデザインで採用されているさまざまなナビゲーションの名称とその役割、使う時のポイントを「Web UI Design Patterns 2016」から紹介します。

サイトのキャプチャ

Web UI Design Patterns 2016

以下、各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

Search: 検索

ナビゲーションのキャプチャ

検索のナビゲーションは、ユーザーが特定の何かを探していて、それがどこにあるか分からない時に直接その何かにアクセスすることができます。

最も基本的なパターンはメインのナビゲーションに検索のオプションとして含めることで、右上に配置するのが人気です。虫眼鏡アイコンを添えたり、ドロップダウンで拡張した検索機能にしてもよいでしょう。

Notifications: 通知

ナビゲーションのキャプチャ

ユーザーが何らかの操作をした時、もしくは新しい内容を伝える時に知らせることができます。

通知が普及したのは、ソーシャルメディアサイトにおけるプッシュコンテンツの影響が大きく、他のサイトでも通知を利用して新しいコンテンツやプロダクトやコメントを知らせるようになりました。例えば、Googleでは多数のプロダクト全体に渡る通知を統合して使用しています。

Jump to Section: ページ内アンカー

ナビゲーションのキャプチャ

ページを見る時や特定のセクションに戻る時にスクロールすることは必然です。ページ内アンカーがセクションごとに定義されていると、ユーザーの時間は節約されます。

テキストベースの長いページでは目次として、スクロール前提の縦長ページでは各セクションのアンカーポイントとして利用することができます。

Sticky Navigation: スティッキー ナビゲーション

ナビゲーションのキャプチャ

ユーザーはスクロールが長いと、混乱して迷ったり、メインのナビゲーションに戻ることを必要とします。スティッキー ナビゲーションはスクロールしても上部にくっついて配置されるので、この問題を解決します。

スティッキー ナビゲーションは上部でよく機能しますが、サイドや下部では普通(もしくは邪魔)です。特に無限スクロールを採用しているサイトでは、上部のナビゲーションが非常によく機能します。これがあることで、ユーザーは常に選択肢が与えられた状態となります。

Vertical Navigation: 垂直型のナビゲーション

ナビゲーションのキャプチャ

サイドバーに配置される垂直型のナビゲーションに含まれる項目は、水平型のメイン ナビゲーションに含まれない重要なリンクが多く含まれています。項目はそのページでできるオプション的なコンテンツや操作で、属性ごとにまとめて配置する必要があります。

Slideouts: スライドアウト

ナビゲーションのキャプチャ

スライドアウトは、コンテンツに重なって、またはコンテンツを押し出すようにして表示するナビゲーションで、そのスペースがしばしば問題です。また初期状態に使用されるハンバーガーアイコンは人気が高いですが、そのアイコンが分かりにくいため、「Menu」などのように文字を使用するものが増えてきました。

Popovers: ポップオーバー

ナビゲーションのキャプチャ

ユーザーが表示しているページはそのままの状態で、ポップアップを表示し、補足となる情報を表示します。情報入手のために個別のページに移動する操作がなくなるので、ユーザーの操作の流れを混乱させないという利点があります。

Modals: モーダル

ナビゲーションのキャプチャ

ポップアップと同様に、ページはそのままの状態で追加の情報を表示します。重要な異なる点は、ユーザーが何らかの操作を行わないと、元に戻したり、先に進むことができないことです。モーダルを使用した広告や宣伝は、オーナーは好みますが、ユーザーには好まれない傾向です。

Call to Action: コール トゥ アクション

ナビゲーションのキャプチャ

ユーザーはページで次に何をすべきか、明確なサインを必要とします。コール トゥ アクション ボタンは、行動への呼びかけを行い、ユーザーを招待するナビゲーションです。そのため、目立つ必要がありますが、あまり派手すぎると避けられてしまいます。

コール トゥ アクションを目立たせるためにはボタンのデザインや文言だけでなく、その周りのスペースを充分確保することで、ユーザーの目に止まります。

Featured Content: フィーチャード コンテンツ

ナビゲーションのキャプチャ

ユーザーはページを見た時、すぐに重要なコンテンツを見つけることができるとは限りません。それを解決するのが、重要なコンテンツを上部や中央に配置するフィーチャード コンテンツです。重要である基準は「価値がある情報」「新しい情報」で、その中身は常に変更するようにします。

Recommendations: おすすめ

ナビゲーションのキャプチャ

おすすめは最近のWebサービスには欠かせないナビゲーションで、ユーザーの嗜好に合わせてその内容が変化します。ショッピングサイトであればユーザーの購入や閲覧履歴を元に表示し、ソーシャルメディアであればユーザーに関係している人物を解析して表示し、サービスであればユーザーが利用したコンテンツのタイプを分類して類似のコンテンツを表示します。

Related Content: 関連コンテンツ

ナビゲーションのキャプチャ

ユーザーは検索をしないで、類似のコンテンツを見たいと望んでいます。現在表示しているページに関連したコンテンツを表示させるのは、ショッピングサイトやブログなどで非常に人気が高いナビゲーションです。関連しているコンテンツを見つけるには、キーワードにタグをつけることで機能します。また、同じコンテンツを見ているユーザーは、同じゴールに進むかもしれないため、そのユーザーに役立つ情報を予測するために使うこともできます。

Recently Viewed: 最近見たコンテンツ

ナビゲーションのキャプチャ

ショッピングサイトでよく使用されるナビゲーションで、文字通りユーザーが見たプロダクトを一覧表示します。これはユーザーが前に見たものを見るために、同じ道を引き返さないで済みます。これはユーザーに優しいUIで、ショッピングのプロセスを促進します。

Next Steps: 次のステップ

ナビゲーションのキャプチャ

次に何をすべきか、ユーザーはおすすめの行動が分かると迷うことがなくなります。ユーザーを直接、次のステップに導くナビゲーションです。次が何かを伝えるだけでなく、具体的な行動や利点を伝えるとより次のステップに進みやすいです。

Walkthroughs: ウォークスルー

ナビゲーションのキャプチャ

ウォークスルーは主に新規ユーザーのためのナビゲーションで、ページのUIや機能をどのように使うか説明するものです。標準的なUIだから必要無いという考えは捨て、サイトがどのように機能するかナビゲートすることで、使い勝手が向上します。

Links to Everything: すべてにリンク

ナビゲーションのキャプチャ

このナビゲーションはコンテンツにあるキーワードすべてをリンクします。例えばWikipediaやニュースサイトで多く見られます。人物、プロダクト、日付、評価など、さらに多くの情報を得るためにクリックが可能です。

元ページでは、上記のナビゲーションを含む2016年のUIデザインのパターンが詳しく解説されているPDFを無料(要メール)でダウンロードできます。

PDFのキャプチャ

Web UI Design Patterns 2016

top of page

©2016 coliss