ハンバーガーメニューとは、三本線のアイコンの奥に、主なナビゲーションをしまったメニューである。押すまで、リンクが見えない。NN/g は、このように、操作しないと見えないナビゲーションを、隠れたナビゲーション(hidden navigation)と呼ぶ。
たとえば、通販サイトのスマートフォン画面で、左上に三本線だけがある。「カテゴリ」「セール」「ブランド」は、メニューの中にある。商品を検索して探す人は、メニューを開かない。メニューの中に、探しているものがあっても、気づかない。

調査の内容
NN/g の記事(カラ・パーニスとラルカ・ブディウ、2016年)の調査は、179人の参加者が、6つの実際のサイトで課題を解いた。スマートフォンとパソコンの両方で行い、課題は、サイトごとに2つだった。ナビゲーションを使うようには、指示していない。
ナビゲーションは、3つに分けて比べた。
- 隠れた:すべて、メニューの中にしまう。
- 見せる:すべて、常に見える。
- 一部を隠す:一部だけ見せて、残りをしまう。
スマートフォンでは、「見せる」は調査していない。
結果
- 使われた割合は、パソコンで、隠れたナビゲーションが27%、見せるが48%、一部を隠すが50%。スマートフォンでは、隠れたが57%、一部を隠すが86%だった。
- 目的の内容を見つけられる割合は、隠れたナビゲーションで、20%以上下がった。スマートフォンとパソコンの、どちらも同じだった。
- 課題の難しさは、7段階で、隠れたが2.6、一部を隠すが2.3、見せるが2.1だった(小さいほど易しい)。
- 課題にかかった時間は、パソコンで、隠れていると、少なくとも39%長かった。スマートフォンでは、一部を隠す場合より、15%長かった。
- ナビゲーションを使うまでの時間は、パソコンで、隠れたが31秒、見せるが26秒、一部を隠すが23秒だった。この差は、統計的な確かさが弱い(p < 0.1)。
NN/g は、理由を、目立たない、手がかりが弱い(情報の匂い)、操作が1回増える、と見ている。
どうするか
NN/g の勧めは、次のとおり。
- パソコンでは、隠さない。上か、左に並べる。
- スマートフォンでは、上位のリンクが4つ以下なら、見せる。5つ以上なら、一部を隠すのは、妥当な選択である。
- ページの中にも、大事な内容へのリンクを置く。メニューだけに頼らない。
使うときの注意
調査は、2016年のものである。NN/g は、理由のうち、時間がたてば改善しそうなのは、利用者が慣れる点だけだと見ている。目立たなさや、手がかりの弱さは、慣れても変わらない。
自分のサイトでは、メニューの中の項目が、どれだけ使われているかを確かめる。ユーザビリティテストが使える。
語源・位置づけ
三本線の見た目が、ハンバーガーに似ていることから、この名前で呼ばれる。NN/g は、アイコンの形に関係なく、操作しないと見えないナビゲーションを、隠れたナビゲーションとして扱っている。
画面の幅に合わせて、収まらない項目だけをしまう方式は、グリーディーナビゲーションと呼ばれる。
出典
- Nielsen Norman Group「Hamburger Menus and Hidden Navigation Hurt UX Metrics」(Kara Pernice、Raluca Budiu、2016年6月26日)