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

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

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

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

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

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
Что скрывает «Прогноз бюджета Яндекс.Директ»?
Михаил Мухин
15
комментариев
0
читателей
Полный профиль
Михаил Мухин - Здравствуйте! 1-2. Считает стенд. Ссылка на него дана, но могу повторить: online.p-c-l.ru/competition/task/card/id/106. Нажмите на кнопку "Начать" и заранее приготовьте прогноз бюджета Яндекс. Суть расчета: перебор комбинаций всех ставок на всех фразах, построение бюджетных когорт - бюджетов с одинаковым СРС, отбор в каждой когорте бюджета с максимальным количеством кликов и ..., да упорядочивание этих бюджетов по мере возрастания СРС, причем берем не все, а с фиксированным шагом. 3. Гугл считается через поправочные коэффициенты. Мы перевариваем океан данных и представляем их. На удивление, получается не менее, хотя и не более точно, как и прогноз Яндекс. Конечно, нужно понимать, что это очень примерные прикидки, фактически перевод неточного прогноза Яндекс в удобочитаемую форму, не больше. Самое интересное начинается, когда применяешь метод бюджетных когорт к измерению показателей фраз на реальной рекламной кампании в режиме 48х7. Первые результаты очень хорошие. Если хотите присоединиться к бесплатному тестированию, напишите Эльвире r-support@r-broker.ru. В теме укажите "хочу присоединиться к тестам Умного управления рекламой"
Ссылочное продвижение локальных сайтов: ТОП худших SEO-методов
demimurych
8
комментариев
0
читателей
Полный профиль
demimurych - о господи. это для регионального сайта? в яндексе? где у сайта по региону конкурентов меньше чем выдачи на двух страницах из которых перваш это реклама москвы? потешно ей богу. ктото чего то не понеимает.
От мечты стать юристом к собственному SMM-агентству. Как найти себя в современном цифровом мире
Виктор Брухис
5
комментариев
0
читателей
Полный профиль
Виктор Брухис - Статья выглядит так, как пожелали редакторы и интервьюер) Вопросы к интервью подбирал не я)) Хотя, в целом я согласен с вашим видением. А за пожелание удачи большое спасибо!
Зачем подменять контент на сайте: разбираем инструмент и развенчиваем мифы
Дмитрий Сульман
4
комментария
0
читателей
Полный профиль
Дмитрий Сульман - Все верно, об этом я и говорю. У крупных компаний есть много данных и они имеют доступ к дорогим технологиям и решениям для персонализации контента. Топовые западные сервисы для персонализации, такие как RichRelevance или Dynamic Yield, стоят от нескольких тысяч до десятков тысяч долларов в месяц. Понятно, что малый бизнес не может себе этого позволить. Да даже если бы чисто теоретически и мог, то это вряд ли бы имело хоть какой-то смысл. Во-первых, у малого бизнеса недостаточно данных, чтобы подобные алгоритмы персонализации начали эффективно работать, а во-вторых, тот профит, который МСБ получит от персонализации, никогда не покроет таких расходов. Мы же предлагаем решение, доступное как раз для малого и среднего бизнеса. При этом наше решение комплексное: МультиЧат - это одновременно и инструмент для персонализации, и для коммуникации.
Как провести анализ содержания страниц товаров и категорий
Никита Седнин
3
комментария
0
читателей
Полный профиль
Никита Седнин - Спасибо!
Монетизируйте свой сайт вместе с VIZTROM
VIZTROM
3
комментария
0
читателей
Полный профиль
VIZTROM - Добрый день! Так как мы сейчас работаем в приватном режиме, Вы врятли можете объективно оценить нашу рекламную площадку. У нас будет официальный запуск 3 марта для вебмастеров. Приглашаем Вас присоединиться к нам и лично посмотреть наш функционал.
Digital-разговор: Михаил Шакин про SEO, Google и заработок в интернете
Анна Макарова
368
комментариев
0
читателей
Полный профиль
Анна Макарова - Подготовим ) Пока предлагаю почитать интервью с Денисом Нарижным из той же серии. Там стенограмма =) www.seonews.ru/interviews/digital-razgovor-denis-narizhnyy-pro-ukhod-iz-seo-i-zarabotok-na-partnerkakh/
Как удвоить выручку за счет продвижения в поиске. Кейс coffee-butik.ru
Максим Боровой
3
комментария
0
читателей
Полный профиль
Максим Боровой - Последний вопрос (извиняюсь за количество) - почему на "В корзину" стоит Nofollow. Осознанно для распределение весов?
Кейс Hansa: как увеличить органический трафик в 1,5 раза
Алексей Порфирьев
3
комментария
0
читателей
Полный профиль
Алексей Порфирьев - Спасибо за замечание, о данной проблеме известно, но она не стоит в порядке приоритетных. Вопрос, на самом деле, дискуссионный. В тематике конкуренция не настолько велика, а в топе выдачи часто встречаются сайты с более серьёзными техническими проблемами. По этому, именно в статьях, более важно работать над релевантностью контента, отношением времени пользователя на странице к уровню доскрола, и различным пользовательским функционалом (рейтинг материала, просмотры и т. п.).
Автоматические SEO-аудиты: как напугать некорректными выводами
SEOquick
38
комментариев
0
читателей
Полный профиль
SEOquick - Парсинг сайтов – это самый лучший способ автоматизировать процесс сбора и сохранения информации. Конкурентов всегда нужно мониторить, а не сравнивать свой сайт через автоматический аудит анализатора.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
368
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
139
Комментариев
121
Комментариев
108
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
85
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

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