web-dev-qa-db-ja.com

Googleマテリアルデザインでのハンバーガーボタンの使用は、ユーザーエクスペリエンスの低下の一例ですか?

私は常にハンバーガーボタンに関する多くの問題を発見しました。

  1. 人々は彼らと一緒に多くのオプションを示す傾向があります。
  2. セクションを変更するには、少なくとも2倍のタップが必要です。
  3. ハンバーガーボタンも、古い世代のメニューボタンとしてはあまり認識されません。
  4. ハンバーガーメニューは、あなたがどこにいるのか、他にどこに行けるのかを示すのにひどいです。

Googleのマテリアルデザインが「ハンバーガーアイコン」に従っているのはなぜそれが面倒なのか、だれでも特定できますか?色々試してみましたが、わかりませんでした。

編集:例を挙げて回答を守ってください。報酬はあなたのものになります。ありがとう!

PS:私は特にモバイルWebサイトではなくモバイルアプリについて話している。

11
steve

まず、私はそれを「ナビコン」と呼ぶことを好み、勤務時間中の空腹の問題を回避するのに役立ちます。

第二に、あなたのポイントのすべてが実際にハンバーガーアイコン(3と4)にあるわけではありません。他のものは、一般的なナビゲーションドロワーに関するものです。

とにかく、始めましょう。

  1. 人々は彼らと一緒に多くのオプションを示す傾向があります。

    重要なオプションがスクロールせずに見える範囲にある限り、多くのオプションが問題になることはありません。

    例:

    Google受信トレイ-ナビゲーションドロワーhttp://i.picresize.com/images/2014/12/17/j9z4.png

    すべての重要なラベルは上位にあり(どのラベルがより重要かを選択することもできます)、仕切りで区切られています。設定とヘルプとフィードバックも修正されています。

  2. セクションを変更するには、少なくとも2倍のタップが必要です。

    これが何を意味するのかは完全にはわかりませんが、私はあなたが何を意味していると思いますか?

    • タップ1:メニューを開く
    • タップ2:メニュー項目を選択

    他にどのようにこれを解決しますか?

    • 上部のドロップダウン:2タップ
    • 上部のメニュー:1タップ、多くのスクロールでコンテンツにアクセス
    • 下部のメニュー:1タップ、メニューにアクセスするにはたくさんのスクロール

    最良のソリューション(imo)は、ナビゲーションドロワーです。必要のないときに邪魔にならず、必要なときにポップアップします。

  3. ハンバーガーボタンも、古い世代のメニューボタンとしてはあまり認識されません。

    失礼ですが同意できません。メニュー(一般的に)の中で最も認識可能なアイコンの1つであることを証明する研究(Googleはあなたの友達です)があります。

    ナビゲーションにも使用されるずっと前から、リストをソートするためのアイコンとして使用されていました。 「メニュー」から「ナビゲーションメニュー」へのホップは非常に小さく、かなり明白です。少し気になるのは、アイコンがナビゲーションドロワーの動きを表していないことだけです。メニューがどこから来るのかは、はっきりしていません。

  4. ハンバーガーメニューは、あなたがどこにいるのか、他にどこに行くのかを示すのにひどいものです。

    ユーザーの動きを追跡したい場合は、パンくずリストを使用します。

    「どこに行けばいいですか?」:折りたたみパネル(透明度vsタップ)、仕切り、および/またはインデントを使用すると、長い道のりをたどることができます。

12
Vince Caregnato
  1. これは必ずしも非表示のメニューの問題ではなく、サイトの情報アーキテクチャの問題である可能性があります。

  2. 「3つのクリックルール」- http://uxmyths.com/post/654026581/myth-all-pages-should-be-を使用すると、これは以前考えていたほど重要ではないかもしれません。アクセス可能な3回のクリック

  3. ハンバーガーアイコンが認識され始めています。この質問は役に立ちます- ユーザーのテストで、モバイルのメインメニューの「3つの水平バー」が一般的に理解されていることがわかりましたか?

個人的には、私はそれをWordの「メニュー」と組み合わせて、アイコンの意味を補強または定義するのに役立てています。

  1. これについては、パンくずリストを使用したいと思います。

編集:

この答えは、ハンバーガーメニューにいくつかのOriginストーリーを与える可能性があります。興味深いと思います- 多くのマルチタッチアプリで見られるこのサイドメニューとは何ですか。 ?

また、 zeeboxアプリに関するこの記事 でも、結果が同じになるかどうかはわかりません。

4
Stephen Keable

このシンボルの歴史の簡単な説明:1981年にXerox Starコンソール用にNorm Coxによって設計されました。 http://gizmodo.com/who-designed-the-iconic-hamburger-icon- 1555438787https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83?utm_content=buffer84840&utm_medium=social&pamcomm@pag@commcampaign@social&comm&comm&commcampaign =バッファ

したがって、ハンバーガーシンボルは、少なくとも部分的に従来型になるのに十分な長さであるだけでなく、携帯電話のように限られた画面スペースのシステム用に設計されました。それは素晴らしい遺産であり、それを使用するには良い形だと思います。

あなたの質問:

1。多くのオプションが表示される傾向があります。

はい、その機能は状況に応じて異なります。

2。セクションを変更するには、少なくとも2倍のタップが必要です。

どちらの場合を意味しているのかわかりません。

3。ハンバーガーボタンも、古い世代のメニューボタンとしてはあまり認識されません。

古い世代は多くのことに苦労する傾向があります。

4。ハンバーガーメニューは、あなたがどこにいるのか、他にどこに行くのかを示すのにひどいものです。

それらの目的は状況に応じて変化するため、OSのサイドバーのようにユーザーの場所を表示したり、OSのDockのようにメニューを表示したりすることができます。

これはすべて言われていることですが、私のTAが少なくとも部分的にインターネットに対応している場合にのみ、ハンバーガーに依存します。それ以外の場合は、ラベルを追加します。 http://www.creativebloq.com/mobile/10-mobile-behaviours-and-designing-them-81412606

2
Zoe K

メニューにアクセスする方法は他にもあり、ほとんどのアプリではオーバーフローオプションセットを実際に必要としないため、ハンバーガーメニューは少し面倒です。

機能するアプリの良い例は? 1つのメニューに14の機能が組み込まれているため、Chrome。 Chromeのようなアプリの場合、機能はたくさんありますが、99%のユーザーが1日平均1%だけにアクセスする必要がある場合、このアクションセットは不要です。そうでない場合を除きます。

YouTubeのオーバーフローメニューは、実際にはオーバーフローメニューではないという点で異なります(認識できるため、おそらく愚かなハンバーガーを使用しています)。ただし、アクセス方法は異なります。ボタンをタップするか、右にスワイプします。多くのアプリは、通常はホームページで、オーバーフローオプションのスワイプオプションを区別しています(iOSでは、スワイプして戻る機能を使用して、Android左側のサイドバーメニュー機能を使用して)。これらは、それらはオーバーフロー用です。

では、オーバーフローとは何でしょうか。それは重要であるためにアプリケーションユーザーが必要とする可能性のあるすべてのオプション/機能ですが、ほとんどの場合はそうではありません。機能は少数ですが重要なユースケースがあります。新しい小さなモバイルアプリの場合、ほぼ間違いなくオーバーフローメニューは必要ありません。それがほとんどすべてのデスクトップアプリである場合、MicrosoftやAppleのおかげで、ファイル、編集、表示などのメニューが組み込まれ、デスクトップUXに大部分が組み込まれている可能性があります。

グーグルは機能性を愛しているので、グーグルはデザインを殺していない。 Googleはまだベータ版の会社です。つまり、Appleのように、ほとんどの人が必要としないため、新しい機能は追加され、編集されません。Googleはそれらを必要とするアプリにそれらを備えており、ほぼすべての機能に適合しています。アプリが持つ可能性があることです。

1
Jamezrp

ハンバーガーは、あなたがどこにいるかを示すためのものではなく、ほぼすべてのモバイルWebサイトとアプリがメニューアイコンとして使用するため、非常に簡単に識別できます。

ユーザーがどこにいるかを表示するには、ブレッドクラムを使用できます。

タップ数は何倍ですか?はいといいえのデスクトップメニューを参照している場合、それに応じてドロップダウンなどがあります。

0
Evan

重要な考慮事項は、マテリアルデザインが(マルチ)プラットフォームUIであることです。これはアプリケーションUIではありません。そのため、いくつかの考慮事項があります

  • 仕様は、ユーザーが学習することが期待されるパラダイムを合理的に設定できます
  • 単一のUIアプローチで大規模および/または複雑なナビゲーション要件に対応できることにより、より多くのアプリケーションを一貫した設計に適合させることができます
  • ナビゲーション/プライマリタスク/セカンダリタスクをプラットフォーム内のすべてのアプリケーションに対して一貫して明確に分離することは、場合によっては1回の余分なクリックをはるかに超えた、非常に有益なUXになります
  • 仕様の他の部分は 現在の場所 のようなUX要件を処理します
0
Jason A.

メニューは一般に、その中のコンテンツの関与を減らす可能性が高くなります。

ナビゲーション項目が見えない場合、それらは気になっていない可能性が高くなります。

エンゲージメントがナビゲーションにとって重要な場合は、タブを使用します(最大5つ)。 5つを超えるタブは、メニューとそのアイコンを使用する価値があります。

0
Mike Milla