Scott
Матрица состояний UI показывает, что пользователь видит и может сделать на каждом этапе задачи. Если заранее описать загрузку, пустой результат, ошибку, частичные данные и успех, команда не оставит важные сценарии на потом.
В рабочем пространстве совместного UI-дизайна Pixso можно держать матрицу, фреймы и решения ревью рядом.
1. Начните с задачи и сигналов
Сформулируйте цель пользователя одним предложением, затем перечислите условия, которые меняют экран: наличие данных, статус запроса, права, соединение, ширина окна и ввод. Так матрица отражает решение, а не просто список компонентов.
2. Разделяйте похожие причины
Пустой список может означать отсутствие записей, фильтр без совпадений или отсутствие результата поиска. Заблокированная кнопка тоже может зависеть от прав, обязательного шага или временного запроса. Делайте отдельную строку, если отличается сообщение или следующее действие.
3. Свяжите строки с проверяемыми фреймами
Создайте для одной задачи базовое, загрузочное, пустое, ошибочное, частичное и успешное состояние. Используйте одинаковые примеры данных и подпишите условие внутри файла. Важные переходы соедините в прототипе, чтобы ревью проверяло поведение, а не угадывало его по картинкам.
4. Спроектируйте восстановление и сохранение ввода
В каждом неуспешном состоянии должно быть полезное следующее действие или понятная причина, почему его нет. Для ошибки соединения предложите повтор, для пустой коллекции — добавление первой записи, а при сбое сохраняйте фильтры и введённые значения. В частичном результате отделяйте подтверждённое от ожидающего.
5. Проверьте разные ширины и способы ввода
Протестируйте матрицу на минимальной ширине, с длинными названиями, медленным ответом, клавиатурой и разными ролями. Отметьте, какие строки проверяет автоматизация, а какие требуют ручного ревью. Для каждой строки должны быть понятны иерархия, действие, владелец и доказательство приёмки.
| Состояние | Вопрос | Что показать в дизайне |
|---|---|---|
| Загрузка | Что человек понимает и может сделать во время ожидания? | Прогресс, сохранённый контекст, отмена или повтор |
| Пусто | Почему нет данных и какое действие поможет? | Причина и добавление, очистка или изменение условия |
| Ошибка | Что не сработало и как безопасно восстановиться? | Причина, сохранённый ввод, путь восстановления |
| Частичный результат | Каким данным можно доверять сейчас? | Подтверждённые строки, ожидание, обновление |
| Успех | Как пользователь поймёт, что задача завершена? | Подтверждение, сохранение, следующий шаг |
Превратите матрицу в журнал решений
Свяжите каждую строку с фреймом или переходом. Если требование изменится, команда сразу увидит затронутые экраны, тексты и тесты, а не будет молча продолжать старое предположение.
