#543
情報設計・ナビゲーション
#543ゆーざーふろー
ユーザーフロー
別名・表記:User Flowユーザーフロー図フロー図Flowchart
UIXHERO Definition
UIXHEROでは、ユーザーフローを「ある目標を達成するまでの画面遷移と分岐を、順序と条件付きで表した図」と定義する。
概要
ユーザーフローとカスタマージャーニーマップは混同されやすいが、対象範囲と目的が異なる。
| ユーザーフロー | カスタマージャーニーマップ | |
|---|---|---|
| 対象 | プロダクト内の画面遷移 | 認知から利用後までの全接点 |
| 粒度 | 画面・操作・分岐 | フェーズ・行動・感情 |
| 主な用途 | 実装前の設計・抜け漏れ確認 | 課題の発見・部門間の合意形成 |
ユーザーフローの価値は、正常系だけでなく異常系まで書き出せる点にある。エラー、権限不足、通信断、途中離脱後の再開といった経路は、図にしないと設計から抜け落ちやすい。
UXでの活用
- 必要な画面の確定: フローを描くことで、必要な画面と状態が数えられる。見積もりの精度が上がる。
- 分岐条件の明示: 「未ログインの場合」「決済が失敗した場合」といった条件を、実装者と事前に合意できる。
- ワイヤーフレームの前段: 画面単位の設計に入る前に、遷移の全体像を確定させると手戻りが減る。
誤用・混乱
- 正常系だけ描かない: ハッピーパスだけのフローは、実装段階で必ず不足する。
- 感情や課題は書けない: 「ここでユーザーは不安になる」といった情報を載せたい場合、それはジャーニーマップの領域である。両方を1枚に詰め込むと、どちらの用途にも使いにくくなる。
- 理想フローと現状フローを混ぜない: 現状の課題を示す図と、これから作る図は分けて描く。
💡 使いどころ
実装前に、必要な画面と状態の抜けを洗い出したい時。エラーや例外を含めた経路を、チームで確認したい時。
⚠️ 注意点・誤用
ユーザーフローはプロダクト内部の経路を表すもので、プロダクトの外側にある体験(広告、他社サービス、オフラインの行動)は扱わない。その範囲を扱うのはカスタマージャーニーマップである。
具体例
- 会員登録の開始からメール認証完了までの遷移と分岐
- 決済失敗時に戻る画面と、再試行の導線
- 未ログイン状態で保護ページにアクセスした場合の経路
出典・参考文献:
- The Elements of User Experience (Jesse James Garrett)
- About Face (Alan Cooper)