Быстрый клик-тест скриншотов вместо юзабилити-тестирования прототипа

Usethics
Usethics ⭕ doc
Published in
6 min readMar 4, 2021

Как проверить идею интерфейса или новый дизайн без затрат на создание реалистичного прототипа

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

Photo by Matthew t rader, unsplash.com

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

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

Проводим клик-тест скриншотов

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

Разрабатывая сценарий клик-теста скриншотов, мы используем следующий подход:

  • разбиваем процесс взаимодействия с сайтом на микрозадачи. Желательно выбрать микрозадачи, которые можно выполнить в один клик. Задачи, предполагающие 2–3 клика, тоже подойдут, но только если каждый из шагов не требует от пользователя серьезных когнитивных усилий: нет необходимости запоминать, что было на предыдущих шагах, и нет потребности вернуться к ранее выполненным действиям;
  • прорабатываем описание контекста задания. Важно ответить на три вопроса: «Какую задачу выполняет пользователь?», «Где он находится в начале задания?», «Что будет происходить в результате его действий?»;
  • продумываем сценарий исследования. Если существуют опасения, что взаимодействие с продуктом может навести пользователя на определенные мысли, то в самом начале вы можете сами задать наводящий вопрос. Например, если вы хотите узнать, какие фильтры нужны пользователю, то лучше заранее спросить, какими фильтрами он уже пользовался в аналогичных ситуациях, — до того, как пользователь увидит те фильтры, которые есть в изучаемом продукте. После того как пользователь выполнит все задания теста, можно задать ему проверочные вопросы, а также вопросы, направленные на сбор оценок, а в конце интервью — узнать, соответствует ли то, что он увидел, его представлениям, удобен ли такой вариант;
  • сохраняем ранее созданный контекст в процессе выполнения задания. Если задание требует более одного клика, т. е. включает несколько шагов, мы описываем контекст задания перед первым шагом. Для всех остальных шагов переход на новый экран предваряем словами: «Продолжите выполнение задачи Х».
Как выглядят задания клик-теста на сервисе «Фабрика Юзабилити»

Как выглядит результат

Мы проводим подобные исследования на платформе «Фабрика Юзабилити» или с помощью сервиса для онлайн-опросов Alchemer (ранее — SurveyGizmo). Обычно результатом тестирования является карта кликов для каждого экрана.

Карта кликов, или хитмеп, — это изображение, на котором суммируются все клики респондентов на экране: области, куда нажимали респонденты, отмечены цветом — от синего (меньше всего кликов) до красного (больше всего кликов).

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

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

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

Рис. 2. Хитмеп экрана интернет-магазина: многие пользователи не нажимали на целевые кнопки «Попробовать» на баннере, а переходили в каталог или нажимали на пиктограмму корзины — значит, баннер, приглашающий перейти к покупкам, не выполняет своей функции.

Преимущества клик-теста скриншотов

Несмотря на некоторую «неестественность» юзабилити-тестирования скриншотов, оно сравнимо по эффективности с юзабилити-тестированием прототипа: на скриншотах тоже можно проверить восприятие новой идеи и/или интерфейса и зафиксировать поведение пользователей в интерфейсе.

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

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

Что важно учесть при тестировании скриншотов

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

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

Ограничения метода

  • Не всегда можно увидеть клик каждого пользователя. Например, платформа «Фабрика Юзабилити» строит только общий хитмеп: если респонденты кликали по разным точкам скриншота, то вы не сможете увидеть клик каждого респондента и проверить, какие особенности пользователей повлияли на результаты теста. На платформе Alchemer есть возможность увидеть клики отдельного респондента, а также сравнить результаты для разных групп респондентов, но и у этого сервиса есть свои ограничения. Если вам нужны данные по каждому респонденту, подумайте о том, чтобы дополнить клик-тест вопросом, который поможет собрать нужные данные.
  • Трудно понять, почему пользователь совершил то или иное действие. Как и любое количественное исследование, клик-тест не дает ответа на вопрос «Почему пользователь сделал это?». В ходе традиционного удаленного немодерируемого юзабилити-тестирования мы записываем на видео, что делает пользователь в процессе выполнения задания, поэтому у нас есть возможность считать логику пользователя. В клик-тесте это невозможно. Чтобы понять, почему пользователь совершил то или иное действие, вы можете дополнить тест прямыми вопросами, например: «Почему вы нажали именно сюда?». Но не стоит злоупотреблять такими вопросами, чтобы не утомлять респондента, иначе вы рискуете получить ответы вроде «потому что». Если тест длинный, вместо прямых вопросов можно использовать закрытые вопросы с возможностью ввести свой ответ в поле «Другое».
  • Нет возможности настроить реакцию на клик. Разные системы по-разному отрабатывают завершение клик-теста скриншота. Чтобы перейти к следующему скриншоту, в Alchemer после клика нужно нажать на кнопку «Дальше», а в сервисе «Фабрика Юзабилити» респондент может сделать только один клик — и система сразу же переведет его на следующий шаг. Оба подхода имеют недостатки. В Alchemer некоторые респонденты генерируют большое количество кликов, так как не понимают, что нужно сделать, чтобы пройти дальше. В сервисе «Фабрика Юзабилити» некоторые пользователи в начальном (первом) задании нажимают на скриншот случайным образом — это снижает достоверность результатов теста. Чтобы избежать подобных проблем, предусмотрите учебное задание, специально предназначенное для обучения пользователя участию в клик-тесте. Данные, полученные по результатам выполнения этого задания, удаляются из анализа.

Самое главное о клик-тесте

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

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

Над статьей работали: Виктория Нагорная, Диана Вайнберг, Наталья Шмелева.

--

--