Юзабилити-тесты, доступность и передача в разработку

Юзабилити-тест

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

Как провести:

1. Подготовьте задания — реальные ситуации, а не инструкции. Не «нажмите “Повторить заказ”», а «Вы хотите взять тот же кофе, что вчера. Закажите его».
2. Найдите участников, похожих на ваших пользователей: для «Зерна» — тех, кто покупает кофе навынос.
3. Попросите думать вслух: «Рассказывайте, что видите, что ищете, что ожидаете».
4. Не помогайте. Самое трудное правило. Если человек застрял, спросите: «Что вы ищете? Где ожидали это найти?» Каждая подсказка прячет проблему.
5. Записывайте: где человек споткнулся, что сказал, справился ли.

Обычно хватает 5 участников: после этого проблемы начинают повторяться. Выгоднее провести несколько маленьких раундов: протестировали, исправили, снова протестировали.

После теста проблемы сортируют по важности: «не смог заказать» — критично, «не сразу заметил кнопку» — средне, «не понравился цвет» — мелочь.

Доступность

Доступный интерфейс удобен людям с разными возможностями: слабым зрением, дальтонизмом, тремором рук, а также тем, кто пользуется экранным диктором. И заодно — всем остальным: на солнце, одной рукой, в спешке.

Основы:

• контраст текста не ниже 4,5:1 — урок 5;
• размер области касания не меньше 44–48 точек;
• не только цвет: ошибка — красной рамкой и текстом, обязательное поле — звёздочкой и подписью;
• подписи у полей видны всегда, а не исчезают при вводе, как подсказка внутри поля;
• понятные тексты кнопок: «Оплатить 220 ₽» вместо «ОК»;
• увеличение шрифта в настройках телефона не ломает макет.

Передача в разработку

Макет — это задание для разработчиков. Чем он полнее, тем ближе результат к задуманному. Разработчики открывают файл в режиме Dev Mode или просмотра Figma и видят размеры, отступы, цвета и стили текста.

Что передать кроме основных экранов:

• все состояния: загрузка, пусто, ошибка, неактивные кнопки, ошибки в полях;
• крайние случаи: очень длинное название напитка, 0 и 99 позиций в корзине, нет фото;
• поведение: что происходит при нажатии, свайпе, прокрутке; какие анимации;
• адаптивность: как экран выглядит на узком и широком телефоне;
• ресурсы: иконки и картинки, отмеченные для экспорта.

Хорошая практика — обсудить макет с разработчиками до начала работы. Они подскажут, что сделать сложно и дорого, а что можно проще.