Что такое тестирование юзабилити?
Тестирование юзабилити оценивает, насколько легко и интуитивно понятно использовать продукт, наблюдая за реальными пользователями при выполнении задач. В отличие от функционального тестирования (которое спрашивает «работает ли это?»), тестирование юзабилити спрашивает «могут ли реальные люди разобраться, как это использовать?»
Функция, идеально работающая с технической точки зрения, может быть катастрофой, если пользователи не могут её найти, не понимают или постоянно совершают ошибки. Тестирование юзабилити выявляет эти проблемы до выхода в продакшн.
Как QA-инженер, вы, возможно, не проектируете UX, но часто являетесь последней линией обороны перед встречей пользователей с продуктом. Понимание принципов юзабилити делает вас гораздо более эффективным тестировщиком.
10 эвристик юзабилити Нильсена
10 эвристик Якоба Нильсена — основа оценки юзабилити. Опубликованные в 1994 году, они остаются золотым стандартом.
1. Видимость состояния системы
Система должна информировать пользователей о происходящем через соответствующую обратную связь в разумное время.
Примеры: Спиннеры загрузки, индикаторы прогресса, подтверждения «Заказ оформлен», индикаторы «Сохранение…».
Что тестировать: Предоставляет ли система обратную связь после каждого действия? Видны ли состояния загрузки?
2. Соответствие системы и реального мира
Система должна говорить на языке пользователя, используя знакомые слова и концепции вместо технического жаргона.
Примеры: «Корзина покупок» вместо «Очередь элементов», календарные выборщики дат вместо требования формата ГГГГ-ММ-ДД.
3. Свобода и контроль пользователя
Пользователи часто совершают действия по ошибке. Им нужен чётко обозначенный «аварийный выход» для отмены нежелательного состояния.
Примеры: Отмена/повтор, кнопки «Отмена», навигация «Назад», диалоги подтверждения для деструктивных действий.
4. Согласованность и стандарты
Пользователям не нужно задаваться вопросом, означают ли разные слова, ситуации или действия одно и то же. Следуйте соглашениям платформы.
5. Предотвращение ошибок
Лучше хороших сообщений об ошибках — тщательный дизайн, предотвращающий их появление.
Примеры: Блокировка кнопки «Отправить» до заполнения всех обязательных полей, выборщики дат, запрещающие выбор невалидных дат.
6. Распознавание вместо припоминания
Минимизируйте нагрузку на память, делая объекты, действия и варианты видимыми. Пользователь не должен запоминать информацию из одной части диалога для другой.
7. Гибкость и эффективность использования
Ускорители — невидимые для новичка — могут ускорить взаимодействие для опытных пользователей. Система должна обслуживать и новичков, и экспертов.
8. Эстетичный и минималистичный дизайн
Диалоги не должны содержать нерелевантную или редко нужную информацию. Каждая лишняя единица информации конкурирует с релевантной.
9. Помощь в распознавании, диагностике и исправлении ошибок
Сообщения об ошибках должны выражаться простым языком, точно указывать проблему и конструктивно предлагать решение.
10. Справка и документация
Даже если система может использоваться без документации, может потребоваться помощь. Информация должна быть легко находимой и сфокусированной на задаче пользователя.
Методы тестирования юзабилити
Модерируемое тестирование
Фасилитатор направляет участников через задачи, наблюдая и задавая уточняющие вопросы.
Лучше для: Выяснения «почему» за проблемами юзабилити, тестирования сложных сценариев, получения качественных инсайтов.
Немодерируемое удалённое тестирование
Участники выполняют задачи самостоятельно на платформе, записывающей экран и голос.
Лучше для: Тестирования с большим числом участников (20-100+), географического разнообразия, быстрых результатов.
Инструменты: Maze, UserTesting, Lookback, UsabilityHub.
A/B-тестирование
Сравнение двух версий дизайна путём показа каждой разной группе пользователей и измерения, какая работает лучше.
Карточная сортировка (Card Sorting)
Участники организуют темы в категории, имеющие для них смысл, показывая ожидаемую структуру информации.
Тестирование дерева (Tree Testing)
Обратное карточной сортировке — дайте пользователям задачу и посмотрите, найдут ли они её в предложенной структуре навигации.
Метрики юзабилити
| Метрика | Что измеряет | Как собирать |
|---|---|---|
| Процент успешного выполнения | % участников, успешно выполнивших задачу | Наблюдение при тестировании |
| Время на задачу | Сколько времени занимает выполнение задачи | Таймер при тестировании |
| Частота ошибок | Количество ошибок на задачу | Наблюдение и подсчёт |
| Оценка SUS | Общая воспринимаемая юзабилити (0-100) | Опрос из 10 вопросов после теста |
| NPS | Вероятность рекомендации (0-10) | Один вопрос после теста |
Шкала юзабилити системы (SUS)
SUS — опрос из 10 вопросов с оценкой от 0 до 100. Это наиболее используемый стандартизированный опросник юзабилити.
Интерпретация оценок:
- 80-100: Отлично
- 68-79: Хорошо (выше среднего)
- 50-67: Нормально (есть место для улучшения)
- Ниже 50: Плохо (значительные проблемы)
Инструменты для тестирования юзабилити
| Инструмент | Тип | Лучше для |
|---|---|---|
| Maze | Удалённое немодерируемое | Быстрое тестирование прототипов |
| UserTesting | Модерируемое + немодерируемое | Комплексные исследования |
| Hotjar | Тепловые карты + записи | Понимание поведения на живых сайтах |
| Optimal Workshop | Card sorting + tree testing | Информационная архитектура |
| Figma | Тестирование прототипов | Тестирование дизайнов до разработки |
Упражнение: Эвристическая оценка веб-сайта
Проведите эвристическую оценку веб-сайта (выберите любой публичный сайт или используйте проект, над которым работаете).
Задание
Оцените сайт по всем 10 эвристикам Нильсена. Для каждой эвристики задокументируйте:
- Конкретный пример, где сайт хорошо следует эвристике
- Конкретный пример нарушения (если применимо)
- Оценку серьёзности (1=косметический, 2=незначительный, 3=серьёзный, 4=критический)
- Рекомендацию по улучшению
Подсказка: Шаблон оценки
Используйте формат для каждой эвристики:
| # | Эвристика | Хороший пример | Нарушение | Серьёзность | Рекомендация |
|---|---|---|---|---|---|
| 1 | Видимость состояния | … | … | 1-4 | … |
Сфокусируйтесь на реальных сценариях: оформление покупки, регистрация, поиск, восстановление после ошибки.
Решение: Пример оценки интернет-магазина
| # | Эвристика | Хороший пример | Нарушение | Серьёзность | Рекомендация |
|---|---|---|---|---|---|
| 1 | Видимость состояния | Индикатор прогресса в checkout показывает шаг 2/4 | Нет обратной связи при нажатии «В корзину» — пользователи кликают несколько раз | 3 | Добавить визуальное подтверждение (toast-уведомление или анимация иконки корзины) |
| 2 | Соответствие реальному миру | Категории используют привычные термины (Обувь, Электроника) | Опция доставки «Экспедированный фулфилмент» вместо «Быстрая доставка» | 2 | Использовать понятный язык: «Быстрая доставка (2-3 дня)» |
| 3 | Контроль и свобода | Кнопка «Продолжить покупки» на странице корзины | Нет отмены после удаления товара из корзины | 3 | Добавить опцию «Отменить» на 10 секунд после удаления |
| 4 | Согласованность | Все основные кнопки синие, вторичные серые | «Купить сейчас» зелёная на страницах товаров, но синяя в корзине | 2 | Стандартизировать цвета CTA-кнопок |
| 5 | Предотвращение ошибок | Выборщик дат блокирует выбор прошедших дат | Поле email принимает «test@test» без валидации | 3 | Добавить валидацию формата email в реальном времени |
| 6 | Распознавание | Недавно просмотренные товары на главной | Checkout требует повторного ввода адреса для авторизованных пользователей | 3 | Автозаполнение сохранённых адресов |
| 7 | Гибкость | Горячая клавиша (/) для поиска | Нет возможности повторить предыдущий заказ | 2 | Добавить «Купить снова» в историю заказов |
| 8 | Минимализм | Чистые страницы товаров | Главная страница с 3 баннерами, 4 промо-секциями и попапом | 2 | Сократить до одного hero-баннера и одной выделенной секции |
| 9 | Сообщения об ошибках | «Этот email уже зарегистрирован. Войти?» — полезно | «Оплата не прошла» без объяснения и повторной попытки | 4 | Показать конкретную причину и предложить повтор |
| 10 | Справка | FAQ покрывает частые вопросы о доставке | Нет контекстной помощи при оформлении (напр., «Что такое CVV?») | 2 | Добавить тултипы рядом с полями формы |
Итого: 2 критических проблемы, 3 серьёзных, 3 незначительных и 2 косметических. Приоритет: исправить сообщение об ошибке оплаты и обратную связь при добавлении в корзину.
Профессиональные советы
- 5 пользователей находят 85% проблем: Исследования Нильсена показывают, что тестирование с 5 пользователями выявляет примерно 85% проблем юзабилити.
- Протокол «думай вслух»: Просите участников озвучивать мысли при выполнении задач. Это раскрывает мыслительные процессы, которые невозможно наблюдать визуально.
- Тестируйте рано с прототипами: Не нужен работающий продукт для тестирования юзабилити. Бумажные прототипы и макеты в Figma выявляют серьёзные проблемы до написания кода.
- QA как защитник юзабилити: Как QA-инженер, вы взаимодействуете с продуктом больше всех. Документируйте проблемы юзабилити, найденные при функциональном тестировании.
- Конкурентный бенчмаркинг: Проводите эвристические оценки продуктов конкурентов для выявления паттернов юзабилити, которые пользователи уже ожидают.