UX-тест макетов сайта: кейс бренд-медиа ИОМ «Анкетолог»
Сейчас наша команда работает над созданием обновленной версии информационного ресурса Института общественного мнения «Анкетолог». В процессе работы рождается по несколько версий отдельных блоков и элементов сайта. В этой связи решили на своем примере показать, как методом онлайн-опроса протестировать макеты с участием 200 респондентов онлайн-панели «Анкетолог».
Дизайн исследования
Сначала респондентам было предложено перейти по ссылке и изучить макет сайта в Figma, после чего нужно было вернуться в анкету и ответить на ряд вопросов. С помощью функции A/B-тестирования мы разделили выборку пополам, первой группе был показан макет 1, второй – макет 2. Основное отличие макетов – в количестве блоков. В первом они расположены в две колонки, во втором – в три. Поскольку мы тестировали версию для десктопа, доступ к анкете был ограничен по типу устройства.
Оценка дизайна отдельных элементов
Мы просили респондентов оценить дизайн отдельных элементов сайта: шрифт, цветовое решение, количество и расположение блоков и изображения по 6-балльной шкале, от -3 до +3, где -3 – «Совсем НЕ нравится», +3 – «Очень нравится». Шкала не включала «0», чтобы получить более эмоционально окрашенные оценки. Позже для удобства анализа результатов шкала -3..+3 была преобразована в 1..6 баллов.
Мы не обнаружили значимых различий в оценках обеих версий. При этом респонденты чуть ниже оценили количество и расположение блоков в обеих версиях – об этом также говорили в ответах на открытые вопросы (но об этом чуть позже).
Поскольку мы отправляли анкету участникам онлайн-панели «Анкетолог», половина из них (47%) уже посещала текущую версию информационного ресурса. При сравнении среднего балла в группах тех, кто посещал и НЕ посещал сайт, были обнаружены значимые различия в оценке шрифта (5,0 против 4,6 баллов), цветового решения (4,9 против 4,5 баллов) и изображений (5,0 против 4,7 баллов) – те, кто уже посещали сайт, оценили обновленную версию более высоко.
Оценка конверсии сайта
Затем мы просили оценить вероятность совершить определенное действие на сайте. Несмотря на то, что такие вопросы плохо предсказывают вероятность самого события, с их помощью можно оценить, как меняется эта вероятность при изменении других факторов.
Несмотря на отсутствие значимых различий в оценке двух версий, первый макет чуть лучше мотивирует посетителей совершить все перечисленные действия. При этом если сравнивать вероятность событий в разрезе предыдущего опыта, те, кто посещали текущую версию сайта, статистически значимо чаще готовы совершать целевые действия из списка, кроме подписки на сообщество ВКонтакте.
Метод семантического дифференциала
Для оценки макета также был использован метод семантического дифференциала. Респондентов просили оценить сайт по шкале от -3 до +3, где границы диапазона заданы антонимами, например, «скучный»/«интересный» или «нагруженный»/«лаконичный». По сравнению с другими критериями оба макета слегка просели по параметрам «нагруженный»/«лаконичный» и «запутанный»/«понятный». Подробнее о том, как создать такую шкалу в конструкторе анкет «Анкетолог», вы можете прочитать здесь.
Оценка дизайна в целом
При этом были обнаружены значимые различия в оценках дизайна сайта в целом (t-критерий Стьюдента=2,3 при p=0,02): первый макет оценили на 4,6, второй – на 4,1 балла.
После этого тех, кто оценил макет на +2 или +3, мы просили рассказать, что им понравилось, а тех, кто поставил оценку от -3 до +1, просили подсказать, что можно улучшить. В ответах на открытый вопрос респонденты отметили красочное цветовое решение и простой лаконичный дизайн. В пожеланиях чаще всего просили сократить объем информации и количество блоков, а также структурировать контент.
Кнопка «показать случайную статью»
Мы также добавили опцию «показать случайную статью» при клике на «игральные кости». Для того, чтобы оценить понятность идеи, мы задали открытый вопрос «Как вы думаете, что произойдет при нажатии на «игральные кости»?». В результате только 14% опрошенных ответили верно.
Тест первого клика
Далее с помощью типа вопроса «Тест первого клика» мы предложили респондентам отметить 3 элемента сайта, которые они заметили первыми. Результаты теста представлены в формате тепловой карты, где наиболее кликабельные области отмечены красным, а наименее – фиолетовым.
С помощью «теста первого клика» можно не только оценить дизайн, но и обнаружить юзабилити-проблему сайта. Так мы могли бы переформулировать предыдущий вопрос из «Как вы думаете, что произойдет при нажатии на «игральные кости»?» в «Куда бы вы нажали, чтобы прочитать случайную статью?», чтобы затем изучить карту кликов. Подробнее о том, когда и как использовать тест первого клика, мы рассказали здесь.
Оценка конверсии отдельных блоков
Далее мы показывали разные версии отдельных блоков сайта и просили оценить вероятность совершить определенное действие. Половина опрошенных увидели «Вариант 1», другая половина – «Вариант 2».
Оцените вероятность того, что вы прочитаете статью полностью по шкале от -3 до +3, где -3 – «Точно НЕ сделаю», +3 – «Точно сделаю» (для удобства анализа результатов шкала была переведена из -3..+3 в 1..6 баллов)
Оцените вероятность того, что вы посмотрите другие статьи по шкале от -3 до +3, где -3 – «Точно НЕ сделаю», +3 – «Точно сделаю» (для удобства анализа результатов шкала была переведена из -3..+3 в 1..6 баллов)
Оцените вероятность того, что вы подпишетесь на email-рассылку, сообщество Вконтакте или Телеграм-канал по шкале от -3 до +3, где -3 – «Точно НЕ сделаю», +3 – «Точно сделаю» (для удобства анализа результатов шкала была переведена из -3..+3 в 1..6 баллов).
Тестирование макетов позволяет выявить и устранить проблемы до того, как будут затрачены время и ресурсы на реализацию проекта. С помощью онлайн-опроса можно взглянуть на макет глазами реальных пользователей, которые в отличие от дизайнеров не обладают насмотренностью и экспертизой в дизайне, из-за чего их восприятие может существенно отличаться. Вот почему мнения аудитории могут быть особенно ценны для запуска и развития востребованного проекта.
Также по теме:
