ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです 1. ジェシー・ジェームズ・ギャレットは著書『ユーザーエクスペリエンスの要素』の中で、グローバルナビゲーション、ローカルナビゲーション、補助ナビゲーション、内部リンクナビゲーション、フレンドリーナビゲーションなど、複数のナビゲーションシステムについて言及しています。 しかし、それだけではないと思います、「検索」「分類」「サイトマップ」「コンテンツ紹介」などは、ナビゲーション方法が異なるだけです。 2. ウェブサイトの価値は、「ユーザーがタスクを完了し、特定の体験を得るのに役立つこと」です。 ウェブサイトに必要なのは、ユーザーがタスクを完了できるように適切にガイドし、タスクを完了するプロセスでユーザーが良好なエクスペリエンスを得られるよう保証することです。 ある意味、Web サイトが最初から最後まで行うことが「ナビゲーション」であり、最終的な結果のみが「コンテンツ」であると言えます。 3. したがって、ウェブサイト デザインの「100 パーセントマイナス 1」はナビゲーション デザインです。 ウェブサイトの体験と「タスクを完了するプロセス」は、実際には「ナビゲーション体験」です。 そのため、デザインにおいては、「ユーザーがこのタスクをよりうまく完了できるようにするにはどうすればいいか」、「この操作を完了するためにユーザーをよりうまくガイドするにはどうすればいいか」、「ユーザーがこの操作に慣れるにはどうすればいいか」などを常に考えています。 ページ、コンテンツの(100-1)%はナビゲーションです 4. 心理学者のジョン・クレイド教授はかつて、人間の 7 つの恐怖をまとめたが、その 5 番目は「考えることへの恐怖」である。人間は、より多く、より豊富な選択肢よりも、単純で明白な答えを必要としている。ホワイトウォーター事件をまとめたとき、アメリカ人は「スキャンダルを複雑にすれば、罪悪感から逃れられる」と言った。 同様に、ページを複雑にすると、ユーザーが迷ってしまう可能性がある、と言いたいです。 5. 実際、Web サイトのどのページでも、ユーザーに「 1 つの」メッセージを正確に伝えるだけで済みます。 実際、ページはユーザーに「1 つの」メッセージしか伝えられず、他の情報は「ガイド」としての意味しか持ちません。 6. したがって、Web サイトのどのページでも、「100 パーセントマイナス 1」のコンテンツがナビゲーションになります。 7. ホームページ上の他の部分はすべて「このウェブサイトはどのような感じか」をユーザーに伝えること(これはコンテンツを直接提示するのではなく、「目に見えない形で」表現されることが多い)に加えて、「ガイダンス」を目的としています。 ウェブサイトのホームページ上のコンテンツの 100% がナビゲーションであると想定できます。 ナビゲーションは詳細であればあるほど良いというわけではない 8. 「補助ナビゲーション」または「フレンドリーナビゲーション」を設計する際に従う原則は、多くの場合、ユーザーが情報 A を閲覧しているときに操作 B を実行する必要がある可能性があるとデザイナーが判断した場合、「操作 B を実行する方法」をユーザーにすぐに知らせるように努めるというものです。 もちろん、「ユーザーにすぐに知らせる」ということは、「操作 B をページ上のわかりやすい場所に配置する」ことも意味します。ただし、「可能性のある需要」が多すぎるため、直接配置は選択肢にならないことがよくあります。 9. 調査レポートによると、東洋人はウェブサイトを操作する際に比較的怠惰に考えており、特に「考えることへの恐怖」に陥りやすいそうです。 簡単に言えば、東洋の人々が情報 A を閲覧しているときに操作 B を実行する必要がある場合、一般的に「操作 B はページ上のどこかに明確に配置されている必要があり、そうでなければデザインが良くない」と考えています。 そのため、多くのウェブサイトのデザインではこの原則に違反し、ページ上に「補助ナビゲーション」や「フレンドリーナビゲーション」を多く配置していることがよくあります。結果は上で述べたとおりです。ページを複雑にすると、ユーザーは混乱してしまいます。 |
<<: MySQL データテーブルのパーティション戦略と利点と欠点の分析
>>: カタツムリ映画システムのDocker展開の詳細なプロセス分析
目次1. Promise とは何ですか? 2. なぜ Promise が存在するのでしょうか? 3つ...
ウェブページにBaiduマップを挿入するBaidu Maps を自分の Web ページに追加したい場...
HTML5の<input="text" placeholder="...
信頼性が高く、人気があり、簡単に構成できる Web サーバーである Apache で独自の Web ...
目次タイムスタンプ比較クエリで遭遇する落とし穴タイムスタンプクエリ範囲の問題タイムスタンプ比較クエリ...
目次1. 縦方向のスライス1.1 垂直データベース1.2 垂直テーブル分割2. 水平(横断)セグメン...
目次TOKEN タイマーリフレッシュ2. access_tokenの内部設計2.1 access_t...
目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...
この記事の例では、登録ページの効果を実現するためのVueの具体的なコードを参考までに共有しています。...
通常のウェブサイトのソースコードを開くと、ソースコードは<!DOCTYPE htmlで始まる必...
<テンプレート> <div class="アプリコンテナ"&...
1. 記事タイトルリストの右側に日付を表示する方法:コードをコピーコードは次のとおりです。 &l...
この記事の例では、画像切り替え効果を実現するためのVueの具体的なコードを参考までに共有しています。...
目次1.ライフサイクルとは何か2. Vueのライフサイクル3. ライフサイクルフック関数1.ライフサ...
序文React 16から、子コンポーネントで発生したエラーを捕捉し、エラーログを記録し、ダウングレー...