スマホでよく使われるハンバーガーメニュー≡のABテスト結果とは?

スマホのメニューといえば、ハンバーガーメニューという方もいるのではないでしょうか。
ハンバーガーメニューとは、3本線のやつでタップするとにょいんとメニューが表示されるものです。
その見た目がハンバーガーのようなとことから名付けられたと言われています。

ハンバーガーメニューの美味しさチェック

早速ですが、とあるABテストの結果をご紹介します。
4つのスタイルでテストを実施します。
ベースはハンバーガーメニュー。
その他、「MENU」+枠線、ハンバーガーメニュー+「MENU」+枠線、「MENU」です。

実は美味しくなかった・・・?ハンバーガーメニューのABテスト結果
結果は・・・!?

Variation Visitor Conversion Conversion Rate Improvement
Base 12,684 308 2.4%
Variaiton1 12,660 347 2.7% +12.9%
Variaiton2 12,900 331 2.6% +5.7%
Variaiton3 13,017 246 1.9% -22.2%

出典:Mobile Menu AB Tested: Hamburger Not the Best Choice?

Variation3「MENU」表記のみが改善率を大きく落とす結果となりました。
これは、タップできることがわかりにくかったのが原因と考えられます。
また、ハンバーガーメニュー単体より「MENU」を加えた方が良いという傾向も見えます。

また、スマホのOS割合は64%がiOS、Android34%となっていましたが、結果には顕著な違いが現れました。
iOSの方がメニューアイコンをタップする傾向にあり、その数値は2-3倍になっているということです。
iOSから生まれたメニューのため、ユーザーの理解が高いと推測されます。
ニールセンの調査では、ハンバーガーメニューやマップアイコンなど新しく登場したものは、利用方法がわからないので、ラベルなどを付加して明確にすべきだと提唱しています。

Users are still unfamiliar with newer icons, including the three-line menu icon and the map-marker icon The Magnifying-Glass Icon in Search Design: Pros and Cons

ハンバーガーメニュー3つの欠点

そもそもハンバーガーメニューの欠点とはなんでしょうか。

#1 見つけにくい

三本線が狭いヘッダーにデザインのように設置されていると、ユーザーにとっては見つけにくいものです。

#2 効率が悪い

端末の右上まで指を持って行って、タップしてメニューを表示させるというのは非常に効率が悪いことです。

#3 一覧性がない

内容が隠されているため、中に何が入っているかわかりません。検索などメニュー以外のものがはいっていたりするケースもあります。

デザインとのバランスもあると思いますが、以下のようなことに気をつけてメニューを作ってみてはいかがでしょうか。

  • 「メニュー」を使う(あるいは併記する)
  • 下矢印をつける
  • メニューの位置を変える

すでにハンバーガーメニューの認知度は高まっていると考えられますが
スペースの問題はありそうですが、Twitterのように下にメニューを固定すると課題はクリアできそうです。

growth > スマホでよく使われるハンバーガーメニュー≡のABテスト結果とは?