Чек-лист · 01
BusinessPad · заметки дизайнера

Чек-лист дизайнера

Проверить интерфейс на три канала восприятия — визуал, аудиал, кинестетик. Перед каждым дизайн-ревью или передачей макета в разработку.
Кому пригодится
Дизайнерам Продактам UX-ревьюверам

— всем, кто проектирует или ревьюит интерфейсы и хочет проверить макет не своим глазом, а тремя разными.

Инструкция

Один проход — один экран. ~15 минут после привычки. Помечайте всё, что не прошло, чтобы вернуться к этому в следующей итерации.

0 / 46 отмечено
I

Что увидит визуал

Визуал считывает экран как картину за полсекунды. Его глаз ищет точку фокуса, иерархию, ритм.

На экране есть одна самая яркая точка, и это primary action — не «Отменить», не декоративный тег.
Акцентный цвет занимает не больше ~10% площади экрана (правило 60-30-10).
Контраст обычного текста к фону не ниже 4.5:1, крупного — не ниже 3:1.
Между заголовком, подзаголовком и основным текстом есть видимая разница веса — минимум три уровня иерархии.
Связанные элементы заключены в один контейнер или общую область — карточка, разделитель, общий фон.
Между группами элементов отступ больше, чем между элементами внутри группы — минимум в два раза.
Одинаковые сущности на одном экране выглядят одинаково — две кнопки одного назначения в одном стиле.
Активное состояние явно отличается от неактивного по цвету или весу.
Disabled-состояние явно отличается от outlined-кнопки — частая путаница.
Выбранная строка таблицы или узел на канве подсвечены всей зоной, а не только точкой-маркером.
Если открыта панель деталей — между ней и выбранным объектом есть видимая визуальная связь: общий цвет, линия, общая зона.
Иконки одного семейства и одинаковой толщины линий — не смешаны filled и outline в одной строке.
Цвет не единственный носитель информации — статус показан также формой, иконкой или подписью (для 8% мужчин-дальтоников).
II

Что прочитает аудиал

Аудиал читает интерфейс построчно, иногда внутренним голосом. Качество интерфейса для него измеряется тем, звучит ли он связно.

Прочитайте весь экран вслух от начала до конца. Звучит ли связно? Нет ли мест, где спотыкаешься?
Подпись каждого поля согласована с подсказкой внутри — «Описание / Введите описание», а не «Описание / Введите название».
Нет двух подряд похожих заголовков на одном экране — «Библиотека переменных» сразу над «Список переменных» — это эхо.
Все аббревиатуры либо общеизвестны (CRM, ERP, URL), либо расшифрованы при первом упоминании.
Все кнопки названы глаголом результата: «Сохранить переменную», а не «OK»; «Удалить процесс», а не «Подтвердить».
Подсказка под полем не противоречит значению поля — если в поле «1», подсказка не должна говорить «минимум 100».
Текст ошибки объясняет, что делать, а не просто «Произошла ошибка».
Подтверждения после действий явные и словесные: «Сохранено», «Отправлено», «Удалено».
В таблицах нет прочерков «-» как заглушки — либо пустая ячейка, либо текст «Не указано» серым.
Числа имеют контекст: не «3», а «3 переменные»; не «5», а «5 из 12».
Tooltip есть у каждой иконки без подписи.
Состояние процесса выражено словом, не только цветом: «Опубликован», «Черновик», «Архивирован».
Голос продукта одинаковый по тональности — везде «Вы» или везде «ты», без переключений.
III

Что потрогает кинестетик

Кинестетик чувствует интерфейс «руками»: размеры целей, отклик, физика. Важно — можно ли уверенно попасть в нужный элемент и получить осязаемое подтверждение.

Все зоны касания не меньше 24×24 пикселя, критичные действия (Сохранить, Удалить) — ближе к 44×44.
Опасное действие (Удалить) и безопасное (Сохранить) разнесены пространственно — нельзя задеть случайно.
В радиокнопках и чекбоксах вся строка с подписью кликабельна, не только сам кружок или квадрат.
Поля ввода имеют видимую рамку или явный признак «сюда можно ввести» — не просто текст на фоне.
Состояние фокуса заметно для всех интерактивных элементов — важно для клавиатурной и Tab-навигации.
Hover-состояние есть на каждом кликабельном элементе и явно отличается от обычного.
Каждый клик получает видимый отклик в течение 100 мс — анимация нажатия, изменение цвета, загрузчик.
Disabled-кнопка объясняет причину блокировки в tooltip при наведении — не молчит.
Длинные операции (>1 секунды) показывают прогресс или индикатор загрузки.
После сохранения — явное подтверждение: всплывающее сообщение, галочка, изменение состояния — не тишина.
Модальное окно закрывается тремя способами: крестик, Esc, клик по затемнённому фону.
Прокрутка ведёт себя предсказуемо: не возвращает в начало при возврате на страницу, не дёргается при подгрузке.
На трекпаде ноутбука (не на мыши!) можно уверенно попасть в каждую кликабельную область с первого раза.
IV

Универсальные — все три канала

Эти вопросы бьют сразу по трём каналам. Если хотя бы на один «нет» — экран теряет одну из трёх аудиторий.

У экрана есть один главный глагол. Сформулируйте его одним словом. Если получилось два — экран делает слишком много, разделите.
Главное действие предсказуемо до клика: пользователь знает, что произойдёт, не нажимая.
Возврат назад очевиден и единственен — не три кнопки «закрыть / назад / отмена» одновременно.
Состояние системы видно: где я нахожусь, что только что произошло, что будет дальше.
Ошибки показываются рядом с источником, а не в общем баннере наверху.
Пустое состояние не пустое формально, а подсказывает действие: не «Список пуст», а «Нет переменных — добавьте первую».
Тест на новом пользователе: покажите макет коллеге и засеките, за сколько секунд он найдёт главное действие. Норма — 3 секунды для простого экрана, до 10 для сложного.
Как читать результаты

Один проход — один макет. Посмотрите, где сконцентрированы пропуски.

0–2
Точечный долг
1–2 пропуска по разным каналам. Чинится правками на ближайший спринт без пересмотра структуры.
3+
Системная проблема канала
Три и более пропуска в одном блоке — это не косметика. Нужна процессная правка: например, редактор текстов для аудиала.
∅
Можно отдавать в разработку
Все пройдены. Это не «отлично» — это минимум. Хороший дизайн начинается после того, как чек-лист пройден.
Чек-лист 01 / 02 · v 1.0