デザイン

デザイン

5つのナビゲーションの使い分けと特徴【UXを向上させるナビゲーションの使い方】

1,354 views

読了時間 : 約1分50秒

使いやすいナビゲーションを作ることでユーザーはスムーズにタスクを達成でき、コンバージョンの向上も見込めます。逆にナビゲーションが使いにくいとアプリ全体に悪影響を及ぼし、コンバージョンも落ちてしまいます。ナビゲーションはそれほどまでに重要な要素であり、作り込む価値のあるものなのです。今回はUXを向上させる優れたナビゲーションの使い方を5つ紹介します。

 

 

  1. 1.ドロップダウンメニュー

5ui①

ドロップダウンメニューは拡張可能なUIナビゲーションです。ユーザーを新たなページやサイトに導いたり、選択したオプションをもとにアクションを実行したりします。

 

いつ使うべき?:

ナビゲーションに多くのオプションを含む場合やスペースを節約したい場合に使いましょう。ユーザーにとってなじみ深く、さっと全体を見て何があるのかをすぐに確認できます。

 

 

  1. 2.スライドするハンバーガーメニュー

5ui②

複数のリンクを含む、モバイルでよく使われるメニューです。通常は隠れており、ハンバーガーボタンを押すと画面上に現れます。

 

いつ使うべき?:

レスポンシブデザインが求められる場合に活躍します。普段は隠れているため、画面をすっきりさせることもできます。

 

 

  1. 3.固定メニュー

5ui③

固定メニューはウェブでよく見られ、画面をスクロールしても常に同じ場所に表示され続けるメニューです。

 

いつ使うべき?:

ユーザーの行動が想定できる、ショッピングサイトに適しています。ユーザーは即座にナビゲーションに到達できるため、素早さが求められる場面では特に活躍します。

 

 

  1. 4.カスタムメガメニュー

5ui④

拡張可能な、複数段階のメニューです。二次元のパネルが分割され、全てのリンクやタブを一覧できます。

 

いつ使うべき?:

メニューバーにカーソルが乗るまで隠れているため、スペースを節約できます。表示できるリンクの数が多いため、大規模なサイトに適しています。

 

 

  1. 5.カードグリッド

5ui⑤

ウェブとモバイル両方で利用される、グリッドをブロックに分割したメニューです。拡張または収納が可能で、類似した要素をグループ分けして表示できるのが特徴です。

 

いつ使うべき?:

グリッド上の画像は表示領域が広いためタップしやすく、モバイル環境でも快適に使えます。ビジュアルが重視されるウェブサイトでも利用されており、PinterestやSpotifyが採用しています。

 

 

 

 

このように、デバイスやサービスの性質によってナビゲーションも使い分ける必要があります。最適なナビゲーションを見つけ、サイトやアプリをもっと快適にしましょう。

 

 

 

 

※本記事は、5 UI Patterns: Navigation That Makes Good UX Senseを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

ポイント50%&20%還元『メルペイフィーバー・メルペイサンデー』
■キャンペーン期間:2020/03/01 ~ 2020/03/31

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ