ウィザード

Wizard

複数の手順に分割した入力フォームを、ステップバーで進捗を示しながら1画面ずつ完了させていく全画面レイヤーのUI。

  1. 1. 入力
  2. 2. 確認
  3. 3. 完了

入力

○ 使う場面

  • 会員登録や購入手続きなど、入力項目が多く1画面に収めると圧倒されてしまうフォームのとき
  • 各ステップでバリデーションを区切り、手前の入力ミスを次に進む前に解消させたいとき

× 避ける場面

  • 項目数が少なく1画面で完結できるフォーム(分割すると手順が増えるだけで負担が増す)
  • ユーザーが各項目を自由な順序で編集・見比べたいとき(分割すると一覧性と行き来のしやすさが失われる)

別名

マルチステップフォーム

近縁種との比較

ウィザードは全画面レイヤーで、実際の入力・選択を伴うタスクを複数ステップに分割して完了へ導くUIである。分割入力の是非については議論があり、項目数が少ないフォームを体感の軽さだけを理由に分割すると、かえって手順が増えて完了率を下げることがあるため、本当に1画面では負荷が高い分量かどうかを見極めてから採用すべきである。「ウィザード」という呼称自体は、複雑な手順を一段ずつ案内する様子を、魔法使い(wizard)が呪文の手順を教え導く比喩になぞらえたものとされる。

近縁種違い・使い分け
ステップバーステップバー単体は「今どの工程にいるか」を示すナビゲーション部品にすぎないのに対し、ウィザードはその工程ごとの入力画面・バリデーション・遷移制御までを含む一連のフロー全体を指す(ステップバーはウィザードに組み込まれる部品という関係)。
ガイドツアーガイドツアーが既存のUI上に説明を重ねて読ませる受動的な案内であるのに対し、ウィザードは実際にデータを入力・確定させる能動的なタスク遂行フローである。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション