フローチャート
できあがるもの入口から画面、操作、条件を経て、各成功点や離脱点に至るまで、1つのユーザータスクを1枚のフローチャートにまとめます。画面とシステムの確認は異なる形で描かれます。すべての分岐、戻る経路、エラー状態をデザインと照らし合わせてください。
2つの入力例
標準的な依頼と、例外的なケース。
標準的な入力ログインの確認とキャンセル待ちの分岐があるヨガクラスの予約
- 入口
- しずか水ヨガのアプリのホーム画面で「クラスを予約」をタップする
- 画面と操作（順番どおりに）
- 画面 - クラス一覧
操作 - クラスをタップ
画面 - クラス詳細
操作 - 「予約する」をタップ
画面 - お支払い
操作 - 登録済みのカードで支払う
画面 - 予約完了
- 条件とそれぞれの答えの行き先
- ログイン済み？ いいえ → ログイン画面、そのあとクラス詳細に戻る。はい → 予約する
クラスは満員？ はい → キャンセル待ち登録画面。いいえ → お支払い
- 成功点と離脱点
- 予約完了、キャンセル待ちに登録、お支払いで離脱
- 表記や強調
- 成功の終点は緑、離脱とエラーの終点はグレー
例外ケースの入力支払いの再試行の上限、戻る経路、長い画面名があるチェックアウト
- 入口
- リピーターのお客様がスマートフォンでリマインドメールからカートを開く
- 画面と操作（順番どおりに）
- 画面 - 保存済みの商品とお届け予定日が表示されたカート
操作 - 「購入手続きへ」をタップ
画面 - お届け先住所と配送時間帯の選択
操作 - 時間帯を選ぶ
画面 - 登録済みのカードと新しいカードの選択肢があるお支払い
操作 - 「支払う」をタップ
画面 - 配送状況の確認リンク付きのご注文完了
- 条件とそれぞれの答えの行き先
- 住所はまだ有効？ いいえ → 住所の編集画面、そのあとお届け先住所に戻る。はい → 時間帯の選択
支払いは承認された？ はい → ご注文完了。いいえ → 支払い失敗画面、再試行（2回まで。その後はお問い合わせ画面）
お支払いで「戻る」をタップ → 時間帯を保持したままお届け先住所に戻る
- 成功点と離脱点
- 注文完了、支払い失敗後にお問い合わせへ、いずれかの画面でフローから離脱
- 表記や強調
- 未入力
再試行のループが2回で止まりお問い合わせに抜けるか、戻る経路が正しい画面に戻るか、長い画面名が省略されずに保たれるかを確認します。
同じ用途、3つの方向性
出発点にする方向性を選びましょう。
01成功の経路を先に
メインの成功ルートを一直線に描き、そこからすべての別の経路を分岐させます。関係者とのすばやい確認に向いています。
02エラーと例外の状態
同じタスクのすべての失敗、再試行、行き止まりを見える化します。QAの計画やデザインレビューに向いています。
03新規ユーザーとリピーター
2つの入口が共通の画面で合流する形。本来の流れの前に会員登録とログインが分かれるタスクに向いています。
テンプレートが守ること
常に変わらない部分。
01画面と操作を区別
画面は四角で、操作はその間の移動のラベルになるので、チャートが操作手順の説明のように読めます。
02すべての分岐に出口
どの経路も挙げた出口で終わるか、理由を示すラベル付きで前の画面に戻ります。
03あなたの画面名
名前は、デザインファイルやチケットで使っているものと一致します。
使い方
入力から完成まで。
- 01
タスクを1つ選び、入口を決める
クラスの予約、パスワードの再設定、購入手続きなど。1枚のチャートに1つのタスクにすると読みやすくなります。
- 02
画面と操作を順番に並べる
各行を「画面」か「操作」で書き始めると、場所とユーザーの行動をチャートが区別できます。
- 03
条件を加える
各確認を質問の形で書き、戻る経路や再試行を含めて、それぞれの答えの行き先を書きます。
- 04
すべての出口を挙げ、Vizifyで確認する
成功、離脱、エラーの終点を挙げます。依頼内容を送信するまで何も実行されません。
- 05
各分岐をデザインと照らし合わせる
すべての経路を出口までたどり、画面名がワイヤーフレームと一致しているか確認してください。
出力の範囲使う前に確認すること。
- チャートが示すのは流れで、画面そのものではありません。ワイヤーフレーム、UIの文言、レイアウトは描かれません。
- Vizifyはアプリをテストしたり、足りない例外ケースを見つけたりはしません。指摘するのは行き先のない分岐で、書かれていない経路ではありません。
- 1枚のチャートに1つのタスクです。複数のタスクを1つの図に入れると、すぐに追いにくくなります。
- レイアウトは自動です。書き出しのオプションは、Vizifyアプリが図に用意しているものになります。
よくある質問ユーザーフロー図とワイヤーフレームは何が違いますか？+
ユーザーフロー図は、1つのタスクでの画面と判断の順番を示します。ワイヤーフレームは、1つの画面の見た目を示します。画面をデザインする前に、フローで経路について合意しておきましょう。
ユーザーが前の画面に戻れることはどう示せばいいですか？+
「お支払いで『戻る』をタップ → お届け先住所に戻る」のような行を加えてください。前の画面を指すラベル付きの矢印になります。
このユーザーフローのテンプレートは、アプリだけでなくWebサイトにも使えますか？+
はい。画面はページ、モーダル、フォームの各ステップでもかまいません。チームですでに使っている名前にすれば、チャートがチケットと一致します。
エラーのあと何が起きるかはっきりしない場合はどうすればいいですか？+
その疑問を依頼内容に残しておいてください。Vizifyはエラー画面を勝手に作らず、分岐の行き先を質問するので、チームと話し合うべき抜けを見つけやすくなります。
