ワイヤーフレームとサイトマップを使って効果的なユーザーフローを作成する | アドビ UX 道場 #UXDojo

Tracy Dai によるイラストレーション

ウェブサイトのデザインでは、必要なコンテンツや機能を選択するだけでなく、それらを論理的に整理することが求められます。デザインプロセスの初期段階でこの目的を達成することは容易ではありませんが、シンプルな解決方法としてワイヤーフレームマップが利用できます。

ワイヤーフレームマップは、サイトマップとワイヤーフレームの 2 つのツールを組み合わせる手法です。これにより、ユーザーがタスクを達成する過程が視覚化され、チームメンバーやステークホルダーは、ワイヤーフレームをユーザーフローの視点から見ることができるようになります。この記事では、ワイヤーフレームマップを作成するための、4 ステップのプロセスを紹介します。

ステップ 1：ユーザーを知る

優れたデザインは、ユーザーのより良い理解から始まります。Dieter Rams はこの考えを完璧に要約しています。

これが、ワイヤーフレームの制作を始める前に、ユーザー調査に時間を割く必要がある理由です。ユーザーと彼らのニーズについて早く学ぶ程、その後の工程で必要となる時間と労力をより多く節約できます。

ユーザーゴールを明確にする

ユーザーゴールは、ユーザーが達成したい最終的な状態の記述です。ユーザーゴールは、現実世界で人々が遂行するシナリオに基づくものでなければなりません。例えば、e コマースサイトにアクセスする人であれば、特定の商品の購入が最終的な目的になるでしょう。

ユーザーゴールを定義するのは、デザインや開発に着手する前の、デザインプロセスの初期段階に行うべきです。これは、多くのデザインに関する判断が、ユーザーゴールに直接関わるためです。コンテンツと機能のどちらも、ゴールの達成に貢献するものでなければなりません。

ユーザー調査の手法は、定量的手法と定性的手法の 2 つに大きく分類されますが、このステップでは、定性的なユーザー調査手法に頼ることが推奨されます。定性的な手法は、潜在的あるいはリアルユーザーのニーズや要望を理解するのに役立つためです。

ユーザーゴールの特定に効果的な定性的ユーザー調査手法には、ユーザーインタビュー、フォーカスグループ、コンテクスチュアルインクワイアリがあります。どの方法を使うとしても、適切な対象を調査の相手に選択することが重要です。参加者は、ユーザー層を代表する存在でなければなりません。ユーザーペルソナを作成して、調査の候補者全員をペルソナに従って評価することは重要です。

提供すべき機能を理解する

ユーザーが誰で、何が必要とされているかがわかったら、次は、ユーザーの目的達成を支援するために何を提供すべきかを考えます。ユーザーが完了したいと思う可能性のある行為と一致するように、機能の候補一覧を作成します。e コマースサイトであれば、多くの訪問者がアイテムを見つけるために検索に頼る傾向があるため、検索機能が候補の一つになるでしょう。

提供すべき機能を理解するための体系的なアプローチとしては、JTBD（Jobs to Be Done）と呼ばれるものがあります。JTDB フレームワークは、ユーザー調査から得られるユーザーニーズを表現するもので、ユーザーが解決したい主要な課題も含まれます。JTBD フレームワークを使用すると、ユーザーの目標、状況、さらには具体的な操作手順を理解できます。

典型的な操作シナリオをストーリーボードにする

人々の動機と提供すべき機能が理解できたら、次のステップは、人々がそれをどのように利用するかを知ることです。この問いに答えるには、ユーザーの視点から物事を見る必要があります。ストーリーボードは、この視点を容易に得られる手段です。

ストーリーボードは、ユーザーの生活にアプリやサイトがどうフィットするか、ユーザーがどのタスクをどのように達成するかを理解するのに役立ちます。重要度の高い典型的なシナリオを選んでストーリーボードにしましょう。選択する際は、ユーザーとビジネスそれぞれにとっての価値を基準にします。

ステップ 2：サイトマップを定義する

インタラクションの主要なシナリオを記述したら、コンテンツと機能の階層を、サイトマップとして定義します。サイトマップは、各ページが位置する階層構造を視覚化したもので、見取り図のようなものだと考えてよいでしょう。大まかな全体像の表現として利用でき、ステップ 3 でワイヤーフレームを作成する際に使用します。

タスクを個々のアクションに分解する

ユーザーが達成したいタスクを、タスクの開始から完了までの個別のアクションに分割します。すると、ユーザー体験のデザインがずっと簡単になります。例えば、e コマースサイトで商品を購入する場合、ユーザーの典型的な行動は次のようのものです。

1. サイトのトップページにアクセスする
2. 検索フォームにキーワードを入力する
3. 検索結果を絞り込む
4. リストから商品を選択する
5. 商品の説明を読む
6. 他の顧客の製品レビューを読む
7. 商品をカートに入れる
8. 配送に必要な情報を入力する
9. 代金を支払う
10. 確認メールを待つ

上記の全てのアクションは、商品購入という目的達成のためにユーザーが見たり操作したりするページや画面として表現できます。

サイトマップを作成する

サイトマップを作成し、サイト内のページの階層を視覚化します。サイトマップは、個々のページの関係を、ツリー構造を用いて示した図です。サイトマップは、下図のように、わかりやすいシンプルなフォーマットで作成するよう心掛けましょう。

ページの階層を評価する

ユーザーが操作する際に費やさなければならない労力が多いほど、その体験は楽しいものではなくなります。このルールには例外もありますが、ほとんどの場合に、ユーザーの疲労を最小限に抑えることが推奨されます。ですから、階層をデザインする際は、ユーザーが目標の達成までに必要なステップ数を最小限に抑えるようにすべきです。

例として、e コマースサイトで商品を購入することが目的であるユーザーを考えます。その場合のサイトマップは、ユーザーが目にするページ数を減らすために、商品インデックスや商品ページをトップページかその近くに配置するべ必要があります。さらに、各ページがユーザーにとって重要な情報を分かりやすく伝えることも、重要な考慮事項です。

カードソートで階層を評価する

コンテンツの階層をつくり終えたら、その階層がユーザーに対して意図通りに機能するかどうかを確認する必要があります。これを適切に行うには、クローズドカードソートが使用できます。

• すべてのページ名をインデックスカードに書き出します
• 対象ユーザーを代表する人々を招待し、各カードを確認してもらいます
• 彼らにとって意味を持つカテゴリー別にカードを分類するよう依頼します

これが完了して、階層構造が予期した通りに機能することを確認できたら、自信をもって次のステップに進みましょう。

ステップ 3：ワイヤーフレームをデザインする

サイトマップが全体の見取り図だとすれば、ワイヤーフレームは個々の画面の設計図です。ワイヤーフレームは、各ページの階層を反映し、そのページにどのようなコンテンツやインタラクティブ要素が属するかを表現します。

このステップでは、ストーリーボードとサイトマップを参照しながら、ワイヤーフレームを設計します。ワイヤーフレーム作成が完了すると、デザインする必要のあるページ数と、それぞれのページの関係が明確になります。

ワイヤーフレームの目的を定義する

すべてのワイヤーフレームには、ユーザーフローにおける特定の役割があります。例えば、e コマースサイトには、ランディングページ、商品リストページ、商品詳細ページ、チェックアウトページなど、いくつもの種類のページがあり、それぞれのページにユーザーフローの中のある役割が与えられています。ランディングページであれは、訪問者を迎え入れたり、最近のキャンペーンや人気商品を伝えるなど、何らかの興味を抱かせる役割が考えられます。

デザインする全ページをレビューして、各ページの目的をメモとして追加します。メモの内容は次のようなものです。「ランディングページは、購入可能な商品の基本情報を提供。商品リストページは、検索条件に一致する商品の概要を提供。商品詳細ページは、選択した製品について知るべき全ての情報を提供」

この作業中に、明確な目的を持っていないページを見つけるかもしれません。その場合は、そのページなしでも作業が可能か確認することをお勧めします。

コンテンツの階層を表現する

最終的にユーザーに価値を提供するのはコンテンツです。ユーザーはコンテンツにアクセスするために、アプリをインストールしたり、ウェブサイトを訪問したりします。そのため、コンテンツを論理的に整理することは重要です。ワイヤーフレームを作成する際は、コンテンツをどのように配置するかを決定する必要があります。そのため、ワイヤーフレームを作成中に、次のような質問を考えます。

• ページ／画面にどのコンテンツを表示したいか？
• コンテンツの順序はどうあるべきるか？
• 各コンテンツにどれくらいのスペースを割り当てるべきか？

それぞれの答えが、レイアウトの選択に影響します。

以下は、この作業をより効率的に行うためのいくつかの簡単なヒントです。

• コンテンツ戦略から始めます。調査から得られたビジネス側とユーザー側それぞれのゴールを前提に、手持ちのすべてのコンテンツを評価します。
• コンテンツを重要度の高いものから低いものへとランク付けします。コンテンツの優先順位を決めたら、重要なコンテンツを最も目立つ場所に配置し、ユーザーが迷わず見つけられるようにします。
• 視覚的な乱雑さを避けます。情報過多は、瞬間的に人間の処理能力を超える情報量が与えられた場合に発生する効果で、ユーザーをページ上のあらゆるものから遠ざけます。ワイヤーフレームに多くのコンテンツを詰め込まないよう注意します。

根拠を注釈として追加する

ワイヤーフレームの忠実度が低いことは、意図したビジョンを伝えるという点において大きな障害です。ワイヤーフレームの表現は模式的であるため、デザインを理解しづらいこともあります。そこで、個々のワイヤーフレームと、ワイヤーフレーム同士の関連を理解しやすくするために、ワイヤーフレームをデザインした根拠を注釈として提供します。

その際に、重要なポイントを 2 つ紹介します。

• 特定の視覚的階層をデザインした理由を説明すること。
• ボタンなどの機能要素の役割を記述すること。ユーザーが要素を操作すると何が起こるかを知らせること。

ステップ 4：ワイヤーフレームマップを作成する

サイトマップとワイヤーフレームを元に、ワイヤフレームマップを作成します。ワイヤーフレームマップを確認することで、チームメンバーやステークホルダーは、個々のワイヤーフレームがどのようにつながっていて、どのように機能するかを理解できます。

ワイヤーフレームを接続する

ワイヤーフレームを、ユーザーが移動すると思われる経路で接続します。アクション（例：機能要素をクリック）とシステムの反応（例：表示されるページ）を矢印を使ってつなぎます。このステップが完了すると、サイトマップよりも、実際の UI 体験により忠実で組織的な構造ができあがります。

ワイヤーフレームマップをテストする

このステップの目標は、スムーズなユーザーフローをつくることです。ワイヤーフレームマップができあがると、すべてのページの視覚的表現が揃います。また、ワイヤーフレームマップには、ページ間の関係が含まれています。そこで、ワイヤーフレームマップをユーザーに提示して、デザインが意図したとおりに機能することを確認します。

問題のある箇所を特定して修正する

ワイヤーフレームマップの検証は、ターゲットユーザーと行うことが肝心です。実際の（または潜在的な）ユーザーからのフィードバックを集めることは、何が有効で何が有効でないかを理解するのに必須です。ユーザーを迷わせたり、余計な時間や労力を使わせてしまう箇所を特定したら、それらをすべて排除します。可能であれば、操作可能なワイヤーフレームを作成しましょう。そして、モデレーターありのユーザーテストを行います。

タスクを完了するように依頼して、彼らの行動や反応を観察しましょう。発見したことは、ユーザー体験に与える重要度に応じて優先順位を付け、ワイヤーフレームマップを修正します。幸いなことに、数多くのテストを実施する必要はありません。実際、5 人の参加者だけでも、最大 85% のユーザビリティの問題を特定できることがわかっています。

おわりに

サイトマップとワイヤーフレームは、デザインプロセスに欠かせない 2 つの優れたツールです。サイトマップは製品をページや画面に分解することができ、ワイヤーフレームは個々のページに何が含まれるかを詳細に表現できます。これらを組み合わせれば、ユーザーフローを明確に表すワイヤーフレームマップを作成できます。ワイヤーフレームマップは、チーム全員が、デザインプロセスの初期段階から、ユーザーがどのように操作するのかを理解し、より良いユーザーフローを設計するために利用できます。

この記事は Combining Wireframes & Sitemaps for Creating Effective User Flows（著者: Nick Babich）の抄訳です