ユーザーフローを考える

ワイヤーフレームと一緒に考えるべき「ユーザーフロー」というものがあります。

今回のダミー案件は1ページ構成の提案ですから、ユーザーフローは存在しませんが、複雑なWebサイトやWebアプリケーションには必須の考え方です。「ユーザーが何を見て、次に何をするのか」を繋いでいけば自然とユーザーフローになりますので、何も難しいことはありません。

ユーザーフロー 例 1

企業のWebサイトを制作する際のユーザーフローの例です。 まったく美しくはありませんが、ワイヤーフレームと同様、綺麗な画面である必要はありません。

コンセプト、会社概要、お問い合せのページはWebサイト内に存在しますが、ブログに関しては外部のブログサービスを利用していることがわかります。これを見れば、制作が必要なページテンプレートはトップページと個別ページの2種類であることも明確です。

これに加えて、外部ブログサービスから自社サイトへの動線や、モバイルでの見え方を描き足していくと更に良くなるかと思います。

ユーザーフロー 例 2

こちらは、チケット販売サイトを制作するという仮定でユーザーフローを描いてみました。 購入後のチケット管理ページや、ユーザーのアカウント情報管理ページなども必要ですが、ここではチケット購入フローに限定しています。

チケットリスト、チケット詳細、内容確認・支払い、購入完了という4つのページが必要であろうと思い描き出してみました。このように一連の流れを目に見えるカタチにしておくと、実は「チケット詳細画面が不要」「購入には子供の人数も必要」「コンビニ支払対応」などといった未知の要件を洗い出すことができます。

制作者とクライアントの共通認識がないままプロジェクトが進行し、納品が近づいてからフローの設計ミスや認識ズレに気付いても手の打ちようがありません。 簡単で良いのでユーザーフローを作成し、必ず確認してもらいましょう。

ユーザーフローで全体像を把握

例 2 のユーザーフローは「チケット購入動線」だけを切り出していますが、前述の通り、チケット販売サイトには様々なページが存在します。ユーザー登録すればチケット販売者になれるようなWebアプリケーションであれば、購入者に表示するための画面だけでなく、販売者がチケットの内容を入力する画面のフローも必要になります。チケットがどのくらい購入されたかを確認するレポート画面も開発するかもしれません。

こうなってくると、このWebサイトはかなり複雑化します。 複雑になったWebサイトの全体像を頭の中だけで把握するには限界がありますから、やはりシンプルな画として描いておきましょう。すべてが1枚に収まっている必要はありません。「チケット購入動線」「アカウント情報更新動線」のようにユーザーが取る行動を分割すると描きやすいかと思います。