Юзабилити сайта и лендингов на мобильных устройствах

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

19 апреля 2018 года
340

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

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

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

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

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

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

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

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

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

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

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

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


Финансы

Знакомства

Путешествия

B2B

Финансы.png   

Знакомства.png   

Путешествия.png

 битуби.png 


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

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

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

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

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

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

  • Что видит пользователь;
  • Какую информацию он воспринимает;
  • Понятно ли что предлагает страница;
  • Понятно ли следующее действие;
  • Легко ли взаимодействовать с элементами.


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

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

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

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

Результаты АВ теста интернет-магазина.png
Результаты А/В теста интернет-магазина

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

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

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

Примеры тестирования текста призыва к действию.png

Примеры тестирования текста призыва к действию

Изображения

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

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

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

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


image4.png

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



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

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

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

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

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

image12.png

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

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

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



Шпаргалка

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

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

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


Материал подготовила Светлана Сирвида-Льорентэ.

Вам будет интересно

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

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

Произошла ошибка

Пожалуйста, попробуйте еще раз