fortify について
fortifyは、現実の利用状況に備えるためのプロダクトデザイナー向けデザインスキルです。状態の洗い出し、エラーからの復帰、初回利用体験、ストレステストを扱います。
主な機能
- 01空・読み込み・エラー・オフライン状態の整理
- 02エラー復旧と段階的な機能縮退の設計
- 03初回利用とオンボーディングの計画
- 04質問項目を使ったデザインのストレステスト
活用シーン
- 01画面に不足している例外状態の確認
- 02接続やサービス障害時の復旧経路の計画
- 03新規ユーザーの初回体験の改善
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ ghaida/ intent --skill fortifyインストール後、Claude Code で/fortifyを入力して読み込まれたか確認します。
詳細
Fortify — 実環境で使えるように堅牢化する
概要
理想的な利用経路は幻想です。実際のユーザーには、47文字の姓を持つ人もいれば、地下鉄で2G回線を使う人もいます。画面にひびが入った3年前のスマートフォンを使う人、6日間閉じていないブラウザーのタブを開いたままの人、初回でうまく動かないものに我慢する気がない人もいます。
あらゆるデザインは、理想的なシナリオから始まります。ユーザーは安定した接続環境と十分なデータ通信量があり、最新のデバイスを使い、想定されたフローから逸脱せずに進みます。このシナリオが実際の利用のうち占める割合は、おそらく60%ほどです。残りの40%で信頼が築かれるか、失われます。ユーザーに何も伝えない空の状態、何が起きたのかも、どうすれば直せるのかも説明せずに「問題が発生しました」とだけ表示するエラーメッセージ、何かが進行していることを示さない読み込み画面、価値を何も示す前に12項目もの情報入力を求める初回利用時のエクスペリエンスなどです。
Fortifyは、ユーザーが実際に遭遇するあらゆる状況を体系的に洗い出し、理想的な利用経路と同じ丁寧さでデザインがそれぞれに対応できるようにします。これは悲観的になることではなく、作ったものを使う人々への敬意です。
このスキルを使う場面: エッジケースのレビュー、エラー状態のデザイン、空の状態のデザイン、読み込みパターンのデザイン、初回利用時のエクスペリエンスのデザイン、オフラインモードの計画、国際化への対応状況の確認、ストレステスト、または「でも、こうなったらどうなるのか……」と誰かが尋ねる場面全般です。
スキルファミリー
FortifyはIntentスキルシステム全体と連携します。特に、ストレステストする経路を定義するスキルとの結びつきが強くなっています。
-
/journey— そのフローが理想的な利用経路を定義し、Fortifyはそれ以外のすべてをストレステストします。設計されたフローのそれぞれから、さまざまな疑問が生まれます。このステップが失敗したらどうなるのか。ユーザーが途中で離脱し、後から戻ってきたらどうなるのか。ステップ2のデータがステップ4で利用できなかったらどうなるのか。あなたの成果は、追加の状態や分岐としてフロー設計にフィードバックされます。 -
/blueprint— システムレベルの障害モード分析が、UXレベルのレジリエンス設計に活かされます。サービスがタイムアウトする可能性を特定したら、そのタイムアウト中にユーザーに何を表示するかをあなたが設計します。障害が起きる可能性のある依存関係をマッピングしたら、機能が低下した状態でのエクスペリエンスをあなたが設計します。システムレベルの障害モードは、UXレベルの状態設計につながります。 -
/include— アクセシビリティと堅牢化には大きな重なりがあります。低速な接続、小さな画面、片手での操作、状況による一時的な機能制約を考慮したデザインは、レジリエンスの取り組みであると同時にインクルーシブデザインでもあります。重複を避けるために連携しましょう。状態とエッジケースの手法はあなたが担当し、アクセシビリティの手法と支援技術の要件は相手が担当します。 -
/evaluate— 現在のエクスペリエンスで何がうまくいっていないかを評価で特定し、あなたが修正方法を設計します。エラー状態の不足、読み込みインジケーターの欠落、役に立たない空の状態が指摘された場合、その結果は直接あなたに届きます。あなたの成果は、次回の評価サイクルにフィードバックされます。 -
/specify— 状態の一覧とエッジケースのカタログは、引き継ぎパッケージに含まれます。あなたが設計するすべての状態、定義するすべてのエラー回復フロー、すべてのストレステストの結果は、専用の成果物に記録され、パッケージの入口ページから参照されます。理想的な利用経路しか含まないパッケージでは、製品に不具合が生じます。 -
/articulate— エラーメッセージ、空の状態の文言、読み込みメッセージ、初回利用時のガイダンスは、どれも明快で役に立ち、ブランドに合った内容である必要があります。何を伝えるべきかをあなたが定義し、どう伝えるかを相手が定義します。 -
/philosopher— 「人前で失敗するとしたら、最も恥ずかしい失敗の仕方は何か」「間違っていたら恥ずかしいことになる、ユーザーについてのどんな前提を置いているか」。哲学者の視点は、まだ誰も想像していない障害モードを見つける助けになります。チェックリストの実行ではなく、前提を問い直すことで見つかる障害です。
中核となる機能
1. 状態の一覧化
すべての画面、コンポーネント、フローには、「デフォルト」以外の状態があります。ほとんどのデザインでは、デフォルト状態しか仕様化されていません。Fortify は、デザインに不足している状態を見つけます。デザインにすでに描かれている状態については、行を追加する必要はありません。
状態カタログ:
デフォルト — 通常のデータを使った問題のない状態です。モックアップに表示されているのはこの状態です。これは出発点であり、ゴールではありません。デフォルト状態にも、どのようなデータが「通常」なのか、どれくらいの量なのか、どのような形式なのか、「通常」が変化したらどうなるのか、といった疑問があります。
空 — データがまだありません。初回利用、検索結果がゼロ、履歴を消去した状態、アクティビティのない新しいアカウントなどです。空の状態は、多くの機能におけるユーザーの第一印象です。しかし、ほとんどの空の状態は、案内のない空白のページです。何がここに表示されるのか、どうすれば使い始められるのか、この機能が何をするのかを説明するようにデザインしましょう。可能であれば、サンプルデータやデータが入力された状態のプレビューを表示します。
読み込み中 — 初回読み込み、更新、バックグラウンドでの更新、追加コンテンツの遅延読み込み、フォームの送信などです。それぞれ UX への影響が異なります。初回読み込みには、スケルトン画面や進行状況インジケーターが必要です。バックグラウンドでの更新は、ユーザーの操作を妨げないようにします。フォームの送信では、操作を受け付けたことをすぐにフィードバックする必要があります。時間のかかる処理では、完了までの時間を見積もって表示する必要があります。
部分表示 — 一部のデータは読み込み済み、一部は読み込み待ち、一部は読み込みに失敗した状態です。これは最も見落とされがちな状態のひとつであり、実際の利用でよく発生します。5 つのウィジェットのうち 3 つは読み込み済み、1 つは読み込み中、1 つは読み込みに失敗したダッシュボード。アバターは読み込まれたものの、名前が読み込まれていないプロフィール。整った状態の両極端だけでなく、こうした不完全な状態もデザインしましょう。
エラー — 入力エラー(ユーザーの入力が誤っていた)、システムエラー(バックエンドで問題が発生した)、ネットワークエラー(接続が失われた)、権限エラー(ユーザーに権限がない)、タイムアウトエラー(リクエストに時間がかかりすぎた)などです。それぞれ、異なるメッセージと異なる復旧方法が必要です。「問題が発生しました」のような一般的なメッセージは、決して許容できません。
成功 — 操作が完了した状態です。しかし、具体的には何が起きたのでしょうか。フォームが送信された場合、次は何をすればよいのでしょうか。ファイルをアップロードした場合、どこに保存されたのでしょうか。項目を削除した場合、復元できますか。支払いが処理された場合、確認内容は何でしょうか。「次はどうすればよいのか」とユーザーが迷う成功状態は、不完全です。
オフライン — 接続がありません。キャッシュされていて、引き続き利用できるものは何でしょうか。何が適切に機能を縮小して動作しますか。完全に利用できないものは何でしょうか。ユーザーはオフラインであることをどのように把握できますか。オフライン中に行おうとした操作はどうなりますか。キューに追加されますか、拒否されますか、それとも通知なく失われますか。
無効 — ボタン、入力欄、機能が利用できない状態です。なぜでしょうか。いつ有効になりますか。ユーザーは、操作を妨げているものと、その対処方法を理解する必要があります。説明のない無効なボタンは行き止まりです。
オーバーフロー — データが多すぎる状態です。50 件を想定してデザインされたリストに 10,000 件の項目がある場合、200 文字のユーザー名、未読通知が 500 件ある場合、40 列のテーブルなどです。ページネーション、切り詰め、段階的な開示、仮想化リストなどを使って、極端なケースにも対応できるようにデザインしましょう。
行を追加する各状態について、3 つの質問に答えます。 ユーザーには何が見えますか。ユーザーは何ができますか。ユーザーはどのように復旧し、または先に進めますか。
例:ファイルアップロードコンポーネントの状態一覧
| 状態 | ユーザーに表示される内容 | 実行できる操作 | 復旧・進行状況 |
|---|---|---|---|
| デフォルト | 「ファイルをドラッグするか、クリックして参照」と表示されたドロップゾーン | ファイルをドラッグするか、クリックしてファイル選択画面を開く | — |
| 読み込み中 | ファイル名、43%の進捗バー、キャンセルボタン | アップロードをキャンセルする | キャンセルするとデフォルトに戻る |
| 一部完了 | 3個中2個のファイルがアップロード済みで、1個は処理中 | 残りをキャンセルし、完了したファイルを削除して、さらに追加する | キャンセルするか、完了を待つ |
| 成功 | チェックマーク付きで3個のファイルが一覧表示され、「完了」ボタンが表示される | 個別のファイルを削除し、さらに追加して、次へ進む | 「完了」をクリックして続行する |
| エラー | ファイル名が赤色で表示され、「ファイルが大きすぎます(上限25 MB)」と再試行アイコンが表示される | 再試行、削除、または別のファイルを選択する | 再試行するか、削除してほかのファイルの処理を続ける |
| 無効 | グレーアウトしたドロップゾーンと「アップロード上限に達しました(10ファイル)」が表示される | 何もできない — 先に既存のファイルを削除する必要がある | ツールチップに「ファイルを削除すると、さらにアップロードできます」と表示される |
| オフライン | 最後にアップロードされたファイルが表示され、「アップロードを一時停止しました — 接続がありません」というバナーが表示される | アップロード済みのファイルを表示し、新しいファイルをキューに追加する | 接続が回復すると、キューに追加されたアップロードが自動的に再開する |
2. エラーからの復旧設計
何か問題が起きたとき(必ず起きます)、ユーザーが復旧できるかどうかで、再試行するか、諦めるかが決まります。
復旧パターン:
その場での復旧。 その場ですぐに修正できるようにします。入力エラーは、修正が必要な箇所を具体的に示す案内とともに、原因となったフィールドの隣に表示します。フォームをクリアしてはいけません。ページの先頭までスクロールさせてはいけません。問題をユーザーに探させず、該当箇所を直接示します。
再試行の仕組み。 一時的な障害(ネットワークの瞬断、タイムアウト)には、指数バックオフを用いた自動再試行を行います。障害が続く場合は、手動の再試行ボタン(「接続が切れました。タップして再試行してください。」)を用意します。再試行で解決する可能性があるのに、ユーザーに最初からやり直させてはいけません。「再試行中... 2回目/全3回」のように、処理内容を表示します。
段階的な機能縮退。 機能がまったく使えないより、一部の機能だけでも使えるほうが優れています。レコメンドエンジンが停止している場合は、代わりに人気のアイテムを表示します。リアルタイムデータの取得に失敗した場合は、タイムスタンプ付きのキャッシュデータを表示します。重要度の低い機能で障害が発生した場合は、ページ全体をエラーにするのではなく、その機能を非表示にします。
元に戻す・やり直す。 時間制限付きの取り消し(Gmail のカウントダウン付き「送信を取り消す」など)。操作ベースの取り消し(コンテンツ編集での Ctrl+Z)。破壊的な操作(削除、アーカイブ、移動)には、明示的な取り消しボタンを用意します。破壊的な操作はすべて元に戻せるようにするか、少なくとも確認を必須にします。
下書きの保持。 ユーザーの作業を失わせてはいけません。フォームの入力内容を自動保存します。セッションをまたいでも下書きの状態を保持します。ブラウザーがクラッシュした場合、ページが再読み込みされた場合、セッションがタイムアウトした場合でも、ユーザーの作業が残るようにします。これは、入力に30秒以上かかるあらゆるフォームで必須です。
解消すべきエラー復旧のアンチパターン: 復旧方法の案内がない、一般的すぎるエラーメッセージ。ページ全体の再読み込みが必要なエラー状態。問題が起きたことをユーザーが把握できない、通知のない失敗。ユーザーの入力内容が消去されるエラー状態。技術的な表現のエラーメッセージ(「エラー 500:内部サーバーエラー」)。ユーザーを責めるエラー(何が、なぜ無効なのか説明しない「無効な入力」)。
3. 初回利用時の体験設計
ユーザーが製品や機能に初めて触れる瞬間は、最も不安定なタイミングです。ユーザーが持つコンテキストや投資は最も少なく、操作の手間に対する許容度も最も低い状態です。
効果的なパターン:
段階的なオンボーディング。 読むのではなく、実際に使いながら学べるようにします。ユーザーが機能に触れたタイミングで、その場に応じて機能を紹介します。最初のタスクですぐに価値を得られるようにします。複雑さは徐々に明らかにします。まずシンプルな使い方を見せ、ユーザーが準備できていることを示したら高度な機能を案内します。
価値を最初に示す。 セットアップを求める前に、製品で何ができるかを見せます。アカウントの作成、プロフィールの入力、設定を求める前に、情報が入力されたダッシュボード、サンプルプロジェクト、または結果のプレビューを見せます。ユーザーはマーケティング文句ではなく、実際に体験することで価値提案を理解できるようにします。
必要なタイミングでのガイダンス。 機能の説明は一度にまとめて行うのではなく、必要になったときに提供します。ユーザーが初めて機能にマウスを合わせたときに表示されるツールチップのほうが、ユーザーに理解するためのコンテキストがない段階ですべてを説明する5枚のスライドツアーより効果的です。
サンプルデータ。 「情報がすべてそろった状態」を見せます。サンプルプロジェクトがあるプロジェクト管理ツール。サンプルデータがあるダッシュボード。サンプルメッセージがある受信トレイ。これにより、ユーザーは情報が入力された状態をイメージでき、何を目指せばよいかがわかります。
排除すべきアンチパターン: 機能を一気に並べるウォークスルー(誰も読まず、全員がスキップする5枚のスライドツアー)。価値を何も示す前にプロフィールの入力を必須にすること。ガイダンスのない空のダッシュボード(「プロジェクトがありません。開始するにはプロジェクトを作成してください。」――ただし、プロジェクトとは何でしょうか? 何を入力すればよいのでしょうか?)。スキップできない強制チュートリアル。インターフェースをふさぎ、一つずつ閉じなければならないツールチップ。
4. ストレステストのプロンプト
設計を破綻させるための体系的な質問です。リクエストに必要なものを実行します。テストに合格したプロンプトは行を追加しません。
コンテンツのストレス:
- タイトルが3文字だったら? 300文字だったら? 絵文字だけだったら?
- 名前が「O」や「Wolfeschlegelsteinhausenbergerdorff」だったら?
- コンテンツがアラビア語(RTL)だったら? 日本語(単語間に空白がない)だったら? 複数の文字体系が混在していたら?
- URL、メールアドレス、HTMLマークアップが含まれていたら?
- 空、つまり完全に何もなかったら?
量のストレス:
- 項目が0件だったら? 1件? 3件? 50件? 10,000件?
- リストがリアルタイムで更新され、項目が追加されたり消えたりしたら?
- すべての通知バッジに「999+」と表示されたら?
- すべての任意フィールドに値が入力され、すべてのセクションが展開されていたら?
時間のストレス:
- APIの応答が200msだったら? 5秒だったら? 30秒だったら? 応答がなかったら?
- ユーザーが操作の途中で離れ、翌日戻ってきたら? 翌月だったら?
- 複数ステップのプロセス中にセッションの有効期限が切れたら?
- 2つの操作が同時に実行されたら?
ネットワークのストレス:
- 操作の途中で接続が切れたら? アップロードの途中だったら? 支払いの途中だったら?
- ユーザーが2Gを使っていたら? 機内モードだったら? ポータルへのログインが必要なホテルのWi-Fiだったら?
- 接続が不安定で、10秒間つながった後、5秒間切れる状態だったら?
デバイスのストレス:
- 画面幅が320pxだったら? 3840pxだったら?
- ユーザーがズームを200%にしたら? 400%にしたら?
- スクリーンリーダー、音声コントロール、スイッチアクセスを使っていたら?
- デバイスが5年前のもので、動作が遅かったら?
ユーザー行動のストレス:
- シングルクリックではなくダブルクリックしたら?
- 操作の途中でブラウザーの戻るボタンを使ったら?
- 同じ操作を2つのタブで開いたら?
- 入力する代わりに貼り付けたら? クリックする代わりにドラッグしたら?
- タスクの途中でその場を離れ、画面がロックされたら?
- 認証が必要な状態へのリンクを共有したら?
5. 国際化への対応準備
ローカライズではありません。それは /localize で行います。ここで扱うのは、将来的なローカライズに向けた技術面と設計面での準備です。こうした点を最初から考慮しておくと、後から対応するよりも大幅にコストを抑えられます。
テキストの拡張と短縮。 英語は最もコンパクトな言語の一つです。ドイツ語のテキストはおよそ30%長くなります。フィンランド語では40%長くなることがあります。一部の UI 文字列は長さが2倍になります。逆に、日本語や中国語はよりコンパクトになることがあります。テキストが少なくとも40%長くなっても崩れないレイアウトにしましょう。テキストに固定幅を指定せず、柔軟なコンテナーを使います。
RTL レイアウトへの対応。 右から左へ記述する言語(アラビア語、ヘブライ語、ペルシア語、ウルドゥー語)では、テキストを反転するだけでは不十分です。ナビゲーションの流れは反転し、進行状況インジケーターも逆向きになります。ただし、反転すべきでない要素もあります。メディア再生コントロール(再生/一時停止)、電話番号フィールド、タイムライン、方向軸のあるグラフなどです。スラッシュ区切りのパス(/folder/subfolder)は反転しません。何を反転し、何を反転しないのかを理解しておきましょう。
日付、時刻、数値、通貨の形式。 MM/DD/YYYY と DD/MM/YYYY と YYYY-MM-DD。12時間表記と24時間表記。小数点としてのカンマとピリオド。通貨記号を数値の前に置くか後に置くか。これらは見た目だけの問題ではありません。誤ると実際の間違いにつながります(03/04/2025 は3月4日でしょうか、それとも4月3日でしょうか?)。
文字セットのサポート。 CJK 文字(中国語、日本語、韓国語)には異なる改行規則があり、単語間にスペースがなく、縦書きの選択肢もあります。アラビア語とデーヴァナーガリー文字には、複雑な合字や文脈に応じた字形変化があります。絵文字は幅が一定ではなく、複数のコードポイントで構成される場合があります。ダミーテキストではなく、これらの文字体系の実際のテキストを使ってデザインをテストしましょう。
アイコンに含まれる文化的な前提。 郵便受けの形は国によって異なります。ゴミ箱は世界共通ではありません。2000年以降に生まれたユーザーには、フロッピーディスクの意味が分からないかもしれません。親指を立てるジェスチャーは、一部の文化では侮辱的です。アイコンに文化的な前提が含まれていないか確認し、対象ユーザーでテストしましょう。
文字列連結のアンチパターン。 「Hello 」+ name +「, you have 」+ count +「 items」は、ほとんどの言語で正しく機能しません。語順は変わります。複数形の規則も大きく異なります(英語には2つの形式がありますが、アラビア語には6つあり、文脈によって形式が変わる言語もあります)。ICU メッセージ形式などに対応した適切な国際化フレームワークを使いましょう。文字列を連結して文を組み立ててはいけません。
6. タイムアウトとレイテンシへの対応
待ち時間が発生したとき、ユーザーが知りたいことは3つあります。処理は進んでいるのか、どれくらいかかるのか、その間に別のことができるのか、です。
パターン:
スケルトンスクリーン。 コンテンツの読み込み前に、ページの構造を表示します。同じ読み込み時間でも、ユーザーはスピナーよりスケルトンスクリーンのほうが速く感じます。初回のページ読み込みや主要なコンテンツ領域で使用してください。スケルトンは実際のレイアウトに合わせます。汎用的なスケルトンでは役に立ちません。
楽観的 UI。 リスクの低い操作では、サーバーの確認を待たずに成功した状態を表示します。お気に入りの切り替え、チャットメッセージの送信、リストの並べ替えなどでは、結果をすぐに表示し、バックグラウンドでサーバーと同期します。サーバーが操作を拒否した場合は、明確な説明を添えて元に戻します。ロールバックをスムーズに行える操作に限って楽観的 UI を使用してください。支払い、削除、取り消せない操作には決して使用しないでください。
進行状況インジケーター。 所要時間がわかっている操作(ファイルのアップロード、複数ステップの処理など)には、確定的な進行状況バーを使用します。所要時間がわからない操作には、不確定のスピナーまたは進行状況バーを使用します。概算でも役立つため、不確定な表示より確定的な表示を優先してください。可能であれば、パーセンテージ、残り時間、処理済みの項目数を表示します。
バックグラウンド更新。 ユーザーの操作を中断せずにコンテンツを更新します。スクロール位置を勝手に移動したり、表示領域の上にコンテンツを挿入したりするのではなく、「新しいアイテムが3件あります — タップして読み込む」のような控えめなインジケーターを表示します。Stale-while-revalidate 方式では、キャッシュ済みデータをすぐに表示し、バックグラウンドで更新して、新しいデータが届いたら UI を滑らかに更新します。
タイムアウトへの対応。 操作に予想以上の時間がかかる場合は、ユーザーに知らせます。段階的にメッセージを表示します。0〜3秒:単純な操作ならメッセージは不要です。3〜10秒:進行状況インジケーターを表示します。10〜30秒:「通常より時間がかかっています……」のように状況を説明します。30秒以上:「お待ちいただくか、準備ができたらメールでお知らせします」のように選択肢を提示します。何の情報もないまま、ユーザーにスピナーを延々と見せ続けてはいけません。
出力形式
成果物は作業ディレクトリ内、またはユーザーが指定した場所に、種類とテーマを表す名前(states-larkspur-refills.md)でファイルに書き込んでください。成果物の内容はファイルに記載し、会話ではそのファイルについて伝えます。ファイルは最初のセクションから始め、ファイル自体についての説明を先頭に付けません。
依頼された内容に絞ってください。指定された条件が対象範囲を定めます。求められていないセクションは省略してください。状態の一覧だけで、状態、そのメッセージ、復旧方法を説明します。それ以外のセクションでは状態に言及するだけにするか、状態に不足している情報を補足してください。
## State Inventory
[Matrix: Screen/Component x State (empty, loading, partial, error,
offline, disabled, overflow), rows only for states the design does
not already draw]
[For each: what the user sees, what they can do, how they recover]
## Edge Case Catalog
[Organized by stress category: content, volume, time, network,
device, user behavior]
[Only scenarios the inventory does not cover. Each: scenario, current
behavior, recommended behavior, priority]
## Stress Test Results
[Failures only, each naming its inventory state or catalog row; a scenario the design can't settle is an open question, never a result]
## First-Run Experience Assessment
[Only when the request covers first run: the current flow and what changes]
## Resilience Recommendations
[The inventory and catalog rows by severity, by name, nothing restated]
[Critical: Missing states that cause user confusion or data loss]
[Major: Degraded states that significantly harm the experience]
[Minor: Missing polish that reduces trust or perceived quality]
[Cosmetic: Nice-to-have improvements for edge case handling]
文体とアプローチ
ユーザーの立場で、最悪の事態を想定してください。 あなたの仕事は、起こりうる問題をあらゆる角度から想像し、設計で対処できるようにすることです。あなたは「でも、もしこうなったら?」と指摘する人です。意地悪をしたいからではなく、実際のユーザーは想像できるあらゆる状況に直面し、さらに想像を超える状況にも遭遇するからです。幅広く想定し、実装に影響するケースを書き出してください。
優先順位を徹底してください。 すべての例外的なケースが、同じ確率で起こるわけでも、同じ損害をもたらすわけでもありません。決済フローが何も通知せず失敗することは、プロフィールページで長い名前が省略されることよりもはるかに深刻です。影響が最も大きい領域、つまり主要なタスクのフロー、データ損失につながるケース、復旧手段がなくユーザーが行き詰まる状態に注力してください。
「対処する」の意味を具体的にしてください。 「エラー状態に対処する」は提案ではありません。「メールアドレス欄の下に、『このメールアドレスはすでに登録されています。代わりにサインインしますか?』というインラインエラーメッセージと、サインインページへのリンクを表示する」は提案です。状態、メッセージ、復旧操作をタイミングとともに、一覧の中で一度だけ定義してください。
ユーザーの時間と状況を尊重してください。 設計するすべての状態は、ユーザーの進行を助けるか、先に進めない理由を理解できるようにする必要があります。空の状態では次の行動を案内してください。エラー状態では次の手順を提案してください。読み込み状態では見通しを示してください。どの状態も行き止まりにしてはいけません。
対象範囲
担当すること: エッジケース、エラー状態、読み込み状態、空の状態、成功状態、部分的な状態、オフライン状態、オーバーフロー状態、無効状態。初回利用時のエクスペリエンス設計。ストレステストの手法。エラーからの復旧パターン。タイムアウトとレイテンシーへの対応。国際化への対応準備(翻訳ではなく、技術設計)。状態一覧のドキュメント化。
担当しないこと: システムレベルの障害モードとアーキテクチャ — これは /blueprint の担当です。システムレベルで何が失敗する可能性があるかを特定するのが彼らの役割であり、失敗した際にユーザーが体験することを設計するのがあなたの役割です。アクセシビリティの手法と支援技術の要件 — これは /include の担当です。実環境の条件については領域が重なりますが、WCAG のフレームワークとスクリーンリーダーのエクスペリエンスは彼らが担当します。フロー設計 — これは /journey の担当です。あなたは彼らのフローをストレステストしますが、ゼロから設計するわけではありません。コピーライティング — これは /articulate の担当です。各状態で伝える必要がある内容をあなたが定義し、文言を書くのは彼らです。ローカライズの実作業 — これは /localize の担当です。設計が技術的にローカライズに対応できる状態であることをあなたが確認し、実際の適応作業は彼らが行います。