оставить заявку

Психология дизайна

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

Сергей Анисимов
01 сентября, 2021

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

Чтобы выдвинуть такую гипотезу, нужно хорошо разбираться в психологических особенностях механизмов восприятия и мышления человека (без таких знаний вообще трудно создать успешный веб-проект). Это обширная тема, на которую написаны тысячи хороших книг. Интересующимся можно порекомендовать реферативные сборники по теме психологии дизайна, например, книгу Сьюзан Уэйншенк «100 главных принципов дизайна» и другие подобные издания. В данной статье мы не будем пересказывать их материал. Вместо этого пройдемся по списку элементов, которые можно использовать при сплит-тестировании, и покажем варианты теорий, на которые можно опираться при их изменении.

Содержание, расположение и внешний вид заголовков, кнопок, подзаголовков и текстов

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

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

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

На конверсию влияют и такие нюансы, как длина текстовой строки. Согласно исследованиям Мэри Дайсон, оптимальной является длина строки в 100 символов. Именно при таком размере обеспечивается максимальная скорость чтения. Однако пользователям психологически комфортнее читать более короткие строки (от 45 до 73 символов). Именно поэтому исследователи рекомендуют ограничивать длину строк на сайте 7-8 словами.

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

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

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

T = a + b * log2 (1+D/W)

где T — среднее время, затрачиваемое пользователем на совершение действия;
a — время задержки (как среднее время запуска/остановки движения);
b — величина, зависящая от типичной скорости движения пользователя;
D — расстояние от стартовой точки до центр цели;
W — ширина цели, измеренная вдоль оси движения.

Из анализа закона Фиттса можно сделать вполне конкретные выводы относительно дизайна и расположения кнопок на сайте. В частности, трудозатраты и время нажатия на кнопку (а следовательно — конверсия) зависят от расстояния до кнопки и ее размера. Чем меньше расстояние и больше размер (ширина вдоль оси движения), тем лучше.

Дизайн форм

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

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

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

Великолепно работает концепция постепенного раскрытия (progressive disclosure) — дизайнерский принцип, согласно которому пользователю предоставляются только те данные, которые необходимы для выполнения текущей задачи. Применительно к веб-формам можно динамически подгружать только те поля ввода, которые необходимы исходя из ранее введенной пользователем информации. Например, поля для ввода адреса показывать только после того, как из всех вариантов пользователь выбрал опцию доставки курьером.

Восприятие изображений

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

Путешествуя по миру, исследователь Стивен Палмер просил людей в разных странах мира нарисовать чашку кофе — и именно в каноничной перспективе люди изображали искомый объект. Лишь немногие рисовали чашку в формате «вид сверху», как будто они смотрели на нее строго вертикально вниз.

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

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

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

Выводы

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

 

Больше информации:

Тэги

продвижение сайтов повышение конверсии