スマホ対応の記事で、「≡」のようなメニューを見たことはないですか?
このマークは『ハンバーガーメニュー』と呼ばれるメニューを表す記号です。
本記事では、ハンバーガーメニューと「MENU」と書いてあるメニューボタンでクリック率がどの程度違うのかA/Bテストを報告している記事から、その結果をご紹介します。
ハンバーガーメニューを使ったデザインパターン
ハンバーガーメニューと一言で言っても、デザインのパターンにはいくつか種類があります。基本パターン
ハンバーガーメニューの最も基本的なデザインです。単純に三本の線が描かれているだけです。
文字が入ってるパターン
三本線の下に「メニュー」と文字があり、アイコンの意味を明示しているパターンです。囲んでいるパターン
三本線をボーダーで囲っているパターンです。ボタンであることをハッキリと示すことができます。
他にもいくつかパターンがありますが、他のパターンについては「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」をご覧ください。
クリックされやすいのはどのパターンか
それではクリックのされやすさのテスト結果をご紹介しましょう。実際のテストで用いたデザインは「Do Users Understand Mobile Menu Icons?」をご覧ください。
さて、テストの結果、以下のうちどの記号が最もクリックされたと思いますか?
最もクリック率がよかったのは、ボーダーで三本線を囲み、ボタンっぽくした記号でした。
単純な三本線に比べて、クリック率は22.4%も改善しています。
以下はクリック率表です。
出典 Do Users Understand Mobile Menu Icons?
この理由としては、ボタン型だとユーザーもメニューボタンと認識しやすく、押しやすいからだと考えられます。
文字とアイコンでのクリック率の違いは?
同じサイトで文字とアイコンを使ったテストも実施しています。実際のテストに用いたデザインは「Mobile Menu AB Tested: Hamburger Not the Best Choice?」を参照してください。
テストに用いたのは、
「文字」
「文字 + 枠線」
「三本線 + 枠線」
「三本線 + 文字 + 枠線」
です。
さて、どれが一番クリックされたと思いますか?
結果は、左下の「文字 + 枠線」でした。
クリック率は2.7%です。
出典 Mobile Menu AB Tested: Hamburger Not the Best Choice?
「三本線 + 枠線」が2.4%ですから、0.3%だけ「文字 + 枠線」の方がクリック率が良いことになります。
理由としては、やはり文字で何のボタンなのか明示し、さらにボーダーで囲むことでそれがボタンであることがすぐに分かるからだと考えられます。
三本線だけや、文字だけがぽつんとあってもユーザーはそれがなんなのか理解するのに時間がかかり、クリックに結びつきにくいのではないでしょうか。
まとめ
最もクリック率が高いメニューボタンは、文字で示し、枠線で囲うデザイン、でした。ただし、今後ユーザーがハンバーガーメニューに慣れてきて、「三本線」=「メニュー」であるという新しい「常識」が作られていく可能性も無きにしもあらずです。
その場合はまた結果が違ってくるかもしれませんね。
デザインは時代に合わせて最適なものを選択していきましょう。