本文へスキップ
ui.design

UX

エラー状態と復帰導線を設計する

エラーは例外ではなくサービス体験の一部です。何が起きたか、ユーザーが直せるのか、時間を置くべきか、相談すべきかを短く示します。

ui.design: scan-blockerui.design: llm-growth

まず確認する症状

  • 診断に失敗した理由が分からず、再試行すべきか判断できない。
  • 支払いキャンセルやWebhook処理待ちの状態から戻れない。

なぜ問題か

  • 失敗時に復帰できると、初回利用の信頼を失いにくくなります。
  • 自動運用では、人間対応が必要なケースを早く切り分けられます。

診断で見る指標

原因表示
再試行導線
問い合わせ導線
状態別の文言

修正方法

最小修正

原因と次アクションを分ける

例: bot判定の可能性、時間を置いて再試行、別URLを試す、相談する。

推奨修正

状態別に戻り先を用意する

processing、cancel、failed、rate limitedでCTAを変えます。

さらに改善

自動診断不能ケースを商品導線へつなぐ

ログイン後画面やリッチサイトは、許可済みステージングや手動Review Packへ案内します。

受け入れ条件

  1. 01PCとスマホの両方で目視確認し、主なCTAまたは操作対象が迷わず見つかる。
  2. 02キーボード操作、読み上げ補助、または自動検査で再発しやすい項目を確認する。
  3. 03修正後にui.designで再スキャンし、同じ所見が残る場合は原因を分解する。

コーディングエージェント向け修正指示

目的: エラー画面と通知文に、原因、ユーザーができる次アクション、必要なら相談導線を表示してください。技術的な詳細だけを出さず、復帰できる行動に変換してください。

参考資料

よくある失敗

  • 赤いエラー文だけを表示し、次に何をすればよいか書かない。
  • 見た目だけを整え、見出し、リンク、フォームラベルなどの意味構造を直さない。
  • 1つの指摘だけを直し、同じ原因から出た別画面の再発を確認しない。

関連ページ