web-dev-qa-db-ja.com

大画面のハンバーガーメニュー-何を失うのですか?

悪名高い "ハンバーガーメニュー"ux-hamburger-drawer-icon.333-tr.s20)が大きなデスクトップやラップトップの画面に表示されるようになりました。サイト構造を要約する実際のナビゲーションメニューは、それをクリックして表示する必要があります。

私の経験した直感は、小さなタッチスクリーンに慣れているほとんどの人が「ハンバーガーメニューパターン」を理解していることを教えてくれます。彼らは、サイトのナビゲートにはそのボタンを押すことが含まれることを理解しています。

私の直感は、大画面のユーザーがたくさんいることも教えてくれますしないパターンを理解している(またはハンバーガーアイコンに気付かない/クリックしない)。

これは動きの速い問題です。ハンバーガーのアイコンを理解してアクセスする人の比率は高まっていると思います。大画面でハンバーガーアイコンを使用するサイトの数は増加しています。

間違いなく、アイコンの後ろにナビゲーションメニューを非表示にするための代金を支払いますが、その代金はいくつですか。それに関する研究はありますか? A/Bテストと同様に、サイトAはナビゲーションメニューを表示し、サイトBはハンバーガーアイコンを表示します。

関連する最新の統計情報を探しています。

5
obelia

数字は思いつきませんが、理論的根拠は要約できます。仰るとおりです。これらの3つの小さな行が何をするかを知っている人がますます増えています。しかし、私はそれについて別の見方をしています。ハンバーガーメニューがモバイルデバイスに表示されるのには理由があります。 画面スペースの不足。確かに多くのコメンテーターによって「フリルのないモバイル画面で最も重要なものだけを表示する必要がある」などと合理化されてきました。すべて真実ですが、要約すると1つのことです。

モバイル画面にナビゲーションメニューを表示できないのは、表示したくないからではなく、表示できないからです。

なぜあなたはしたいですか?

  • 彼らが管理しているユーザーを示すため。
  • ユーザーにこのナビゲーション要素に気付かせるため。ハンバーガーは大画面で迷子になることがあります。
  • したがって、ユーザーは、より少ないクリック/インタラクションで自分のやりたいことを実行できます。
  • ユーザーが何ができるかを示すため。 (ハンバーガーをクリックするまで、メニューからできることをどうやって知るのでしょうか?

ハンバーガーメニューは、利用可能なすべての画面スペースをきちんと活用して、より多くのレベルに到達したり、メニューの後ろに隠れたりするのではなく、同じUIでより多くのアクションを実行するアプリ/サイトの機能を根本的に混乱させます。例として、AndroidおよびWeb上でGDriveを見ることができます。画面サイズが大きいと、余計なスペースがあるため、ユーザーはより多くのことができます。

2
Gaurav Ramanan

私はしばしばこのようなことに関してニッチで普遍的なUXの統計情報を探しているアバットします。私が知る限り、真実は、コンテキストがこれらの決定において最も重要であるということです。

例:Squarespace-サイトをハンバーガースタイルのメニューに移動しました。どうして?多くのウェブサイトテンプレートを美しく見せようとしているからです。大きな画像を探している人は、メニューを好みますか?おそらく違います。したがって、それはコンテキストに適した設計です。

ただし、普遍的なルールはおそらくこれには適用されないため、代わりに基本的なUXの原則から結果を構築することができます。

  • ハンバーガーはより多くのクリックを要求します。クリック数が多いほど悪い。
  • ユーザーが多くのページを通過する必要がある場合、常にメニューを開くエクスペリエンスは疲れる可能性があります
  • 速度はユーザーにとって重要です-メニューを開くアニメーションはゆっくりとユーザーを狂わせる可能性があります。
  • サイトにどのようなコンテンツがあるかはすぐにはわかりません。それは良くないね。

件名に関する優れたブログ投稿2番目と3番目の箇条書き のソース

2
Jacktionman