UX-SPEC — это документ о поведении интерфейса, а не перечень цветов, кнопок и референсов. Он нужен, чтобы разработчик, дизайнер и AI-агент одинаково понимали, что пользователь делает и как система отвечает. Начните с уже подготовленного PRODUCT-SPEC и состава MVP; если входных документов нет, сначала уточните их.
1. Запишите одну проверяемую цель
Определите роль пользователя, ситуацию и результат. Пример: «Владелец магазина загружает CSV с товарами и видит, какие строки отклонены». Это пример, а не подтверждённый пользовательский запрос. Не добавляйте «настроить личный кабинет» без связи с конкретным действием.
Ограничьте первый проход 2–3 главными сценариями: основное действие, исправление ошибки, повторное использование результата. Остальные занесите в backlog.
2. Превратите сценарии в экраны
Для каждого сценария выпишите: точку входа; шаги пользователя; данные, которые вводит; переходы; экран успеха; ошибку и восстановление; альтернативный путь. Отдельно отметьте, требует ли операция авторизации и что видит незарегистрированный пользователь.
- Список проектов: пользователь выбирает проект; покажите пустой список и загрузку.
- Импорт: пользователь прикладывает файл; предусмотрите неподдерживаемый формат.
- Результат: пользователь исправляет ошибки; предусмотрите частичный успех и повторную проверку.
Таблица — шаблон, не готовая спецификация конкретного сервиса.
3. Опишите состояния и микро-тексты
Для каждого действия перечислите idle, loading, success, empty, error и permission denied, если они применимы. Вместо фразы «что-то пошло не так» объясните, что случилось и как вернуться к работе. Не делайте успех зависимым только от всплывающего уведомления — результат должен быть виден в контенте.
Для форм укажите подписи полей, обязательность, ограничения формата и примеры ошибок. Добавьте подтверждение для действий, которые сложно отменить, и способ восстановить ввод после технического сбоя.
4. Сразу определите адаптивность и доступность
Опишите, что меняется при узком экране: порядок блоков, переход таблицы в карточки, поведение фильтров, доступ к основному действию. Зафиксируйте управление клавиатурой, видимый фокус, названия кнопок, контраст, ошибки форм и alt для информативных изображений. Ориентируйтесь на быстрые проверки W3C, но помните, что они не заменяют полноценного аудита.
5. Передайте документ на реализацию
## 08-UX-SPEC — заготовка
- Продукт и версия гипотезы:
- Основная роль пользователя:
- Цель и критерий успеха:
- Сценарий A: вход → действия → результат
- Сценарий B: ошибка → восстановление
- Экраны и обязательные состояния:
- Поля и сообщения в интерфейсе:
- Правила мобильной версии:
- Требования к доступности:
- Вне MVP:
- Открытые вопросы:Как понять, что шаг выполнен
Можно дать документ другому человеку и попросить нарисовать или реализовать ключевой сценарий без догадок о переходах и состояниях. Неоднозначные места помечены вопросами, а не спрятаны за словами «интуитивно понятно». Следующий шаг — пользовательские маршруты и кликабельный прототип.
Источник: https://www.w3.org/WAI/test-evaluate/easy-checks/
Материал был полезен?
Помогите нам сделать материалы точнее и понятнее.