モバイルアプリでの2つのハンバーガーメニューの使用
私のクライアントは、アプリで2つのハンバーガーメニューの使用を主張しています。1つは左上、もう1つは右上です。これは基本的に、2つの関連するWebサイトの機能をミラーリングするためのものです。1つは左のハンバーガーを使用し、もう1つは右のハンバーガーを使用します。
これは、私が直感的に知っているが、言葉で表現できないデザイン原則に違反しているようです。
しかし、なぜこれが間違っているのか、UIデザインの根本的な誤解を示していると私がどのように説明できるかを誰かが考えることができますか？
Tohstersの回答を拡張すると、1つのハンバーガーメニューはすでに十分に有害であるため、2つ目のハンバーガーメニューを追加しても問題はさらに混乱します。
クライアントが他の方法に従うように説得できない場合は、悪い状況を最大限に活用する方法を検討することから始めるのがおそらく最善です。 （このブログ投稿はこれを拡張します https://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/ ）
ハンバーガーの隣に「メニュー」を追加します。これにより、ユーザーインタラクションを増やすことができますが、メニュー自体の問題は修正されません。以下は、インタラクションの増加に関するいくつかの数値です。 （ http://moovweb.com/blog/hamburger-menu-handy-tool-or-useless-icon/ ）（ http://exisweb.net/menu-eats-ハンバーガー ）
要約：ハンバーガーにメニューを追加するか、単にそれ自体のメニューを追加すると、クリック率が向上します。この例は、exiswebから取得した画像です。大きな違いはありませんが、メニューを追加するだけで操作が増えることを納得させるには十分です。
![enter image description here]()
タブバーまたはサイドバー。その分リソースが重いので言います
コンテンツの多いサイトでは、サイドバーが
分、メニューオプションが限られているタブバーは断然
即座に必要な前向きサイトに最適なオプション
最も重要な機能をすばやく明確にユーザーに示します。 （ http://kong.vn/ios-navigation/ ）
考慮すべき側面は次のとおりです。
- 取られるスペース
アイテムの可視性
アクセシビリティ
出発点に戻る
- アクションボタン/アクションを実行します。
これらを考慮に入れると、タブバーはスペースを除いてすべての面ではるかに有益です。この場合、タブバーは常にページの固定要素になります（それ以外の場合は、別のサイドバーになります！）。言うまでもなく、サイドバーにはコンテンツやアクションがたくさんあるかのように配置されていないので、なんとかして表示する必要があります。
もっとリンクを張るつもりですが、私の評判は今のところそれを妨げています。これは以前にいくつかの調査を行ったものですが、モバイルサイトのハンバーガーメニューから離れるのに十分な確固たる証拠を得ることがまだできませんでした。
あなたはこの状況の専門家なので、彼を説得するために最善を尽くすのがあなたの仕事です。これが降りるのに最も賢い方法ではありません。あるいは、これが1つの仕事だけで繰り返しの仕事ではない場合は、歯を噛みやすく、 1つのハンバーガーメニューでコンテンツを両側で分割します。
これはひどい考えです
あなたは疑わしいのは当然だ。
1つのハンバーガーはすでに吸います...
ハンバーガーメニューは、そもそも十分にテストされていません。 ここ はこの件に関するAppleのUXリードであり、他の記事 ここ および ここ ですが、要約すると：
- それらはユーザーに直接オプションを提示する代わりに、ユーザーからリンクとコンテンツを非表示します。
- ハンバーガーアイコンは、画面の上部に配置されますユーザーは無視する傾向があります。
- ハンバーガーアイコンは、多くのユーザーにとってなじみのないです（ただし、これは変更されています）。
- それらはずさんなデザインを容易にするデザイナーが不用意に大量のリンクやコンテンツを引き出しに積み込むことができるためです。
- 到達困難右上または（さらに悪い）左上に配置され、画面が大きいモバイルユーザーの場合。
- それらはA/Bおよびその他のユーザーテストでは不十分なテストです。フォローできる追加のリンクがある この記事 を参照してください。
...そして2つのハンバーガーはさらに悪い
上記の理由のそれぞれは、ハンバーガーメニューを追加することによって作成されます悪い。より多くの非表示コンテンツとずさんなデザインを促進することに加えて、どのメニューがどの機能に適しているかを決定/記憶/デコードする必要があるユーザーに、より曖昧さを追加します。
ハンバーガーメニューのいくつかの代替案では、この質問が役立つ場合があります。
これは、「クライアントには何が必要か必要？」と質問する良い例だと思います。対「クライアントは何ですかwant？」したがって、あなたの質問を正しく理解していれば、クライアントは1つのアドレスの下に2つのWebサイトを提示し、おそらく1つの1つのデザインの下にも提示したいと考えています。
これが良いアイデアであるかどうかは私の回答の範囲内ではありません–とりあえず、私は彼/彼女が実際にが何を望んでいるかを理解しようとしています–そしてその結果、彼/彼女が実際に必要とするもの。
したがって、私見のタスクはレイアウト/ナビゲーション構造を見つけることであるようです、それは、a）ユーザーが2つの異なるWebサイトを扱っていることをユーザーに「説明」しますおよび同時に両方のWebサイトを使用可能にします/ナビゲート可能。
だからあなたができることは、例えばタブを使用して2つのサイトを切り替えます。一度に表示されるのはoneハンバーガーアイコンのみで、他のハンバーガーは「非表示」であることをクライアントに説明してください。
- サイトA）はアクティブです–>ハンバーガーA）が表示されています
- サイトB）はアクティブです–>ハンバーガーB）が表示されています
もちろん、これは新しい問題/新しい質問をもたらす可能性があります：「非アクティブなカード」には何が表示されますか？引き続き、非アクティブなサイトの非アクティブ/グレー表示されたハンバーガーアイコン、または背景色/ロゴなどを表示できますか？しかし、タスクについて異なる考えをする（「1つのサイトに2つのハンバーガーアイコン」ではなく「1つの2つのウェブサイト」）と考えると、2つのハンバーガーアイコンだけではなく、他のアイデアが生まれ、他の解決策につながる可能性があります。
ここにあなたのためのいくつかのアドバイスがあります：
- まず、クライアントに自分の意見を尊重することを確認します。主張しないでください！
- 第二に、あなた自身のためではなく、ユーザーのための製品を作成することを彼/彼女と明確にしてください。
- 3番目に、ユーザビリティテストを整理し、クライアントに参加を依頼します。
- 次に、2つのプロトタイプを作成します。1つはクライアントが望む方法、もう1つは望む方法です。または、2つのメニューを備えたプロトタイプが1つしかない場合もあります。
- 最後に、クライアントの存在下でユーザビリティテストを実施します。または彼の後であなたの発見を共有してください。
誰かがこれについて指摘した後、彼/彼女が間違っていることを確認したい人はいません。しかし、私たちが自分でそれを見つけた場合、それははるかに簡単です。あなたが一緒に行った研究のため、2つのメニューを持つことは最良のアイデアではないことをクライアントに知らせてください。あなたではなく、彼/彼女の決断をしてください。
それが役に立てば幸い。幸運を！
私の2セント：
2つのハンバーガーまたは2つの同じナビゲーションモデルは間違いなく混乱します。
まず第一に、私たちが小さな画面を扱っているときまで、それは貴重な不動産を占有します。
次に、ナビゲーションは重要な側面であり、ユーザーが2つの冗長なナビゲーション方法を表示されると、どちらに進むべきか混乱することになります。これはユーザーのメンタルモデルに完全に反するため、ここではテキストやデモはあまり役に立ちません。実際の例を挙げましょう。旅行者を交差点に連れて行き、両方の道路が同じ目的地に通じていることを伝えるのと同じように、距離や風景などに違いはなく、どちらの方法で移動するかを選択します。なぜこの混乱を加えるのか。
お役に立てれば。 :)