Юзабилити и конверсия сайта

Для повышения конверсии юзабилити сайтов Google предлагает использовать методологию Conversion Rate Optimization. Она включает три блока: впечатления, взаимодействие и действия. За блок «Впечатления» отвечает главная страница сайта и лендинг. Основная задача на этом этапе - привлечь внимание и подчеркнуть ценность ресурса, на который попал пользователь. Для этого сформулируйте привлекательное ценностное предложение, действенный призыв к действию и запоминающиеся изображения. 

Методология «Оптимизации конверсии»:

Первое впечатление

Внимание пользователей. Для привлечения внимания важно первое впечатление, которое страница производит на посетителя. Согласно исследованиям Google, 80% внимания приходится на первый экран. Если он не заинтересовал, чаще всего пользователь уходит.

Всегда размещайте на первом экране мобильной страницы три элемента:

1. Призыв к действию (CTA).
2. Ценностное предложение.
3. Визуальные образы.

Расположение элементов на первом экране мобильного сайта

Призыв к действию (CTA) помогает начать взаимодействие с пользователем. Это необязательно должна быть классическая кнопка «купить». СТА — все, что будет мотивировать пользователя пойти дальше: посмотреть, сравнить, почитать, найти и др. При необходимости добавляйте на первый экран несколько призывов к действию.

Ценностное предложение. Добавляйте простую и понятную информацию. Это может быть как конкретный товар для покупки: новинка или спецпредложение, так и УТП компании - то, что ее отличает от других. Благодаря ценностному предложению пользователь должен захотеть остаться на сайте.

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

Примеры интерфейса первого экрана

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

Варианты использования телефона

Размещение элементов. Если СТА размещена в самом центре, то делайте кнопку меньшего размера и не такую яркую. Когда СТА находится вверху или внизу, увеличивайте ее размер и делайте ярче. Потому что чем дальше от центра экрана находится элемент, тем сложнее пользователю по нему попасть.

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

Тест. Проведите тестирование первого экрана сайта. Ответьте на следующие вопросы:

Ценностное предложение

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

Ценностное предложение для B2B делайте длиннее и информативнее, чем при продажах B2C. Составьте предложение из трех частей: заголовок, подзаголовок и усилители. Заголовок сформулируйте кратко и ярко, чтобы он привлек внимание. Это может быть девиз или слоган компании. Подзаголовок сделайте описательным. Раскройте в нем суть предложения или укажите УТП бизнеса. Он может быть оформлен в виде списка. Усилители добавят доверия и отработают потенциальные возражения.

Варианты тестирования. Обязательно тестируйте ценностное предложения: суть, формулировки, оформление в виде списка, иконок или текстом. Тестируйте расположение: размещайте на первом экране или на всех страницах сайта. В предложенном примере интернет-магазин оформил предложение в виде вопроса «Почему покупать у нас» и добавил иконки преимуществ. Проведенный тест показал, что количество отказов снизилось до 50%.  

Призыв к действию

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

В примере проводилось тестирование СТА для разных сайтов. Одинаковый призыв “Get” в первом случае увеличил конверсию, во втором — снизил. Связано это со смыслом призыва. На первом сайте призыв означает «получи выгоду», конверсия юзабилити выросла. На втором сайте призыв означает процесс, конверсия упала.

Изображения

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

Тестирование фотографий с разным направлением взгляда

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

Доля кликов по изображениям в автоматической карусели

Остальные элементы

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

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

Длина страницы. Обязательно тестируйте длину страницы, потому что нельзя точно сказать, что будет лучше конвертироваться. Google предполагает, что для мобильных устройств короткие лендинги с одним СТА будут более эффективными. Например, корпоративный мессенджер Slack сократил мобильный вариант лендинга до одного экрана. Он оставил картинку, предложение и кнопку СТА. Для тестирования лендингов создайте три варианта: длинный, короткий и суперкороткий — один экран.

Варианты лендингов под десктопные и мобильные устройства

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

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

Шпаргалка

1. Конверсия мобильной версии сайта или лендинга сильно зависит от первого экрана, на который приходится до 80% внимания пользователя.

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

3. Всегда тестируйте подпись СТА, расположение кнопки и формат ценностного предложения. Дополнительно протестируйте изображения, наличие строки поиска, длину лендинга.