Хочешь повысить отдачу от Директа?
Включи «Автопилот»

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

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

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

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

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
    SEOnews и Serpstat запускают конкурс для интернет-маркетологов
    Marina Lagutina
    1
    комментарий
    0
    читателей
    Полный профиль
    Marina Lagutina - Добрый день! Видимо я из тех, кто пытается последней вскочить в уходящий поезд. Ночью написала статью на тему "обзор инструментов контент-маркетинга". Своего блога нет. Отправила вам не мейл. Я еще могу у вас разместиться или искать, кто возьмет статью к себе в блог?
    Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
    NiK Malefictum
    3
    комментария
    0
    читателей
    Полный профиль
    NiK Malefictum - Стакивался лишь с тем, что выдачу немного лихорадит первые 2-3 недели, и если у сайта была низкая скорость загрузки - ее нужно поправить. Региональным сайтам НУЖНО ставить HTTPS немного внутряк поправить / микроразметку и прочее прописать мета и пересмотреть контент зарегать компанию в каталогах предприятий и картографии и уже делать просто сделать статейные ссылки бесплатные. и все
    Мир глазами поисковых систем
    Александр Рунов
    18
    комментариев
    0
    читателей
    Полный профиль
    Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
    Инфографика: самые распространенные SEO-ошибки Рунета
    Dmitro Grunt
    2
    комментария
    0
    читателей
    Полный профиль
    Dmitro Grunt - Кстати, у проектов которые продвигает Нетпик все тайтлы не более 65 символов? Или вы надеетесь что кто то послушает советов и отдаст вам часть трафика? :-)
    День рождения SEOnews: 12 лет в эфире!
    Анна Макарова
    0
    комментариев
    0
    читателей
    Полный профиль
    Анна Макарова - Ура )
    7 причин не работать на биржах копирайтинга
    Dasha Shkaruba
    6
    комментариев
    0
    читателей
    Полный профиль
    Dasha Shkaruba - Спасибо за мнение! Кстати, на бирже главреда прием анкет закрыт
    Google.ru внесли в реестр запрещенных сайтов
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
    Конкурс: угадайте пятерку лидеров рейтинга «SEO глазами клиентов 2017»
    Оля
    1
    комментарий
    0
    читателей
    Полный профиль
    Оля - 1 Ingate 2 Wezom 3 Bynjg vtlbf 4 seo energy 5 директ лайн
    SEMrush: факторы ранжирования в Google в 2017 году
    Анна Макарова
    0
    комментариев
    0
    читателей
    Полный профиль
    Анна Макарова - Уважаемый S1, я тоже понимаю, что есть такие люди, которые заметив допущенную неточность несутся на всех парусах продемонстрировать "силу" своего ума. Спасибо вам за пристальное внимание. Это поможет нам быть лучше.
    Сердитый маркетолог: как вы сами хороните свой сайт, или 16 принципов, которые нужно усвоить заказчикам SEO
    Руслан Латыпов
    2
    комментария
    0
    читателей
    Полный профиль
    Руслан Латыпов - Можно совершенно бесплатно заказать SEO-аудит своего сайта и получить все рекомендации по его продвижению a-erp.com/
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    310
    Комментариев
    262
    Комментариев
    226
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    97
    Комментариев
    97
    Комментариев
    95
    Комментариев
    80
    Комментариев
    77
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    55
    Комментариев
    53
    Комментариев
    52
    Комментариев
    48

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