Тестирование пользовательского интерфейса

Чтобы аудитория могла использовать продукт без проблем и ограничений, необходимо проработать его юзабилити. 

Главная проблема разработки в том, что у разработчиков, дизайнеров и аудитории могут быть разные взгляды на удобство: то, что понятно создателям продукта, может отталкивать клиентов. Чтобы избежать этого, требуется проводить тестирования на пользователях, собирать обратную связь и вносить изменения, делая GUI отзывчивым и простым для восприятия. Какие элементы нужно проверять, как анализировать результаты исследований и улучшить интерфейс – вы узнаете в этом материале, а так же вы можете ознакомиться с нашими ценами на usability анализ.

Принципы работы UI

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

Как работает пользовательский интерфейс:

1. Человек видит только внешнюю часть приложения — кнопки, формы, статьи и другие визуальные элементы.

2. Нажимая на кликабельные области, он отправляет запрос внутренней части, которая отвечает ему выполнением конкретного действия.

3. Графика нужна для простоты и удобства — иконки, изображения, блоки с текстом помогают разобраться, что позволяет сделать ПО.

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

Элементы для тестирования пользовательского интерфейса

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

1. Все виды кнопок: конверсионные CTA, навигационные по разделам, командные для выполнения простых действий.

2. Чекбоксы и радиокнопки, которые используются для выбора опций.

3. Поля формы для ввода информации.

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

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

Как происходит тестирование

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

В зависимости от задач тестирования используют разные методы:

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

Автоматизация

Для тестирования можно найти готовые инструменты, которые используются для автоматизации процессов, например: Cucumber, Selenium, Ranorex и другие. У каждой платформы есть пробная версия. При выборе проверьте, что сервис поддерживает технологии, которые вы использовали при разработке. Он должен работать с нужными операционными системами и всеми браузерами. Уточните у тестировщиков, насколько удобна для них выбранная система.

Чек-лист для ручной проверки

Если проверять пользовательский интерфейс вручную, получается более подробная, наполненная эмоциями картина. Автоматизация помогает исследовать только компоненты и действия, а при тестировании людьми вы можете узнать, насколько им понятна общая логика приложения. Чеклист включает в себя элементы фронтенда — от общих стилей до дизайна отдельных компонентов:

• Структура страницы: выравнивание, расположение и размеры элементов.
• Отображение блоков при скроллинге, полосы прокрутки.
• Читабельность текста: четкость шрифтов, размер, контрастность цвета, орфография.
• Уведомления об успешных действиях или ошибках, предупреждения при закрытии вкладок с несохраненной информацией.
• Поля в формах: возможность ввода данных, отметки для обязательной информации, валидация, подсказки по формату, например, о допустимых в пароле символах.
• Качество изображений, их соответствие контенту.
• Корректная работа кнопок — выполняют ли они нужные функции.
• Функционирование сайта или веб-приложения в разных браузерах и устройствах.
• Последовательность в навигации и названии разделов.
• Визуализация разных состояний — например, анимация с песочными часами при загрузке, бледная некликабельная кнопка до заполнения обязательных полей, подсветка элементов, на которые можно нажимать и т.д.

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

Резюме

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