ウィザード

Wizard

別名: ウィザード、マルチステップフォーム、Wizard、Multi-step form

生態(さわってみる)

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

入力

一言定義

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

分類

使う場面

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

避ける場面

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

近縁種との比較

ウィザードは全画面レイヤーで、実際の入力・選択を伴うタスクを複数ステップに分割して完了へ導くUIである。ステップバーとはウィザードの中で進捗を示す部品として組み込まれる関係にあり、ステップバー単体は「今どの工程にいるか」を示すナビゲーション部品にすぎないのに対し、ウィザードはその工程ごとの入力画面・バリデーション・遷移制御までを含む一連のフロー全体を指す。ガイドツアーとは、どちらも複数ステップを順に進む構成が似ているが、ガイドツアーが既存のUI上に説明を重ねて読ませる受動的な案内であるのに対し、ウィザードは実際にデータを入力・確定させる能動的なタスク遂行フローである点で異なる。分割入力の是非については議論があり、項目数が少ないフォームを体感の軽さだけを理由に分割すると、かえって手順が増えて完了率を下げることがあるため、本当に1画面では負荷が高い分量かどうかを見極めてから採用すべきである。

実例リンク

アクセシビリティ

role
現在のステップにはステップバー側でaria-current="step"を付ける。ステップが切り替わったら見出しへフォーカスを移し、画面が変わったことを伝える
キーボード操作
「次へ」ボタンは現在ステップのバリデーションが通るまで進行をブロックし、エラーはフォーカス移動とともに提示する。「戻る」は入力済みの値を保持したまま前のステップへ戻す
補足
分割入力そのものが目的化しないよう注意する。1画面に収まる項目数を体感の軽さのためだけに複数ステップへ分割すると、かえって離脱・完了率の悪化を招くことがある