ティーエスフォートブログ

レスポンシブ対応のメニューについて

PCで見る時と、スマホでホームページを見る時にメニューが違うのは皆さんも知っていると思います。
PCで見る時は分かりやすいメニューですが、横三本線「≡」のメニューを初めて見た時は『なんぞや?』と思ったものです。
この横三本線「≡」のメニューを『ハンバーガメニュー』と呼び、大変美味しそうなネーミングなのですが、
見慣れないときっと分かりにくい・・と思ったのは私だけ???。

そこでこんなページを見つけました。

内容的にはこのハンバーガメニューのスタイルを変えて、クリック率がどう変わるかテストしたものです。
1.三本線のみ、2.三本線+MENUの文字を付けたもの、3.三本線を枠で囲ったもの

皆さんはどのメニューをクリックしますか??。こちらの記事では3番が一番クリック率が高かったそうです。
枠線で囲ってある事からボタンのイメージ・・となるのでしょうか。

【記事元】
http://exisweb.net/mobile-menu-icons

同サイトで次のようなテスト結果もありました。
文字とアイコンのメニューでのクリック率のテストです。
1.三本線を枠で囲ったもの、2.MENUの文字を枠で囲ったもの、3.三本線+MENUを枠で囲ったもの、4.MENUの文字だけ

このテスト結果は2番でした。MENUという文字が理解しやすく、更に枠で囲ってある事からボタンをイメージできクリックする。
なるほどです。そうなると「≡」よりは文字の方がいいのかなって感じですね。そして、枠で囲む!!。

同じメニューでもちょこっと見た目を変える事でクリック率が変わります。
ユーザが見て直感的に操作出来る・・、慣れや定着の問題でもありますが、面白いなと思いました。

【記事元】
http://exisweb.net/mobile-menu-abtest

#この記事は2014年に書かれたものです。

投稿日:2015.11.20
ページ先頭へ