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

Для начала разберем 7 очевидных ошибок UI, снижающих конверсию:

  1. Неадаптивный дизайн. Смартфоны и планшеты уже преобладающий способ входа в интернет – порядка 60% просмотров любого проекта уже происходит с мобильных устройств. Поэтому необходимо настраивать все ui elements вашего сайта для адаптации под мобильные устройства.

  2. Сложная навигация, игнорирование «правила трех кликов» и «правила 59 секунд». Чем проще и удобнее пользователю, чем больше описания и заголовки соответствуют страницам и контенту в них, тем выше в результате будет конверсия.

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

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

  5. Отсутствие Social Proofs. На отзывы покупателей обращают всё больше внимания. Частенько именно они становятся ключевыми при принятии посетителем сайта решения о покупке.

  6. Низкая скорость загрузки. Задержка загрузки на 1 секунду уменьшает конверсию на 1% и влияет на ранжирование сайта в поисковиках.

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

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

UI patterns как способ гарантировать конверсию

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

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

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

Проект состоит из списка доказательств и паттернов. Что такое паттерны мы разберем чуть ниже, а доказательства – это проверенные и изученные цифры влияния паттернов на поведение пользователя.

Если вам интересно узнать больше, доказательства, составленные на основании 112 тестов, можно посмотреть по ссылке. Паттерны, разделенные по группам согласно категориям (анализ страниц, тегов, метрик), можно посмотреть здесь. Больше о UI паттернах их о том как их искать, читайте в нашей статье “UI patterns: как найти актуальные шаблоны для UI дизайна”.

Анализ шаблонов восприятия сайта посетителями

UX исследователи вывели определенные шаблоны поведения пользователей – действия, которые те так или иначе совершают на сайте или в приложении. Также к шаблонам поведения относится то, как именно пользователи видят информацию. Понимание этих шаблонов помогает правильно разместить контент-блоки на сайте (сделать правильную сетку - ui grid) и хоть как-то гарантировать что информация будет увидена и прочитана.

F-паттерн

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

F-паттерн

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

- заголовок должен быть цепляющим и хорошо отражать содержание текста на странице (также это хорошо для SEO)

- основная информация должна размещаться в 2-х первых абзацах текста

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

Z-паттерн

Базируется на исследованиях UI/UX эксперта Якоба Нильсена. Его суть в том, что взгляд пользователя при посещении первого экрана страницы перемещается последовательно через конкретные точки. На графике эти точки изображены номерами 1,2,3 и 4.

Z-паттерн

При этом основное внимание припадает на секторы 1, 2 и 3, что подтверждается данными с тепловой карты.

Диаграмма Гутенберга

Также делит экран на четыре условные зоны по принципу квадрата.

Диаграмма Гутенберга

    • A - Верхний левый угол. Сюда пользователь смотрит всегда. Здесь лучше всего расположить название компании и логотип. А также ударные два-три слова заголовка.
    • B - Верхний правый угол. Зона второй приоритетности внимания и дополнительной информации: контакты, форма заказа звонка и другие важные ui elements. А также остальная часть заголовка.
    • C - Нижний левый угол. Зона, куда практически не смотрят. Здесь нет смысла размещать важную информацию.
    • D - Нижняя правая зона. Зона принятия решения или выхода. Именно здесь важно разместить кнопку заказа, чтобы подтолкнуть пользователя к покупке.


Грамотно составленный шаблон UI дизайна учитывает все эти паттерны. А в связке с качественным контентом значительно повышает конверсию.

Как измерить влияние UI дизайна на конверсию своего сайта?

Чтобы максимально точно измерить влияние дизайна на конверсию вашего сайта, желательно объединить сразу несколько инструментов:

    • Использовать тепловую карту при анализе поведения пользователя на вашем сайте, чтобы понять, как он реагирует на те или иные элементы дизайна, удобны ли они ему.
    • Провести A/B тестирование или автоматическое UI тестирование, чтобы сравнить конверсию предыдущего варианта сайта и его новой версии.
    • Проанализировать результаты Google Analytics (или другого сервиса, измеряющего конверсию, достижение целей и другие показатели поведения пользователей на вашем сайте). Благодаря этому вы сможете понять на каком этапе взаимодействия с сайтом у пользователей возникают сложности и почему.
    • Воспользоваться сервисом Simplereach, позволяющим отследить поведение посетителей сайта в реальном времени: сколько времени занимает регистрация или поиск нужного товара, насколько удобна для них структура сайта.

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

Отчеты UX индустрии для выявления актуальных трендов и закономерностей

UI Industry reports – отчеты исследовательских организаций и UX платформ в UI тестировании. Множество компаний предоставляют доступ к результатам своих исследований UX, например BaymardUxpinLoopUXMagazine.

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

Так что, нужно создавать конверсионный дизайн по шаблону?

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

С другой стороны предпочтения очень быстро меняются и то, что было актуально пару лет назад, сегодня может выглядеть уже сильно устаревшим. Проверено, что обновлять дизайн нужно каждые 3-5 лет. Подробнее об этом читайте в нашей статье “Почему нужно обновлять UI каждые 5 лет”

На самом деле хороший конверсионный дизайн должен быть индивидуальным, ведь у каждого клиента своя целевая аудитория и свои персоны, на которых он ориентируется. Нельзя просто скопировать чужой UI или следовать советам вроде «10 принципов построения конверсионного вебсайта».

А для создания индивидуального дизайна понадобится глубокая работа с дизайнером и глубокое понимание задачи. Так мы работаем в Evergreen и будем рады поработать с вами. Хотите разработать дизайн, который принесет ощутимую пользу вашему бизнесу? Обращайтесь.

11.04.2019
Рейтинг: 0 / 5 (0)