デザイン

デザイン

どうするハンバーガーメニュー!?有名サイトのナビゲーション例を見よう!

317 views

モバイルページ上での「ハンバーガーメニュー」の使いにくさが指摘されることが多くなりました。その大半は「ハンバーガーメニューなんて開かれることがない」や、「UXを大きく損ねる」というものですが、これに呼応する形で多くのサイトがハンバーガーメニューの代替方法を用いるようになってきています。

 

本稿ではそうしたハンバーガーメニューに替わるナビゲーションをご紹介していきます。

 

1.タブ

2

 

 

ウェブサイトやアプリのメニュー数が限られており、かつユーザーがメニューを素早く変えることができる方がいいという場合に、タブナビゲーションが有効です。

タブナビゲーションをデザインする場合は、メニューが「5つ以下」になるようにデザインしましょう。

 

例:LinkedIn とGoogle Photos

4

 

2.メニューに「Moreを含むタブ

主要なメニューが5つより多い場合の解決法は、4つの重要なメニューと「その他全て」に分けることです。

 

1-bwd-ahgd13pjo20vd_savq

 

「More」はナビゲーションページへのリンク又は残されたメニューを表示するドロップダウンメニューにすると良いでしょう。

「More」をドロップダウンにした場合、ハンバーガーメニューと変わらないという意見もあると思いますが、メニューの優先順位づけを正しく行えば、多くのユーザーは4つの表示されているメニューを見るでしょう。結果、ナビゲーションエクスペリエンスは概ね改善されると言えます。

 

例:Facebook

1-qxp5fe5cc2s-ygdpdf5m4a

 

 

3.段階的に変わるメニュー

 

1-jt8yodjxh7ln5jxfqyyfea

 

「More」を含むタブメニューのより洗練されたデザインは、スクリーンサイズによってメニューの数が変化するものです。この場合、画面に入りきらないメニューは全て「More」の配下に移ります。

 

例:BBC

cfle4w_6

 

4.スクロール可能なナビゲーション

もしメニューがたくさんあり、かつ優先順位を付けられない場合はスクロール可能なナビゲーションにすることもできます。ただし、スクロールしなければ見られないメニューがある、ということが欠点と言えます。

また、ユーザーに、表示されているメニュー以外にもメニューがある、ということが分かるようなデザインにする必要があるでしょう。

 

例:Medium

 

1-jzhllfmcrj2pek1btrdgww

 

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

ノーマルではありませんが興味深い選択として、ドロップダウンメニューがあります。ドロップダウンデザインは一番上のメニューとその配下のメニューが親子関係にあることを示すことができます。

 

例:Barnes

1-bwd-ahgd13pjo20vd_savq

 

実はハンバーガーメニューがしっくりくるケースもあります

隠れている、見にくいというのがハンバーガーメニューの欠点であり、メインメニューとして使うことは避けたほうがいいでしょう。しかし、サブメニューのナビゲーションとして使うとしっくりくることがあります。

 

UBERが一つのいい例です。

 

1-hpnxkp_z9oezgl-6mbsuza

 

このアプリの目的はタクシーを呼ぶことのみなので、そのほかのHistoryやSettingなどといったメニューはハンバーガーメニューでも十分でしょう。

 

(※本稿は「Hamburger menu alternatives for mobile navigation」を翻訳・再編集したものです)

関連記事

おすすめ記事