Проверьте план экрана по десяти UX-измерениям

1. Вход

По плану текстом проверяемы полнота состояний, навигация и копирайтинг; по скриншоту добавляются иерархия, плотность и контраст; по живому URL — всё остальное. Половина классов дефектов (фокус, табуляция, долгий ответ, переполнение реальными данными) в макете не существует, поэтому живой экран даёт вдвое больше находок. Интерфейс в проде — проси URL.

Не начинай, пока не знаешь: кто пользователь, какую задачу решает на этом экране, как часто. Экран, который бухгалтер открывает раз в квартал, и экран, который менеджер маркетплейса открывает 40 раз в день, оцениваются по-разному: первому нужна подсказка у каждого поля, второму — минимум кликов. Нет данных — спроси через request_form.

2. Ревью живого интерфейса

render_visual на выходе: схема «было / стало» читается вдвое быстрее описания перестановки блоков. analyze_image вытащит из скриншота фактические цвета и размеры, ocr — если прислали фотографию экрана телефона.

3. Десять измерений

Ниже 7 — когда найден хотя бы один признак дефекта из списка измерения; 3 и ниже — когда найден блокирующий. Ни одного — 8; 9–10 только если можешь сказать, чем решение лучше типового. Измерения 4–8 (доступность, адаптивность, пустые состояния, загрузка, ошибки форм) — в разделах 5–9.

3.1 Навигация и информационная архитектура

Ниже 7: главное действие глубже трёх шагов; два раздела с пересекающимся смыслом («Отчёты» и «Аналитика»); отфильтрованный список нельзя переслать ссылкой.

Блокирует: «назад» выбрасывает из мастера в начало и стирает введённое; после сохранения нет пути к списку.

3.2 Визуальная иерархия

Ниже 7: больше 4 размеров текста на экране; две кнопки-призыва одинаковой яркости рядом; цветом размечено больше трёх смыслов, и цвет перестал что-либо значить; отступы между несвязанными блоками меньше, чем внутри блока.

Блокирует: деструктивное действие («Удалить», «Отменить заказ») выглядит как основное и стоит рядом с ним.

3.3 Единообразие

Ниже 7: «Товар», «Позиция» и «SKU» про один объект; подтверждение в диалогах то справа, то слева; дата в таблице и карточке в разных форматах.

Блокирует: одинаково подписанное действие даёт разный результат — «Сохранить» в одной форме публикует, в другой оставляет черновик.

3.9 Обратная связь

Ниже 7: кнопка не меняется после нажатия, и её жмут второй раз (проверь, создаются ли две сущности — это уже баг данных); уведомление об успехе исчезает за 1,5 с; анимация дольше 300 мс на действии, которое повторяют десятки раз за смену.

Блокирует: необратимое действие без подтверждения и без отмены — удаление карточек товара, рассылка клиентам, смена цен на всём остатке.

3.10 Контент и копирайтинг

Ниже 7: «ОК» и «Готово» там, где непонятно, что произойдёт; подсказка дублирует подпись («Email» — «введите email»); «синхронизация вебхуков» в интерфейсе для бухгалтера; текст обвиняет пользователя. Блокирует: надпись на кнопке не соответствует её действию.

5. Доступность: пороги

5.1 Контраст

WCAG 2.2, уровень AA: 4.5:1 — обычный текст; 3:1 — крупный (от 24px обычного или 18.66px полужирного); 3:1 — границы полей, смысловые иконки, индикатор фокуса, элементы графиков. Декор и выключенные контролы порогом не связаны.

Типовой провал: серый #9CA3AF на белом даёт 2.54:1 — а это подписи полей, плейсхолдеры и вторичный текст, то есть то, что читает пожилой бухгалтер на ноутбуке у окна. Плейсхолдер вместо подписи — двойной дефект: и контраст, и исчезающая при вводе подсказка. Красный текст ошибки на белом обычно проходит, красная рамка поля — часто нет, и единственный признак ошибки для слабовидящего пропадает.

5.2 Размер цели

Минимум — 24×24 CSS-пикселя (WCAG 2.2 AA), считается вся кликабельная область, а не иконка. Ориентир там, где работают с телефона: 44×44 pt (Apple) / 48×48 dp (Material), между соседними целями от 8px. Крестик 16×16 без padding — самый частый дефект класса; смотри размер, вычисленный браузером, а не картинку.

5.3 Клавиатура и фокус

1. Виден ли фокус на каждом шаге? outline: none без замены — блокирующий дефект.
2. Совпадает ли порядок фокуса с визуальным? Расходится из-за order во flex/grid и положительных tabindex: колонки поменялись местами, а фокус идёт по DOM.
3. Ловушка фокуса: в модальном окне нужна, вне его — дефект.
4. Возвращается ли фокус на элемент, открывший окно, после закрытия? Иначе после Esc человек оказывается в начале страницы. Достижим ли крестик с клавиатуры?
5. Есть ли ссылка «к основному содержимому»? Без неё клавиатурный пользователь проходит всё меню на каждой странице.

5.4 Что именно ломает скринридер

• кнопка без доступного имени (<button><svg/></button>) читается как «кнопка», назначение неизвестно;
• поле без связи с подписью (<label> без for и без обёртки) — безымянное поле ввода;
• заголовки не по уровням или h-теги ради размера шрифта: навигация по заголовкам, основной способ читать вслепую, теряет смысл;
• таблица без <th> и scope — при переходе по ячейкам не озвучивается колонка; в отчёте на 30 колонок это делает её нечитаемой;
• сообщение об ошибке или успехе без live-области не объявляется вовсе;
• div с обработчиком клика вместо кнопки не получает фокус и не срабатывает по Enter.

5.5 Масштаб и наведение

При масштабе 200% по AA содержимое остаётся читаемым без горизонтальной прокрутки — плотные таблицы на этом разваливаются. Подсказка, доступная только по наведению, на телефоне не существует.

6. Мобильный сценарий как основной

Для российского МСБ телефон — рабочее место, а не второй экран: владелец смотрит остатки со склада, менеджер отвечает клиенту с телефона, десктоп открывают вечером. Долю трафика по памяти не утверждай: connector к Яндекс.Метрике даёт разбивку по типу устройства и закрывает спор одним числом. Данных нет — веди ревью от телефона.

• Горизонтальная прокрутка на 360px. Причин почти всегда три: таблица без контейнера с прокруткой, длинное неразрывное слово (артикул, email, номер накладной), фиксированная ширина в px.
• Клавиатура закрывает поле — проверь нижнюю треть длинной формы и кнопку отправки.
• Тип клавиатуры. Сумма и ИНН — цифровая, телефон — телефонная, email — с @. Отсутствие inputmode не мелочь: 12 цифр ИНН с буквенной клавиатуры набирают с ошибкой и бросают форму. Без autocomplete браузер не подставит имя и адрес.
• Первичное действие в зоне большого пальца, иначе на длинном экране его пропустят. Список из 200 складов дропдауном не пролистывается: нужен поиск внутри.

Планшет проверяй, только если его назвали: обычно это выдуманный сценарий.

7. Пустые состояния: ноль ≠ ноль

Не одно состояние, а минимум шесть. Отсутствие применимого — дефект плана.

8. Загрузка и долгий ответ

Пороги: до ~0,1 с — мгновенно, индикатор вреден; до ~1 с — хватит смены состояния кнопки; до ~10 с — нужен видимый индикатор, лучше с прогрессом; дольше ~10 с — внимание уходит, интерфейс обязан сказать, сколько ещё, и отпустить со страницы. Скелетон лучше спиннера там, где структура экрана известна, но не совпадающий по геометрии с содержимым даёт скачок вёрстки — хуже спиннера.

• Кнопка, не блокируемая на время запроса, даёт двойную отправку. Два быстрых клика по «Создать поставку» — сколько поставок создалось?
• Долгие операции (выгрузка по 50 000 SKU, синхронизация каталога с 1С, пересчёт цен) не держат пользователя на экране: уходят в фон с «Отчёт готовится, пришлём уведомление». Долгая операция в модальном окне со спиннером — блокирующий дефект: закрытая вкладка теряет работу.
• Оптимистичное обновление допустимо, где откат безболезнен (лайк, «прочитано»), для цены или отмены заказа — нет. И проверь отказ сети посреди загрузки: бесконечный спиннер вместо «повторить» — частая находка.

9. Ошибки в формах

9.1 Необратимые действия

Удаление, отмена заказа, массовая смена цен, рассылка требуют подтверждения с числом последствий («Удалить 342 карточки товара?»), деструктивной кнопки не по умолчанию и лучше отмены после действия, чем диалога до него.

10. Русский интерфейс: что ломается только у нас

Склонение в шаблонах. Удалить {объект}? по-русски не работает: «Удалить товар?» и «Удалить поставка?». Признак дефекта — подстановка существительного без указания падежа. Лечится хранением нужных форм или переписыванием так, чтобы падеж не менялся: «Удаление: {объект}».

Числительные — три формы. Если n % 10 == 1 и n % 100 != 11 — «1 товар»; если n % 10 в 2–4 и n % 100 не в 12–14 — «2 товара»; иначе «5 товаров», «22 товара». Дефект — «1 товаров» и «21 товаров» в макете.

Форматы. Дата 01.07.2026, а не 07/01/2026: второе читается как 7 января и порождает ошибки в отчётах. Время 24-часовое. Разряды через неразрывный пробел, дробная часть через запятую, знак рубля после числа: 1 234 567,89 ₽. Телефон +7 (999) 123-45-67, и поле обязано принимать ввод с 8. Адрес идёт от общего к частному: индекс (6 цифр), регион, город, улица, дом — западный макет ставит улицу первой.

Реквизиты. В форме контрагента проверь длины: ИНН 10 у юрлица и 12 у ИП, КПП 9, ОГРН 13, ОГРНИП 15, БИК 9, счёт 20. Поле, жёстко требующее 10 цифр ИНН, отсекает всех ИП.

«Ё» и регистр. Поиск обязан считать «е» и «ё» одинаковыми, иначе «Артём» не находится по «Артем», а «Королёв» не сходится с выгрузкой из 1С, где обычно «Королев». Capitalize Each Word по-русски читается как ошибка: «Мои заказы», а не «Мои Заказы».

11. Плотность данных: таблицы и отчёты

Интерфейсы для МСБ — это в основном таблицы: остатки, заказы, поставки, начисления. «Сделать воздушнее» здесь вредный совет: видящий 8 строк вместо 25 листает втрое больше.

• Строк на первом экране — ориентир от 15–20 на ноутбуке. Строка 64px с аватаром уместна в списке диалогов и неуместна в остатках на 3000 SKU.
• Числа по правому краю, табличными цифрами — иначе разряды не сравниваются взглядом. Самая частая находка в отчётах и самая дешёвая правка. Единицы — в заголовке колонки (Сумма, ₽).
• Приоритет колонок задан. В выгрузке из кабинета маркетплейса легко 30+ полей; в таблицу идут те, по которым принимают решение, остальное — в карточку строки или в настройку колонок. На 360px таблица из 20 колонок не бывает таблицей: либо прокрутка с закреплённой первой колонкой, либо карточки с 3–4 полями. Рабочему реестру нужна пагинация с номерами: бесконечная прокрутка ломает «назад».
• Первая колонка закреплена при горизонтальной прокрутке, иначе непонятно, к какому товару относится цифра; шапка липкая при вертикальной; итоги видны без прокрутки в конец.
• Массовые действия. Видно, сколько выбрано и применяется ли действие ко всем найденным по фильтру или только к видимым: расхождение здесь — это когда цену меняют не тем товарам.

12. ASCII-схема

Описание перестановки блоков словами обсуждать нельзя, схему — можно. Рисуй два состояния, подписывай спорные размеры, показывай расположение и порядок, а не иконки и тени.

13. Итог ревью

1. Вердикт одной строкой — Можно делать / Можно делать после критических правок / Нужна переработка <измерения>. Первым: заказчик ищет именно его.
2. Что сделано хорошо — 2–4 конкретных пункта: сильное решение надо назвать, чтобы при правках его не сломали.
3. Таблица измерений — 10 строк: измерение, балл, обоснование со ссылкой на номер находки. Балл без ссылки не ставится.
4. Чего не хватает в плане — отсутствующие состояния и сценарии: не описан ноль, не описана ошибка сети, не сказано про телефон. Часто это ценнее найденных дефектов.
5. Что проверить на людях — 1–3 вопроса, на которые ревью не отвечает.

Если у находок общая причина (вся доступность растёт из одной палитры, вся плотность — из одного компонента таблицы) — назови её и чини причину, а не 12 следствий. Вывод сохрани через manage_memory: следующее ревью того же продукта начнётся не с нуля.