ユーザーの操作を考えてUIを作ろう

UIを作るときになんとなく機能を並べて作ってはいませんか?ユーザーの目的やタスクを考えてUIに落とし込まなければ、分かりづらく使いにくいUIになってしまいます。

格言:大本あかね / 記事作成:あやぱん / イラスト:ナユミ

UIを作るときに、テンプレートや参考サイトを元にいきなり詳細に作ってはいませんか?
ユーザーが何をしたいのかを無視して作るUIは、分かりづらく遠回りなUXになる危険性があります。UIを作るときにはいきなり作り始めるのではなく、ユーザーの目標を知り、近道になるような行動と操作を考えてから作り始めましょう。

UIを作る前に、「何のために」「どんな状況」で操作するか考える

UIを作り始める前に、ユーザーが達成したいタスクと、どんな状況で利用しているかというコンテキストを考えましょう。
タスクとは、ユーザーが果たしたいゴールのために必要なアクションです。例えば、GWに温泉旅行に行くAさんがホテル予約サイトを利用する場合、「ホテルを予約する」ことがゴールとなり、そのために「検索をする」「比較検討する」「ホテル情報を共有する」「予約する」などがタスクになります。
コンテキストとは、ユーザーを取り巻く環境です。デバイス、時間、場所などユーザーがどんな状況・環境で利用するかを考えます。例えば、レシピアプリであれば調理中に操作するため、立っている状態で手が汚れているような環境が予想されます。

ユーザーフローで行動をUIに落とし込む

ユーザーフローとは、ユーザーがあるゴールを達成するための一連のステップをまとめたものです。ユーザーフローをつくるには、以下の4つの手順があります。

  1. ユーザーシナリオを書く
  2. ユーザーゴールを洗い出す
  3. タスクフローを書く
  4. タスクフローをワイヤーフローに具体化する

以下、ホテル予約サイトを例に紹介します。

1. ユーザーシナリオを書く

ユーザーのタスクとコンテキストを考えた上で、対象のサービスを利用するシナリオを書きます。
例)高橋麻衣は、大学時代の友人と3人で夏休みに沖縄旅行に行く計画を立てている。1週間以内にホテルを決めて予約したい。

2. ユーザーゴールを洗い出す

ユーザーゴールとは、ユーザーが達成したい行動ステップごとの目標を表したものです。
要件やユーザーストーリー、ジャーニーステップとも呼ばれます。1で挙げたホテル予約のシナリオを例に考えると、以下のようなユーザーゴールが考えられます。

  • ゴール1:ホテルの候補をリストアップする
  • ゴール2:候補のホテルを友人に共有する
  • ゴール3:決めたホテルの予約をする

3. タスクフローを書く

タスクフローとは、ユーザーゴール達成のための具体的な行動を流れにしたものです。2で挙げたユーザーゴールそれぞれをタスクフローに分解していきます。ここでは、「ゴール1:ホテルの候補をリストアップする」をベースにタスクフロー例を紹介します。
タスクフローの例

4. タスクフローをワイヤーフローに具体化する

ワイヤーフローとはワイヤーフレームとフローチャートをあわせたものです。始めは手描きなどでワイヤーフレームほど精密ではない粗めの画面から作成し、大まかな画面の流れを確認します。方針が固まったら、ワイヤーフレームへブラッシュアップしていきます。ワイヤーフローを作成する段階で、気づいた改善点は下図のようにメモをしていき、ブラッシュアップ案に活かします。
ワイヤーフローの例

ユーザーの目標と行動を見直しながらUIを繰り返し改善しよう

ユーザーフローは一度作ったら終わりではありません。何度もユーザーの置かれたコンテキストを見直して、タスクフローを変えたり、ワイヤーフローに必要な要素を補ったりして改善を続け、詳細なプロトタイプにしていきます。
UX DAYS TOKYOでは定期ワークショップとして「UX視点でのサイト改善検定講座 ページフロー編」を開催しています。実際にユーザーフローの設計を学ぶワークショップになりますので、実践方法に悩んでいる方はぜひご参加ください。

UX視点でのサイト改善検定講座 ページフロー編

参考文献

blank

あやぱん

現在、スタートアップのWeb制作会社でディレクター・プランナーをしています。UXの知識をつけて、色んな人と関わりながら学んでいきたいと思い、UX DAYS TOKYOに参加。「コンテキストの理解と実践」ワークショップ登壇。