- Что такое дизайн UI/UX
- Важность UI/UX
- Что такое юзабилити
- Что такое юзабилити-тестирование
- Что такое тестирование UI/UX
- Почему тестирование UI/UX очень важно
- На что обращают внимание в первую очередь
- Как эффективно тестировать юзабилити
- Чеклист тестирования UX
- Чеклист тестирования UI
- Инструменты
- Автоматизация
- Сколько пользователей нужно?
- Советы
Что такое дизайн UI/UX
Дизайн UI (пользовательского интерфейса) — разработка вида/дизайна программного продукта; каждый экран, кнопка, страница, и все прочие визуальные компоненты, видимые на экране приложения/странице.
Дизайн UX (User Experience) — стратегия улучшения впечатлений пользователей посетителей от взаимодействия с продуктом.
Важность UI/UX
Приятный и удобный вид приложения/сайта и позитивные впечатления пользователей — генератор прибыли в бизнесе и средство привлечения новых пользователей.
Что такое юзабилити
Юзабилити — это общая комфортабельность продукта, с точки зрения пользователя. Просто ли освоить продукт, научиться работать с ним? Как быстро пользователь/клиент получает то что ему нужно? Есть ли в приложении или на странице что-то, что его раздражает? Проще говоря, юзабилити — это «точка соединения» UI+UX.
Что такое юзабилити-тестирование
Одна из методик проверки функциональности продукта, путем наблюдения за реальными пользователями во время их взаимодействия с продуктом. Цель юзабилити-тестирования: определить проблемные области и возможности улучшения пользовательских впечатлений.
Что такое тестирование UI/UX
Это тестирование пользовательского интерфейса и пользовательских впечатлений в программных продуктах.
Тестирование UI это проверка пользовательского интерфейса, а именно: кнопок, полей ввода, меню и прочих элементов на странице/экране, работают ли они как прописано в требованиях к продукту. Проверяются все составляющие UI: меню, цвета, шрифты, размеры и пропорции, кнопки, иконки, и прочие элементы. Оценивается, как они отвечают на действия пользователя — это ключевой компонент тестирования пользовательского интерфейса.
Тестирование UX оценивает, как продукт влияет на общее впечатление пользователя (то есть User Experience). Тестирование UX — это о комфорте пользователя. Такое тестирование включает все аспекты UX, от разметки и дизайна интерфейса до тонкостей подачи контента. Оно определяет проблемы с комфортабельностью, например меню, неудобные для навигации, некорректная или просроченная информация, или медленно реагирующие кнопки.
Почему тестирование UI/UX крайне важно
Любая проблема с комфортабельностью продукта приводит к тому, что по крайней мере часть пользователей отказывается от продукта. Это может быть даже небольшая проблема, например некорректная отрисовка какой-то не очень важной кнопки, или слишком мелкий шрифт.
Позитивное впечатление пользователей — это то что привлекает пользователей и удерживает их.
Хорошей практикой является проводить тестирование UI/UX на ранних этапах процесса жизненного цикла разработки. Это позволяет вовремя определить любые проблемы с юзабельностью и устранить их до релиза, экономить время и усилия, поскольку устранение багов на поздних этапах цикла обходится намного дороже, и приносит больше проблем.
На что обращают внимание в первую очередь
Доступность
Продукт должен быть доступен большому количеству потенциальных пользователей, в том числе пользователям с ограниченными возможностями, они должны быть иметь возможность пользоваться продуктом, так же легко как средний пользователь. Но доступность — это не только о людях с ограниченными возможностями: например у занятого дорогой водителя, который пользуется навигационным приложением, возможности тоже ограничены. Продуктом должны иметь возможность пользоваться люди с разным бэкграундом, разного происхождения, говорящие на разных языках. Сюда входит и отдельная версия приложения/сайта для мобильных устройств.
Легкость восприятия
Чтобы быть доступным для восприятия, контент в продукте должен быть доступен пользователям через привычные им способы, которыми они обычно пользуются. Все части интерфейса должны быть понятны, а также иметь некие альтернативные варианты. Например, на случай если из-за низкой скорости интернета изображение не загружается, оно должно иметь alt-текст и/или поясняющую подпись.
Скорость и производительность
Нужно контролировать скорость загрузки страниц и контента, особенно что касается больших изображений. Распространенной проблемой является контент с изображениями и иллюстрациями, которые подгружаются с большой задержкой. Следует убедиться, что контент загружается быстро и равномерно.
Понятный интерфейс
Контент на странице/экране должен быть удобочитаемым, особенно что касается шрифтов и цветовых сочетаний. Правильный интерфейс — интуитивно-понятный, тогда пользователи не делают ошибок.
Удобство навигации
Навигация в продукте является одним из топ-факторов привлечения пользователей, удержания их и пропуск через воронку конверсии. Навигация обязана быть простой, легкой, интуитивной, чтобы пользователи не думали ни о чем другом кроме своих задач. Плохая навигация приносит ощутимый вред: она раздражает, сбивает с толку пользователей и побуждает их выйти из приложения или закрыть страницу. Если они не нашли того что искали из-за сложной навигации, то конверсии , то есть превращения интереса в прибыль — не будет.
Плавность
Хороший сайт или приложение работает плавно, не «дергаясь» и не зависая, на любом устройстве. Продукт должен комфортно для пользователя реагировать на его действия, независимо от платформы, размеров и ориентации экрана. Добиться этого бывает сложно, большинство сайтов по умолчанию «заточены» под экран монитора, а не смартфон.
Также юзабилити-тестирование контролирует:
- Целостность, последовательность и логичность контента
- Совместимость
- Легкость освоения/обучения работе с продуктом
- Надежность, точность и практичность контента и навигации
Как эффективно тестировать юзабилити
1. Определить, что будет тестироваться
Описать свои цели четко, это поможет в дальнейшем оценить успешность тестирования, анализировать результаты.
2. Знать своих пользователей/клиентов
Нужно хорошо изучить конечного пользователя, будь то бизнес-клиенты или обычные массовые потребители, мужчины, женщины или дети, подростки или люди старшей возрастной группы. Это нужно всегда четко понимать, не только чтобы сделать для них UI/UX по лучшим образцам, но также чтобы потом подобрать среди них «волонтеров» для юзабилити-тестирования.
3. Выбрать методы
Существует множество методологий, среди которых можно подобрать подходящую по ситуации и по бюджету.
Например, можно сэкономить деньги и время, применяя немодерированное юзабилити-тестирование, или стремиться к как можно большему покрытию с точки зрения количества и качества результатов, применяя модерированное тестирование.
Модерированное юзабилити-тестирование
Сессия выполняется в присутствии тестировщика, или удалённо. Тестировщик представляет тест участникам, отвечает на их вопросы, и задает уточняющие вопросы. Нужно подобрать время, удобное обеим сторонам, локацию, и методику отслеживания и анализа ответов/результатов. Такие тесты удобнее выполнять в специализированных помещениях (лабораториях), что дает прекрасные результаты, но они могут быть довольно дорогими в подготовке и проведении.
Немодерированное тестирование
Без прямого контроля, участники выполняют свои тестовые задачи в собственном окружении, используя собственные устройства, без личного присутствия модератора. Это быстрый, достаточно эффективный, и главное экономичный способ получить результаты по юзабилити.
Удаленное тестирование
Быстрые и надежные результаты, с экономией средств, почти всегда проводится по видеоконференции. Тесты такого типа полезны тем что дают фидбек от большого количества реальных пользователей.
«Герилья»
Проводится в публичных местах, например кофешопах или парках. Такое тестирование позволяет быстро оценить продукты. Конечная цель: не «обозначить присутствие», то есть не рекламная, не улучшить узнаваемость/продажи бренда, а для прототипирования, то есть для проверки, как прототип приложения работает с реальными пользователями.
Интервью по телефону
Модератор инструктирует участников по задачам, которые они должны выполнить на своем компьютере/смартфоне, и потом получает фидбек, анализируя особенности пользовательского поведения. Телефонное интервью — достаточно экономичный способ получить фидбек в большой географической области. Телефонное интервью дешевле чем личная встреча, и позволяет собрать больше данных за короткий период.
Также могут быть дополнительные методы тестирования:
- Лабораторное тестирование
- Запрос по контесту
- Немодерированное удаленное тестирование
- Оценка экспертами по юзабилити
- Сравнительное тестирование (сравнение с конкурентами в нише)
- Исследовательское тестирование
- «Сортировка карт» — специфический тип тестирования юзабилити, при котором эксперты/пользователи сами пытаются сформировать лучший дизайн, с их точки зрения, из готовых карточек-блоков
- Трее-тестирование, в дополнение к предыдущему, для формирования удобной структуры меню
- Социологические опросы
- Запись пользовательских сеансов тестирования
4. Запись сценариев
Убедитесь, что выбрали лучший метод для фиксации своих наблюдений, чтобы получить реальные впечатления пользователей. Их потребности, поведение в приложении / на сайте, их цели при работе с приложением, и разочарования, если таковые случатся.
5. Анализ результатов и коррекция UI/UX
В конце процесса, если все сделано правильно, будет получен набор ценных данных от пользователей — фидбек. Это поможет прояснить цели, оценить успешность приложения, и исправить некоторые вещи.
Чек-лист тестирования UX
- Навигационные элементы везде, как в основном модуле (странице) так и в дополнительных (вложенных)
- Кликабельность кнопок наверху и в «подвале»
- «Продающие» CTA-элементы
- Редиректы и все ссылки
- Производительность и плавность
- Является ли приложение mobile-friendly, приспособленным к экрану смартфона
- Является ли контент читабельным и четким
- Все кликабельные элементы
- Проверить сообщения об ошибках / успешном выполнении операций
- Не допускать «нагромождения» элементов
Чек-лист тестирования UI
Чтобы проверить плавность взаимодействия пользователя с интерфейсом, предполагается чек-лист UI-тестирования:
- Элементы интерфейса — позиционирование, размер, длина и ширина всех UI-элементов
- Шрифты — размеры, интервалы и гарнитуры
- Иконки и цвета, их сочетания
- Поля пользовательского ввода
- Ввод в поля цифр, текста, специальных и невалидных символов
- Поведение UI-элементов на экранах разного размера
- Скроллинг (особенно в таблицах)
- Прогресс-бары
- Самые Главные Кнопки (Сохранить, Изменить, Удалить, Расшарить и т.п.)
- Выпадающие меню
- Предупреждения
- Шорткаты и элементы меню
Инструменты
Часто применяемые инструменты юзабилити-тестирования:
GTmetrix
Создание финальных отчетов по страницам, рекомендации по устранению проблем
Lool11
Мощная платформа пользовательского тестирования. Модерируемые и немодерируемые тесты на отдельных фреймворках
Optimizely
Задание условий, при которых растет прибыль, регистрации, загрузки, и потребление контента
Crazy Egg, Hotjar
Хитмапы, как пользователи работают с приложением
Ссылка на CrazyEgg, вот на Hotjar
BrowserShots
Инструмент семейства BrowserStack. Скриншоты сайта в разных браузерах и ОС, через онлайн-сервис
Maze
Инструмент прототипного тестирования UI/UX. Интеграция с инструментами дизайна типа Figma и Adobe XD
Zurb
Оценка, нравится ли пользователям дизайн сайта, что запомнилось
UXPunk
Позволяет построить иерархию контента на сайте, самые важные страницы (полезен, но не всегда доступен)
Автоматизация UI/UX
Тесты функциональности и производительности можно автоматизировать (почти) полностью, имитируя поведение пользователя, контролируя технические данные из автотестов. Тестирование юзабилити, как UI, так и UX, зависит от поведения пользователя, то есть от субъективных факторов. Нужно пронаблюдать за тем как люди взаимодействуют с программой, как они реагируют на какие-то вещи, поэтому автоматизировать юзабилити можно лишь частично.
Например, можно автоматизировать ввод данных и анализ, пользуясь платформами для UX-тестирования и вспомогательными инструментами, получая более-менее надежные данные из приложений типа Hotjar или UserReport. Однако нельзя наблюдать в реальном времени за поведением реальных пользователей в любом из перечисленных инструментов. Поэтому в юзабилити принято ручное тестирование.
Сколько пользователей нужно?
Некоторые научные исследования говорят, что всего 5 пользователей достаточно, чтобы определить 80% проблем с юзабилити. Для небольших проектов этого достаточно; в зависимости от продукта, это число может быть больше на порядки.
Советы
- Тестировать раньше в жизненном цикле, чтобы получить результаты раньше
- Позаботьтесь, чтобы направленность приложения была яснее пользователям
- Задавайте пользователем вопросы, предполагающие подробные ответы. Начинайте с простых, завершайте сложными
- Опирайтесь на пользователей, которые дают ясные четкие ответы
- Внимательно наблюдайте за поведением и внимательно слушайте
- Не пытайтесь решить все сразу, сначала устраняйте самые важные проблемы
- Включайте в процесс всю команду, разные точки зрения и разный бекграунд поможет лучше понять проблемы
- Просите участников размышлять вслух в процессе тестирования
