Webサイトの情報アーキテクチャを改善して最適なユーザーエクスペリエンスを作成する方法
私は先日町を離れていたので、地元のスーパーマーケットでいくつかの商品を受け取る必要がありました。
あの店には行ったことがなかったのですが、必要なものを簡単に見つけて楽しく進んでいきました。
なんで？なぜなら、店の組織は私の近所のスーパーマーケットと同じ論理に従っているからです。
スーパーマーケットがあなたのウェブサイトだと想像してみてください。
訪問者が必要なものをすばやく簡単に見つけられるように、訪問者にとって意味のある方法で情報が設定されていることを確認する必要があります。
そうしないと、サイトを離れて別の場所に移動する可能性が高くなります。
優れたユーザーエクスペリエンスを設計することは、訪問者が必要なものを見つけ、ビジネス目標を達成するために必要なアクションを実行できるようにするための鍵です。
それはあなたのコンバージョン率と関係があります。
結局のところ、人々が必要なものを見つけることができない場合、彼らはあなたから何も買うことができません。
Webサイトのユーザーエクスペリエンスの基盤は、その情報アーキテクチャです。
貼り付けた画像02056
情報アーキテクチャをよく理解すると、売れる方法でコンテンツを整理するのに役立ちます。
それはあなたがあなたのデザイナーや開発者とコミュニケーションをとることを可能にするので、あなたは効果的でユーザーフレンドリーなウェブサイトを作ることができます。
ニール・パテルとの相談
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください
SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する
では、掘り下げてみましょう。
ウェブデザインの情報アーキテクチャとは何ですか？
Webデザインのコンテキストにおける情報アーキテクチャの目標は、人々がWebサイトの「環境」を理解して、探している情報を見つけられるようにすることです。
情報アーキテクチャはユーザーエクスペリエンスデザインの一部であり、訪問者がWebサイトのコンテンツを使用できるようにするための重要なコンポーネントです。
貼り付けた画像02055
情報アーキテクチャの分野には、サイトマップ、階層、分類、ナビゲーション、およびメタデータの作成が含まれます。
Webサイトの情報を整理およびラベル付けする際に、コンテキスト、コンテンツ、およびユーザーが考慮されます。
貼り付けた画像02060
情報アーキテクチャの目標は、ユーザーエクスペリエンスを最適化し、ビジネス目標を達成するWebサイト構造を作成することです。
ウェブサイトのアーキテクチャを設計するプロセスには、全体像のユーザー中心の要素と、検索結果がページ上でどのように編成されるかなどの詳細の両方が含まれます。
Webサイトの情報アーキテクチャを設計するときは、訪問者の立場に立ってください。
彼らが正しい場所にいることを彼らに知らせてください。
彼らが探しているものを見つけることができるように、彼らがあなたのウェブサイト上の情報を理解するのを手伝ってください。
意思決定プロセスを支援する方法で情報を提示しながら、オプションを示します。
彼らが取るべき行動を彼らに知らせてください。
Webサイトの情報アーキテクチャは、多くの場合、サイトマップ、ユーザーフロー図、およびワイヤーフレームの形式で文書化されています。
貼り付けた画像02054
これらのドキュメントは、実装の次のフェーズのためにデザイナーとコンテンツ作成者に渡されます。
情報アーキテクチャで使用される一般的な方法論
情報アーキテクチャは、Webサイト、モバイルアプリ、ユーザーエクスペリエンスデザインが登場する前の1970年代から存在していました。
それは、情報の整理とラベル付けのために多くの分野と分野を利用しています。
図書館学
図書館学は、「知識組織化システム」の開発であり、リソースを分類、カタログ化、および検索する方法の研究です。
貼り付けた画像02059
アーキテクトがこの分野から学ぶことができる情報は1つか2つあるに違いありません。
具体的には、目録作成と文書館学の技術は、適切で使用可能なメタデータの作成と、適切に管理されたアーカイブ内のコンテンツの編成に情報を提供します。
情報アーキテクチャは、私たちの脳が情報を認識して利用する方法と連携して、データとコンテンツを効果的に整理します。
認知心理学のいくつかの特定の側面は、情報アーキテクチャの分野に影響を与えています。
認知的負荷–脳は一度に大量の情報しか処理できないため、一度に大量の情報でWebサイトの訪問者を圧倒しないでください。
メンタルモデル–私たちは皆、世界の見方に従って情報を解釈し、整理する方法を持っています。サイトの構造がメンタルモデルを反映している場合、ユーザーは必要な情報をはるかに速く見つけることができます。
意思決定–情報アーキテクチャは、適切なタイミングで適切な情報を提供し、適切な量のオプションを提示し、意思決定を支援するのに役立ちます。
建築
現代の情報アーキテクチャの創設者は、実際には建築家でした。
アーキテクチャと同様に、情報アーキテクチャは正確で意図的な構造に基づいており、特定の一連の制約と要件に基づいて設計されています。
Webサイトの情報アーキテクチャを設計する方法
今、私たちは
情報アーキテクチャの概要については、Webサイト用にまとめる方法を見てみましょう。
ユーザー調査
満足のいくユーザーエクスペリエンスを設計するには、訪問者が誰であるかを知る必要があります。
情報アーキテクチャプロジェクトの最初のステップは、Webサイトのユーザーを包括的に理解して、ユーザーに関連する方法でコンテンツと情報を整理できるようにすることです。
考慮すべきいくつかの質問があります：
このウェブサイトに来るのは誰ですか？
彼らはどのような問題を解決する必要がありますか？
彼らはウェブサイトで提供される情報をどのように使用しますか？
彼らはこの情報をどのように入手したいと思いますか、そしていつそれを必要としますか？
彼らは情報を理解するためにどのようなメンタルモデルを適用しますか？
彼らはウェブサイトとのやりとりから何を得たいですか？
訪問者が求めている情報を提供することも、あなたのビジネス目標をどのように達成しますか？
ユーザー調査を行うことで答えを見つけることができます。
調査–ターゲットオーディエンスが何を望んでいるかを知るために、彼らに尋ねてください。適切な質問をし、アンケートを短くし、サンプルサイズを十分に大きくし、最適なタイミングでアンケートを送信し、モバイルフレンドリーにするようにしてください。
貼り付けた画像02048
Googleフォームを使用して、すばやく簡単にアンケートを設定できます。
Google Analytics –WebサイトにすでにGoogleAnalyticsがある場合は、訪問者がコンテンツをどのように操作しているかに関する洞察に満ちたデータを取得できます。たとえば、最適なコンバージョンランディングページを探し、リバースエンジニアリングして、ターゲットにアピールする理由を見つけることができます。観客。
面接– 1対1の面接は、実際の洞察を得るのに役立ちます。明確にするために、特定のフォローアップ質問をすることもできます。直接面接、非直接面接、民族誌面接など、さまざまな面接方法があります。
ユーザビリティテスト–ユーザビリティテストでは、被験者にタスクを実行して彼らの行動を観察するように依頼します。モデレートされたユーザビリティテスト、モデレートされていないユーザビリティテスト、ゲリラテストなど、ユーザビリティテストには多くの方法があります。
顧客のペルソナとユースケース
特定のオーディエンス向けにWebサイトを設計しているため、そのオーディエンスの目標、動機、特性、および行動を十分に把握する必要があります。
訪問者の顧客ペルソナを構築することで、訪問者がWebサイトにアクセスしている理由、訪問者の考え方、必要な情報、情報への反応を理解できます。
貼り付けた画像02053
バイヤーペルソナを作成したら、次のステップはそれらをユースケースに接続することです。
貼り付けた画像02049
ユースケースは、個々のペルソナがWebサイトでタスクを実行する方法のミニ「ストーリー」です。
各ユースケースは1つのペルソナに焦点を当て、1つの目標またはビジネス目標がどのように達成されるかを示します（PDFをダウンロードし、ビデオを視聴し、トランザクションを完了します）。
一部のUXデザイナーは、このプロセスシナリオマッピングを、各ペルソナのユーザーパスのすべてのステップを詳細に説明する演習と呼んでいます。
貼り付けた画像02052
ユースケースまたはユーザーシナリオを作成すると、顧客中心のフローを設計するのに役立ち、コンテンツの編成が最適なユーザーエクスペリエンスの提供に向けて調整されます。
ユーザータスクのマッピング
目的を達成するために訪問者が実行する必要のある各ステップをリストした後、プロセスに関係するすべてのページを把握する必要があります。
各ページは2つのことを達成する必要があります。
ユーザーが特定のタスクを実行できるようにします。
ユーザーフローの次のステップに簡単にアクセスできるようにします。
各ページの性質を理解して、訪問者が特定のタイプのアクションを実行できるように最適化できるようにする必要があります。
ナビゲーションページ–ユーザーが必要なものを判断し、ホームページや検索結果ページなどにアクセスする方法を提供するのに役立ちます。オプションを提示するときは、「認知的負荷」を考慮して、users.pasted image02058を圧倒しないようにしてください。
消費ページ–これらは主に、記事、ビデオ、販売ページ、価格情報などの情報が豊富なページです。多くの場合、情報は訪問者に行動を起こさせるように設計されています。その場合は、召喚状が目立つように表示されていることを確認してください。
インタラクションページ–ユーザーは、これらのページで情報を入力したり、データを操作したりする必要があります。例としては、サインアップフォームやチェックアウトシーケンスがあります。
指示テキスト
ユーザーフローの一部のタスクは非常に自明ですが、他のタスクにはある程度の学習が必要な場合があります。
訪問者が目前のタスクを実行できるようにWebサイトの使いやすさを向上させるには、直感的でない可能性のある手順を探し、ヘルプテキストまたはマイクロコピーを含めることを計画します。
貼り付けた画像02044
効果的な説明テキストの鍵は、中断を最小限に抑えながら、適切なタイミングで適切なヘルプを提供することです。
そのため、プロンプトのスニペットは、別のFAQページに移動するリンクよりも効果的であることがよくあります。ユーザーは、ページから移動して手元のタスクを中断する必要はありません。
分類法とメタデータ
ユースケースを計画すると、作成するページがわかります。
次に、訪問者が次のようなページを見つけられるようにする必要があります
必要な情報が含まれています。
そこで、分類法とメタデータが登場します。
分類法は、類似したコンテンツまたは情報をグループ化する方法です。それはあなたの理想的な聴衆のメンタルモデルを反映しているべきです。
貼り付けた画像02047
メタデータは情報に関する情報です。
訪問者が検索エンジンまたはWebサイトの検索機能を使用する場合、訪問者は検索語を入力します。
Googleで検索したり、訪問者に関連する検索結果を提供したりする場合は、商品の属性やブランド名など、訪問者が必要な情報やアイテムをどのように検索するかを知る必要があります。
購入者のペルソナを再訪して、メンタルモデルを理解します。彼らが世界を見る方法は、彼らが情報を検索する方法に影響を与えます。
ユーザーフロー
すべてのページが考慮されたので、次は、さまざまなユーザータイプでそれらが連携して機能することを確認します。
人々がウェブサイトで情報を探すさまざまな方法を見て、一連のユーザーフローを作成します。
スクリーンショット20170823 at 5.58.43 PM
既知のアイテム–訪問者は自分が何を望んでいるかを正確に理解しており、検索機能やナビゲーションメニューのリンクを使用するなど、どのようにそれを見つけることができるかをかなりよく理解しています。
探索的–ユーザーは自分が探しているものについては知っていますが、それを明確に表現できない場合があります。ほとんどの場合、ナビゲーションを閲覧したり、ページ上の関連リンクを利用したりします。
「何を知る必要があるのかわからない」–訪問者は、1つのことが必要だと思うかもしれませんが、調査を行った後、別の解決策が必要であることに気付きました。たぶん彼らは友人からあなたのウェブサイトを調べるように言われたが、彼らがそれから何を得ることができるかわからない。これらの訪問者のために、あなたは彼らを次へと導く彼らの質問へのより多くの情報または単に答えを提供する必要があるだろう。ステップ。
再検索–リピーターは、サイトで見た商品や情報に戻りたい場合があります。訪問者がアカウントを持っていてログイン状態にある場合は、閲覧履歴を取得したり、後で参照できるようにアイテムを「お気に入り」にしたりすることができます。
データ（またはコンテンツ）モデリング
すでにWebサイトをお持ちの場合は、既存のコンテンツの移行を検討する必要があります。
現在のユーザーまたは顧客が、再設計されたWebサイトで完全に失われることなく、アップグレードされたユーザーエクスペリエンスを利用できるようにする必要があります。
データモデリングは、新しいデータモデルが現在のサイト構造にどのようにマッピングされているか、またはマッピングされていないかを検討するのに役立ちます。
これにより、サイト組織はユーザーのニーズ、ビジネスロジックと要件、および内部の編集慣行を考慮に入れることができます。
ナビゲーションと階層
ナビゲーションと階層によって、Webサイトの情報がどのように表示およびアクセスされるかが決まります。
ナビゲーションデザインには、メニューに表示されるリンクの編成とラベル付けが含まれます。
貼り付けた画像02046
リンクの構成は、訪問者のメンタルモデルとコンテンツの配置方法を反映する必要があります。
リンクを階層順に構造化して、プライマリナビゲーションバーに表示されるリンクとセカンダリレベルに属するリンクを特定します。
Webサイトに多数のページがある場合は、ページを整理するために、より広範な演習が必要になる場合があります。
最も一般的な方法の1つは、カードの並べ替えです。これは、対面で、または仮想的に、自分で、チームで、またはユーザーテスト環境で行うことができます。
貼り付けた画像02051
ナビゲーションメニューに多くのアイテムを配置しないでください。そうしないと、訪問者が重要なページを見逃す可能性があります。
経験則として、トップレベルのナビゲーションは5つの項目にとどめてください。
ラベル付けは、訪問者が必要なものをすばやく見つけるのに役立つ重要な部分でもあります。
Webサイト全体ですべての一貫性を保つために、命名規則を確立します。
使用するラベルは、ブランド上で説明的であり、理想的なオーディエンスがあなたの製品やサービスについてどのように話しているかを反映している必要があります。
一般的なラベルの使用は避けてください。他の人と同じように聞こえるだけでなく、検索エンジンとの関連性を示し、SEOランキングを向上させる機会を逃しています。
貼り付けた画像02041
ナビゲーションに何を配置し、どのようにラベルを付けるかを決定したら、使いやすさを最適化するようにメニューを設計する必要があります。
メニューバーでリンクがクリック可能に見えることを確認してください。
視覚的階層の概念を使用して、優先順位を伝えます。
すべてのページの同じ場所にメニューバーとフッターナビゲーションを配置することにより、一貫したグローバルナビゲーションを提供します。
期待される場所にメニューを配置します。あなたの訪問者は何度もインターネットブロックの周りにいました、そして彼らのほとんどは上部か左側のどちらかにナビゲーションメニューを見つけることを期待しています
必要なナビゲーションのレベル数を決定します。コンテンツが多い場合は、いくつかのレベルが必要になる場合がありますが、必要以上に使用しないでください。貼り付けられた画像0 2042
ワイヤーフレーム
ワイヤーフレームは、情報が主要な画面でどのように編成されているかを視覚的に表したものです。
これらは、コンテンツの階層を示し、主要な機能を示し、ユーザーがコンテンツをどのように操作するかを示します（たとえば、ユーザーがc
ボタンをなめる）。
視覚的な階層は、訪問者が必要なものを見つけて必要なアクションを実行するのに役立つ重要なコンポーネントです。これは、コンバージョンにつながる優れたユーザーエクスペリエンスに貢献します。
ワイヤーフレームは、ページ上の最も重要な要素を明確に示して、設計段階で優先順位が適切に取得されるようにするのに役立ちます。
ワイヤーフレームは、演習の目的とサイトの複雑さに応じて、さまざまな詳細レベルにすることができます。
それらは、一般的なラベルが付いた一連のボックスのように単純にすることができます。
スクリーンショット20170823 at 8.53.28 PM
または、ページで使用される実際のコピーがすべて含まれている、「高解像度」ワイヤーフレームと呼ばれるものと同じくらい詳細です。
貼り付けた画像02045
役立つツール
古き良き時代には、情報アーキテクトは、ボックスを描画したり矢印を移動したりするために、PowerPointを使用する必要がありました。
もう違います。
仕事をはるかに速く、苦痛を少なくするのに役立つ多くの便利なツールがあります。始めるための無料のオプションは次のとおりです。
ユーザーフローとサイトマップ
XMindは、コンテンツのアイデアをキャプチャし、ユーザーフローを文書化するのに最適なオープンソースのマインドマッピングプログラムです。
新鮮な外観
Gliffyは、フローチャート、サイトマップ、およびワイヤーフレームのテンプレートを備えたWebサイト図アプリケーションです。
シーケンス図@460px
Balsamiq Mockupsは、全体像に集中するのに役立つ使いやすいワイヤーフレーミングツールです。
貼り付けた画像02043
プロトタイプ
Justinmindプロトタイプ作成者は、クリック可能なワイヤーフレームから完全に機能するUIプロトタイプまで、あらゆるものを作成するのに役立つオールインワンのプロトタイピングツールです。
モバイルアプリ用のプロトタイピングワイヤーフレーミングツール
ユーザーテストとフィードバック
Helioは、プロトタイプをすばやくテストし、ユーザーの行動を理解できるようにするアプリケーションです。
Polldaddyは、調査と投票を公開するためのWebアプリケーションです。
貼り付けた画像02057
結論
あなたのウェブサイトの情報アーキテクチャは、リピーターとより良いコンバージョンをもたらす優れたユーザーエクスペリエンスの基盤です。
これは、訪問者が必要なものをすばやく簡単に見つけられるようにするためのユーザビリティと密接に関連しています。
私たち全員が世界を同じように見ているわけではないことを覚えておいてください。他のサイトでうまく機能する情報アーキテクチャは、Webサイトに最適ではない場合があります。
初期段階では、前提条件とWebサイトの構成をテストして検証します。
貼り付けた画像02050
情報アーキテクチャのテストは、かなり単純なプロセスです。
それはあなたにあなたのウェブサイトの基本的な構造が健全であることを知っている設計と開発段階に進む自信を与えます。
最高のユーザーエクスペリエンスを提供できるように、ウェブサイトの情報をどのように構成しますか？
