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

ナビゲーションデザインと情報アーキテクチャ
<br />ナビゲーションについて話すときは、ほとんどの場合、ナビゲーションがコンテンツと構造をどのように表現するかについて話しています。つまり、ナビゲーションについて議論するときは、ナビゲーションとどのように対話するか、そしてそれが視覚的にどのように見えるかに重点を置きます。しかし、ナビゲーションはインタラクティブな方法や視覚的な形式に限定されません。 狭義のナビゲーション ナビゲーションの設計方法を振り返ってみませんか?コンテンツの内容や構造を踏まえて設計されているのではないでしょうか?結局のところ、ナビゲーションはおそらく、インタラクション デザイン、ビジュアル デザイン、そして忘れてはならない情報アーキテクチャという 3 つの側面から構成される取り組みです。ナビゲーションのデザインを決定するのは情報アーキテクチャです。
情報アーキテクチャは、使用する分類レベルの数や、アイテムが 2 つ以上のカテゴリに属する​​ことができるかどうかなどを決定します。情報アーキテクチャにおける作業の大部分は分類です。分類とは、既知の共通属性に基づいて既存の項目とコンテンツをグループ化および分類するプロセスです。コンピュータや情報システムが発明される前は、人々は常に分類作業を行っていました。日常生活から科学研究まで、分類はあらゆる場所で行われています。なぜ動物と植物を分類する必要があるのでしょうか?ああ、それは科学的な知識体系を形成することです。もちろん、最初に動物、植物、微生物が存在し、その後、界、門、綱、目、科、属、種などの生物学的分類体系が生まれました。なぜこんなに多くのレベルに分かれているのでしょうか?これは、生物界の複雑さにより、このような詳細な区分が必要になるためです。

したがって、私が常に支持してきた考え方は、コンテンツと情報アーキテクチャに従って分類することです。したがって、定量的かつ定性的な分析であるカードソートの使用も強くお勧めします。条件が許せば、試してみることをお勧めします。
冒頭の話題に戻りますが、ナビゲーションを考える際にインタラクティブで視覚的な形式だけを考慮すると、情報アーキテクチャに反する可能性が非常に高くなります。たとえば次の例。タブ ナビゲーションの例 タブ ナビゲーションを使用するのはなぜですか?これは、分類と分類の構造 (通常は 2 つのレベル) をより適切に表現できるためです。人々がカテゴリを 2 つのレベルに分割するのは、タブ ナビゲーションのせいではありません。当初、デザイナーが独創的なタブ形式のナビゲーションを設計したのは、2 レベルの分類のためだったに違いありません。タブ ナビゲーションの大規模な使用は、ほとんどの情報アーキテクチャの設計にも悪影響を及ぼします。いくつかのシンプルな項目はプライマリ ロジックで表示することもできましたが、タブ スタイルのナビゲーションの方が見栄えが良かったため、2 つのレベルに分類されました。人々がナビゲーションのコピーとして常に 4 つの漢字を使用することに慣れているのと同じです。たとえば、「ニュース」という言葉を使っても問題ありませんが、「ホットニュース」を使用する必要があります。原理は同じです。
ナビゲーションのインタラクションと視覚的なデザインは、情報アーキテクチャのデザインに影響を与えてはなりません。魚眼メニューは本当に便利なのでしょうか?ドロップダウン メニューに元々 10 個のメニュー項目がある場合、魚眼メニューを使用することを選択しますか?あるいは単にかっこいいからかもしれません。
依然として同じ質問です。どのようなコンテンツがどのようなナビゲーションを決定するのか。ここで私が話していることには、テキスト資料の分類だけでなく、機能的な Web サイトのユーザー タスクと目標も含まれることに注意することが重要です。 ナビゲーションはタブだけではありません
Office 2007 シリーズの製品では、元のメニューがレンガのようなボタンに置​​き換えられていることがわかります。リボンまたはコンテキスト ナビゲーションと呼ばれるこれらのタイルは、類似した対話型操作の分類です。明らかに、コンテキストナビゲーションはコンテンツの単純な分類を超えています。
検索ボックスはナビゲーションの一形態ですか?これはちょっと無理があるように思えます。ただし、情報検索システムでは、検索ボックスやフィルターなどがナビゲーションの役割を果たします。あるいは、アシストナビゲーションと呼ぶこともできます。
原点に戻って、ナビゲーションはなぜ存在するのでしょうか?すべてのシステムとアプリケーションにおいて、目的はユーザーがタスクを完了し、効率的に目標を達成できるようにすることです。このように、大まかに言えば、ユーザーがタスクを迅速に完了できるようにガイドするリンクやボタンは、より大きなナビゲーション システムの一部と考えることができます。
多くの友人が次のような疑問を抱いているかもしれません: ナビゲーション デザインではビジネス目標を考慮する必要がありますか?これは上記と矛盾しないと思います。詳細については議論に委ねることができます。 まとめると、ナビゲーションのためにナビゲーションをするのはやめましょう。最初のナビゲーションはプレゼンテーションの形式を指し、2 番目のナビゲーションは実際のナビゲーション システムを指します。
ナビゲーション デザインでは、インタラクション方法や視覚的な形式よりも情報アーキテクチャが重要です。
ナビゲーションはコンテンツの分類だけではなく、類似したインタラクティブ操作の分類でもあります。ナビゲーションの目的は、ユーザーがタスクを完了し、目標を効率的に達成できるようにすることです。
コンテキスト ナビゲーションは、ナビゲーション デザインの開発トレンドになる可能性があります。

<<:  js における関数のネストとクロージャの詳細

>>:  jsは前のページに戻り、コードを更新します

推薦する

MySQLの結合クエリ、ユニオンクエリ、サブクエリの原理と使用例の詳細な説明

この記事では、例を使用して、MySQL の結合クエリ、結合クエリ、サブクエリの原理と使用方法を説明し...

プログレッシブ ウェブ アプリ (PWA) の開発方法

目次概要必要とするアプリURL PWA にはどのような技術コンポーネントが必要ですか?マニフェストフ...

Vueカスタムカプセル化ボタンコンポーネント

Vueボタンコンポーネントのカスタムカプセル化コードは参考用です。具体的な内容は次のとおりです。ボタ...

VMware Workstationはデバイス/資格情報ガードと互換性がありません

仮想マシンをインストールするときに、「VMware ワークステーションはデバイス/資格情報ガードと互...

JavaScript 以外の静的リソースのバンドルの詳細

目次1. パッケージングツールでのカスタムインポート2. ブラウザとバンドラの共通インポート構文3....

JS 4つの楽しいハッカー背景効果コードを共有する

目次例1例2例3例4例1 <html> <ヘッド> <title>...

Vueキャッシュ機能の使い方

目次vue2のキャッシュ機能Vue キャッシュ関数の変換最適化要約するvue2のキャッシュ機能vue...

Vueでドラッグ可能なコンポーネントを実装する方法

この記事では、Vueでドラッグ可能なコンポーネントとドラッグ可能なコンポーネントを実装する方法を参考...

MACでMYSQLデータベースのパスワードを忘れた場合の解決策

Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...

データベースの削除から逃走までの MySQL の徹底分析_上級編 (I) - データ整合性

1. データ整合性の概要1. データ整合性の概要データの冗長性とは、データベース内に重複したデータが...

Docker の MySQL 時間とシステム時間の不一致の問題を解決する

最近、Docker に MySQL をインストールしたところ、データベースの時刻がシステム時刻と 8...

Vueのハッシュジャンプ原理の詳細な説明

目次ハッシュと履歴の違いハッシュ履歴getCurrentLocation の実装setupListe...

MySQL は ACID トランザクションをどのように実装しますか?

序文最近、面接中に、MySQL の InnoDB エンジンがどのようにトランザクションを実装している...

完璧なアロエベラジェルを選ぶには?完璧なアロエベラジェルの本物と偽物の見分け方

最新のパーフェクト アロエ ベラ ジェルのパッケージ ボックスには、赤いフォントで完璧な英語の文字が...