Ничего лишнего: как создать удобную мобильную версию интернет-магазина

Здравствуйте!

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

Согласно исследованию, которое провели Яндекс.Маркет и компания GfK Rus, почти для 60% активных пользователей интернета интернет-шопинг со смартфона — это регулярное ежедневное занятие, своего рода развлечение, даже более популярное, чем игры или просмотр фильмов. И количество любителей «мобильных» покупок растёт.

Как же сделать мобильную версию интернет-магазина наиболее оптимальной?

1. Изучите ваших покупателей

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

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

Данные о мобильном трафике, а также отчёт по многоканальным последовательностям можно получить, воспользовавшись сервисом Google Analytics.

2. Предвосхитите потребности

Узнав о посетителях интернет-магазина больше (какие товары они просматривают, что заказывают), вы сможете предугадать, что именно им предложить. Поместите, исходя из полученных данных, специальный призыв к действию на главной странице.

  • Используйте возможности мобильного интернета, например, определение местоположения клиента. Это даст возможность сразу же рассчитать стоимость доставки и предложить на выбор варианты, как именно забрать или получить товар.
  • По данным Google, до 80% пользователей смартфонов используют их для сравнения товаров и цен. Добавьте в описание товара рейтинг, короткие отзывы или ссылку на текстовый или видеообзор, сделайте акцент на «эксклюзивных ценах», скидках или спецпредложениях, чтобы клиент видел, что покупать лучше у вас.
  • Введите услугу «обратный звонок», когда оператор колл-центра помогает довести покупку до конца.
  • Разместите кнопки «поделиться» в соцсетях или мессенджерах (чтобы, например, показать друзьям то, что вы предлагаете приобрести в подарок «в складчину»). Многие покупатели это оценят.

3. Ликвидируйте лишние шаги

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

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

Простота регистрации в мобильной версии интернет-магазина Nike, отличный пример разработки мобильной версии сайта
Простота регистрации в мобильной версии интернет-магазина Nike

4. Минимизируйте время загрузки

Мобильная версия интернет-магазина должна быть максимально облегчённой — для того, чтобы потенциальный покупатель не нервничал в ожидании загрузки страницы. Статистика жестока: до 40% пользователей мобильных устройств признались, что будут ждать не более 3-х секунд.

В пример можно привести опыт известного ритейлера Walmart. 2,5 года назад мобильный сайт интернет-магазина грузился более 7 секунд. Через год компания сократила время загрузки страницы до 2,9 секунд: разработчики поменяли шрифты, оптимизировали изображения, подкорректировали контент. Итог впечатляет: за каждую сминусованную секунду Walmart получил плюс 2% конверсии.

Узнать скорость загрузки вашего сайта можно при помощи сервиса Page Speed Insights.

5. Подумайте об удобстве

То, что хорошо для компьютера, «смерть» для мобильного устройства. Вместо курсора мыши — пальцы. Протестируйте, насколько удобно оформлять заказ таким образом.

Несколько подсказок по созданию мобильной версии интернет-магазина:

  • Кликать пальцами удобнее не по текстовым ссылкам, а по довольно большим кнопкам, которые показывают, что клик сделан (например меняют цвет).
  • Чтобы не перегружать экран, можно использовать выпадающее меню, где до поры до времени будут спрятаны прочие элементы.
  • Сразу же показывайте цену на товар, а не прячьте её, чтобы пользователю не пришлось производить дополнительные манипуляции.

Информация о товаре в мобильной версии интернет-магазина PUDRA
Информация о товаре в мобильной версии интернет-магазина PUDRA

6. Не урезайте контент в мобильной версии интернет-магазина

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

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

Информация на главной странице мобильной версии интернет-магазина Wildberries
Информация на главной странице мобильной версии интернет-магазина Wildberries

 

Распространённые технические ошибки при создании мобильных сайтов:

Блокировка JavaScript, CSS и графических файлов. Если в файле robots.txt будет закрыт доступ к этим ресурсам, Google не сможет правильно проанализировать и проиндексировать содержание сайта. Это приведёт к ухудшению позиций в поиске. Для того, чтобы это исправить, нужно предоставить роботу Googlebot доступ к JavaScript, CSS и графическим файлам.

Невоспроизводимый на мобильных устройствах контент (например, требующий Flash, либо других неподдерживаемых проигрывателей). Это сильно разочаровывает посетителей. При разработке мобильной версии сайта анимированный контент можно заменить на HTML5 (подобную анимацию можно создать, например, при помощи Google Web Designer).

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

Неудобные межстраничные объявления (реклама приложений, формы подписки и так далее). Они, как правило, раздражают пользователей, так как перекрывают всю страницу, либо их сложно закрыть.

Маленький размер шрифта, что заставляет клиента применять жесты для увеличения масштаба.

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

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

А у вашего интернет-магазина есть мобильная версия? С какими проблемами в её создании вы столкнулись? Делитесь опытом в комментариях!

Подготовила Виктория Чернышёва.

Ничего лишнего: как создать удобную мобильную версию интернет-магазина
4.9 (97.33%) 15 votes