ウェブサイトのデザイン: ウェブナビゲーションデザインに関する2、3のポイント

Web 上のナビゲーションは、「私は誰なのか？」「私はどこから来たのか？」「私はどこへ行くのか？」といったユーザーの質問に答える役割を果たします。優れたナビゲーションは、Web サイトの主要な基礎です。これは、Web サイトのデザインを開始したり、Web ページを修正したりするときに、デザイナーが最初に直面する課題となることがよくあります。

01 ナビゲーションデザインの情報アーキテクチャ

情報アーキテクチャはナビゲーションの性質を決定します。設計前にコンテンツの情報アーキテクチャを明確にすることでのみ、Web サイトの構造を整理し、情報を効果的に伝達するナビゲーション機能を最大限に高めることができます。 Web ページ構造にはいくつのレベルがありますか? 階層関係はありますか? カテゴリ ラベル間の関係は並列ですか、それとも関連していますか? 各サブ項目にマージ可能な項目がありますか? など。単純な論理関係やビジネス関係に従ってページナビゲーションを 3 レベルまたは 4 レベルに単純に細分化したり、ユーザーの認識と一致しない情報カテゴリを生成したりすることは避けるべきです。ナビゲーション レベルが 1 つ増えるごとに認知的次元が追加され、ナビゲーション システム全体の複雑さが数倍に増加します。ユーザー操作が飛躍的に増加するだけでなく、その後の Web ページのメンテナンスにも多大なコストがかかります。次の 2 つの図は、同じページ数でも配置方法が異なるとユーザーに異なるエクスペリエンスをもたらすことを明確に示しています。

Web インタラクション デザインには「3 クリック」の原則があります。3 回のクリックで必要な情報が見つからない場合や機能を完了できない場合、ユーザーは諦めることになります。したがって、ナビゲーションにおいて最も基本的なことは、現在のページにどのようなコンテンツがあり、ターゲットコンテンツがどこにあるかをユーザーに知らせることです。ナビゲーション デザインにおける幅と深さの違いを示します。一般的に、幅は深さよりも優れています。深い構造のレベルを選択することで、迷子になりやすくなり、場合によっては迷子になってしまうこともあります。しかし、幅広すぎるのはよくありません。一度に表示するコンテンツが多すぎると、ユーザーは怖気づいてしまい、「選択症候群」に陥ってしまいます。

ユーザーの認識を明確にするため、または修正の必要性に直面したときにデザイナーがナビゲーションを作成および改善するのを支援するために、一般的に使用される方法がカードソートです。カードソートの方法は非常に簡単です。まず、同じサイズの空白のカードを数枚用意し、異なるカードに情報を書き、参加者自身に分類してもらいます。適切な説明ガイダンスがあってもかまいません。各テストの参加者数は 2 ～ 4 人が最適で、人数が少なすぎるとユーザー同士の議論が難しくなります。人数が多すぎると議論が混乱し、状況をコントロールするのが難しくなります。これは、Web サイトやその他の企画の初期段階でよく使用されるテスト方法です。これにより、ユーザーの習慣に本当に適合する情報分類を理解し、それらの間の認知の違いを見つけて、アーキテクチャを調整するのに役立ちます。

02 ナビゲーションデザインインタラクションスタイル

Web ナビゲーションの最も重要な機能は、Web サイトのコンテンツ情報をユーザーにわかりやすい方法で表示することです。ウェブサイトの情報アーキテクチャを決定した後、必要に応じて適切なナビゲーション スタイルを選択する必要があります。結果を気にせずタブ形式のナビゲーションを使用する代わりに、水平ナビゲーションがないと Web ページを作成していると言うのが恥ずかしいと感じる人がいます。まず、一般的なナビゲーション形式をいくつか理解しましょう。

1. ステップ ナビゲーションは通常、テキスト ラベルと矢印で構成され、バック リンクも付いています。ウィザード、支払い、オンライン閲覧などの連動したページプロセスに適しており、ページへの次々へのアクセスを提供します。

(画像出典: Google.com 登録ページ)

2. 検索ページではページングナビゲーションがよく表示されます。一度に表示できる結果の数は通常制限されています。制限を超えた結果は新しいページに表示されます。最も単純なページネーション ナビゲーションは、ページ番号を使用した分散ナビゲーションです。

（写真提供：Alibaba My Ali）

3. パンくずリストは、ユーザーが Web サイトを訪問する際にたどるルートを示し、要素とノードの長いリストで構成されます。各ノードは、以前にアクセスしたページまたは親トピックに接続されており、ノードは通常、大なり記号 (>)、コロン (:)、または縦棒 (|) などの記号で区切られます。

(画像出典: Apple.com)

4. ツリー ナビゲーションにより階層構造にアクセスできます。プラス記号やマイナス記号、または子ノードを展開したり折りたたんだりするための小さな矢印が含まれることが多い小さなアイコン。

5. サイトマップでは、Web サイトの概要を素早く確認できます。コンテンツ量が多く、ユーザーベースが広い Web サイトに適しています。したがって、スキャンは比較的シンプルで簡単であるはずです。ラベルはページのタイトルと一致する必要があります。サイトマップを作成するときは、その粒度を考慮する必要があります。一般的に、Web サイト構造の 2 つまたは 3 つのレベルを示し、ページへのリンクを提供するだけで十分です。フッター サイトマップは、現在大規模および中規模の Web サイトで採用されている方法です。ページの下部にサイトマップの一部が表示され、完全なマップへのリンクが含まれます。

(写真提供: Flickr.com)

6. タブナビゲーションは、ナビゲーションバー + タブに相当します。最も単純な形式では、ナビゲーション バーは単なるハイパーリンクの行であり、垂直バーで区切られることもあります。タブ スタイルのナビゲーションでは、タブ コントロールとナビゲーション バーが組み合わされ、Web サイトのコンテンツが構造化され、複数化されます。

(画像出典: Motorola.com)

Amazon.com は、タブ ナビゲーションを使用する最初の大規模電子商取引 Web サイトかもしれません。Amazon は現在、オンラインで垂直メニュー + 動的メニューを使用しています。

(写真提供: Amazon.com 1998)

7. 垂直メニュー: 通常、Web サイトの左側または右側に配置されるリンクの列。垂直メニューは水平ナビゲーションよりも柔軟性が高く、下方向に拡張しやすく、ラベルの長さを長くすることができます。

(画像出典: Apple.com)

8. 動的メニューは、ポップアップ メニュー、ドロップダウン メニュー、またはポップアップ メニューとも呼ばれます。メニューを表示するには、ユーザーがメニューを操作する必要があります。一般的な操作は、マウスをホバーしたりクリックしたりすることです。

(画像出典: Amazon.com)

9. ドロップダウン メニューは、ドロップダウン メニューの特性を利用します。1 つ以上のオプションを選択すると、ユーザーは新しいページに移動します。

(画像提供：Dell.com)

10. タグ クラウドにリストされているリンクはアルファベット順に並べられ、フォント サイズと色はタグの人気度に応じて決定されます。タグ クラウドのデザイナーは、インタラクション デザイナーの Stewart Butterfield です。タグクラウドを最初に使用したのは Flickr でした。

(写真提供: Flickr.com)

03 ナビゲーションデザイン-ビジュアルデザイン

Apple はデザイン界のトレンドセッターとなることが多く、同社のビジュアルがアップデートまたは反復されるたびに、インターネット上で模倣が生まれます。ここでは、1997 年以降の Apple のビジュアル アップデートの最も重要なスクリーンショットをいくつか集めました。長年にわたる apple.com の変更点を見て、ナビゲーションと Web サイトのビジュアル システムの反復を確認してみましょう。

アップル 1997:

下のスクリーンショットからは、それが Apple 製であると視覚的に判断するのは少し難しいです。当時のインターフェースは主にテキストリンクで構成されており、ナビゲーションは単純な垂直メニューのみでした。

アップル 1998:

Apple のウェブサイトのレイアウトのスタイルを取り入れ始めました。シンプルで明確なビジュアルスタイル、トップダウン構造、上部に大きな製品バナーポスター、下部に 3 列の製品ディスプレイ。

アップル 2000:

上部固定タブナビゲーションが使用されるのは今回が初めてです。注目すべき機能がいくつかあります:

1) 赤い Apple ロゴがホームページを明確に識別します。

2) 水平タブ形式のセカンダリナビゲーション

3) 白いガラスの質感のナビゲーションビジュアルスタイルは、Web の世界で長い間人気がありました。

アップル 2001:

ナビゲーションの視覚的およびインタラクティブな形式は、赤いロゴが青に置き換えられた以外はあまり変わっていません。また、サイトのインターフェースとコントロール全体に白いガラスの雰囲気が引き継がれています。

検索ボタンを含むコントロールには丸みを帯びたガラスの質感が与えられており、付随する画像の外枠もそれに応じて丸みを帯びていることがわかります。

追伸、当時は1,000曲持っていました。 。 。

アップル 2002

ナビゲーションシステムのロゴの色がグレーに変更され、ガラスのテクスチャのグラデーションも大幅に調整されました。また、iSync パネルのブラシ仕上げの金属質感も注目に値します。

アップル 2004:

ナビゲーション システムのビジュアル デザインはまだ微調整中です。全体的に大きな変化はありません。

アップル 2007:

ナビゲーションは2007年に完全に変更されました。質感はグレーで表現されています。 Apple ロゴの繊細な質感が、オリジナルのモノクロ処理に取って代わりました。タブ形式のセカンダリナビゲーションが削除されました。

ホームページでは、新製品を強調するために全画面バナーを使用しています。 Appleのコピーライティングも、人々が話題にする古典です。

アップル 2010:

アップル 2011:

アップル 2012:

2010年から2012年までのナビゲーションを見ると、製品の次元に応じてナビゲーション構造が分かれています。ユーザーが Web サイトにアクセスしたときに、知りたい製品に直接移動できるように、製品名を使用して Web サイトに名前を付けます。

サイズからラベル名、さらには順序まで、何も変わっていません。主な変更点は、ナビゲーションと検索ボックスの視覚的な側面にあります。

視覚的に: 1) メイン ナビゲーションが、単一のグレー グラデーションからダーク グレーのテクスチャ グラデーション、さらにダーク グレーのテクスチャ グラデーションに変わります。

2) 対照的に、Apple ロゴの質感は、豊かな質感からシンプルなグレーと白のグラデーションまで、シンプルに保たれています。

3) ラベルのフォントと検索アイコンが強調表示され、暗い背景から徐々に分離されます。

検索ボックス: 1) 検索ボックスとナビゲーションを視覚的に 1 つの全体的なデザインに統合します。もはや単純な白い背景処理ではありません。

2) 検索アイコンのみを残し、「検索」を削除します

3) タブの幅が広がり、検索ボックスの幅が圧縮されます。マウスをクリックすると、検索ボックスが自動的に拡張され、検索ボックスのデフォルトと入力の使用状態が区別されます。

一般ユーザーの視点で apple.com を使用するたびに、そのスピードと効率性を感じます。apple.com が伝えたいことや、知りたい最近の変更点がすぐにわかります。記憶の中にあるものを見つけるのは難しくありません。検索は最後の武器です。あらゆる色の組み合わせ、あらゆるピクセル制御、そしてあらゆる素晴らしいコピーは、注意深く鑑賞する価値があります。

上記は、ナビゲーションを設計する際に私が遭遇したいくつかの盲点と発見です。 Honesty China の再設計プロジェクトで最も議論されたトピックは、構造的構成から情報階層、インタラクション形式から視覚スタイルまでのナビゲーションです。議論が終わる頃には、ナビゲーションに対する全員の考えは曖昧になり、議論の終わりには、ナビゲーションとはいったい何なのか、なぜナビゲーションが必要なのか、ナビゲーションとはこのような方法だけなのか、と自問する人も多かった。設計プロセスでは、インタラクティブ コントロールの基本概念の起源を頻繁に調査する必要があります。そうすることで、理解がはるかに明確になります。ここでは、ナビゲーションを設計する過程で私が遭遇した疑問や考えをまとめます。ナビゲーションを設計する際に少しでも役立つことを願っています。

優れたナビゲーションの鍵は、問題を解決できるかどうかです。ナビゲーションについて「熟考」することは避け、ナビゲーションをより堅実で、より明確で、より有意義なものにしましょう。

参考文献:

1. 一部の画像とテキストは「Web Navigation Design」に基づいています。著者: James Kalbach 翻訳者: Li Xilin

2. カードソーティング - Wikipedia

表示へ移動 -> ブログリンク http://blog.163.com/lan_lan_321/blog/static/13787885720124915148408/

出典: http://www.aliued.cn

元のタイトル: ウェブサイトのデザイン: ウェブナビゲーションデザインに関する 2 つまたは 3 つのこと

キーワード: ウェブサイト、ウェブ、ナビゲーション、3 つのこと、役割、1 つ、答え、ウェブマスター、ウェブサイトのプロモーション、収益化