Как и зачем UX/UI-дизайнеры проверяют дизайн-решения?

22 ноября 2024
6 мин.

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

Зачем вообще нужно что-то проверять?

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

Причина вторая – для предотвращения дорогостоящих ошибок. Исправление проблемы после запуска продукта обходится в 10 раз дороже, чем на этапе проектирования​

Причина третья – с целью увеличить вовлеченность пользователей и их лояльность.

Все эти причины актуальны как для небольших ИТ-компаний и стартапов, так и больших компаний. К слову, дизайнеры из Airbnb в ходе A/B-тестирования выяснили, что более простая структура страницы с фото квартир увеличивает бронирования на 20%. В итоге этот инсайт стал одной из веских причин редизайна всей платформы.

Как тестируют дизайнерские решения в IT?

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

Например,  компании Dropbox тестирование проводилось с использованием айтрекинга для изучения пути пользователя. Они заметили, что пользователи игнорируют секцию с дополнительными функциями. После её редизайна количество подписок на премиум выросло на 15%​

Какие методы используют для тестирования?

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

Коридорное тестирование – проверка продукта на случайных людях (например, коллегах или прохожих).

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

Что такое юзабилити-тестирование и как его спроектировать?

В этой статье предлагаем более подробно остановиться на первом методе. Юзабилити-тестирование фокусируется на том, насколько удобно пользователям достигать своих целей.  Его подготовка состоит из нескольких этапов: 

  1.  Определение целей тестирования. Они могут включать проверку понятности навигации, удобства оформления заказа или видимости ключевых элементов интерфейса. Пример: Тестирование мобильного приложения для бронирования билетов, где цель — убедиться, что пользователь может быстро выбрать и купить билет. Или хотя бы  зарегистрироваться на платформе.
  2. Составление сценариев. Задания может выглядеть так: «Найдите ближайший к вам магазин и узнайте его часы работы». Или другой вариант: «Найдите на сайте ближайший кинотеатр, выберите фильм и забронируйте билеты на вечер пятницы».
  3. Подбор участников – они должны соответствовать вашей целевой аудитории, так как именно они будут конечными пользователями. Примеры критериев: возраст, опыт работы с подобными продуктами, техническая грамотность. Если целевая аудитория разнообразна, выберите представителей разных сегментов.
  4. Выберите тип тестирования
    1. Модераторское тестирование: Исследователь сопровождает участника, задает вопросы и помогает при необходимости.
    2. Немодераторское тестирование: Проводится удаленно, без непосредственного участия модератора, например, с помощью сервисов типа Maze или UserTesting.

Как проводить юзабилити- тестирование?

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

Начинайте с нейтрального вопроса, например, «Какими приложениями вы чаще всего пользуетесь?», чтобы снять напряжение.

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

Для записи взаимодействий можно использовать скринкасты и айтрекинг, чтобы понять, какие элементы привлекают внимание. Также поощряйте обратную связь. После выполнения каждого задания задайте участнику вопросы, чтобы лучше понять его опыт. Например, «Почему вы выбрали именно этот способ?» или «Что бы вы изменили?».

Анализ результатов

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

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

Также формулируйте выводы и гипотезы. Они могут выглядеть так:

  • Вывод: Пользователи затрудняются найти кнопку «Купить», так как она слишком мелкая.
  • Гипотеза: Увеличение размера кнопки и смена цвета на контрастный увеличат её заметность и кликабельность.

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

Пример из практики: юзабилити-тестирование мобильного приложения для доставки еды

Поэтапное проведение теста на юзабилити наглядно демонстрирует кейс ниже: 

Этап 1. Постановка цели

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

  1. Определение целевой аудитории
    Приложение ориентировано на молодых пользователей 20–35 лет, которые активно заказывают еду онлайн. Для тестирования были выбраны 8 участников, включая студентов и работающих специалистов.
  2. Подготовка сценариев
    Участникам предложили 3 задания:
    • Найти ближайший ресторан с подходящим меню.
    • Добавить несколько блюд в корзину.
    • Оформить заказ с указанием адреса и способа оплаты.
  3. Выбор инструментов
    • Для записи взаимодействий использовался софт для скринкастов.
    • Данные айтрекинга фиксировались через смартфоны с поддержкой анализа взгляда.

Этап 3. Проведение тестирования

  1. Модераторское тестирование
    Исследователь находился рядом с участником, наблюдал за его действиями и задавал уточняющие вопросы:
    • «Какой шаг оказался самым сложным?»
    • «Что вы ожидали увидеть после нажатия на эту кнопку?»
  2. Фиксация проблем
    • 5 из 8 участников не заметили кнопку «Применить» после выбора фильтров.
    • У 6 из 8 возникли сложности с добавлением адреса доставки — приложение не подсказывало формат ввода.
    • 3 участника потратили больше времени на поиск способов оплаты, так как кнопка «Добавить карту» была в неочевидном месте.

Этап 4. Анализ результатов

  1. Классификация проблем
    • Критические:
      • Пользователи не видят кнопку «Применить».
      • Ошибки в формате ввода адреса.
    • Некритические:
      • Неудобное размещение кнопки для добавления способа оплаты.
  2. Формулирование гипотез
    • Гипотеза 1: Перемещение кнопки «Применить» ближе к фильтрам увеличит её заметность.
    • Гипотеза 2: Добавление подсказок для ввода адреса упростит процесс заполнения.
    • Гипотеза 3: Размещение кнопки «Добавить карту» рядом с существующими способами оплаты ускорит выбор.
  3. Создание отчета
    В нем были указаны выявленные проблемы, приоритеты исправлений и предложенные изменения с обоснованиями.

Этап 5. Внедрение и повторное тестирование

  1. Изменения
    • Кнопка «Применить» была увеличена и размещена под фильтрами.
    • Введены подсказки в формате «Введите адрес в таком виде: улица, дом, квартира».
    • Кнопка «Добавить карту» была перемещена на главный экран оплаты.
  2. Результаты повторного тестирования
    • 7 из 8 участников успешно справились с заданиями.
    • Среднее время оформления заказа сократилось на 30%.
    • Удовлетворенность пользователей (по результатам опроса) увеличилась на 25%.

Итог

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

Заглавное изображение: Unsplash