Advertisement

featured_menu

 

ウェブサイトに欠かせないナビゲーションメニューの設計には、正しい方法と明らかに間違った方法があります。このウェブサイトの基本パーツのひとつは、しばしば設計プロセスでも見過ごされがちで、使いやすさにも影響してきます。

 

ごちゃごちゃな見た目や、メニュー数が多すぎたり、そもそもナビゲーションがなかったりといった問題が一般的で、単純にウェブサイトの仕上がりが悪くなってしまいます。ここでは、ウェブサイト制作で使用できる、効果的で使いやすいナビゲーションメニューの重要ポイント10個をご紹介します。

 

mobile-alternative-menu-1
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているの
100css-menu
ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイル

 

 

01. メガメニューはやめよう。

 

メガメニューは、特にクライアントに人気の流行であったと言えるでしょう。多くの項目をリストアップしたメニュースタイルはオーバーサイズ気味で、実際にはあまり価値がありません。

 

大手企業でもごく一部のサイトのみが、より多くのリスト項目を表示するために、メガメニューの利用をやめているのが現状です。リスト項目の多すぎるナビゲーション要素は、使いやすさも疑わしいと言えます。

 

ナビゲーションメニューに表示する項目の絞り込みが難しいことで、メガメニューを利用するケースがほとんどです。アナリティクスを解析し、ユーザーが本当に探しているものを確認してみましょう。正直なところ、特定のものを探しているユーザーは、キーワード検索を利用するでしょう。

 

metajive

 

 

 

02. 検索しやすくしよう。

 

検索ボックスはすべてのページに配置し、メインとなるナビゲーションメニューと一緒にしましょう。そして大きく表示し、アクセスしやすくなるように心がけましょう。

 

検索機能は、ユーザーがウェブサイトに長く滞在できるリンクの表示にも優れています。もしユーザーが探しているものがすぐに見つからない場合、次のオプションとして検索ボックスを利用することが多いでしょう。検索ボックスは入力しやすいサイズで、すべての文字が読めるか確認すると良いでしょう。

 

element

 

 

 

03. ナビゲーションメニューの数を制限しよう。

 

ユーザーが次にアクセスしたくなるコンテンツを予測、提示しましょう。もっとも人気のあるページやウェブサイトデザインの情報など、ナビゲーションメニューの選択肢を限定してみましょう。

 

ほぼすべてのナビゲーションメニューで検索や連絡先、お問い合わせページなどを含んでいる必要があります。また、Eコマース系ショッピングサイトでは、カートや購入ボタンも含むようにしましょう。サイトコンテンツによって、ナビゲーション要素を調整してみると良いでしょう。

 

livso

 

 

 

04. かしこいナビゲーションメニューを開発しよう。

 

良いナビゲーションメニューは、ユーザーがひとつのコンテンツから次のコンテンツに移動するのに役立ちます。このコンテンツは、ウェブサイトのさまざまなページごとに異なるでしょう。

 

複数のナビゲーション設定を作成することで、ユーザーは関連のある次のコンテンツに簡単にアクセスできるようになります。一部の要素は重複するかもしれませんが、他の部分ではユーザーがよりコンンテンツを掘り下げることができるように心がけましょう。

 

テクノロジーの進んだ現代では、ユーザーに応じて最適化、パーソナライズ化されたサービスを提供されることが期待されます。Amazonでは、ナビゲーションメニューにユーザー名を表示するなど、このテクニックをうまく活用しています。セカンダリナビゲーションには、最近の注文履歴や他に利用しているサービスなど、ユーザーごとに最適化して表示されているのがよく分かります。

 

amazon

 

 

 

05. 目的に応じてナビメニューを並べよう。

 

ナビゲーションメニューの順番は、ナビメニューの項目の選択と同じくらい重要です。ナビゲーションメニューの最初と最後の項目は、もっとも効果的で、よく見られるだけでなく、よくクリックされるので、ここをうまく活用してみましょう。

 

これを裏付ける科学的な証拠もあります。連続的につづく位置関係では、人はリストの最初と最後の項目をもっとも選択する傾向があります。さらに、ユーザーは最新のコンテンツに興味をもちやすく(Recency 効果)、リストの最初のいくつかのアイテムは、真ん中にある要素より優先されます(Primacy 効果)。

 

アナリティクスのユーザーフローパターンを確認することで、どのページと要素を中央に配置すべきか決定するのにも役立ちます。ユーザーがよく閲覧しているページと、よく見て欲しいコンテンツも確認し、ユーザーをあまり誘導していないナビゲーションメニューリンクは取り除きましょう。

 

whisky

 

 

 

06. 長いページでは固定ナビゲーションを利用しよう。

 

ユーザーがナビゲーションをいつでも追跡できるようにしましょう。画面の上や下または側面に固定するかにかかわらず、長いスクロールが必要なページでは、固定ナビゲーションメニューを利用するべきです。その理由はシンプルで、ユーザーがあなたのウェブサイトとのやりとりを続けることができるようにするためです。

 

コンテンツへの移動が楽になればなるほど、ユーザーはよりコンテンツを閲覧する可能性が高くなります。ユーザーがデザインでウェブサイトに費やす時間が長くなれば、行って欲しいユーザーアクションに近づくと言えるでしょう。

 

names

 

 

 

07. ナビゲーションメニューを隠さないようにしよう。

 

小さなメニュー項目や、画面の一番下に隠れているリンク、またはフッターにしかないリンクや、不思議なアイコンに隠れたポップアウトナビゲーションでは、ユーザーはナビメニューをあまりクリックしない傾向なので、ナビメニューは隠さないようにしましょう。

 

ユーザーはさまざまな方法であなたのウェブサイトにアクセスできます。ユーザーがページを開いたときに、ナビゲーションメニューをすぐに使えるようにしましょう。

 
brew-tours

 

 

 

08. 説明書きラベルも一緒に利用しよう。

 

ナビゲーションメニューに利用するリンク項目名からアイコンまで、クリックすると何が起こるかをユーザーに正確に伝える必要があります。購入ボタンのショッピングカートアイコンや、検索ボックス用の虫眼鏡アイコンなどよく使われているアイコンを利用するようにしましょう。

 

さらにもう一歩踏み込んで、含まれている情報やコンテンツを正確に伝えるテキストラベルも利用してみましょう。コンテンツをよりわかりやすく説明する単語があれば、サービスや商品などやりすぎな説明書きには注意しましょう。

 
postable

 

 

 

09. フルページ使いのナビメニューを検討しよう。

 

時にはデザインをナビゲーションメニューに利用することもできます。ユーザーに欠かせない重要な要素がいくつかあるときは、画面スクリーン全体を使って紹介してみましょう。

 

これはすべてのプロジェクトに適したテクニックではありませんが、小規模なウェブサイトやポートフォリオ、プロジェクト制作などに効果的と言えます。

 

aria

 

 

 

10. 垂直ナビゲーションを採用しよう。

 

垂直方向のナビゲーションメニューは、流行しているトレンドと言え、他とは異なり見やすく、注目を引きやすいという正当な理由があります。

 

固定サイド、縦型ナビゲーションメニューは、リスト項目を表示するためにもう少しスペースが欲しいときにも有効的です。より階層の深いナビメニューでは、ごちゃごちゃとした印象や要素間に十分な余白スペースを維持するなどに気をつけましょう。

 

yoke

 

海外サイト WebDesignerDepot で公開された 10 Ways to Design Menus That Don’t Suck より許可をもらい、翻訳転載しています。

 

参照元リンク : 10 Ways to Design Menus That Don’t Suck – WebDesigner Depot