Подход к тестированию UX/UI. Взгляд тестировщика

Есть множество публикаций о UI/UX-дизайне и о том, как исследовать поведение пользователей для применения этих данных в продукте. Однако гораздо меньше внимания уделяется тестированию таких решений. Меня зовут Полина Саубанова, я тест-менеджер направления «Ручное тестирование» в IBS. В этой статье предлагаю рассмотреть UI/UX с точки зрения тестировщика и поделиться полезными инструментами.

UI (от англ. user interface, «пользовательский интерфейс») — это создание визуальной части приложения или сайта: экранов, кнопок, иконок и других способов взаимодействия пользователя с сайтом, приложением или иным ИТ-сервисом.

Понятие UX (от англ. user experience, «пользовательский опыт») включает в себя навигацию по сайту или приложению, состав функций внутри цифрового продукта, понятный текст.

Проще говоря, UI отвечает за внешний вид, а UX — за непосредственное взаимодействие пользователя с ресурсом. Однако это две тесно взаимосвязанные области дизайна веб-приложений, которые не могут существовать отдельно друг от друга.

Самый популярный и полезный инструмент для тестирования UI — DevTools, она же консоль разработчика (F12). А точнее, раздел Elements, который включает в себя всю необходимую информацию по разметке страницы, размеру текста и цвету элементов.

Разберем подробнее на примере стартовой страницы всем известного Google. В режиме Toggle device toolbar можно навести курсор на любой элемент, чтобы узнать информацию о нем. А если кликнуть по элементу, откроется подробная информация: размеры иконки, отступы, текст, его расположение, используемые цвета и многое другое. С этой информацией уже можно работать и сравнивать с тем, что заложено в дизайне для текущей страницы, находить расхождения по отступам или даже по стилю текста.

Кроме того, этот инструмент позволяет работает с разными размерами экранов. Достаточно в том же режиме выбрать название желаемого девайса в Dimensions: Responsive или задать высоту и ширину экрана вручную.

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

Если нужно протестировать мобильное приложение, то DevTools тут уже не поможет, но есть специальные приложения для мобильных устройств, а также их эмуляторы. Один из них — Android Studio.

Этот инструмент позволяет эмулировать, то есть воссоздавать, разные виды мобильных устройств, «накатывать» на них нужные операционные системы и устанавливать сборки тестируемых приложений. Такое устройство имеет практически все те же возможности, что и обычное.

В числе самых популярных функций можно назвать:

Возможности этого инструмента такие же, как у консоли разработчика, в части сбора логов и тестирования разметки и даже больше.

Задача дизайнера — создать структуру приложения, которая будет понятна пользователю и поможет ему достичь цели, а задача тестировщика — убедиться, что это действительно так.

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

Такой метод хорошо подсвечивает точки роста, поскольку сразу видно, что потребовалось для прохождения задуманного сценария, что помешало, а что было неочевидно. Этот подход похож на A/B-тестирование на этапе разработки дизайна, но дополняется тем, что тестировщик также учитывает техническую сторону процесса.

«Дерево состояний», еще его называют «Дерево решений», — это схема, где показаны возможные последствия серии связанных решений. В ней видно, какие действия может предпринять пользователь, находясь в определенном состоянии, на конкретном этапе бизнес-процесса.

Чаще всего «Дерево состояний» строится на основе документации, но для проверки UX его нужно сначала создать по реальному продукту, а потом сравнить с указанными требованиями.

Все начинается со стартовой страницы, а затем идут ответвления в зависимости от количества возможных сценариев. При выявлении расхождений необходимо проанализировать, почему тот или иной путь не был обнаружен. Возможно, причина в плохо проработанном сценарии перехода. Здесь же проявятся и некорректные экраны переходов.

Способ хорошо работает совместно с исследовательским тестированием и позволяет обнаруживать не только недоработанные бизнес-процессы в призме дизайна, но и ошибки при его реализации.

С UX нужно работать как на этапе создания продукта, так и после вывода его в промышленную среду. А отслеживание посещаемости и активности должно быть одной из приоритетных задач бизнеса, чтобы улучшать продукт.

Тут на помощь приходит продуктовая аналитика, которая исследует, как человек реагирует на предложение компании. Ее задача — найти слабые места и понять, где можно улучшить сервис и качество, чтобы в конечном итоге повысить продажи, на что рассчитан любой продукт.

Разберем ее на примере такого инструмента, как Яндекс.Метрика, который работает с веб-решениями.

Для сбора статистики сначала в приложении необходимо расставить уникальные метки на все кнопки и экраны, чтобы при каждом показе конкретного экрана и при каждом клике информация трекалась и отправлялась в метрику. Таким образом можно будет отследить путь пользователя от начала до конца.

Если техническая история реализована, то дальнейшая работа будет проходить уже в самом сервисе. Для тестирования UX лучше всего использовать отчеты по пользователям. После настройки фильтров по нужным действиям будут показаны все пользователи, обратившиеся к тому или иному сервису. Так можно фильтровать по датам, адресам или тем же меткам.

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

С результатами таких исследований работают специалисты отдела продуктовой аналитики. Задача тестирования на этом этапе — только убедиться, что все клики доходят до статистики и не пропускается ни одно состояние.

Тестирование UI/UX — это ниша, которой уделяют не так много внимания. Она теряется в тени базовых исследований на этапе создания продукта. Однако это направление не менее важно, поскольку именно оно отслеживает корректность реализации задуманного дизайна.

В этой статье мы лишь бегло прошлись по некоторым инструментам, которые помогают тестировщику, но есть и множество других средств для достижения этой цели.