コンテンツにスキップ

ステップではなく不足条件で示す

Step1→Step2→…で順序を固定せず、「何が足りないか」を示す。

ウィザード形式(ステップフォーム)は、入力の順序をUIが決めてしまいます。ユーザーは自分のペースで、必要な箇所から入力したいことが多いです。

ステップで強制する不足条件で示す
Step1 → Step2 → Step3 → 確認セクション編集 + 不足表示
順序が固定されるどこからでも編集できる
戻るとき特定Stepに戻る該当箇所だけ直す
途中で抜けられないいつでも中断・再開できる

ステップ形式は、1つの項目を直すために複数画面を経由する問題を生むことがあります。

ユーザーのゴール達成にどう寄与するか: 自分のペースで、必要な箇所から入力できる。「効率よく申請を完了したい」というゴールに直結する。

ステップで順序を固定

不足条件を表示

ステップではなく、セクションで情報を分類します:

  • 基本情報セクション
  • 旅程セクション
  • 経費明細セクション
  • 添付ファイルセクション

各セクションは独立して編集できます。順序は関係ありません。

セクション間に依存関係がある場合

Section titled “セクション間に依存関係がある場合”

「Aを入力しないとBが入力できない」ような依存関係がある場合:

  • 依存先のセクションを無効化表示: 「基本情報を入力すると、旅程が入力できます」と表示
  • 不足条件として明示: 「旅程を入力するには:出発日が必要です」

ステップで強制するのではなく、なぜ入力できないかを説明することで、ユーザーは状況を理解できます。

未入力: 旅程(交通) / 添付(領収書1件以上)

「何が足りないか」を明示することで、ユーザーは必要な箇所だけ対応できます。

  • すべての必須項目が埋まったら「申請」ボタンが有効になる
  • 不足があれば、何が足りないかを表示する

登録・編集が複雑な場合にも適用できる

Section titled “登録・編集が複雑な場合にも適用できる”

この原則は、ステップフォームの代替だけでなく、項目数が多い登録・編集にも適用できます。

  • 最小限の項目で新規作成(登録はその場で行う
  • 詳細画面でセクションごとに編集
  • 不足条件を表示して、何が足りないかを明示

「登録画面」「編集画面」を別に作るのではなく、詳細画面の中でセクション単位に編集し、不足を補っていくという考え方です。

  • Step1→Step2→…で入力順序を固定する
  • 「次へ」ボタンで順番に進ませる
  • 前のステップに戻らないと修正できない
  • ステップ番号で進捗を管理する