TOP › UX用語 › ハンバーガーメニュー
デザイン・情報設計

ハンバーガーメニューHamburger Menu (Hidden Navigation)

ハンバーガーメニューとは、三本線のアイコンの奥に、主なナビゲーションをしまったメニューである。押すまで、リンクが見えない。NN/g は、このように、操作しないと見えないナビゲーションを、隠れたナビゲーション(hidden navigatio […]

ハンバーガーメニューとは、三本線のアイコンの奥に、主なナビゲーションをしまったメニューである。押すまで、リンクが見えない。NN/g は、このように、操作しないと見えないナビゲーションを、隠れたナビゲーション(hidden navigation)と呼ぶ。

たとえば、通販サイトのスマートフォン画面で、左上に三本線だけがある。「カテゴリ」「セール」「ブランド」は、メニューの中にある。商品を検索して探す人は、メニューを開かない。メニューの中に、探しているものがあっても、気づかない。

ナビゲーションを使った人の割合。パソコンでは隠れた27%、見せる48%、一部を隠す50%。スマホでは隠れた57%、一部を隠す86%
図1:ナビゲーションを使った人の割合(数字は NN/g「Hamburger Menus and Hidden Navigation Hurt UX Metrics」に基づく)

調査の内容

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 は、アイコンの形に関係なく、操作しないと見えないナビゲーションを、隠れたナビゲーションとして扱っている。

画面の幅に合わせて、収まらない項目だけをしまう方式は、グリーディーナビゲーションと呼ばれる。

出典

関連用語

「UX用語」のカテゴリー