UIステートマトリクス：読み込み・空・エラー・成功を整理する方法

UIステートマトリクスは、タスクの進み方に応じてユーザーが何を見て、何を操作できるかを整理する表です。ローディング、空、エラー、部分表示、成功を先に設計すると、実装後の抜け漏れを減らせます。

PixsoのUIデザイン共同作業なら、マトリクスと画面、レビューの判断を同じ場所で更新できます。

1. タスクと変化のきっかけから始める

ユーザーの目的を一文で書き、データの有無、通信、権限、画面幅、入力など、表示を変える条件を列挙します。部品名の一覧ではなく、判断に結び付いた表にするのがポイントです。

2. 似て見える状態を分ける

一覧が空なのは、データがない、フィルターで隠れている、検索結果がない、という別の理由かもしれません。権限不足や前提条件の未達でボタンを無効にする場合も、次の操作が違うなら別の行にします。

3. 行をレビューできる画面に変換する

同じタスクの通常、ローディング、空、エラー、部分表示、成功のフレームを作り、条件を画面内に表示します。サンプルデータをそろえ、重要な遷移をプロトタイプでつないで動作を確認します。

4. 復旧とデータ保持を設計する

成功しない状態にも、次にできることか、操作できない理由を示します。通信エラーには再試行、初回の空状態には追加の導線を用意し、失敗しても入力値やフィルターを消さないようにします。部分表示では確定した情報と保留中の情報を分けます。

5. 幅、入力、内容を変えて検証する

最小幅、長いラベル、遅い応答、キーボード操作、異なる権限でマトリクスを確認します。自動テストで確認する行と、手動レビューが必要な行を記録し、表示、操作、担当者、受け入れ条件をそろえます。

マトリクスを判断の記録にする

各行をフレームや遷移にリンクし、要件が変わったときに影響する画面、文言、テストが分かるようにします。古い前提が静かに残るのを防げます。

PixsoでUI状態を整理する →