UXデザインにおける ハンバーガーメニュー とは？

 ハンバーガーメニュー は、見た目にも味があります。今ではほとんどのアプリに搭載されている、デザイン兼ナビゲーションの要素で、3本の横線で構成されています。まるでハンバーガーのようですね。こんな感じです：

 

目を細めて見ると、Spotifyのロゴに似ていませんか？

UXデザイナーのハンバーガーメニューは、関連する情報を誰もが認識できるフォーマットで保存することで、時間とスペースを節約します。すべての情報が一か所に集まり、誰もがその場所を知っているのです。食堂でメニューを見てどんな料理があるかを知るように、ウェブサイトの訪問者は、ひとつのナビゲーション要素を介して、リンクされたさまざまなセクションにアクセスします。

このアイコンは2010年代半ばに広まったものですが、クラシックなハンバーガーと同様に、UXデザイナーの誰もがこのアイコンについて意見を持っています。画面を広く使えるようになると考えるデザイナーもいれば、情報アーキテクチャの景観を損なうものだと考えるデザイナーもいます。

そもそも ハンバーガーメニュー とは？

ほとんどのアプリやモバイル向けサイトの上部にある3本の線。それが「 ハンバーガーメニュー 」です。80年代初頭、デザイナーのノーム・コックス氏は、情報を伝えるにはリスト形式のほうが簡単だと考え、このアイデアを考案しました。

この説を裏付ける証拠があります：

• 人間は、リストを提示された方が事実をよく覚えています。

• ウェブサイトユーザーの55％はリストを見ています。（70％は箇条書きのリストを見ています）

• リストは、ユーザーの選択プロセスを改善します。

上記のような短いリストであっても、読みやすさを向上させ、コンテンツを消化しやすい「チャンク」に分割します。

しかし、他の調査では異なる結果が出ています。

それは、発見しやすさに関係しています。ウェブサイトの訪問者の中には、リンクがハンバーガーメニューの中に隠されていると見つけられない人がいて、それがクリック率に影響します。また、ハンバーガーメニューを画面の左上に配置すると、クリック率はさらに低下します。これは、多くの人がデバイスをスキャンする際に、中央から右に向かってスキャンするためです。

UX Planetは、「画面の上の方にあるものは、クリックするのではなく、ちらっと見るものだというメッセージが込められている」と述べています。

おそらく最も衝撃的な統計はこれでしょう：45歳以上のインターネットユーザーの48％は、アイコンが何を意味するのかさえ知らないのです。

だから、「ミレニアル世代だけを対象としたデザインを作成してください。それ以外の人は当社のウェブサイトを訪れてはいけませんから」というようなクリエイティブブリーフがない限り、次にハンバーガーを検討するときは、何か違うものを選んだほうがいいでしょう。 

たかが ハンバーガーメニュー 。何が問題なのか？

 ハンバーガーメニュー は、確かにスペースを節約できますし、目に優しいとも言えます。サイドバーにリンクを重ねるのではなく、また、最悪の場合、繁華街の歩道に置かれたゴミ袋のようにホームページの上部に散らばるのでもなく、メニューはすべてを目に触れないようにしてくれるので、メリハリのあるクリエイティブなデザインが可能になります。引き出しの中にすべてのものをきれいに収納するようなものです。

しかし、この「引き出し」の比較が、デザイナーを悩ませることになります。

イケアが何と言おうと、人間が引き出しに物を入れる理由は一つです：

他に置く場所がないからです。

だから、デザイナーの中には、ハンバーガーをメニューに入れない人もいるのです。

あなたが引き出しに入れているものを考えてみてください。次に、棚の上に置いているものを考えてみてください。母の写真を額に入れて引き出しに入れていますか？それとも、ユーザーエクスペリエンスデザインの修士号？みんなに見てもらいたいので、たぶんしないでしょう。

ハンバーガーメニューが示唆しているのは、中に入っているものはあまり重要ではないということです：誰も話したがらない20年前の汚い秘密のように、人目から隠され、カーペットの下に隠されているのです。

「置く場所がないから、ここに置こう」という後付けのメニューに過ぎないと、アンチハンバーガーのデザイナーは考えています。必ずしも悪いデザインではないにしても、怠惰なデザインです。

では、それに代わるものは何でしょう？

ハンバーガーのないメニュー

ハンバーガーメニューに代わるものとして最も人気があるのは、タブでしょう。特にスマートフォンの小さな画面でのアプリのナビゲーションには最適です。確かに、メニュー項目は4つか5つに限られていますが、表示されているものは隠されていないため、より重要な意味を持っています。

UXデザイナー兼ソフトウェアエンジニアのマイケル J. フォーダム氏は、「タブは、アプリをナビゲートするためのよりモダンで便利な方法であり、アプリケーションのコアセクションがユーザーにすぐに見えるようになっています。スペースが気になる場合は、下にスクロールするとタブが消え、上にスクロールすると再び表示される非表示ジェスチャーを実装することができます」

他にはどんなメニューがあるのでしょうか？

フローティングハンバーガー

これもアプリに最適な機能ですが、ユーザーが三本線のアイコンをクリックすると、コンテキストが表示されるようになっています。タブと同様に、リンクはもはや余計なものとは感じられず、画面上でより目立つように配置されています。

スワイプ

Tinderでは、ユーザーは左右にスクロールしてアプリを操作します。しかし、スワイプはページへの連続的なアクセスを可能にするだけなので、店舗のページのようにユーザーがすぐに別のセクションに移動するような状況には適していません。

最終的にはデザイナーが決めること

まだハンバーガーが食べたいという方のために、いくつかのヒントをご紹介します：

• ハンバーガーのサイズを大きくしましょう。訪問者がメニューを見ることができるように、メニューをわかりやすくする。メニューの中にあるリンクは、ウェブサイトのオーナーにとって重要なものです。必ずクリックしてもらいましょう。

• セカンダリーメニューを作る。ハンバーガーに加えて、重要なページへのセカンダリアクセスを用意します。(上記のメニューの代わりになるものを使用してください。)あなたはおそらくごちゃごちゃすることについて懸念をお持ちかもしれませんが、デザイン基盤の他の部分にミニマリストの要素を取り入れることで、これを避けることができます。ぜひ試してみてください

まとめ

UXデザインでハンバーガーメニューに言及することは、ディナーパーティで政治の話を持ち出すようなものです。賛否両論の意見が出るでしょう。デザイナーの中には、ハンバーガーメニューを使うことは犯罪ではなく、非常に効果的なナビゲーションツールであると考える人もいるでしょう。ただ、ハンバーガーの潜在的な欠点を理解し、全体の文脈を考慮し、次の一口を食べる前にUXPinでいくつかの代替案を試してみてください。次にハンバーガーを出すのはいつですか？

UXPinを使用している世界の優秀なデザイナーの仲間入りをしませんか？UXPinは普通のUIデザインやプロトタイピングツールではありません。無料トライアルを開始しましょう。