user-flows-and-guided-paths

ユーザーフローとガイド付きパス

関連する機能は、ユーザーが画面間を手動で移動する別々のものではなく、一貫したひと続きの体験として利用できるようにする必要があります。優れたフローは自然に感じられます。各ステップが次のステップへとスムーズにつながり、ユーザーは常に現在地と次に行うことを把握でき、そのパスは製品の情報階層に沿っています。

ガイドする場合と、自由に探索してもらう場合

シナリオ	パターン
明確な最終目標がある直線的なプロセス（購入手続き、登録、セットアップ）	ステップごとのガイド付きフロー、またはウィザード
ステージに分けることで取り組みやすくなる複雑なタスク	進行状況インジケーター付きのウィザード
既存の製品内での機能発見	コンテキストに応じたツールチップ、またはコーチマーク
途中まで始めたことを再開するユーザー	明確な再開ポイントを示す再開プロンプト
自由な探索（ダッシュボード、設定）	自由なナビゲーション — フローを強制しない

タスクに自然な順序がある場合に限り、ガイドしてください。順序が決まっていないタスクにウィザードを無理に適用すると、すでに目的が分かっているユーザーを苛立たせます。

ウィザードパターン

次の場合にウィザードを使用します。

• タスクに3つ以上の連続したステップがある
• 後のステップが前のステップでの決定に依存する
• すべてのステップを1つの画面に表示すると、ユーザーに負担がかかる

ウィザードの構成

[Step indicator: 1 of 4]

Step title

  [Form content for this step]

[Back]  [Continue →]

ステップインジケーター： 一連のステップのうち現在どこにいるか、残りのステップがいくつあるかを常に表示します。プログレスバーでも番号付きステップでも構いません。ステップ名に意味がある場合は、番号付きステップのほうが分かりやすくなります。

戻るナビゲーション： 常に利用できるようにします。ユーザーが後のステップでの進捗を失うことなく、前のステップに戻って決定を変更できるようにする必要があります。

進むナビゲーション： 現在のステップが完了するまで無効にします。最後の送信時ではなく、「続行」を選んだときに検証します。

終了方法： 部分的な進捗を失わずにフローを中断する方法を明確にします。可能な場合は、下書きを自動保存します。

ステップ設計の原則

• 各ステップでは、主要な決定または入力グループを1つにします。詰め込みすぎないでください
• ステップのタイトルには、システム側の説明ではなくユーザーの目的を示します。「住所入力」ではなく「お届け先住所」とします
• 任意のステップには、その旨を明記し、スキップできるようにします
• 最終ステップでは、確定前に概要を表示します

購入・コンバージョンフロー

購入フローには、不要なステップが増えるたびにコンバージョンが低下するという制約があります。完了までの最短経路を設計します。

• 各段階では必須項目のみを収集し、任意の情報は後回しにします
• ユーザーが購入内容を常に確認できるよう、注文概要を画面に表示し続けます
• 支払いステップの近くに、信頼につながる情報（セキュリティバッジ、返品ポリシー）を表示します
• 支払い前の確認ステップでは、合計金額、お届け内容、商品を表示し、最後に確認できるようにします
• 購入後は、明確な次のステップを添えてすぐに確認を知らせます（「ご注文が確定しました。発送時にメールでお知らせします。」）

製品の階層構造にフローを組み込む

ガイド付きパスは、別の体験が開いたように感じさせるのではなく、製品の一部として自然に感じられる必要があります。

• フロー内のビジュアルスタイル、タイポグラフィ、コンポーネントは、製品の他の部分と一致させます
• 気が散らないよう、フロー中にナビゲーション要素（サイドバー、上部ナビゲーション）を非表示にしても構いませんが、ブランドヘッダーは表示したままにします
• フロー完了後は、汎用的なホーム画面ではなく、階層構造の中で意味のある場所にユーザーを戻します
• フローへのディープリンクが機能するようにします。メールのリンクからステップ3にアクセスしたユーザーには、ステップ1ではなくステップ3を表示します

レビューチェックリスト

• フローには明確な開始点、論理的なステップ順序、明確な終了点がありますか？
• すべてのステップで進行状況インジケーターが表示されていますか？
• 後の進捗を失わずに、ユーザーは前のステップに戻れますか？
• 各ステップは、1つの判断または入力グループに焦点を当てていますか？
• ステップのタイトルは、ユーザーに伝わる言葉で、目的を説明していますか？
• 最終ステップでは、取り消せない操作の前に概要が表示されますか？
• 完了後、ユーザーは製品内の意味のある場所に移動しますか？
• フローのビジュアルスタイルは、製品のほかの部分と一致していますか？