Проводим аудит мобильной версии интернет-магазина: 7 шагов

Сергей Емельянов, ведущий BackEnd-разработчик digital-агентства Webit.

Мобильная версия сайта становится обязательным атрибутом практически любого бизнеса. Вслед за социальными сетями и мессенджерами в мобильный канал перешли интернет-магазины и всевозможные сервисы. 


По последним данным, использование интернета с обычных компьютеров упало с 74,2% в июле 2020 г. до 68,8% по состоянию на июль 2021 г., в то время как доля мобильных пользователей выросла с 24,5% до 29,9%. Большая часть трафика в наши дни идёт с мобильных устройств, даже большинство запросов В2В-сектора осуществляется через мобильные каналы.  

Популяризации мобильных сайтов способствуют и сами поисковые системы. По данным BrightEdge 62% всего органического поиска показывает разные результаты с десктопных и мобильных версий.

А что по поводу непосредственно самих покупок? 

Где покупатели охотнее совершают покупки — в настольных компьютерах или смартфонах? 

По данным Formstack, средний коэффициент конверсии для смартфонов вырос на 64% по сравнению со средним коэффициентом конверсии для настольных компьютеров. Ключевым аспектом здесь является то, что, когда пользователь берёт в руки смартфон, у него есть конкретная цель. Бизнес может извлечь из этого выгоду, показав конкретный и простой призыв к действию. А маркетологи должны улучшать мобильные версии сайта, упрощая и оптимизируя контент, который они предоставляют своим пользователям.

А нужен ли мобильный сайт бизнесу, который специализируется на оффлайн-продажах? 

Многие компании предлагают пользователю сайты-каталоги, без возможности продажи через интернет. При этом, по данным Facebook IQ, почти половина пользователей старше 21 года используют смартфоны для поиска товаров, прежде чем купить их в интернет-магазине или в офлайне. 

В исследовании, проведённом с участием более 2400 омниканальных покупателей, 46% тех, кто изучает рейтинги и обзоры продуктов, делают это с мобильных устройств. И лишь затем идут в магазин. Из тех, кто сравнивал цены до покупки офлайн, 36% делали это на мобильном устройстве. И 51% искали информацию о продукте со смартфона, находясь в магазине.

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

Мы собрали несколько простых рекомендаций по проведению аудита мобильной версии интернет-магазина. Цель большей части таких сайтов — продавать товары и услуги, даже если это просто каталог без кнопки «Купить». 

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

Шаг первый – Пытаемся себя найти

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

Как следует из приведённой выше статистики, чтобы сайт отображался в поиске на первых местах, он должен быть дружественен к мобильным устройствам. Самый простой способ проверить это — проанализировать его с помощью Google Page Speed.

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

Шаг второй – Клиент хочет зайти в магазин

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

Для интернет-магазина каждая секунда ожидания открытия страницы равносильна нескольким минутам в мире оффлайн. Проверьте, как долго ждёт пользователь открытия главной страницы сайта со смартфона. Если приходится ждать больше трёх секунд, значит всё плохо.

Страница грузится быстро? Тогда отключите Wi-Fi, откройте браузер в режиме инкогнито, попробуйте снова зайти на сайт и измерьте время.

По-прежнему всё работает хорошо? Теперь отложите свой смартфон и найдите модель постарше, не такую мощную, и снова зайдите на сайт.  Вас может ожидать небольшой сюрприз. Дело в том, что сейчас многие сайты работают на технологии SPA, которая позволяет быстро переходить по страницам, не перезагружая каждую из них. И, к тому же, добавляет интерактивности. Но поскольку технология основана на java-скриптах, ее использование может сильно замедлить загрузку: если файл со скриптами будет слишком объемным, устройству понадобится больше ресурсов и времени, чтобы скачать его, скомпилировать и воспроизвести. На слабых телефонах с маленьким объёмом памяти и слабым каналом связи это будет происходить крайне медленно.

Итак, проверка входа в магазин окончена, если вы смогли попасть на сайт меньше чем за три секунда и ваш телефон не завис, значит всё отлично.

Помните: По данным Marketing Dive, 53% пользователей закрывают сайт, если загрузка страниц занимает более 3 секунд. Риск потерять более половины потенциальных клиентов — вполне реален.

Шаг третий – Оцениваем уровень комфорта

Первое, что делает посетитель при входе в магазин — оглядывается и оценивает обстановку. Беспорядок на полках, отсутствие указателей, нечитаемые ценники вряд ли убедят его остаться и что-то купить. В интернет-магазине все аналогично. 

Сайт должен выглядеть по-разному на смартфоне и в десктопном браузере. Мобильный дизайн стоит делать максимально простым, без лишних элементов, все нужное должно поместиться на небольшой экран смартфона. Заголовки не должны быть длинными, чтобы избежать нагромождения строк или появления горизонтальной прокрутки. Шрифты должны быть читаемыми и приятными на вид. Кнопки — достаточно большими, чтобы их было удобно нажимать. Все эти моменты проверяются специалистами при UX/UI-аудите.

Шаг четвёртый – Ищем нужный нам товар

Если покупатель пришёл, например, за молоком, то нельзя заставлять его бегать в поисках товара по всему магазину. Велика вероятность, что, не найдя молока в первые пару минут, покупатель пойдёт в другой, более удобный магазинчик.

А на вашем сайте есть возможность быстрого поиска товаров? 

Может ли пользователь найти нужный ему товар за 5-10 секунд? Есть ли на сайте мобильное меню? А фильтр по категориям? Можно ли попасть в карточку нужного товара, совершив меньше трёх кликов? Вся ли необходимая информация есть в карточке товара? Есть ли картинки, видео-обзор? Указана ли цена?

Шаг пятый – Делаем покупку

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

Проверьте, достаточно ли заметна кнопка «Купить» в карточке товара? Выделяется ли она размером и цветом? Процесс оплаты или заказа звонка понятен пользователю и работает правильно? Приходит ли информация о покупателе в вашу CRM? Сколько вариантов оплаты вы предлагаете клиенту: картой, электронными деньгами, наличными при получении товара? Форма заказа удобна для заполнения?

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

Если вы хотите порадовать пользователей, есть множество замечательных плагинов, которые позволяют размещать кнопку вызова на мобильных страницах. Например, WP Call Button поможет вам создать кнопку, которая всегда будет видна пользователям со смартфонов и позволит им легко позвонить вам.

Кстати, особо стоит обратить внимание на форму заказа. Не стоит запрашивать у пользователя слишком много информации. Достаточно имени, номера телефона, адреса почты и платёжных реквизитов. Помните: заполнять формы с телефона очень неудобно.

Шаг шестой – О навязчивой рекламе

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

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

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

---

Читайте также: «Пушить» бизнес: 6 правил повышения эффективности push-уведомлений

---

Шаг седьмой – Постпродажный период

Согласитесь, не очень приятно сделать покупку в магазине, а потом несколько часов в полной неизвестности ожидать, пока продавцы вывезут товар со склада.  

Как вы обрабатываете заказы пользователей? Связываетесь с ними после покупки? Получают ли пользователи смс и электронные письма о статусе обработки заказа?
 

Бонус – Продолжайте тестирование

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

Если у вас большой трафик, можно провести опрос посетителей, узнать их мнение о сайте.
 
Забывать о мобильных пользователях ни в коем случае нельзя. В последние годы многие веб-дизайнеры и разработчики начали отдавать предпочтение именно этому сегменту ЦА. Будущее за мобильными устройствами, поэтому я рекомендую следить за тенденциями, чтобы иметь сайт, оптимизированный и удобный для мобильных устройств, вне зависимости от платформы, на которой он работает.

Сергей Емельянов,  
ведущий BackEnd-разработчик digital-агентства Webit.

Для New Retail