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

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

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

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

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
    Рейтинг «Известность бренда SEO-компаний 2017»: народное голосование
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - 1) Ingate 2) Ашманов 3) Кокос 4) Russian Promo 5) Netpeak
    «Баден-Баден»: как выйти из-под фильтра
    Сергей Дембицкий «Sima-Land.ru»
    17
    комментариев
    0
    читателей
    Полный профиль
    Сергей Дембицкий «Sima-Land.ru» - Скрины Метрики показывать не буду, но мы (sima-land.ru - 1,5 млн. стр. в поиске Яндекс) в сентябре загремели под ББ, в разгар сезона и вышли из-под фильтра, спустя 50 дней, удалив все тексты с сайта: категории + карточки товаров (описание). Трафик с Google только вырос. Тексты возвращать собираемся, но процесс будет длительный, тексты будем теперь писать исключительно полезные, т.к. было больно :-))
    Второе дыхание ссылочного продвижения
    Автопилот
    14
    комментариев
    0
    читателей
    Полный профиль
    Автопилот - Еще лучше, когда продвижение осуществляется комплексно :)
    Кейс: продвигаем бизнес по продаже пластиковых окон в Москве
    Иван Стороженко
    5
    комментариев
    0
    читателей
    Полный профиль
    Иван Стороженко - 1. По началу вообще не использовали, сейчас уже много каналов используется. 2. Все может быть, в принципе сайты должны быть удобны для пользователя, для этого и нужна схожесть между собой. Честно говоря старались брать все самое интересное у конкурентов + подкреплять своими идеями.
    «Прямая линия» с Александром Алаевым («АлаичЪ и Ко»): отвечаем на вопросы
    Александр Алаев
    13
    комментариев
    0
    читателей
    Полный профиль
    Александр Алаев - Роман. Тут ответ очень простой. Каждый запрос можно четко разделить на коммерческий или некоммерческий. "Купить слона" и его длинные хвосты - коммерческий. "Как выбрать слона" и подобные - информационные. Вот под коммерческие ключи должны быть страницы услуг или каталога товаров. А под информационку - блог. Очень важно не путать их, тем более несоответствующая коммерческим факторам страниц просто не продвинется, то есть по запросу с "купить" блог никогда не будет показываться в выдаче, так же как и страница услуги/товаров не покажется по "как выбрать". Понятно примерно?
    Западные специалисты выяснили, как повысить позиции ресурса в выдаче Google
    Максим Мирошник
    2
    комментария
    0
    читателей
    Полный профиль
    Максим Мирошник -
    Инфографика: самые распространенные SEO-ошибки Рунета
    Dmitro Grunt
    2
    комментария
    0
    читателей
    Полный профиль
    Dmitro Grunt - Кстати, у проектов которые продвигает Нетпик все тайтлы не более 65 символов? Или вы надеетесь что кто то послушает советов и отдаст вам часть трафика? :-)
    Google.ru внесли в реестр запрещенных сайтов
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
    «Прямая линия» с Артуром Латыповым: отвечаем на вопросы
    God Koss
    1
    комментарий
    0
    читателей
    Полный профиль
    God Koss - Добрый день! Есть сайты одной компании продвигающиеся в разных странах. .ru .com .net. На российском сайте два языка ru и en, на остальных до 10 языков. Недавно сайт ru по основному брендовому запросу выпал из выдачи Яндекс но после апа вернулся на вторую позицию. На вопрос аффилирования в тех поддержку, получит ответ, что всё в порядке и сайт com не учавствует в выдаче. Но он есть и занимает 1 место. Как быть в данной ситуации? Так же, после возврата в топ 10 по этому запросу зашла еще одна внутренняя страница. Могло ли это случиться из-за каннибализации запроса? Немного изменил description на внутренней, исключил вхождения брендового запроса. Жду апа. Хотел бы услышать ваше мнение. Заранее благодарю!
    Как бесплатно публиковать гостевые посты без миралинкс и бирж ссылок
    Liliya
    1
    комментарий
    0
    читателей
    Полный профиль
    Liliya - Лично для меня черный гостевой постинг со всеми этими биржами ссылок (таких как www.miralinks.ru и sponsoredreviews.com... ) давно уже в прошлом. Белый постинг имеет на много больше преимуществ, перечислять их конечно же не буду... А вообще, хотела поблагодарить за Ваш онлайн-калькулятор, действительно ускорил мне работу, а еще он удобный и быстрый в использовании.
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    314
    Комментариев
    262
    Комментариев
    229
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    97
    Комментариев
    97
    Комментариев
    95
    Комментариев
    80
    Комментариев
    78
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    55
    Комментариев
    54
    Комментариев
    52
    Комментариев
    49

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