UI-тестирование мобильного приложения и сайтов

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

Получите 3% с договора за рекомендацию

Предлагаем 3% вознаграждения за рекомендацию, если вы приведёте для нас клиента.

Есть клиент

Что такое UI и UX-тестирование

Создание дизайна интерфейсов включает два направления работы:

• UX (User Experience) — это пользовательский опыт. UX-дизайнер исследует мышление и поведение целевой аудитории и создает интуитивно понятные для нее шаблоны навигации. UX-тестирование интерфейса позволяет оценить, насколько он соответствует ожиданиям и желаниям пользователей
• UI (User Interface) — это пользовательский интерфейс. UI-дизайнер разрабатывает дизайн интерфейса, учитывая UX-шаблоны, концепцию нового продукта, фирменный стиль бренда и другие факторы.

UI и UX-тестирование часто проводятся параллельно. Юзабилити-тесты позволяют убедиться, что все элементы интерфейса удобны для пользователей, и дизайн работает на выполнение целевых действий. Компании, которые вкладывают деньги в тестирование интерфейсов, получают больше прибыли после релиза продуктов.

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

Виды UI-тестирования

UI-тестирование интерфейсов выполняется в ручном или автоматическом режиме: выбор зависит количества и специфики задач, бюджета на юзабилити-тестирование.

Ручное тестирование

Ручное UI-тестирование проводит UI-дизайнер или QA-инженер. Он выполняет набор действий, чтобы убедиться, что интерфейс работает без ошибок. Специалист проверяет, соответствует ли интерфейс техническому заданию на разработку продукта. Многие компании на втором этапе организуют массовое ручное тестирование с участием пользователей.

Автоматизация тестирования

Автоматизация тестирования помогает экономить время и деньги на UI-тестировании. Программы для автоматизации записывают сценарий ручного тестирования интерфейса и повторяет его без участия человека. Ответ интерфейса сравнивается с ожидаемым результатом. После окончания процедуры программа формирует отчет об ошибках в UI-тестах.

Преимущества автоматизации тестирования:

• Экономия времени на подготовку к релизу.
• Уменьшение трудозатрат на UI-тестирование.
• Снижение стоимость юзабилити тестов.
• Безошибочное выполнение повторяющихся задач.
• Быстрая и точная проверка сложных сценариев.

Ручные тесты позволяют оценить не только надежность интерфейса, но и впечатления о работе с продуктом. Автоматизация тестирования помогает охватить большое число страниц за короткое время. Автоматическое UI-тестирование дает объективные данные о качестве пользовательского интерфейса.

Популярные методы UI-тестирования

Онлайн-этнография

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

Пользовательский сценарий

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

A/B-тестирование

A/B-тестирование показывает, как аудитория реагирует на два разных элемента в одном дизайне интерфейса. Результаты теста позволяют сделать вывод, какая версия дизайна приносит больше целевых действий (звонков, покупок, заявок и т.д.)

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

Тестирование доступности

Тестирование доступности — это один из методов UI-тестирования мобильного приложения или сайта. Он показывает, удобен ли интерфейс для людей с ограниченными возможностями, такими как:

• проблемы со зрением;
• нарушения слуха;
• ограничения в подвижности рук;
• и другие нарушения.

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

2 месяца SEO продвижения в подарок

Закажите у нас разработку сайта и сэкономьте 2 месяца SEO продвижения, потому как мы сразу проводим базовую SEO оптимизацию.

Заказать

UI-тестирование мобильных приложений

UI-тестирование мобильных приложений отличается от тестирования веб-приложений. Различия связаны с условиями работы с интерфейсом. Пользователи запускают мобильные приложения на маленьких экранах и работают на ходу, часто при плохом освещении.

Важные этапы UX-тестирование интерфейсов мобильных приложений:

• Проверка работы приложения на разных моделях смартфонов.
• Проверка интеграции с мобильными операционными системами: iOS, Android, Windows.
• Тестирование взаимодействия с камерой, динамиками и датчиками смартфона.
• Проверка идентификации пользователя по биометрии.
• Оценка внешнего вида интерфейса под прямыми солнечными лучами и в условиях слабого ночного освещения.
• Проверка работы приложения в условиях нестабильного подключения к интернету.
• Оценка работы приложения в режиме экономии энергии.

Результаты UI-тестирования мобильных приложений позволяют сделать интерфейс удобнее для владельцев разных моделей смартфонов.

Пример проведения UI-тестирования

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

Для примера возьмем ситуацию, когда нам нужно протестировать UI-дизайн формы ввода логина и пароля на сайте. В этом случае можно представить 5 сценариев, которые ведут пользователя к достижению цели.

Примеры сценариев для UI-тестирования:

1. Ввод действующего логина и пароля для авторизации на сайте.
2. Ошибка в имени пользователя: логин не найден в базе данных.
3. Ввод существующего имени пользователя с неверным паролем.
4. Запрос установки нового пароля.
5. Нажатие кнопки для перехода в справочник.

Задачи по тестированию UI-дизайна в примерах сценариев:

1. Проверить наличие заголовка, логотипа и основных блоков сайта.
2. Проверить состояние и выравнивание вёрстки страницы.
3. Оценить наличие полей для ввода данных и подписей к ним.
4. Убедиться, что шрифты легко читаются, и дизайн страницы не мешает воспринимать текст.
5. Проверить, что в поля для ввода данных можно ставить курсор и печатать текст.
6. Убедиться, что на странице есть кнопка отправки данных, и ее назначение очевидно для пользователей.
7. Проверить метки полей и убедиться, что они принимают допустимые и недопустимые для пароля символы.
8. Ввести пароль с неправильными символами, отсутствующий логин, сочетание актуального логина с неверным паролем. Оценить наличие, содержание и читаемость уведомлений об ошибках.
9. Проверить работу всплывающих окон, ссылку или кнопку для перехода в справочник.
10. Протестировать работу значка, который показывает или скрывает введенный пароль.
11. Проверить работу кнопки, которая отправляет запрос к базе данных.

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

Инструменты для UI-тестирования

Selenium

Selenium — фреймворк для автоматизации UI-тестирования веб-приложений. У него открытый исходный код, что упрощает подготовку сценариев. Selenium поддерживает интеграцию со всеми популярными браузерами. В нем реализована поддержка языков программирования C#, Java и Python. Selenium отличается надежностью работы и гибкими возможностями настройки.

Appium

Appium — это инструмент для автоматического UI-тестирования мобильных приложений. Сервис с открытым исходным кодом поддерживает много языков программирования. Appium подходит для кроссплатформенного тестирования, он поддерживает интеграцию с iOS, Android и Windows.

Типичные ошибки в UI-тестах

Результаты тестирования интерфейсов чаще всего показывают следующие ошибки:

• Не учтены реальные сценарии работы. Например, у приложения со сборником рецептов нет голосового управления на случай, когда у пользователя заняты руки.
• Расположение важных функций не очевидно. Например, кнопка обращения в поддержку должна быть доступна с каждой страницы сайта или приложения. Если она расположена в одном из подразделов, часть пользователей не сможет ее найти и покинет проект. 
• Нет дизайна страниц с ошибками. Стандартный шаблон страницы 404 или другой ошибки отталкивает пользователей. Для этих ситуаций нужно создать интересный дизайн, который будет мотивировать продолжить исследование сайта.

• Визуальный шум. На продающих и на информационных сайтах не должно быть слишком много картинок. Иллюстрации отвлекают внимание пользователей от товаров или мешают воспринимать тексты. Визуальный шум создают и неуместные анимации.
• Не доработана адаптивная версия. Часто UI-тестирование веб-приложений и мобильных приложений затрагивает только популярные браузеры, размеры экранов, версии системы. У пользователей, которые пользуются устаревшими или непопулярными решениями, могут возникать ошибки.

К популярным ошибкам в UI-тестах относится и отсутствие обратной связи. Интерфейс сайта или приложения должен отзываться на каждое действие. Иначе у пользователя возникает недоверие к продукту. Важно подтверждать выполнение каждого действия или указывать на ошибки. Обратная связь дает чувство контроля и повышает уровень удовлетворенности.

Чек-лист для UI-тестировщика

При UI-тестировании веб-приложений или мобильных приложений проверяйте следующие пункты:

• Навигация. Проверьте, что кнопки работают и перенаправляют пользователей на нужные страницы или экраны.
• Пункты меню. Убедитесь, что в меню отображаются все разделы, которые предусмотрены в структуре сайта.
• Кнопки подтверждения. Убедитесь, что при запросе значимого действия появляется окно с просьбой подтвердить выбор. Например, при оформлении покупки на сайте или удалении аккаунта.
• Подсказки. Если значение некоторых кнопок или полей ввода может быть неочевидно для пользователей, добавьте всплывающие или очевидные подсказки.
• Форматы данных. Убедитесь, что каждое поле принимает только разрешенные значения. Это важно при настройке числовых полей для ввода даты, денежной суммы и т.д.
• Ширина поля. При необходимости установите ограничения по символам. Укажите лимиты во всплывающих подсказках или текстовых блоках.
• Шкала прогресса. Если сайту или приложению требуется время, чтобы выполнить запрос, добавьте индикатор для отслеживания прогресса.
• Скроллинг таблиц. Когда на странице есть длинная таблица, убедитесь, что при прокрутке шапка остается на месте.

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