≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）

スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付

[tarhashi]

この記事が統計的にどうかはともかく、ハンバーガーメニューとかいうそれがメニューであると知ってないといけないクソUIは滅びていただきたいと思う

[kishimoto63]

マクドナルドのメニューが見にくい件とは関係なかった

[shimokiyo]

いつも思うが、一般ユーザーには三本線アイコンの意味が分からないだろうな。文字をボタン風に配置する方がやはり良いか。

[rinxmoon]

Web制作に携わってる人にはいつの間にか常識だけど、ハンバーガーメニューって意味わからないよ。三本線がハンバーガーを表してるのも言われないと分からないし、それがメニューを意味してるというのも分からない。

[kno]

囲めばボタンらしさが出て押しやすくなるのかな？／あの三本線が「ハンバーガーメニュー」というのを初めて知った…「パンくずリスト」くらいのピンと来なさ

[infobloga]

2つ目の表でピアソンのχ2乗検定をするとp = 0.38くらい。要するに、本来差がなくても2回やれば1度はこの程度の結果がたまたま出てしまうというレベルの差でしかない。Web業界の数理的思考能力の格差、激しすぎる。

[north_god]

ゲームのような繰り返し繰り返しアクセスされて利用者がサイト構成を熟知するコンテンツでなく、一般的なサイトなら慣習にならわずに文字にした方が無難だよな

[mi2ru]

ハンバーガーとか、パンくずとか、ウェブ屋さんパン好き多いの？

[habuakihiro]

これメニューに限らない気がしてる。ボタンらしくしないとダメだし文字でないとわからんってなるし。

[sds-page]

赤丸に白抜きで①とか書いてあるとクリック率上がるような気がする

[sima-box]

ハンバーガーメニューの事

[hansolo0621]

メニューのボタンは、文字で表現し、枠線で囲うデザインが一番良い（2014）

[treeapps]

三

[pmint]

メニュー表示のクリック率なんて意味なさそう。メニューがメインコンテンツなら別だけど、そもそもここに入れるのはどうでもいいリンクばかりのはず。「押せそうだから押した」感じ？チュートリアルとしてはよさそう

[jed_lee]

あ、これこれ。実際にハンバーガーメニューって離脱だったりそもそも使われない要因になりがち。。というのをちゃんと国内ベンダーに優しく説明している記事。

[akinao46]

[Marketing/UI][Article]

[sukkirikumiko]

menuという文字を枠線で囲ったデザイン…グローバルメニューにどうやって表示したらいいの？(･_･; ≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から） : jdash2000 site

[hiro8saka]

[A/Bテスト][デザイン]

[blog0009]

≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から） @jdash2000さんから

[kuma56tan]

ちょっとしたデザインの違いでこんなにクリック率が違うとは思わなかった。

[ryottaman]

ネーミング…:≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から） : jdash2000 site

[hama_shun]

“テスト結果をふまえてまとめると… メニューのボタンは、文字で表現し、枠線で囲うデザインが一番良い ということになりますね。”

[nazoking]

ほんとこのひどいデザイン考えて広めてるの誰なの？　メニューのシンボルとしては▼が一般的だと思うし、もっとドロップダウンメニューの絵っぽいアイコンにしてほしい

[good510]

“メニューのボタンは、文字で表現し、枠線で囲うデザインが一番良い”

[s17er]

文字だらけになるのが嫌なので、ハンバーガーメニューは市民権を得るまで頑張ってもらいたいが、そもそもドロワーメニュー自体がデファクトスタンダードとして生き続けるか疑問に思っている

[nekonyantaro]

あの三本線に「ハンバーガーメニュー」という名前があるのを初めて知った。

[glfmen]

違いが細かすぎるから、全てのサイトに当てはまるのか微妙じゃね？

[taks1]

≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から） : jdash2000 site

[nilab]

≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）

[pribetch]

ボタンに見えた方がいい＝フラットデザインは間違い

[pmakino]

[UI[Usability]「メニューのボタンは、文字で表現し、枠線で囲うデザインが一番良い」<差は僅かではあるものの、納得できる結果。逆に枠無しハンバーガーアイコンは最悪ということですね。

[tarchan]

＞メニューのボタンは、文字で表現し、枠線で囲うデザインが一番良い

[cokeshiko]

http://dtp.jdash.info/archives/Hamburger_Menu_Test_2014

[browneyes]

ブコメの半分はパン食についてだった（大袈裟）。 ▶ ≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から） : jdash2000 site

[hirata_yasuyuki]

「≡」はメニューであることが共通認識になったら、また結果は違うんだろうなあ。 Browsing: “≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）”

[dalmacija]

ドロワーアイコンまわり、この実験の場合の利用者的な文脈って、ボタンかどうかという意味軸より、枠線付加の必然であるサイズ拡大で物としての視認性が上がったことの影響が強いような気がするけど。

[raitu]

分かりやすいボタンインターフェイスとは

[nakunaru]

≡　は未だに違和感を覚えるんだよなー。メニューって書いて欲しい人。

[maRk]

初めての訪問者がメニュークリックされる割合と、リピーターがクリックされる割合とは考慮されてるのかな、元記事含めて

[KoshianX]

ハンバーガーメニューなんて誰が名づけたんだこれ。なんにせよ記事中にある通りユーザーの慣れに期待して文字なし三本線の四角囲みをメニューボタンとして合意とってたほうが面積や言語超えられて便利そう