ハンバーガーメニューのデザイン問題が決着！ABテスト7パターン結果

画面の表示領域の狭いスマホでは、表示されている ページ 以外にもメニューがあることをどう知ってもらうかは重要です。

今回は、メニューへの 導線 であるハンバーガーメニューのデザインで7パターンを回した結果をご紹介します。

仮説

メニューの存在があまり認識されていないのではないか。メニューをもっと分かりやすくすることで、気づいてもらえ、クリック率が向上するのではないか。
そこで、ハンバーガーメニューを既存のデザインとは別に6パターン、合計7パターンでどれが一番クリックされるのかテストして検証することにしました。

ハンバーガーメニューとは

ハンバーガーメニューは、スマホの画面上部によくある三本線のメニューアイコンのことを指します。

用意したデザインは7パターン

※クリックすると拡大されます。

• 基本：よくあるスタンダードなハンバーガーメニュー
• A：囲いを付けたタイプ
• B：色を付けたタイプ
• C：色を付けて更に囲ったタイプ
• D：分かりやすくMENUと表記したタイプ
• E：MENU表記に囲いを付けたタイプ
• F：ハンバーガーとMENUに囲いを付けたタイプ

ferretは初心者の方もよく利用していただいているメディアなので、もしかしたらハンバーガーメニューをメニューとして認識できていない可能性も考え、MENUと表記したタイプを入れてみました。

結論！ハンバーガーメニューのクリック率はFタイプが一番良い

クリック率の遷移

テスト開始からテスト終了までのメニューのクリック率を時系列の図にまとめました。
※クリックすると拡大されます

テスト開始直後はデータの母数も少ないため、大きくクリック率が上下していますがデータが貯まっていくにつれて収斂していっているのが分かります。

各タイプのクリック率の比

※クリックすると拡大されます。

基本タイプを100とすると、Aタイプは若干基本タイプを上回った（100.4）ものの、あまり大差がない結果になりました。

目立つと思って、色を付けたBタイプは、88と12ポイント低下。
Cタイプは、87と13ポイントもクリック率が大きく低下しました。

囲いのないDタイプは、最も悪く82と18ポイント低下。MENUだけだとMENUと認識されず、ただの文字に見えている模様。
Eタイプは、96と4ポイントの低下となりました。
囲いが付いているだけで、14ポイントも向上したこととなります。

一番良かったのは、ハンバーガーとMENUのダブル表記に囲いを付けたFタイプで、2ポイントの向上となりました。

まとめ

・囲いを付けたタイプは付けないタイプよりも全タイプでクリック率が向上しました。
・色を付けると怪しさのせいかクリック率が減少しました。
・三本線のデザイン（黒）が入っているものはクリック率が高くメニューとして、一般認知されている。
・スペースが許す場合、ハンバーガーとMENUをダブル表記して囲いを付けましょう。無いなら三本線と囲いで。
・次は基本タイプ、Aタイプ、Fタイプの3本でテストを回してみます。