ハンバーガーのアイコンはどこにでもあります。 私たちの周りのどこでも。 Webアプリケーション、モバイルおよびデスクトップサイト、ソフトウェア。 このユビキタスな3行のアイコンは現在では非常に一般的であるため、ナビゲーションメニューに一意に関連付けられているように見えます。 しかし、そうですか？
最近、ハンバーガーアイコンの有効性に関する議論が新たな高みに達しました。 The Atlantic 、 TechCrunch 、 The Next Web、 Nielsen Norman Groupなど 、著名なデザイナーやいくつかのサイトの記事は、これがUXアンチパターンであり、よりシンプルで表現力豊かな代替手段からの回帰であるファッショナブルで使いやすいアイコンであると結論付けています。 しかし、アンチパターンであろうとなかろうと、アイコンの使用は非常に大きくなったため、ほとんどのWebサイト、特に小さな画面ではほとんど必須の属性になっています。
m.booking.comのチームにおけるデザイナーとしての私の立場と、このアイコンを使用してポップアップメニューを表示することを考慮して、このオブジェクトを探索することにしました。 そして、私は、恥への道を理解しようとするために、アイコンの起源を研究することから始めました。
ハンバーガーのアイコンはクラシックです。 この名前に慣れていない場合でも、3本の黒いバーはマウスカーソルと同じくらいよく知っています。これは、あなたがコンピュータの所有者になった最初の日からのインターネットサーフィンのコンパニオンです。
ギズモード
それは有望に思えます。 しかし、アイコンはクラシックで常に存在していましたが、Webデザイナーはその使用において一貫性があまりありませんでした。 このアイコンは、リスト、ドラッグと並べ替え、整列などに使用されました。 おそらく、この誤用が彼の批判をメニューアイコンとして説明しているのでしょう。 おそらくその幅広い分布と多様な使用のために、このアイコンは単一の比phorを伝える能力を失い、ひいてはユーザーを混乱させています。
この全体の話から、「私たちは間違っているのか、他の人はすべて正しいのか？」 これはユーザーに不便ですか？ この3つの小さな行がサイトにあることを本当に理解している人はいますか？」
このブログの定期的な読者は、次のステップがこれらの質問をA / Bテストの形式で尋ねることであることを知っても驚かないでしょう。 他のすべてと同様に、ハンバーガーのアイコンは多くの顧客に公開されており、メニューとの対話を通じて、このアイコンが最適なソリューションであるかどうかを判断する必要があります。 この時までに、私は十分な記事と情報を読んで、コンセンサスやその他の結果の欠如が、デザインが開発された顧客の行動の結果ではないことを確認しました。 私は、 ジェームス・フォスターが説明した方法に従うことを決めました。多くの人は、私たちの最高のモバイルスペシャリストの1人であるリュック・ウォロブスキーを含めて参照しています。
以前、アイコンのいくつかの配置とスタイル（フレームあり、フレームなし、アイコンあり、異なる色など）をテストしましたが、41の言語でテストしたいという難しさから、「メニュー」という言葉はテストしませんでした私たちによってサポートされています。 しかし、私たちは言語専門家チームの助けを借りて翻訳を見つけることで前進し、テストを実行しました：
基本バージョン
オリジナルのハンバーガーメニューアイコンはタイトルの左側にあり、右側に白いセパレーターがあります。
代替オプション
角が丸い白いフレームのブロック内の「メニュー」という単語も左に揃えられます。
ユーザーベース全体の実験を開始しました。 また、このユーザーインターフェイス要素の名声と遍在性を考えると、サポートされている各言語と多数のデバイスで、世界中の何百万もの顧客をテストするのに時間がかからないことを願っています。
それで、最終結果は何ですか？ ジェームズ・フォスターの実験のように、この言葉はファーストフードを打ち負かしたのでしょうか、それともパティのあるパンが勝つでしょうか？
結果
この実験中、アイコンを「メニュー」という単語に置き換えても、ユーザーの行動に大きな影響はありませんでした。 巨大なユーザーベースの助けを借りて、非常に高い確率で、特にBooking.comの訪問者に対して、ハンバーガーアイコンがテキスト説明付きのバージョンと同じようにその役割を果たすと述べることができます。
もちろん、このデータをすべてに外挿することはできません。 一部の国、一部の言語またはデバイスでは、これは良くも悪くも機能した可能性があります。 しかし、世界規模では、「ハンバーガー」がthe笑されすぎていると結論付けることができます。 一般的に、彼は「メニュー」という言葉と同じくらい認識可能でした。 デザインプロモーションを管理するという精神で、おそらく他のオプションを検討する必要があります。チーズ、ベーコン、フライドポテトをハンバーガーアイコンに追加してみてください。 実際の配置、形状、サイズ、位置、色は、もちろん、今後のテストの対象となります。
間違いなく、これはA / Bテストの性質についての私たち全員のための教訓です。 一般的にUI要素、モデル、または機能をテストすることはありません。 特定のシナリオと特定のシナリオで、非常に特定のユーザーを対象にこれらのことをテストします。 Booking.comで機能するものは、お客様またはユーザーにとって機能しない場合があります。 これが、A / Bテストを実施した理由の1つです。 他の専門家の結論、パブで発明された他のサイトや仮説のデータ、ハンバーガーを食べることなどはすべて、クライアントとプラットフォームでテストされるまで証明されません。
私たち自身の比phorで混乱しないように、しかしそれは良いハンバーガーのレシピのようなものです。 私のために正確にすべての材料を書き留めても、あなたは完全に異なるハンバーガーになってしまいます。 もちろん、これは、市場で入手可能な肉の品質、パンに使用される小麦粉、および他の何千もの要因の影響を受けます。 個人的には、 Booking.comに適していれば、このアイデアは良いものです。 私たちのウェブサイトでそれを繰り返すことができ、それがすべての顧客に役立つかどうか。