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

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

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

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

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

推薦する

MySQLデータベースイベントスケジュール実行タスクの詳細な説明

1. 背景プロジェクトの業務が進むにつれて、データベース テーブルの数がどんどん大きくなり、ハードデ...

Linux の MySQL 設定の変更が有効にならない問題の解決方法

背景AWS EC2 を使用するプロジェクトサービスがあります。セキュリティとパフォーマンスを考慮して...

Vue プロジェクトでブラウザ キャッシュ設定を無効にする例

プロジェクトをリリースするときに、キャッシュをクリーンアップする必要があるという問題に遭遇することが...

MySQL バージョンは、2 つのタイムスタンプ型の値をサポートしていないバージョンよりも低いです。

MySQL エラー:エラー コード: 1293 テーブル定義が正しくありません。CURRENT_T...

JQuery を放棄すべきでしょうか?

目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...

CSS トランジションを使用した円形ホバー効果のサンプルコード

この記事では ソースコードのオンラインプレビューとダウンロード今日のチュートリアルでは、円のホバー効...

WeChatアプレットは水平および垂直スクロールを実現

この記事の例では、WeChatアプレットの水平スクロールと垂直スクロールを実現するための具体的なコー...

知らないかもしれないmysqldumpパラメータ

前回の記事で、mysqldump バックアップ ファイルに記録されるタイムスタンプ データは UTC...

MySQL InnoDB アーキテクチャの概要

目次導入1. MySQLデータベースの全体的なアーキテクチャSQL インターフェースパーサーオプティ...

C++ TpeScriptシリーズのジェネリックについて

目次1. テンプレート2. ジェネリック3. ジェネリック再帰4. デフォルトのジェネリックパラメー...

Docker ベースの GitLab 環境をデプロイする方法と手順

注意:仮想マシンのメモリは2G以上が推奨され、 Alibaba Cloudのアクセラレーションイメー...

Linux の cut コマンドの説明

Linux や Unix の cut コマンドは、ファイルの各行から一部を切り取って標準出力に出力す...

jsはショッピングカートの加算と減算、価格計算を実装します

この記事の例では、ショッピングカートの加算と減算、価格計算を実装するためのjsの具体的なコードを共有...

jQuery の CSS スタイル属性 css() と width() の完全ガイド

目次1. css() の基本的な使用法: 1.1 CSSプロパティを取得する1.2 CSSプロパティ...

Vue.js スロットにおけるスコープ付きスロットの使用法の詳細な説明

目次スロットなしVue2.x スロットスロット付き名前付きスロットスロット属性なしスロットの簡単なサ...