この記事の音声バージョンを聞く
UXプロセスの標準的な部分として、デザイナーは製品を構築するときに情報アーキテクチャを作成します。ユーザーがアプリやウェブサイトを経由できるすべての手段とパスを定義する情報アーキテクチャは、どのページがどこにつながるかを示す単なるサイトマップではありません。
設計図を使用して家のすべての部分を構築する建築家と同様に、物理的な構造から電気や配管などのより複雑な内部構造まで、情報アーキテクチャはWebサイトまたはアプリケーションの階層、ナビゲーション、機能、および相互作用を記述します。また、設計図が建築家にとって建物の建設に使用する最も価値のあるドキュメントであるように、情報アーキテクチャは設計者の兵器庫で最も強力なツールになり得ます。
ただし、機能のリストをまとめてその機能をマッピングするほど簡単ではありません。プロセスを調べてみましょう。
情報アーキテクチャ(IA)は、 青写真のように 、製品のインフラストラクチャ、機能、および階層の視覚的表現。詳細のレベルは デザイナー そのため、IAには、ナビゲーション、アプリケーションの機能と動作、コンテンツ、およびフローも含まれる場合があります。 IAのサイズや形状に制限はありません。それでも、製品の一般化された構造を網羅する必要があるため、誰でも(理論的には)それを読んで製品の動作を理解できるはずです。
両方のドキュメントの目的がほぼ同じであるため、ブループリントリファレンスを頻繁に使用します。青写真のように、IAは提供します デザイナー (および製品開発チームとエンジニアリングチーム)製品全体の鳥瞰図。新しい機能の開発、既存の機能の更新、および既存の製品を考慮して何が可能かを確認するには、アプリケーションまたはWebサイトがどのように機能するかをシンプルで理解しやすい表現で提供する単一のドキュメントを用意することが不可欠です。
IAが利用可能になると、新しい機能と実装の重要な決定を下し、製品変更のタイムラインを理解し、複数のプロセスを通じてユーザーの行動を追跡することが非常に簡単になります。
基本的なビデオに飛び込んで、IAがどのように構築されているかを見てみましょう。
UXプロセスの一部として、IAデザインはフローチャートと非常によく似たパターンに従います。図形を追加し、それらを整理された方法で1つのドキュメントに線で接続します。 IAを構築する際の課題は理解にあります どうやって アプリやウェブサイトは、実際にはユーザーの観点から機能し、その情報を読みやすく読みやすい形式に整理する方法を示しています。
IAを実際に構築するには、2つの主要な要件があります。視覚的な階層(つまり、機能、機能、および動作の階層)を介してIAを編成することと、さまざまなタイプの機能、相互作用、およびフローを表示するための凡例を作成することです。標準のフローチャートでは、形状は特定の要件に従います(長方形はプロセス、ひし形は決定ポイントなど)。ただし、その命名法に従うことは必須ではありません。
C ++用のプログラム
つまり、IAを構築する上で最も重要な要素は、アーキテクチャの個々のコンポーネントが(階層的に)配置される場所と、それらにラベルを付けて表示する方法です。
ビジネスにおけるCFOとは
新しい情報アーキテクチャを作成する上で最も難しいのは、ほとんどの場合、階層的に構築することです。 IAは「トップダウン」で構築する必要があるというのはよくある誤解です。上記のビデオのように、既存の製品でない限り、ほとんどの場合、これを行うのはより困難です。
IAを最初から構築する場合、Webサイトまたはアプリケーションが標準形式に準拠していない限り、トップレベルの後に何かを引き出すことは非常に困難です。これは、部品ではなく上から下に車を作るように整備士に依頼するようなものです。各ピースは、独自の研究、設計、開発の時間をかけて事前に構築する必要があります。同じことがIAにも当てはまります。
視覚的な階層を表示することは、読者にとってより良いコンテキストを提供するだけでなく、製品の主要な領域を一般化するため、IAにとって貴重な資産です。アプリの最も重要な機能が、ホームページから実行できる配車(UberまたはLyft)の注文である場合、そのページには、製品にとって最も多くのタッチポイントと最大の価値があります。同じことが視覚的階層にも当てはまります。
サイトマップは、ページを数値で整理するため(1.0 Home、2.0 Payment、2.1 Add Pay Methodなど)、階層を理解するのに役立ちます。または、デューク大学の図書館のウェブサイトの以下の画像の例を検討してください。上部のナビゲーションは上部だけでなく、アプリケーション全体に表示されるように強調表示されています。
階層とは別に、上記のアーキテクチャは別のことをうまく実行します。単純な凡例といくつかのキーフレーズを通じて、必要に応じてすべてのエンゲージメントポイントを一意に表示します。凡例はページとコンテンツタイプを示し、図形の色の違いを示します。デュークのサイトはかなりシンプルに見えますが、IAは3レベルしか深くないため、これは重要です。黄色の長方形はそれぞれアプリケーションを示しているため、これらの各ボックス内のプロセスはこのドキュメントには含まれていません。
これらのパーツがなくても、IAだけでWebサイトをナビゲートする方法が理解できる構造になっています。 Webサイト内のアプリケーションに到達すると、それは停止します。必ずしもそうする必要はありません。
以下のIAはゲーム用です。 4つの形状、色なし、スマートに配置されたテキストスニペットを使用して、すべての主要なインタラクションはプロトタイプなしで理解でき、さらに重要なことに、それに取り組んでいる誰もが理解できます。
Windowsはどの言語を使用しますか
このモデルは完全ではありませんが、アプリの階層を明確に整理し、ユーザーが任意の時点で表示または実行する内容を示します。
IAの構築を可能にするソフトウェアアプリケーションはたくさんありますが、エクスペリエンスを楽しくするのに十分なほどシンプルで迅速なものはほとんどありません。または、少なくとも、管理が簡単です。
上のビデオで使用されているDraw.ioは、個人的および専門的な使用のために完全に無料であり、自動的にGoogleドライブに接続されます。また、有料のConfluenceおよびJIRAとの統合もあります。 Draw.io フローチャート、ユーザーフロー、情報アーキテクチャの作成に最適です。ドライブ機能を使用すると、複数のユーザーが同じドキュメントで作業し、変更をライブで確認できます。無料のオフラインバージョンもあります。
Lucidchart は、Draw.ioよりもわずかに優れたエクスペリエンスを提供し、事前に作成されたテンプレート、より多くの統合、モバイルアプリ(App Storeで2.5つ星と評価)、エンタープライズのサポートなどの追加の利点を提供するもう1つの優れたツールです。
Omnigraffle そして Visio は長年の業界の主力であり、IAデザインの構築と維持に優れていますが、Visioはオンラインのみ(古いオフラインバージョンはWindowsのみ)ですが、OmnigraffleはMacのみであり、MacOSバージョンとiOSバージョンを別々に購入する必要があります。 OmniGraffleは、JavaScriptとAppleScriptの自動化を提供するという点で、主要な競合他社に比べて1つの利点があります。 デザイナー 不要かもしれませんが、通常、フルタイムの情報アーキテクトはそれを高く評価しています。
上記のすべてのツールは、情報アーキテクチャとほぼ同じ原則に従う、特にフローチャートを中心に、速度と使いやすさのために作られています。のような他のアプリケーション Balsamiq 、 MindMeister 、 MindManager 、または XMind すべて同様のスタイルの動作を提供しますが、プロトタイピングやマインドマッピングなどの他の主要な目的のために構築されています。
情報アーキテクチャを構成するものについて定義されたルールはほとんどありませんが、プロセスを実行するときは、次のことを考慮してください。
階層は調整可能です 。ホームページは常にホームページになりますが、それがどこにつながるか、ユーザーがそれらの場所に到達する方法、およびその間のすべてが後で決定されます。
UXプロセスのIAはユーザーとの対話用ですが、方法のすべてのステップが理にかなっている必要があります。登録画面が設定につながるべきではなく、カメラ機能がマップビューにジャンプするべきではありません…リストは続きます。
よくある間違いは 作る IA、リソース、研究、またはその他の資産や作業なし。これは、著者にアウトラインなしで本を書くように指示したり、プログラマーにプロトタイプなしでアプリをコーディングするように指示したりするようなものです。
地図製作者は、山脈から州境まで、地図に関するすべてを考慮に入れます。マップメーカーと同じように、設計者はIA設計に何を入れるかを決定します。個々のページ、特定のユーザーの行動、決定ポイントのコンテキストなど。
最終的に、カートグラファーはユーザーのニーズに基づいてマップに何を表示するかを決定します。同じことが設計者にも当てはまります。したがって、エンドユーザー、つまり製品開発チームと設計チームのためにIAを構築します。
ポイントをもう一度ドリルするために、すべてのIAは変更のために構築されています。製品は進化し、デザインは変化し、ユーザーは適応し、サイクルは何度も繰り返されます。あまり真剣に受け止めないでください。常に改善の余地があることを知ってください。完璧を目指してはいけません。シンプルで適応性のあるIAを構築します。
初心者のための春のバッチチュートリアル
どんなデザイン作業も決してないというのが一般的な概念です 本当に 完了しました。これは確かに情報アーキテクチャの場合です。それらは、当社の製品と同じように成長、縮小、変化します。建物の青写真とは異なり、IAは常に、ユーザーのニーズから新機能や製品のオーバーホールまで、あらゆるものに基づいて進化します。構造の多くは同じままで、バージョン間の一貫性を提供するため、ユーザーが混乱することはありません。
そしてそれは良いことです。 IAが流動的なドキュメントであり、毎週、場合によっては毎日変更される可能性があることを知っていることは、コードに触れることなく、アプリやWebサイトの全体的な構造を維持するための強力な方法です。 新しいプロトタイプの作成 。製品開発チーム全体が優れている 知っている IAは、誰もが何が可能で何が不可能であるか、そして想定される「簡単な作業」が実際にどれほど深刻であるかをより早く知ることができます。
これは、情報アーキテクチャの真の美しさをもたらします。事前定義された出発点はありません。従来のUX設計プロセスでは、十分なユーザーフローを完了した後にIAを構築する必要があります。たくさんのユーザーと武装 競争力のある研究 、それは最初に行われることでもあります…または最後に行われます。プロトタイピングプロセスでは、論理的または想像を絶するIAからは想像しがたい、特定の動作またはアクションがどのように発生するかについての情報が得られることがよくあります。
進化し続けるプラクティスとして、IAデザインはスキルであると同時に芸術でもあります。そのため、大企業には情報アーキテクトの立場があります。 これらのデザイナー は大規模システムのゲートキーパーであり、時間の経過に伴う製品の成長を理解しているため、製品、設計、エンジニアリングの各チームが次の期間にわたって適切な決定を下すのに役立ちます。 年 。その規模の組織はすべての設計者に適しているわけではありませんが、 すべてのデザイナー シンプルで理解しやすい情報アーキテクチャを構築できます。
•••
あらゆる混乱を理解する方法:すべての人のための情報アーキテクチャ
•••
情報アーキテクチャは、製品がどのように機能し、機能するかについての運用マップをユーザーに提供するドキュメントです。これはデジタル製品の青写真に似ており、製品全体のページ、コンテンツ、インタラクション、および動作を表示します。
デジタルデザイナーにとってのアーキテクチャの目的は、ユーザーとビジネスの両方の観点から、製品のフレームワークを理解して評価することです。
階層設計とは、コンテンツ、データ、および相互作用を物理的な方法で構造化することであり、通常は最優先事項に焦点を当てます。値の低い部分は階層の下位にあり、ページのさらに下にあるか、まったく別のページにあります。
ユーザー中心設計は、ユーザーを第一に考える設計哲学です。すべての製品設計と開発の決定は、既存のユーザーの期待を犠牲にすることなく、ユーザーのニーズが常に満たされていることを確認するために提供されるUXに対してテストすることによって決定されます。
javascriptで時間を取得する方法
Webデザインの視覚的階層は、ページ上のコンテンツとデータを意図的に構造化して、コンテンツが存在する場所と、すべてのコンテンツとデータが配置される場所と形式によってコンテンツを利用する方法をユーザーに明確に理解させることです。
Glassdoorによると、情報アーキテクトの米国の全国平均給与は年間約95,000ドルです。