×
Россия +7 (495) 139-20-33

10 A/B-тестов для мобильных сайтов

Россия +7 (495) 139-20-33
Шрифт:
0 25693

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

Основные принципы:

1. Будьте строги. Пространство экрана на мобильных устройствах ограничено, поэтому не размещайте на страницах много разных элементов. Это будет только отвлекать.

2. Сократите выбор. Это всегда повышает конверсию, и особенно важно на мобильных.

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

1. Показывайте товары на главной странице

Зачастую, чтобы поприветствовать или удивить посетителей, владельцы сайтов размещают на главной странице информацию о распродажах, историю компании и так далее. Вот пример с сайта Alex and Ani — на главной странице информация о десятилетии интернет-магазина:

1alex-and-ani.png

Приятный дизайн привлекает посетителей, однако на экране мобильного эта страница может раздражать. Решение: разместить на главной товары-бестселлеры. Это сократит путь пользователя.

Было: Главная — Клик на CTA > Просмотр товаров > Добавление в корзину > Оформление заказа.

Стало: Просмотр товаров > Добавление в корзину > Заказ.

Чтобы убедиться в этом, уберите слайдеры и разместите на главной популярные товары. Вот пример трансформации.

1before-25-percent-off.png

Стало:

1after-best-sellers.png

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

2. Оформляйте заказ в один клик или разместите все поля на одной странице

Зачастую процесс оформления заказа на мобильном устройстве начинается с предложения оформить аккаунт, чтобы потом было быстрее покупать и прочее, и кнопки «Продолжить»:

2step1-account-detials.png

Упростить оформление заказа можно двумя способами:

1. Используйте jQuery, чтобы создать одну страницу с несколькими шагами.

Пример TopShop.com:

2topshop-mobile.png

Отслеживать процесс помогают ссылки наверху.

2. Встройте все шаги оформления покупки на одну страницу.

Пример от Alex and Ani:

2alex-and-ani-order-summary.png

Увеличение конверсии после такого редизайна составляло от 10% до 40% (в зависимости от исходных показателей).

3. Сократите количество полей ввода

Чем меньше полей в оформлении заказа, тем выше коэффициент конверсии. Это справедливо для всех устройств, но особенно важно на мобильных.

Что можно убрать:

1. Поля ввода. Это легко протестировать, хотя бывает трудно сделать.

Например, на иностранных сайтах можно убрать поле Город / Штат, обойтись полем Zip Code:

3mobile-billing-address.png3after-billing-address.png

2. Создание аккаунта. Оставьте это на потом. Заказ важнее аккаунта.

Пример от New Balance:

3mobile-shipping-page.png

Email включен в оформление заказа (а не размещен на отдельной странице с кнопкой «Продолжить»), что упрощает задачу. Не исключено, что и это может отпугнуть некоторых покупателей.Однако оформление заказа без необходимости создавать аккаунт — отличное решение.

4. Акцентируйте внимание на скорости оформления заказа

Люди, посещающие сайты интернет-магазинов с мобильных устройств, располагают еще меньшим количеством времени, чем на десктопе. Попробуйте использовать фразы «Быстрое и легкое оформление товара» или «Оформление заказа в один клик».

Например, было:

4items-in-your-shopping-bag.png

Стало:

4items-in-your-shopping-bag-after.png

Тест легко провести — требуется только заменить кнопку, так как всем нужно пройти через оформление заказа, чтобы совершить покупку. Есть данные, что, сделав акцент на скорости оформления заказа, вы можете увеличить кликабельность на 15% и общую конверсию приблизительно на 10%.

5. Уберите CTA

Пространство на экране смартфона ограничено. Можно разместить несколько CTA на десктопной версии, но на мобильных важно выбрать главное.

Что можно убрать:

1. Подписка на email-рассылку. Напомните о ней после оформления заказа.

2. Добавление в виш-лист. Добавить в избранное или поставить лайк удобно только на десктопе.

Было:

5remove-ctas-mobile-before.png

Стало:

5remove-ctas-mobile-after.png

Лучше предлагать подписку на рассылку / создание аккаунта после совершения покупки. Клик на оформление заказа важнее нового подписчика практически во всех случаях.

6. Увеличьте размер CTA-кнопок

Кнопки «Добавить в корзину» и «Оформить заказ» являются ключевыми CTA, поэтому должны быть гигантскими по размеру. Если на них нельзя кликнуть, нельзя купить.

Вот пример до и после:

6boost-cta-size-before.png6boost-cta-size-after.png

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

7. Сократите выбор

Попробуйте уменьшить количество товаров, которые вы предлагаете (особенно на страницах категорий), и оставьте только топовые позиции. Пользователи не готовы бесконечно скроллить, делите товары на группы.

Вот пример от Under Armour:

7reduce-product-choice.png

Как видим, еще 18 наименований скрыты кнопкой «Показать все». Вот пример от New Balance:

7neutral-cushioning-mobile.png

Опять-таки, скрыв 31 позицию, проще сконцентрировать внимание на лучших товарах. Дайте пользователям возможность посмотреть все, но не вынуждайте их скроллить.

Провести A/B тестирование просто: сравните исходную страницу с вариантом, на котором присутствуют несколько популярных товаров и кнопка «Показать все».

8. Упростите навигацию

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

1. Сократить. Показывать клиентам только популярные позиции.

Hunter Boots предлагают пользователям буквально открывать (англ. discover) новые товары, и не помещают список всех доступных категорий на главной.

8make-navigation-easy-mobile.png

2. Добавить подразделы. Разбейте навигационную цепочку на шаги. Это упростит скроллинг.

Например, New Balance используют подменю для мужских товаров:

8mens-sub-menu.png

И для мужской обуви:

8shoe-sub-menu.png

Преимущество такого подхода в том, что можно быстро направить посетителя к товару, который ему нужен, (1) без изъятия какой-либо категории (что потенциально ведет к потере клиента) и (2) без принуждения делать лишние шаги, если нужный раздел найден.

9. Разместите строку поиска на видном месте

Убедитесь, что посетителям интернет-магазина понятно, где находится строка поиска. Лучшие места для нее:

1. В верхней части меню.

9search-bracelets.png

2. Верхняя правая / левая области хэдера.

9hunter-mobile-commerce.png

Пространство в мобильном ограничено, поэтому легкость поиска сделает процесс покупок легче.

10. Уменьшите размер картинок

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

10mobile-best-sellers.png

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

Как протестировать? На самом деле это больше из области исправлений. А чтобы проверить, как это работает, проведите сплит-тестирование страницы с исходными и с меньшими / более быстрыми изображениями (или сравнить текущий хостинг и новый).


Будьте безжалостны. Сокращайте. Дробите. Тестируйте. Помните о скорости.


(Голосов: 5, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Ане Макаровой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Кейс: как за 30 дней вывести новый сайт в ТОП выдачи Google
Сергей
2
комментария
0
читателей
Полный профиль
Сергей - Прошёл у Паши курс год назад, пытался продвигать свой сайт portativ.org.ua, но особых продвижений нет. Наверное сео уже умерло??
Как стандартизировать данные семантики с помощью логарифмов
Юлий
1
комментарий
0
читателей
Полный профиль
Юлий - Чем снималась коммерцелизация?
Облако тегов в интернет-магазине: прикладная инструкция по увеличению трафика
Юлия Дмитриева
2
комментария
0
читателей
Полный профиль
Юлия Дмитриева - Согласна с вами, что в любом деле важен индивидуальный подход:)
Специалисты в Рунете заметили глобальную накрутку поведенческих факторов
Дмитрий Кулаевский
1
комментарий
0
читателей
Полный профиль
Дмитрий Кулаевский - кто-нибудь знает как с этим бороться? очень много такого трафа идёт с июля, сайт сильно просел
Платные и бесплатные курсы по SEO и интернет-маркетингу для новичков и опытных специалистов
Алексей Терещенко
1
комментарий
0
читателей
Полный профиль
Алексей Терещенко - Запустил бесплатный марафон для SEO специалистов с нуля в Фейсбуке. Рекомендую начинать совой путь с него и дальше уже определятся, нравится направление или нет. Так же на базе обучающего марафона есть сообщестово в котором все в удобном формате общаются и постигают профессию. Моя миссия - создать сообщество крутых и образованых seo специалистов и поднять качество услуг на высокий уровень. Кому интересно, присоеденяйтесь www.facebook.com/groups/startseofree/
Яндекс возобновил «показательные порки» за накрутку поведенческих факторов
Антон
1
комментарий
0
читателей
Полный профиль
Антон - Никакой не выпал. Кроме клиентского сайта, который проседал из-за скрутки, о чем Я.Поиску сообщали и клиенту тоже. Ноль реакции от поисковика (продолжайте развивать сайт, никаких проблем нет ...). Клиенту надоело и он заказал накрутку у подрядчиков. Мы искренне ждали бана, сообщали об этом клиенту, т.к. мы все таки делаем все остальное для развития. Как итог: с лета полет нормальный. Сайт растет, никаких проблем. Случайно даже стажер палил тех поддержке факт использования накрутки. И ничего. Сайт растет дальше. Если они не могут ничего принять даже после признания факта накрутки, что они могут сделать с жалобами на накрутку конкурентов?! Никогда не одобряли данные методы, но ... похоже ... все работает :)
Сколько стоит SEO на фрилансе. Кейсы
Людмила
1
комментарий
0
читателей
Полный профиль
Людмила - Очень спорная статья. Особенно оценка. К примеру, за 1500 руб. 200 вечных ссылок с быстрой индексацией. Это про какой год? Про 2020? Точно? Собственно, в текущих реалиях при хорошем раскладе за эти деньги можно получить 3-4 качественные ссылки. А никак не 200. Если 200, то такие ссылки, по 7,5 руб. за штуку выбьют сайт за ТОП-100. А заказчик будет в шоке, он же все правильно делал, по инструкции из статьи в уважаемом издании.
«Нет в наличии»: что делать с карточками отсутствующего товара
freyr energy
1
комментарий
0
читателей
Полный профиль
freyr energy - Thank you so much @ admin for share your valuable thoughts and ideas We always enjoy your articles its inspired a lot by reading your articles day by day. So please accept my thanks and congrats for success of your latest series. We hope, you should published more better articles like ever before solar rooftop
Яндекс тестирует оценки сайта в сниппете
Сергей Демин
8
комментариев
0
читателей
Полный профиль
Сергей Демин - вопрос такой: где получить оценку о сайте? а не об организации
15 языков программирования, за знание которых платят выше среднего
Любомир
2
комментария
0
читателей
Полный профиль
Любомир - Ну и ЗП: ни слова о том что она варируеться от 0 до 100 000$ в год!!! Что до высокой зп надо несколько лет етим заниматся! Что 100 000$ в год на западе заробатывают, а где нибудь в азиатских страннах 100$ в год. В СНГ первые годы в разработчика ЗП как в грузчика на складе - это где то 4-5 тыс. долларов в год, и уже имея несколько лет опыта возможно дойти до 10-20 тыс. долларов в год! Почему нет конкретики? Меня лично нервирует то что людям внушают великие ЗП в АйТи, а люди тупые и ведутся!!!!
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
384
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
113
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
91
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
60
Комментариев
59
Комментариев
57

Отправьте отзыв!
Отправьте отзыв!