web-dev-qa-db-ja.com

直下のプライマリナビゲーションとセカンダリナビゲーションのピットバーを修正

現在、プライマリナビゲーションが固定されているeコマースサイトを設計していますが、ページのさらに下には、ユーザーが下にスクロールしても表示されるセカンダリナビゲーション(製品仕様、追加情報、ユーザーレビュー)があります。

セカンダリナビゲーションは、コンテンツが存在するページの領域にユーザーを移動しますが、ユーザーはページを移動するときにセカンダリナビゲーションを表示する必要があります。ただし、修正される主要なナビゲーションもあります。

検索して結果が見つからなかった場合、固定されたプライマリナビゲーションとセカンダリナビゲーション(ピットバーとして機能します)が悪い習慣のすぐ下にありますか?これを実行するより良い方法はありますか?

Multiple fixed navs

2
Alex Rivera

あなたが言うように、あなたはこれのために何も見つけることができませんでした。ページ固有のコントロールではなく、メインナビゲーションのサブナビゲーションのように見えるので、それは本当に奇妙に見えるからだと思います。 悪魔の擁護者を演じる、あなたがこのようなものを見つけることができなかったのと同じで、私はそれが奇妙に見えます、たぶんテストはそうでなければ教えてくれるでしょう、誰が知っていますか?

ただし、もう少し保守的にして、他の人と同じように行うことをお勧めします。ダニエル・ベックがコメントで言ったのと同じように、私はこれが常に目に見えるようになっている必要性に疑問を投げかけます。しかし、あなたはそれが必要だと言っているので、私はこの製品固有のバーを右下に置くことをお勧めします。モバイル(これは論理的です)について言及しているので、これを下部に配置することは完全に理にかなっています。詳しくは UX Design for Mobile:Bottom Navigation をご覧ください。以下に私の意味を示します。

enter image description hereenter image description here

これにより、サイトナビゲーションとページはめ込みコントロールが明確に分離され、摩擦を軽減しながら、これらの要素を常に表示したままにすることができます。もちろん、モバイルとデスクトップの違いを補うためにいくつかの調整を行う必要があるかもしれませんが、これは良い出発点です

1
Devin

これが、固定ナビゲーションバーについて調査したものです。 Apple、Mi.comなどのよく知られた製品サイトのほとんどは、ユーザーがページを下にスクロールしてコンテンツをスキャンするときに、必要なナビゲーションのみを表示します。ユーザーがサイトで提供されている選択された製品またはオプションの詳細に取り掛かるときに、必要な(この場合はセカンダリ)ナビゲーションのみを表示するのが標準的な方法です。両方のナビゲーションヘッダーを一緒に表示するサイトはほとんどありません。以下に両方の例をいくつか示します。

Apple.com enter image description hereenter image description here

Cooper.com

enter image description here

0
Yobuddy

@Devinが正しく指摘しているように、セカンダリナビゲーションはメインナビゲーションのサブナビゲーションのように見える場合があります。ユーザーに混乱を招く可能性があるため、常に両方が常に表示されているとは限りません。

代わりに、状況に応じて、以下の2つのいずれかを試すことができます。

1。メインナビゲーションを非表示にし、ユーザーが上にスクロールし始めたときにのみ表示する

クイック検索で この例 が得られました。 2つのナビゲーションは表示されませんが、私が何を意味しているのかがわかるはずです。私はまだより良い例を探すか、いつか簡単なモックアップを作ります。

このソリューションは、ユーザーが上にスクロールしてメインメニュー(最上部にあると認識している)にアクセスしようとする場合に適しています。ただし、ユーザーがコンテンツ内のセクションを比較して、上下に頻繁にスクロールする場合は、良い解決策ではないと思います。このような場合、イライラすることがあります。

2。トップメニューを横に移動します

セカンダリナビゲーションは、コンテンツが存在するページの領域にユーザーを移動させると述べたように、ナビゲーションをページの左側に移動すると役立つ場合があります。 mswordのナビゲーションペインのようなもの。この方法は、その領域にフィルターやその他のコントロールを配置する予定がある場合には機能しません。

0
TDsouza