格言：大本あかね / 記事作成：あやぱん / イラスト：ナユミ
UIを作るときに、テンプレートや参考サイトを元にいきなり詳細に作ってはいませんか？
ユーザーが何をしたいのかを無視して作るUIは、分かりづらく遠回りなUXになる危険性があります。UIを作るときにはいきなり作り始めるのではなく、ユーザーの目標を知り、近道になるような行動と操作を考えてから作り始めましょう。
UIを作る前に、「何のために」「どんな状況」で操作するか考える
UIを作り始める前に、ユーザーが達成したいタスクと、どんな状況で利用しているかというコンテキストを考えましょう。
タスクとは、ユーザーが果たしたいゴールのために必要なアクションです。例えば、GWに温泉旅行に行くAさんがホテル予約サイトを利用する場合、「ホテルを予約する」ことがゴールとなり、そのために「検索をする」「比較検討する」「ホテル情報を共有する」「予約する」などがタスクになります。
コンテキストとは、ユーザーを取り巻く環境です。デバイス、時間、場所などユーザーがどんな状況・環境で利用するかを考えます。例えば、レシピアプリであれば調理中に操作するため、立っている状態で手が汚れているような環境が予想されます。
ユーザーフローで行動をUIに落とし込む
ユーザーフローとは、ユーザーがあるゴールを達成するための一連のステップをまとめたものです。ユーザーフローをつくるには、以下の4つの手順があります。
- ユーザーシナリオを書く
- ユーザーゴールを洗い出す
- タスクフローを書く
- タスクフローをワイヤーフローに具体化する
以下、ホテル予約サイトを例に紹介します。
１. ユーザーシナリオを書く
ユーザーのタスクとコンテキストを考えた上で、対象のサービスを利用するシナリオを書きます。
例）高橋麻衣は、大学時代の友人と3人で夏休みに沖縄旅行に行く計画を立てている。1週間以内にホテルを決めて予約したい。
2. ユーザーゴールを洗い出す
ユーザーゴールとは、ユーザーが達成したい行動ステップごとの目標を表したものです。 要件やユーザーストーリー、ジャーニーステップとも呼ばれます。1で挙げたホテル予約のシナリオを例に考えると、以下のようなユーザーゴールが考えられます。
- ゴール１：ホテルの候補をリストアップする
- ゴール２：候補のホテルを友人に共有する
- ゴール３：決めたホテルの予約をする
3. タスクフローを書く
タスクフローとは、ユーザーゴール達成のための具体的な行動を流れにしたものです。2で挙げたユーザーゴールそれぞれをタスクフローに分解していきます。ここでは、「ゴール１：ホテルの候補をリストアップする」をベースにタスクフロー例を紹介します。
4. タスクフローをワイヤーフローに具体化する
ワイヤーフローとはワイヤーフレームとフローチャートをあわせたものです。始めは手描きなどでワイヤーフレームほど精密ではない粗めの画面から作成し、大まかな画面の流れを確認します。方針が固まったら、ワイヤーフレームへブラッシュアップしていきます。ワイヤーフローを作成する段階で、気づいた改善点は下図のようにメモをしていき、ブラッシュアップ案に活かします。
ユーザーの目標と行動を見直しながらUIを繰り返し改善しよう
ユーザーフローは一度作ったら終わりではありません。何度もユーザーの置かれたコンテキストを見直して、タスクフローを変えたり、ワイヤーフローに必要な要素を補ったりして改善を続け、詳細なプロトタイプにしていきます。
UX DAYS TOKYOでは定期ワークショップとして「UX視点でのサイト改善検定講座 ページフロー編」を開催しています。実際にユーザーフローの設計を学ぶワークショップになりますので、実践方法に悩んでいる方はぜひご参加ください。
https://uxdaystokyo.com/articles/page-flow/
