web-dev-qa-db-ja.com

メニューカテゴリはページとハンバーガーメニューの両方にあります。それは冗長ですか?

Webサイトのレスポンシブバージョンを作成していますが、問題が発生しました。 Webサイトには3つの主要なカテゴリがあります(たとえば、Cat 1、Cat 2、Cat 3)。

最初に、簡単にアクセスできるようにページに3つのカテゴリを配置し、ユーザーが何もクリックせずにこれらがメインカテゴリであることをユーザーに知らせるように考えました。

enter image description here

ただし、ページを下にスクロールすると、上にスクロールしない限り、3つのカテゴリにアクセスできなくなります。だから私もハンバーガーメニューに入れることにしました:

enter image description here

どちらにも目的がありますが、これが良い方法なのか、それとも冗長性があるのでしょうか。

ハンバーガーメニューの3つの主要カテゴリを保持する必要がありますか?

3
catandmouse

2つの異なる場所でカテゴリを繰り返さないでください。それらの1つを選択する必要があります。ユーザーにとってどちらが優れているかをテストすることもできますが、ユーザーに常にカテゴリを表示することが非常に重要であると確信している場合、最適なコンポーネントは固定タブです(ユーザーはどこにあるかを見つける必要なく常にカテゴリを表示するためです)彼らです)。

1
Martina Perez

あなたが持っているものは tabs です。ユーザーがそれらを常に使用する場合は、それらを ボトムバー に追加することを検討してください。

トップバーにそれらのタブが含まれていないのは奇妙です。これにより、タブが特定のページコンテンツの一部であるかのようにスクロールされ、上部のバーは残ります。この状況では、直面している問題があります。 お手元にありますようにサイドバーのオン/オフを切り替えても実際には2回表示されないため、コンテンツは冗長ではありません。 scrollTop = 0の場合のみ。

Googleマテリアルアプリの動作を確認します。それらのいくつかでは、ハンバーガーメニューと検索アイコンを含むトップバーがあります。ユーザーが下にスクロールすると、上部のバー全体が非表示になります。ユーザーが(少し)上にスクロールすると、上部のバーが表示されます。ハンバーガーアイコンをクリックすると、同じビューにあるため、検索アクションは表示されません(サイドバーを切り替えるだけで表示されます)。しかし、あなたの場合、サイドバーを切り替えるときにそれらの機能は見られません。

私はお勧めします:

  • これらのタブを上部バーまたは下部バーに固定する
  • ユーザーがスクロールするときに、必要に応じてトップバーを非表示にします
  • 3つ以上あるため、サイドバーにカテゴリのセクションがある場合は、それらの3つだけを含めてください(猫4、猫5が表示されて、他の猫は表示されないのはおかしいかもしれません)。
  • サイドバーにそのセクションがなく、サイドバーが閉じたときに修正(表示)されている場合は、サイドバーで繰り返し表示しないでください。
1
Alvaro

「万一に備えて、この冗長なものを含めるべきですか?」両方が必要である理由が明確に定義されていない場合を除いて、常に「いいえ」です(その場合、それらはおそらく実際には冗長ではありません)。

画面に配置するすべての要素は、ユーザーの認知負荷を増やします。冗長なナビゲーションは、ユーザーがそれが実際には冗長であることをすぐに認識できない可能性があることを意味します。ハンバーガーとナビゲーションバーの両方を含めると、ユーザーは両方を調べて、それらが実際にそれであると判断する必要があります。同じこと。

これが簡単な部分です。難しい質問ですが、ナビゲーションの表示方法を選択する必要がありますが、これは最良の選択ですか?

いずれの場合も、常に、ユーザーにとって最も役立つと予想されるものに画面の領域を割り当てる必要があります。ユーザーがナビゲーションへのアクセスを必要とする可能性が最も高い時期は

  • 彼らが最初にサイトに到着したとき、利用可能なコンテンツがまだわからないとき
  • コンテンツのページを読み終え、他に読むものを見つける準備ができたとき。

ユーザーが最小ナビゲーションを必要とする可能性が高い時間は

  • 彼らがページの真ん中にいるとき、コンテンツの一部を読んでいる途中です。

したがって、ページの上部にナビゲーションを配置します。これは、ユーザーがそれを表示することを期待している場所であり、ユーザーが最初にサイトにアクセスしたときの場所です。

ページの最後にナビゲーションを配置することもできます。これは、コンテンツのページを読み終えたときにそこにあるためです。ただし、ナビゲーションを見つけるためにユーザーがページ上部にスクロールして戻ることに慣れているため、これは多くの場合不要です。それは常にです。そして、すべての主要なモバイルブラウザーがページの上部へのシングルタップスクロールをサポートしているためです(ナビゲーションが常にそこにあるためです)。フッターナビゲーションは、通常、このページに関連するリンクへのリンク(メインナビゲーションにうまく収まらない)や、定型文、クレジット、法律、サイトマップなどの付帯項目(同上)に最適です。

特定のケースでは、ナビゲーションカテゴリは3つしかなく、ページの上部にリストできます(メニュー内に押し込めるよりも視認性に優れています)。ハンバーガー内の他の要素は、「ログイン」と「登録」リンク(これも相互に冗長です。リンクは1つしか必要ないため、ログイン/アカウント作成ページが結合されます)。これも、ページ上部ではなく、インラインで簡単に表すことができます。メニューに隠れています。

したがって、上部に「ログイン」リンクが付いたトップページナビゲーションバーを使用します。ハンバーガーは実際の目的を果たさないので、まったく使用しないでください(上で説明したように、フローティングは逆効果です。ページの上部での静的な操作は冗長です)。快適に収まらなくなりました(インラインナビゲーションの代わりに、インラインナビゲーションの代わりに使用してください)。フローティングやスティッキーを作成しないでください。ユーザーが必要なときに画面の上部を見つける方法をユーザーが知っていることを信頼します。

TL; DR:

一般的に、どちらがより重要ですか?あなたのコンテンツ、またはあなたのナビゲーション?

コンテンツの場合、画面の領域でコンテンツを優先する必要があります。特に画面の領域が非常に限られているモバイルデバイスでは、ユーザーがやろうとしていることが邪魔になるため、粘着性のあるナビゲーションバーや固定タブでビューポートを雑然としないでください。

ナビゲーションの場合は、より適切なコンテンツを記述します。 :)

0
Daniel Beck