Uxデザイン

情報アーキテクチャの包括的なガイド

この記事の音声バージョンを聞く

UXプロセスの標準的な部分として、デザイナーは製品を構築するときに情報アーキテクチャを作成します。ユーザーがアプリやウェブサイトを経由できるすべての手段とパスを定義する情報アーキテクチャは、どのページがどこにつながるかを示す単なるサイトマップではありません。

設計図を使用して家のすべての部分を構築する建築家と同様に、物理的な構造から電気や配管などのより複雑な内部構造まで、情報アーキテクチャはWebサイトまたはアプリケーションの階層、ナビゲーション、機能、および相互作用を記述します。また、設計図が建築家にとって建物の建設に使用する最も価値のあるドキュメントであるように、情報アーキテクチャは設計者の兵器庫で最も強力なツールになり得ます。

ただし、機能のリストをまとめてその機能をマッピングするほど簡単ではありません。プロセスを調べてみましょう。

情報アーキテクチャとは何ですか、なぜそれが重要なのですか？

情報アーキテクチャ（IA）は、青写真のように、製品のインフラストラクチャ、機能、および階層の視覚的表現。詳細のレベルはデザイナーそのため、IAには、ナビゲーション、アプリケーションの機能と動作、コンテンツ、およびフローも含まれる場合があります。 IAのサイズや形状に制限はありません。それでも、製品の一般化された構造を網羅する必要があるため、誰でも（理論的には）それを読んで製品の動作を理解できるはずです。

両方のドキュメントの目的がほぼ同じであるため、ブループリントリファレンスを頻繁に使用します。青写真のように、IAは提供しますデザイナー（および製品開発チームとエンジニアリングチーム）製品全体の鳥瞰図。新しい機能の開発、既存の機能の更新、および既存の製品を考慮して何が可能かを確認するには、アプリケーションまたはWebサイトがどのように機能するかをシンプルで理解しやすい表現で提供する単一のドキュメントを用意することが不可欠です。

IAが利用可能になると、新しい機能と実装の重要な決定を下し、製品変更のタイムラインを理解し、複数のプロセスを通じてユーザーの行動を追跡することが非常に簡単になります。

基本的なビデオに飛び込んで、IAがどのように構築されているかを見てみましょう。

情報アーキテクチャを設計する方法

UXプロセスの一部として、IAデザインはフローチャートと非常によく似たパターンに従います。図形を追加し、それらを整理された方法で1つのドキュメントに線で接続します。 IAを構築する際の課題は理解にあります どうやって アプリやウェブサイトは、実際にはユーザーの観点から機能し、その情報を読みやすく読みやすい形式に整理する方法を示しています。

IAを実際に構築するには、2つの主要な要件があります。視覚的な階層（つまり、機能、機能、および動作の階層）を介してIAを編成することと、さまざまなタイプの機能、相互作用、およびフローを表示するための凡例を作成することです。標準のフローチャートでは、形状は特定の要件に従います（長方形はプロセス、ひし形は決定ポイントなど）。ただし、その命名法に従うことは必須ではありません。

C ++用のプログラム

つまり、IAを構築する上で最も重要な要素は、アーキテクチャの個々のコンポーネントが（階層的に）配置される場所と、それらにラベルを付けて表示する方法です。

情報アーキテクチャ図の例

による情報アーキテクチャイェゴールミトロファノフ。

ビジネスにおけるCFOとは

視覚的階層の理解と表示

新しい情報アーキテクチャを作成する上で最も難しいのは、ほとんどの場合、階層的に構築することです。 IAは「トップダウン」で構築する必要があるというのはよくある誤解です。上記のビデオのように、既存の製品でない限り、ほとんどの場合、これを行うのはより困難です。

IAを最初から構築する場合、Webサイトまたはアプリケーションが標準形式に準拠していない限り、トップレベルの後に何かを引き出すことは非常に困難です。これは、部品ではなく上から下に車を作るように整備士に依頼するようなものです。各ピースは、独自の研究、設計、開発の時間をかけて事前に構築する必要があります。同じことがIAにも当てはまります。

米国を拠点とするフルタイムのフリーランスUXデザイナーが望んでいた

視覚的な階層を表示することは、読者にとってより良いコンテキストを提供するだけでなく、製品の主要な領域を一般化するため、IAにとって貴重な資産です。アプリの最も重要な機能が、ホームページから実行できる配車（UberまたはLyft）の注文である場合、そのページには、製品にとって最も多くのタッチポイントと最大の価値があります。同じことが視覚的階層にも当てはまります。

サイトマップは、ページを数値で整理するため（1.0 Home、2.0 Payment、2.1 Add Pay Methodなど）、階層を理解するのに役立ちます。または、デューク大学の図書館のウェブサイトの以下の画像の例を検討してください。上部のナビゲーションは上部だけでなく、アプリケーション全体に表示されるように強調表示されています。

そのライブラリについては、デュークは情報アーキテクチャマップに優れた視覚的階層を持っています

の構造デュークのサイト簡単です。ホームページにはグローバルナビゲーションリンクとコンテンツが表示され、各グローバルリンクは比較的身長の高いさまざまなページにつながります。

形状、色、およびその他の視覚要素の階層

階層とは別に、上記のアーキテクチャは別のことをうまく実行します。単純な凡例といくつかのキーフレーズを通じて、必要に応じてすべてのエンゲージメントポイントを一意に表示します。凡例はページとコンテンツタイプを示し、図形の色の違いを示します。デュークのサイトはかなりシンプルに見えますが、IAは3レベルしか深くないため、これは重要です。黄色の長方形はそれぞれアプリケーションを示しているため、これらの各ボックス内のプロセスはこのドキュメントには含まれていません。

これらのパーツがなくても、IAだけでWebサイトをナビゲートする方法が理解できる構造になっています。 Webサイト内のアプリケーションに到達すると、それは停止します。必ずしもそうする必要はありません。

以下のIAはゲーム用です。 4つの形状、色なし、スマートに配置されたテキストスニペットを使用して、すべての主要なインタラクションはプロトタイプなしで理解でき、さらに重要なことに、それに取り組んでいる誰もが理解できます。

Windowsはどの言語を使用しますか

ウェブサイトの情報アーキテクチャは、形状の階層に重点を置いて、UXプロセスに従います

学生IA- クイーンディチャン。

このモデルは完全ではありませんが、アプリの階層を明確に整理し、ユーザーが任意の時点で表示または実行する内容を示します。

最高の情報アーキテクチャツール

IAの構築を可能にするソフトウェアアプリケーションはたくさんありますが、エクスペリエンスを楽しくするのに十分なほどシンプルで迅速なものはほとんどありません。または、少なくとも、管理が簡単です。

上のビデオで使用されているDraw.ioは、個人的および専門的な使用のために完全に無料であり、自動的にGoogleドライブに接続されます。また、有料のConfluenceおよびJIRAとの統合もあります。 Draw.io フローチャート、ユーザーフロー、情報アーキテクチャの作成に最適です。ドライブ機能を使用すると、複数のユーザーが同じドキュメントで作業し、変更をライブで確認できます。無料のオフラインバージョンもあります。

Lucidchart は、Draw.ioよりもわずかに優れたエクスペリエンスを提供し、事前に作成されたテンプレート、より多くの統合、モバイルアプリ（App Storeで2.5つ星と評価）、エンタープライズのサポートなどの追加の利点を提供するもう1つの優れたツールです。

draw.ioは、情報アーキテクチャを構築するためのオンラインツールです。

Draw.io は、フローチャート、図、情報アーキテクチャなどを作成するための無料のオンラインツールです。

Omnigraffle そして Visio は長年の業界の主力であり、IAデザインの構築と維持に優れていますが、Visioはオンラインのみ（古いオフラインバージョンはWindowsのみ）ですが、OmnigraffleはMacのみであり、MacOSバージョンとiOSバージョンを別々に購入する必要があります。 OmniGraffleは、JavaScriptとAppleScriptの自動化を提供するという点で、主要な競合他社に比べて1つの利点があります。デザイナー不要かもしれませんが、通常、フルタイムの情報アーキテクトはそれを高く評価しています。

上記のすべてのツールは、情報アーキテクチャとほぼ同じ原則に従う、特にフローチャートを中心に、速度と使いやすさのために作られています。のような他のアプリケーション Balsamiq 、 MindMeister 、 MindManager 、または XMind すべて同様のスタイルの動作を提供しますが、プロトタイピングやマインドマッピングなどの他の主要な目的のために構築されています。

情報アーキテクチャのベストプラクティス

情報アーキテクチャを構成するものについて定義されたルールはほとんどありませんが、プロセスを実行するときは、次のことを考慮してください。

階層に焦点を当てるのではなく、構造に焦点を当てる

階層は調整可能です。ホームページは常にホームページになりますが、それがどこにつながるか、ユーザーがそれらの場所に到達する方法、およびその間のすべてが後で決定されます。

すべてのプロセスは論理的である必要があります

UXプロセスのIAはユーザーとの対話用ですが、方法のすべてのステップが理にかなっている必要があります。登録画面が設定につながるべきではなく、カメラ機能がマップビューにジャンプするべきではありません…リストは続きます。

UXプロセスを忘れないでください

よくある間違いは作る IA、リソース、研究、またはその他の資産や作業なし。これは、著者にアウトラインなしで本を書くように指示したり、プログラマーにプロトタイプなしでアプリをコーディングするように指示したりするようなものです。

あなたはカートグラファーです

地図製作者は、山脈から州境まで、地図に関するすべてを考慮に入れます。マップメーカーと同じように、設計者はIA設計に何を入れるかを決定します。個々のページ、特定のユーザーの行動、決定ポイントのコンテキストなど。

最終的に、カートグラファーはユーザーのニーズに基づいてマップに何を表示するかを決定します。同じことが設計者にも当てはまります。したがって、エンドユーザー、つまり製品開発チームと設計チームのためにIAを構築します。

情報アーキテクチャは常に変化し、進化しています

ポイントをもう一度ドリルするために、すべてのIAは変更のために構築されています。製品は進化し、デザインは変化し、ユーザーは適応し、サイクルは何度も繰り返されます。あまり真剣に受け止めないでください。常に改善の余地があることを知ってください。完璧を目指してはいけません。シンプルで適応性のあるIAを構築します。

初心者のための春のバッチチュートリアル

私の情報アーキテクチャは完成しました…今何ですか？

どんなデザイン作業も決してないというのが一般的な概念です 本当に 完了しました。これは確かに情報アーキテクチャの場合です。それらは、当社の製品と同じように成長、縮小、変化します。建物の青写真とは異なり、IAは常に、ユーザーのニーズから新機能や製品のオーバーホールまで、あらゆるものに基づいて進化します。構造の多くは同じままで、バージョン間の一貫性を提供するため、ユーザーが混乱することはありません。

そしてそれは良いことです。 IAが流動的なドキュメントであり、毎週、場合によっては毎日変更される可能性があることを知っていることは、コードに触れることなく、アプリやWebサイトの全体的な構造を維持するための強力な方法です。新しいプロトタイプの作成。製品開発チーム全体が優れている 知っている IAは、誰もが何が可能で何が不可能であるか、そして想定される「簡単な作業」が実際にどれほど深刻であるかをより早く知ることができます。

これは、情報アーキテクチャの真の美しさをもたらします。事前定義された出発点はありません。従来のUX設計プロセスでは、十分なユーザーフローを完了した後にIAを構築する必要があります。たくさんのユーザーと武装競争力のある研究、それは最初に行われることでもあります…または最後に行われます。プロトタイピングプロセスでは、論理的または想像を絶するIAからは想像しがたい、特定の動作またはアクションがどのように発生するかについての情報が得られることがよくあります。

進化し続けるプラクティスとして、IAデザインはスキルであると同時に芸術でもあります。そのため、大企業には情報アーキテクトの立場があります。これらのデザイナーは大規模システムのゲートキーパーであり、時間の経過に伴う製品の成長を理解しているため、製品、設計、エンジニアリングの各チームが次の期間にわたって適切な決定を下すのに役立ちます。年。その規模の組織はすべての設計者に適しているわけではありませんが、すべてのデザイナーシンプルで理解しやすい情報アーキテクチャを構築できます。

•••