Россия+7 (495) 960-65-87

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

Россия+7 (495) 960-65-87
Шрифт:
0 24702

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

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

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 секунд, это веская причина поработать над этим.

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


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


(Нет голосов)
Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Рейтинг Известности 2018: старт народного голосования
    Михаил Р
    1
    комментарий
    LANG_NO
    читателей
    Полный профиль
    Михаил Р - 1. Demis 2. кокс 3. Ашманов 4. Скобеев 5. Digital Strategy
    Сколько ссылок помогут продвинуть молодой сайт
    Павел Андрейчук
    29
    комментариев
    LANG_NO
    читателей
    Полный профиль
    Павел Андрейчук - Дело в том, что вряд ли в ваших платных "качественных" кейсах найдётся хоть пару % действительно новой и полезной информации которой бы не было на общедоступных источниках.
    Рейтинг Известности 2018: второй этап народного голосования
    Константин Сокол
    3
    комментария
    LANG_NO
    читателей
    Полный профиль
    Константин Сокол - Кто был ответственный за дизайн таблицы голосования? Копирайтер?
    Сайт на WordPress: за и против
    Мира Смурков
    1
    комментарий
    LANG_NO
    читателей
    Полный профиль
    Мира Смурков - Людмила, я согласен с большинством комментаторов. Вы хоть один полноценный магазин сделали на этих движках? Woocommerce это система с супер возможностями. И к ней есть дополнительные модули, с функционалом, который вряд ли появиться на Битрикс. А самому это программировать - сотни тысяч рублей на разработку. А приведя в пример сложности с robots.txt и Sitemap вы ставите под вопрос вашу компетенцию в понимании Интернет-бизнеса и веб-разработки в целом. Во-первых это такие мелочи, а во-вторых это все делается на вордпресса за 2 минуты, и опять же с возможностями многократно превышающими Битрикс.
    Кейс: вывод лендинга по изготовлению флагов на заказ в ТОП 1 по Санкт-Петербургу
    utka21
    5
    комментариев
    LANG_NO
    читателей
    Полный профиль
    utka21 - Кейс как кейс. Для некоторых станет вполне возможно полезным. ( Для конкурентов точно) . А вот с комментариями , что то пошло не так )
    Google обошел Яндекс по популярности в России в 2018 году: исследование SEO Auditor
    Рамблер
    1
    комментарий
    LANG_NO
    читателей
    Полный профиль
    Рамблер - Вот вроде отечественный - это сказано верно.. «Я́ндекс» — российская транснациональная компания, зарегистрированная в Нидерландах. Так говорится в Википедии. И с хрена ли ОТЕЧЕСТВЕННЫЙ поисковик зарегистрирован в Европе? И где платится основная часть налогов? Ну-ууу, точно не в России. И если запахнет жаренным, то был Яндекс и нет Яндекса!
    Обзор популярных CMS: плюсы и минусы
    Гость
    1
    комментарий
    LANG_NO
    читателей
    Полный профиль
    Гость - У Битрикса техническое seo сильно страдает, чтоб оно там было нормальным придется все переделать. Безопасность у Битрикса тоже низкая, особено если надо дорабатывать функционал, как только правиться функционал у Битрикс , то уровень ее безопасности определяет тот разработчик , который этим занимается. Самые безопасные движки те, что нет в общем доступе и где нельзя ничего редактировать в коде. =)
    8 методик в SEO, от которых давно пора отказаться
    Евгений Сметанин
    11
    комментариев
    LANG_NO
    читателей
    Полный профиль
    Евгений Сметанин - Факторов вообще очень много, согласитесь, вы будете использовать максимальное их количество, особенно, если в ТОПе засели агрегаторы с сумасшедшими ПФ. В таких случаях, вхождение ключа в домен для маленького профильного сайта, сыграет свою положительную роль. Конечно же, если контент на страницах хорошего качества. У меня есть несколько успешных кейсов на эту тему. На сайте продают несколько видов товаров, а выстреливает в ТОП тот, название которого присутствует в доменном имени. Как корабль назовешь, так он и поплывет, верно?))
    Инструкция: настраиваем цели Яндекс.Метрики через Google Tag Manager
    Roman Gorkunenko
    1
    комментарий
    LANG_NO
    читателей
    Полный профиль
    Roman Gorkunenko - Здравствуйте. Подскажите, пожалуйста, можно с айпи метрики вытащить среднюю стоимость клика по утм меткам? В метрике есть такой шаблон tags_u_t_m, но он не совместим с меткой директа, у них разные префиксы.
    Аудит структуры интернет-магазина мебели от «Ашманов и партнеры»
    Дмитрий
    8
    комментариев
    LANG_NO
    читателей
    Полный профиль
    Дмитрий - Сергей, а вы допускаете, что вся ваша жизнь - seo-миф?
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    343
    Комментариев
    262
    Комментариев
    244
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    100
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    80
    Комментариев
    71
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    57
    Комментариев
    56
    Комментариев
    55

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