からサイトナビゲーションのアイデアを盗むための5つの素晴らしいサイト

設計者はナビゲーションメニューを見落としがちです。

毎回到達する標準的なレイアウトがいくつかあり、「それはユーザーが期待していることです」と自分に言い聞かせます。 そして、それ自体のためにノベルティに手を伸ばすよりも、うまくいくものに固執する方が理にかなっていることは事実であり、ユーザーの期待を念頭に置いて設計する必要があります。

しかし、ヘッダーナビゲーションメニューがユーザーがWebサイトをナビゲートする主な方法である場合、もう一度見て、改善できるかどうかを確認する必要がありますか？ 結局のところ、ホームページから降りることさえできなければ、ユーザーは私たちの他のデザインの盗品を見ることはありません。

私はこれらの1つを単に盗むことを主張していません。 しかし、私は彼らから教訓を得て、彼らのアイデアに基づいて、実際には標準よりも優れたヘッダーメニューを作成することを提案しています。

それを念頭に置いて、ここにあなたが今日ウェブ上で見るであろう最高の革新的なヘッダーメニューの7つがあります。

1：リース

リースは英国を拠点とする衣料品事業です。 オンラインで洋服を購入したことがあれば、マルチオプションのドロップダウンメニューはおなじみです。

しかし、大多数のeコマースビジネスとは異なり、Reissはメニュードロップダウンで画像を使用します。

テキストの説明を読む代わりに、それだけに基づいてクリックし、検討している製品の画像に直面するだけで、Reissへの訪問者はすぐにアイテムを見ることができます。

ユーザーはeコマース画像の影響を強く受けていることを私たちは知っています。 それらは主要な販売要因です。 では、カスタマージャーニーのできるだけ早い段階でそれらを紹介するのは意味がありませんか？

残念ながら、彼らはその革新的なアプローチをモバイルサイトに持ち越していません。モバイルサイトでは、メニューは左上隅にあるハンバーガーの標準的なテキストメニューです。

Reissはモバイルであまり売れていないためかもしれませんが、eコマースの購入者の旅はモバイルで始まることが多いので、このメニューのアイデアを借りることを考えている場合は、小さな画面で同じようにうまく実装する方法を見つけてください。

2：ルヤ

Ruyaのナビゲーションは、デザインに誇りを持っているエージェンシーにふさわしいものです。 ホームページのヘッダー画像は、大きなグラフィックとしてのWebサイトの旅の地図です。 ユーザーはテキストを読む代わりに、地図上で訪問する場所を選択できます。

これはプレイを複製するのでいい感じです。多くのユーザーは、このようなインタラクティブなマップを備えたビデオゲームに精通しているでしょう。

新しいスタイルのインタラクティブなアニメーションメニューを試したくない慎重なユーザーのために、上部に従来のハンバーガーメニューがあります。

このメニューレイアウトには、いくつかの大きな利点があります。 それは一般的であるためではなく、アイデアがよく知られていて理にかなっているため、直感的です。 それは印象的です：あなたがそれを見た後、あなたは代理店の名前を忘れないでしょう。 彼らのインタラクティブメニューはコンテンツマーケティングの一形態ですか？ そうだと思います。

しかし、それにはいくつかの問題もあります。 ページの速度が低下します。 効果は予想よりも少ないですが、コンピュータまたはインターネット接続が少なくともかなり高速でない場合は、欲求不満以外にそれから多くを得ることができません。 そしてそれを実装することは、ホームページ用に重要なカスタムコードを書かなければならないことを意味します-それはあなたが知らないデザインアイデアに入れるための多くの仕事が報われることを意味します。

モバイルでは、悲しいことに、Ruyaのスタイリッシュなオリジナルメニューは静的な背景画像に縮小されます。

それはまだ見えています、そしてそれはまだよく見えます。 ただし、メニューとしては機能しません。 ヘッダー画像として評価すると、忙しく、散らかっていて、他の選択肢よりも多くの点で劣っているように見えます。

顧客が通常超高速ブロードバンドを利用していて、開発時間とこのようなものを作成するための設計作業を節約できる場合は、競合他社に先んじることができるかもしれません。 しかし、繰り返しになりますが、モバイルが実際に最初の画面になっていることを考えると、あなたの創造性が実際に訪問者の大多数に見られることを確認する必要がありますか？

3：マシャブル

ギガントメニューは、コンテンツ重視のサイトで人気があります。 その理由は明らかです。このようなサイトには、単により多くのページがあります。 （Mashable.comには256,000ページあります。本当に！）そして、ユーザーは当然、分類された最新のものを望んでいます。 新聞と雑誌の両方が、写真、広告、ビデオが豊富なアルゴリズムでキュレーションされたニュースフィードによって機能を奪われてきた時代において、雑誌サイトは本当に目次以上のものを必要としています。

この動きは、見た目よりも前向きです。 ワイアードのようなハイテク雑誌が最初にオンラインに移行したとき、彼らは雑誌の発行スケジュールを維持し、毎週新しい号のようにサイトを作り直しました。 ユーザーが新しいコンテンツを持っているときにのみアクセスすることに気付いたとき、彼らは継続的な公開に切り替えました。

その時の問題は、紙の雑誌のために作成された発行スケジュールでした。 Webでは、段階的に公開できますが、今では誰もが公開しています。 ただし、雑誌サイトの場合、ヘッダーメニューは実際の雑誌のコンテンツページを模倣する必要はありません。 インクや紙に制約されないヘッダーメニューは、ダイナミックでカラフル、魅力的で有益なものになります。それ自体が資産であり、必要なものを見つけるのに役立ちます。

悲しいことに、このリストの他の多くの人と同じように、Mashableのモバイルメニューはそれほど面白くありません。 デスクトップサイトの画面いっぱいのmebaメニューは、モバイルではタイルのスタックになります。

4：モノポ

Monopoは、ほとんどのブランドがメニューの中心となることを敢えて行うよりも一歩進んでいます。 当初、彼らのホームページには標準のヘッダーメニューがあります。 ただし、アイテムをクリックすると、画面いっぱいに表示されるメニューが表示されます。 メニュー項目の画像があり、注意を引き、視聴者を引き込むアニメーションがあります。サブカテゴリを選択すると、図解されたメニューがスクロール可能になり、ページを下に移動して、クリックしなくても詳細を表示できます。 それは経験としてのメニューであり、機能としてのメニューであり、不愉快な後付けではありません。

モバイルでは、メニューははるかに普通に見えます。 クラシックな右上のハンバーガー、前面と中央にドロップボックスがあり、ユーザーはクリック可能な画像を超えて画面を下にスクロールします。

これは、実際にはWebサイトの主要部分よりもブログでよく知られているレイアウトですが、デスクトップメニューほど新しくて興味をそそるものではありません。 非常に視覚的で直感的に使用でき、モバイルバージョンでも、慎重に選択された画像が代理店のアプローチの感覚を伝えます。

ただし、提供されていないのは、革新的なモバイルメニューエクスペリエンスです。 画像は素晴らしいですが、それでもタイルスタックにすぎません。

5：紙のテレビ

私たちは、ユーザーがメニューを見逃すことのできない場所にメニューを配置するサイトを見てきました。訪問者が最初からサイトをナビゲートする方法を制御できるユーザーエクスペリエンスの作成に焦点を当てています。

しかし、Paper Televisionは、反対のアプローチを取り、グローバルに隠されたメニューを求めるサイトの数が増えている1つです。 紙のテレビメニューは、トップコーナーのハンバーガーです。 それはユーザーが自分の道を見つけるのを止めませんか？

理論的には、必見のメニューを標準の認識可能な場所に配置することをお勧めします。 しかし、多くのモバイルユーザーにとって、ハンバーガーは標準的で認識可能です。 ペーパーテレビのトラフィックは主にそのホームページに行くという事実を投げ入れてください：

また、メニュー項目が削除されると、ランディングページの変換がはるかに良くなるという事実を考慮してください。場合によっては、100％も良くなります。 彼らのホームページが本質的にランディングページである場合、Paper Televisionは、実際にそれを望んでいる人々のためにサイトをナビゲートする機能を維持しながら、目に見えるナビゲーションを可能な限り削除すべきではありませんか？

さらに、彼らのホームページはモバイルでもほとんど同じですが、サイズがわずかに異なります。

本当にモバイルファーストのエクスペリエンスは、モバイルディスプレイのデザインだけでなく、モバイルユーザーの期待や習慣に合わせたデザインを検討する必要があります。

モバイル画面のスペースが減少した結果、常に非表示になっているメニューは、このコンテキストでは完全に理にかなっているため、今後さらに多くのメニューが表示される可能性があります。

結論

ここには、サイトを引き継いで画面全体に表示されるメニューから、隠れているメニューまで、さまざまなメニュースタイルが表示されています。 これらすべてのメニューで最も重要なことは、ユーザーに新鮮で異なるものを提供することから始めます。つまり、Webサイトで最も価値のある不動産のいくつかを取得し、それを単なる列以上のものに変えようとしていることです。 5〜7つのクリック可能なオプション。

彼らの多くが倒れるのはモバイルです。そこでは、デザイナーがデスクトップサイトに置いた興味深いスタイリッシュな作品が、同じ古い、同じ古いスクロールカードに取って代わられる傾向があります。 それについて何ができるでしょうか？ 以下のコメントでお知らせください–そしてあなたのメニューを素晴らしいものにしてください！