web-dev-qa-db-ja.com

ハンバーガー+引き出しメニューに代わるものはありますか？

インターネット上では、ハンバーガーアイコンとそれに対応するナビゲーションドロワーがバッシングされています。

より単純でより明示的なオプションが利用可能な場合は、回避すべきパターンである場合があることに気づきました。

ただし、大きなサイドナビゲーションメニューに代わる適切な代替手段を見たことがないので、私のようなユーザーがアプリをアンインストールしたくありません。

ネイティブアプリとウェブサイトの両方で、ナビゲーションドロワーの代替としてどのような代替案が存在するのか疑問に思いました。

私が見た最も一般的なオプションは、3つまたは4つの項目で正常に機能するタブバーです。ただし、通常は垂直方向にスクロールしてさらに多くの行を読みます。10以上のアイテムがある場合、これは不便です。

  • ナビゲーションドロワー、2つの手順：アイコンをクリックするか、左から右にスワイプして表示します。表示されると、使用可能なすべてのオプションが表示されます。

  • タブバー、2つのステップ：何を探すべきかさえわかっていれば、探しているアイテムを見つけるためにバーをスワイプし、見つかったらアイテムをタップします。

また、現在取り組んでいるアプリの問題は、実際にはタブバーを含むビューがあり、ここには最大3つのアイテムがあり、ほとんどが次のビューレベルにクリックスルーすることです。

おそらく関連性がある：私は、人々が積極的に参加し、多くの深さと詳細があるコミュニティのための単純なウェブサイト拡張を構築していません。約8種類のモジュールといくつかのカスタムコンテンツが利用可能です。これらすべてを単一のページ/単一のビューでウィジェット化することはほぼ不可能です。これは、結局のところ非常に複雑なので、Nav Drawerと一緒に住みたいと思う理由かもしれません。

これを否定的にお詫びしますが、どのような場合でも他のオプションを確認したいのですが、ナビゲーションがシンプルな場合、メインビューに収まるはずであることに同意します。

navigationmenuanti-patternstab-bar
22
Mathijs Segers

はい

あなたは、ハンバーガーメニューに代わる批判の余地と不足があることを指摘します。

バックグラウンド

ハンバーガーメニューは、次の理由で批判されています。

  • それらはユーザーに直接オプションを提示する代わりに、ユーザーからリンクとコンテンツを非表示します。
  • ハンバーガーアイコンは、画面の上部に配置されますユーザーは無視する傾向があります。
  • ハンバーガーアイコンは、多くのユーザーにとってなじみのないです（ただし、これは変更されています）。
  • それらはずさんなデザインを容易にするデザイナーが不用意に大量のリンクやコンテンツを引き出しに積み込むことができるためです。
  • 到達困難右上または（さらに悪い）左上に配置され、画面が大きいモバイルユーザーの場合。
  • それらはA/Bおよびその他のユーザーテストでは不十分なテストです。 フォローできる追加のリンクがあるこの記事 を参照してください。

AppleのUXエバンジェリスト は、WWDC 2014でハンバーガー について短い批評をしました。

典型的な選択肢

ハンバーガー+引き出しに推奨される典型的な代替案はnav barおよびtab controlsです。これらの代替案は、ユーザーのオプションの数を減らし（選択を簡略化）、それらを明示的にすることにより、上記の問題に対処します。

enter image description here

新しい選択肢

あなたが指摘するように、タブコントロールと下部のナビゲーションバーの問題は、それらがメニューに多くのオプションがある場合は役に立ちませんであるということです。次に、コンテンツをオーバーフローするか、オプションの数を切り捨てるかのいずれかで、妥協点を見つけます。

設計の純粋主義者は、オプションを削減できないことを非難しますが、多くのアプリケーション（エンタープライズや技術など）では、これは避けられず、UIの低下につながります。

ハンバーガーメニューに代わる3つの選択肢を紹介します。メニューの選択肢が増えます（クリックして展開します）。

enter image description here

  • ボトムシートは、メニューの代わりにGoogleのマテリアルデザインUXフレームワークで使用されます。 この仕様 を参照してください。シートの下部配置は、今日のより大きなモバイル画面での人間工学に役立ちます。

  • ボトムメニューバーは、 テストが改善されるため、Menuオプションを明示的にします 。繰り返しになりますが、ボタンの配置により人間工学が向上しています。さらに、配置は上から下への視覚的なフローの最後にあるため、ユーザーがオプションを無視する可能性は低くなります。

  • フローティングハンバーガーボタン人間工学とフローの終わりの配置を改善するために上記と同様のレイアウト原則を使用しますが、ドロップシャドウ、色、およびグリッド分割の重ね合わせを使用して、呼び出しのメニューをより目立たせますアクション。

これらの代替案は、設計が貧弱なことの言い訳にはならず、より明確なオプションが利用可能な場合に使用すべきではありません。ただし、正当なメニューオプションが多すぎてタブコントロールやナビゲーションバーに収まらない場合に役立ちます。

22
tohster

Exis このトピックでA/Bテストを実行しました。 enter image description here

彼の場合の結果は、ボーダー付きのテキストメニュー（メニューを表示するために押すボタンであることを非常に明確にする）が最も効果的でした。誰が考え出したでしょう;）

完全な記事： https://web.archive.org/web/20160711135801/http://exisweb.net/mobile-menu-abtest

4
Tom.K

ハンバーガーメニューを提供する別の方法は、フローティングメニューボタンまたはタブを使用して、ユーザーがオプション全体を事前に確認し、不動産全体を使用しないようにすることです。これにより、効率も向上します。

0
user87571