Тестируем визуальный дизайн: полное руководство

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

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

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

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

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

Давайте же вместе разберемся, как это сделать.

Методы тестирования визуального дизайна

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

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

Поведенческие методы, например, A/B-тесты или айтрекинг, предполагают наблюдение за тем, как люди взаимодействуют с вашим продуктом. Они помогают оценить, как элементы дизайна влияют на способность пользователей выполнять задачи и ориентироваться в системе.

Отношенческие методы тестирования

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

Для начала необходимо ответить на следующие два вопроса:

• Как вы будете знакомить пользователей с дизайном? Сколько вариантов дизайна вы хотите протестировать, как долго вы будете показывать каждый из них участникам и насколько активно участники будут взаимодействовать с ними.

• Как вы будете оценивать реакцию пользователей? Самый эффективный способ — открытые или строго контролируемые вопросы.

1. Как вы будете знакомить пользователей с дизайном?

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

• 5-секундный тест
• Тест первого клика
• Тестирование предпочтений
• Вопросы о визуале после тестирования юзабилити

5-секундный тест

5-секундный тест — тест для оценки первого впечатления. Вы показываете участникам «стимул» в течение 5 секунд (либо другого короткого периода времени), чтобы уловить интуитивную реакцию или первое впечатление людей о дизайне. Нескольких секунд слишком мало для того, чтобы прочитать текст и рассмотреть детали, например, шрифты, но этого достаточно, чтобы составить впечатление о визуальном стиле.

Не предупреждайте участников о том, что они будут видеть дизайн всего 5 секунд. Это поможет уловить подлинную первоначальную реакцию без чрезмерного анализа и подготовки к запоминанию деталей.

Тест первого клика

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

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

Тестирование предпочтений

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

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

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

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

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

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

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

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

2. Как вы будете оценивать реакцию пользователей?

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

• Открытое объяснение предпочтений
• Открытый выбор слов
• Закрытый выбор слов
• Числовая шкала

Открытое объяснение предпочтений

Попросите участников объяснить, почему им нравится или не нравится тот или иной дизайн, а затем задайте дополнительные вопросы:

• Как бы вы описали эту страницу?
• Какой вариант дизайна вам нравится больше? Почему?
• Считаете ли вы эту версию более [вставьте противоположные черты, например, интересной/скучной]?

Этот метод оценки будет полезен, если вы практически ничего не знаете об ожиданиях аудитории и хотите выяснить, что для нее важно. Он также позволяет выявить и отсеять случайные, чисто субъективные предпочтения (например, «мне нравится фиолетовый»).

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

Открытый выбор слов

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

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

Например, в таблице ниже вы видите характеристики сайта B2B-бренда, цель которого состояла в том, чтобы быть надежным, современным и полезным. Ни одно из этих слов не было упомянуто участниками исследования, при этом многие пользователи описали дизайн как простой (как в положительном, так и в отрицательном смысле).

Закрытый выбор слов

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

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

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

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

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

Числовая шкала

Наиболее структурированный подход — числовая шкала. Выберите 3–5 важных характеристик бренда и попросите людей оценить, насколько хорошо каждая из них отражена в дизайне. Такой опросник должен быть коротким и простым. Чем он длиннее, тем выше вероятность случайных ответов.

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

Сравнение методов оценки

Поведенческие методы тестирования

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

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

Айтрекинг 👀

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

Полученные по результатам айтрекинга графики движения взгляда и тепловые карты помогут вам усовершенствовать визуальный дизайн и правильно расставить в нем акценты.

A/B-тестирование

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

Заключение

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