Как я тестировал иконки на html прототипе через Толоку

Published in

Дизайн-кабак

8 min readJan 4, 2021

В апреле 2020 в качестве площадки для проведения различных дизайнерских тестов я выбрал Яндекс.Толоку, хотя она больше заточена для разметки больших объемов данных и разных бизнес-задач. Набор готовых шаблонов для теста дизайна там скудный, но можно сделать свои, зная HTML и JS. В течение года подготовил для себя и опробовал шаблоны для популярных методов: First click, Five second, Side by side. Хочу поделиться одним из кейсов, для которого я использовал Толоку и самописный прототип.

Почему Толока и свой прототип

Есть несколько сервисов, в которых можно тестировать прототипы: Яндекс.Взгляд, Useberry, Preely, Maze. Обычно в этих сервисах тест создаётся в конструкторе или импортируется из Figma, Invision, собираются метрики. Это удобно, если нет возможности писать свой код и ограничено время.

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

У каждого сервиса на практике имеются и минусы. Например:

в Яндекс.Взгляд мы не можем задавать охват аудитории или отправить тест только мобильным пользователям;
в Maze интерактивные прототипы, импортированные из Фигмы, не у всех респондентов работают быстро и стабильно;
Preely для мобильных прототипов требует у респондента установки своего приложения;
Внутри Толоки нельзя сделать прототипы, только добавлять ссылкой или внедрять в проект через iframe.

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

О задаче

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

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

Для поиска ответа на вопрос «Кто прав?» я решил, что оптимальней будет создать кликабельный html для теста на хостинге, подключить Яндекс.Метрику или Google Analytics и привести туда исполнителей с Толоки. Тем более этот шаблон в будущем можно использовать с минимальными доработками.

Похожий опыт

Сотрудники UIE в статье 2006 года Orbitz Can’t Get A Date делились результатами своих UX-исследований. Специалисты из UIE провели два эксперимента для выяснения, как люди используют иконки. В первом эксперименте они изменили сами иконки, но оставили на прежнем месте — люди быстро адаптировались к изменениям. Затем они изменили порядок следования кнопок в интерфейсе программы, не трогая иконки. Это замедлило пользователей и, в некоторых случаях, люди не смогли выполнить свои задачи. Иконки все были видны, но пользователи не могли их найти в новых местах.

Представители UIE сделали вывод, что пользователям расположение иконки важнее, чем то, как она выглядит.

У бедолаги Морти итак много проблем помимо поиска иконок

В статье 2009 года дизайнера Крейга Кистлера «The problem with icons» звучит такой же вывод. Пользователь изучит изображение иконки, но её расположение он запомнит быстрее. Смена позиции повредит опыту пользователя больше, чем смена изображения.

Гипотеза

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

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

Если во всех заданиях более 70% респондентов найдут цветные иконки двух услуг на разных позициях быстрее однотонных, то гипотеза не подтвердится.

Структура теста

В Яндекс.Толоке создана простая форма с инструкцией и полями ввода. Для выполнения теста респонденты по ссылке переходят на внешний сайт с прототипом.

Прототип на хостинге сделан из набора html-страниц. На странице показывается личный кабинет — это статичный файл PNG. Кликабельная разметка поверх изображения сделана из SVG фигур <rect> над каждой иконкой, обёрнутых в ссылку: <a><rect x=’…’ y=’…’ width=’…’ height=’…’ rx=’…’/></a>. У двух правильных ответов в задании к ссылке добавляются индивидуальные имена классов <a class=’answer_1′>…</a>, который отслеживает JS скрипт.

Самописный PHP и JS код заносят в текстовый файл на сервере уникальный ID сессии пользователя, затраченное время на всё задание и поиск каждой иконки. Экран пользователей записывается Вебвизором Яндекс.Метрики.

Тест состоит из 3 заданий, в которых пользователю нужно найти 2 указанные услуги: Эквайринг и Зарплата. В каждом задании иконки меняют свое расположение. Одна группа испытуемых проходила тест с цветными иконками, другая — с иконками, покрашенными в фирменный синий цвет. После 3 задания люди видят проверочный код, который должны ввести в Яндекс.Толоке, чтобы подтвердить выполнение теста.

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

Некоторые наблюдения по Вебвизору

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

В тесте цветных иконок приняло участие 48 респондентов, синих — 50 респондентов. Это две независимые выборки, чтобы выполнение одного теста не влияло на восприятие другого.

Тест цветных иконок

Запомнившиеся действия некоторых респондентов:

Респондент № 1: после выбора Эквайринга забыл про Зарплату или не понял по инструкции, что надо 2 пункта выбрать и ушел.
Респондент № 2: путал Торговый эквайринг и Эквайринг.
Респондент № 3: привык, что сервисы в основном ряду и на последнем задании, где Зарплата в верхнем блоке, потерялся. Искал 30 секунд, упорно не замечая 3 верхних блока, пробовал нажимать пункт «Не нашли услугу?». Подобных респондентов несколько.
Респондент № 4: Читал внимательно инструкцию, но в первом задании много раз кликал на Торговый эквайринг, потом выбрал Зарплату и снова пытался выбрать Торговый эквайринг. В итоге 40 сек до целевого клика на Эквайринг.
Респондент № 5 написал отзыв: «На втором вопросе ничего не происходит», но оказалось, что не вник в задачу. Случайно выполнил первое задание, а на втором такими же случайными кликами не попал в Эквайринг и закрыл тест.

Тест синих иконок

В этом тесте, как и в предыдущем, были респонденты, которые не находили в 3 задании пункт «Зарплата». Их время на нахождение 2 иконок в последнем задании:

Респондент № 1: 16 сек. Искал пункт «Зарплата» в верхнем меню.
Респондент № 2: 16 сек. Пробовал нажимать пункт «Не нашли услугу?»
Респондент № 3: 16 сек. Пробовал нажимать пункт «Не нашли услугу?» и после кликал на всё подряд.
Респондент № 4: 24 сек.

Общие наблюдения

Случаев, где респондент кликает по всему экрану, выполняя задание, было около 4%. Так как это удаленное немодерируемое тестирование, нельзя однозначно определить причину: выполняют ли такие люди наобум задание или кликать мышкой при обдумывании задачи — это их особенность поведения.
Среднее время выполнения теста из 3 заданий: 1:45 мин у цветных иконок, 1:32 мин у синих. Так как время в тестах с цветом оказалось не меньше, можем уже предположить, что гипотеза про важность расположения, а не цветовых отличий верна.

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

Анализ времени

Ознакомимся с упрощёнными понятиями из математической статистики:

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

В первом задании отклонение показывает нам, что разброс индивидуального времени участников большой. Пример: 3 сек, 14 сек, 7 сек, 21 сек. Возможно, кто-то быстро понял инструкции, кто-то дольше знакомился с содержимым экрана.

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

Респондент № 1: 5, 7, 8 сек.
Респондент № 2: 3, 10, 13 сек.
Респондент № 3: 5, 13, 8 сек.

Резкое увеличение среднего времени в третьем задании связано с тем, что 27 респондентов в обоих тестах не обращали внимание на верхний ряд из 3 блоков с иконками и потратили на поиск иконки там больше 10 сек.

По моде в 1 и 3 задании кажется, что быстрее выполнялись задания с цветными иконками. Но в среднем 1 и 2 задания завершены быстрее с синими иконками. В выводах посмотрим общие графики сравнения времени респондентов.

Выводы

Иконки не меняют свое положение в продукте так часто, как в заданиях, и клиенты не ежедневно заходят в меню «Ещё», но всё же общие выводы попробуем сделать.

Расположение важнее цвета

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

Процент респондентов, которые быстрей выполняли аналогичное задание

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

Вероятно, если мы решим в новом дизайне унифицировать цвет иконок, то это не ухудшит пользовательский опыт.

Верхние блоки — возможная слепая зона

Когда иконка появляется наверху, где три крупных блока, 27,5% из 98 респондентов теряли её, хотя блоки визуально расположены близко на общем слое. Похоже эти верхние блоки при постоянном использовании основного ряда иконок становятся слепой зоной.

Так-так, где эта последняя иконка?

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

Улучшение теста

Встречается 2 вида респондентов. Одни, не находя иконку, могут кликать в разные области прототипа, такое поведение возможно и у новых пользователей личного кабинета. Другие — кликают бесцельно в попытке угадать решение и будет ошибкой учитывать их время в таблице результов. Это можно увидеть по тепловой карте Яндекс.Метрики, но нельзя сопоставить с конкретным респондентом. Для быстрого обнаружения людей с большим количеством пустых кликов я сделал корректировки, но уже в другом тесте. Для этого я добавил в JS скрипт на страницах счётчик нецелевых кликов через браузерное событие «click» в каждой записываемой сессии пользователя.