レスポンシブ対応のメニューについて
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