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

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

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

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

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

推薦する

MySQLはconnect_by_isleaf MySQLメソッドまたはストアドプロシージャに似た機能を実装します

最近、特に異常なビジネス需要があり、テーブルがあります テーブル「デモ」を作成します( `id` i...

Mysql データベースのマスタースレーブ同期構成

目次Mysql マスタースレーブ同期構成1. 2つのmysqlをインストールする2. MySQL設定...

エコー後に要素編集フォームel-radioが選択できない問題を解決します

目次序文質問オンラインソリューション序文この記事の内容は私がこの業界に入ったときのメモを元にしている...

Baidu Union 環境での広告スキル (グラフィック チュートリアル)

最近、製品部門のユーザーエクスペリエンスチームの学生は、アライアンス環境における広告に関する一連の研...

HTML ページジャンプのパラメータ渡しの問題

効果は以下のとおりです。ページジャンプボタンをクリックした後 対応する値はページ b で取得できます...

キャンバスをベースにした超クールな水光効果を実現

この記事の例では、キャンバスをベースにした超クールな水の光の効果を実装するための具体的なコードを参考...

JS ES の新機能、変数分離割り当て

目次1. 配列の分離割り当て1.1 配列分離割り当てとは何ですか? 1.2 配列分離割り当てに失敗し...

mybatis-plusページングパラメータが渡された後、SQLのwhere条件にはページング情報操作の制限がありません

2時間近くかけて、さまざまな方法を試しました。後で、whereでフィルタリングした後のデータ量が1ペ...

Kylin V10 への zabbix-agent のインストール手順

1. インストールパッケージをダウンロードするダウンロードアドレス: https://sourcef...

React diffアルゴリズムソースコード分析

目次単一ノード差分単一要素を調整するマルチノード差分調整子配列ノードが移動したかどうかを判断するには...

ウェブページの画像の回転を実現するjs

この記事では、Webページの画像の回転を実現するためのjsの具体的なコードを参考までに共有します。具...

MySQL 8.0.18コマンドの詳細な説明

解凍したフォルダ C:\web\mysql-8.0.11 を開き、フォルダ内に my.ini 構成フ...

Dockerの基礎

序文: Docker はオープンソースのアプリケーション コンテナ エンジンであり、開発者はこれを使...

ウェブサイトのコンテンツの100~1%はナビゲーションである

ウェブサイトでは、コンテンツの(100-1)%がナビゲーションです1. ジェシー・ジェームズ・ギャレ...

CSS3 で高さと幅を不定にして垂直と水平に中央揃えするいくつかの方法

1. フレックスレイアウト 。父親 { ディスプレイ: フレックス; コンテンツの中央揃え: 中央;...