7つの主要なB2Cホームページナビゲーションバーデザインの比較分析

非常に明確な目的を持つユーザーは、検索機能を使用してすぐに購入を完了しますが、ユーザーがショッピングのカテゴリを決定しただけで、具体的な目的をまだ決定していない場合は、この時点でナビゲーション バーが適切な役割を果たします。ここでは、7 つの主流 B2C ウェブサイト (JD.com、Dangdang、Yixun、Suning.com、Newegg、Gome Mall、No.1 Store) のホームページ ナビゲーション バーのデザインを分析し、それらの違いを比較し、人間化された機能を慎重に体験します。

3段階の分類表示詳細比較

Yixun は人気のあるサブカテゴリを第 1 レベルのカテゴリに配置していますが、Yihaodian は人気のあるサブカテゴリを色分けすることを選択しています。これらはすべて異なる設計上の考慮事項です。Yixun は総合的な電子商取引会社ではないため、第 1 レベルのカテゴリの数は JD.com などの総合的な電子商取引会社ほど多くなく、第 1 レベルのカテゴリに集中できます。ただし、Yihaodian には第 1 レベルのカテゴリが多いため、人気のある第 3 レベルのカテゴリを色分けしてマークすることを選択しています。

図1. Yihaodianは人気のあるサブカテゴリを異なる色で分類しています

図2. Yixunはナビゲーションバーの第1レベルカテゴリの下に人気のあるサブカテゴリを配置します

ナビゲーションバーで詳細比較を展開

Yixun を除く他の 6 つの Web サイトでは、ナビゲーション バーの第 1 レベル メニューが第 2 レベル メニューの固定位置に展開されています。 Yixun は、セカンダリ メニューをユーザーの閲覧場所に基づいて拡張し、セカンダリ メニューがユーザーの画面に完全に表示されるようにします。この詳細は大きな影響はないかもしれませんが、この Web サイトのデザイナーが非常に気を配っているという印象をユーザーに与えます。

図3. JD.comのナビゲーションバーのセカンダリメニューは、プライマリカテゴリがブラウザの上端に近い場合、完全には表示されません。

Yixun ナビゲーション バーの表示を見てみましょう。

図4. Yixunナビゲーションバーのセカンダリメニュー表示（I）

Yixun の第 1 レベル カテゴリがブラウザーの上端に近い場合、ナビゲーション バーの第 2 レベル メニューは次のように表示されます。

図 5. Yixun ナビゲーション バーのセカンダリ メニュー表示 (パート 2)

ブランド表示、プロモーション推奨比較

Yixun はブランドをさらに 3 つのカテゴリに統合しているため、ブランド表示モジュールを持たない唯一の企業です。他のウェブサイトではブランド表示が行われていますが、Gome でも画像とテキストの 2 つの表示方法が採用されています。

図6. Gomeのナビゲーションバーでのブランド表示

Dangdang は、ナビゲーション バーにプロモーション情報を表示することを推奨していません。No.1 Store、Gome、Yixun は単色のテキスト プロモーション広告を使用していますが、Newegg は、より目を引くように色分けできるテキスト プロモーション広告を設計しています。 JD.com と Suning.com は、ナビゲーション バーのテキストの間に配置される画像プロモーション広告を使用しています。テキスト プロモーション広告と比較すると、画像プロモーション広告は目を引く効果が高く、転換効果も優れています。

図7. Gomeのナビゲーションバーには人気のプロモーション情報が表示される

図8. Neweggナビゲーションバーのプロモーション活動の推奨事項

Suning.com はブランド表示とプロモーション情報に左から右へのレイアウトを使用していますが、JD.com は上から下のレイアウトを使用しています。Suning.com のナビゲーション バーにあるプロモーション活動の推奨画像はすべて、JD.com のものよりはるかに大きくなっています。

図9. Suning.comのナビゲーションバーの画像形式でのプロモーション活動の推奨

図10. JD.comのナビゲーションバーに表示されるプロモーション活動の推奨

ナビゲーションバーの閉じるボタン

JD.com、Suning.com、Newegg、No.1 Storeはすべてナビゲーションバーのセカンダリメニューの右上隅に閉じるボタンを設計していますが、このボタンはむしろ役に立たないといつも感じています。このボタンはブランドが推奨するプロモーション情報を閉じるために使用されていると考える人がいるのでしょうか。このボタンのデザインに何か秘密があれば、ご存知でしたら教えてください。

図11. Neweggナビゲーションバーの閉じるボタン

この記事はhttp://www.weijiezhimi.com.cn/posts/326.htmlから引用したものです。転載の際は出典を明記してください。よろしくお願いいたします。

元のタイトル: 7 つの主要な B2C ホームページ ナビゲーション バー デザインの比較分析

キーワード: B2C、ホームページナビゲーションバー、ウェブマスター、ウェブサイト、ウェブサイトプロモーション、収益化