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

Адаптивный дизайн, как известно, не роскошь, а важный тренд и фактор, напрямую влияющий на успешность бизнеса.
Согласно исследованию, которое провели Яндекс.Маркет и компания GfK Rus, почти для 60% активных пользователей интернета интернет-шопинг со смартфона — это регулярное ежедневное занятие, своего рода развлечение, даже более популярное, чем игры или просмотр фильмов. И количество любителей «мобильных» покупок растёт.
Как же сделать мобильную версию интернет-магазина наиболее оптимальной?
1. Изучите ваших покупателей
Это важно: вы должны знать, как и когда ваши потенциальные покупатели заходят на сайт. Используют ли они мобильный по пути на работу, какие именно устройства предпочитают, сколько времени проводят в интернет-магазине, что именно ищут и что покупают, какова статистика отказов, какова конверсия и динамика «мобильных» посещений.
Таким образом, вам нужно узнать, какой путь проходят посетители вашего сайта, прежде чем сделать завершающий клик — оформить покупку, либо на каком этапе они сходят с «дистанции».
Данные о мобильном трафике, а также отчёт по многоканальным последовательностям можно получить, воспользовавшись сервисом Google Analytics.
2. Предвосхитите потребности
Узнав о посетителях интернет-магазина больше (какие товары они просматривают, что заказывают), вы сможете предугадать, что именно им предложить. Поместите, исходя из полученных данных, специальный призыв к действию на главной странице.
Используйте возможности мобильного интернета, например, определение местоположения клиента. Это даст возможность сразу же рассчитать стоимость доставки и предложить на выбор варианты, как именно забрать или получить товар.
По данным Google, до 80% пользователей смартфонов используют их для сравнения товаров и цен. Добавьте в описание товара рейтинг, короткие отзывы или ссылку на текстовый или видеообзор, сделайте акцент на «эксклюзивных ценах», скидках или спецпредложениях, чтобы клиент видел, что покупать лучше у вас.
Введите услугу «обратный звонок», когда оператор колл-центра помогает довести покупку до конца.
Разместите кнопки «поделиться» в соцсетях или мессенджерах (чтобы, например, показать друзьям то, что вы предлагаете приобрести в подарок «в складчину»). Многие покупатели это оценят.
3. Ликвидируйте лишние шаги
Использование мобильного интернета имеет свою специфику: в приоритет у большинства пользователей выходит скорость и удобство совершения покупки. Чем меньше шагов клиент пройдёт до корзины, тем больше шансов, что покупка состоится.
Введите возможность совершить покупку без регистрации (или максимально её упростите), сделайте так, чтобы клиент мог позвонить в колл-центр в один клик. Исключите необходимость набирать длинный текст: далеко не все любят «писать романы» с мобильных устройств. И обязательно сделайте простой и быстрый, в один клик, доступ к корзине.
4. Минимизируйте время загрузки
Мобильная версия интернет-магазина должна быть максимально облегчённой — для того, чтобы потенциальный покупатель не нервничал в ожидании загрузки страницы. Статистика жестока: до 40% пользователей мобильных устройств признались, что будут ждать не более 3-х секунд.
В пример можно привести опыт известного ритейлера Walmart. 2,5 года назад мобильный сайт интернет-магазина грузился более 7 секунд. Через год компания сократила время загрузки страницы до 2,9 секунд: разработчики поменяли шрифты, оптимизировали изображения, подкорректировали контент. Итог впечатляет: за каждую сминусованную секунду Walmart получил плюс 2% конверсии.
Узнать скорость загрузки вашего сайта можно при помощи сервиса Page Speed Insights.
5. Подумайте об удобстве
То, что хорошо для компьютера, «смерть» для мобильного устройства. Вместо курсора мыши — пальцы. Протестируйте, насколько удобно оформлять заказ таким образом.
Несколько подсказок:
Кликать пальцами удобнее не по текстовым ссылкам, а по довольно большим кнопкам, которые показывают, что клик сделан (например меняют цвет).
Чтобы не перегружать экран, можно использовать выпадающее меню, где до поры до времени будут спрятаны прочие элементы.
Сразу же показывайте цену на товар, а не прячьте её, чтобы пользователю не пришлось производить дополнительные манипуляции.
6. Не урезайте контент в мобильной версии
Наполнение сайта должно быть одинаковым: доступ ко всему ассортименту покупатель должен получить на любом устройстве. Да, в мобильной версии лучше размещать ёмкие описания товара (дополнительную информацию можно спрятать в разворачивающихся подразделах), возможно, меньшее количество фотографий одного товара. Но важно, чтобы посетитель сайта имел возможность выбирать точно так же и точно из того же, что и в версии интернет-магазина для ПК.
Это же касается и прочего контента, например, информации для потребителей, ответов на наиболее часто встречающиеся вопросы, контактных данных и так далее. Всё, что можно, лучше сократить без ущерба для смысла.
Распространённые технические ошибки при создании мобильных сайтов:
Блокировка JavaScript, CSS и графических файлов. Если в файле robots.txt будет закрыт доступ к этим ресурсам, Google не сможет правильно проанализировать и проиндексировать содержание сайта. Это приведёт к ухудшению позиций в поиске. Для того, чтобы это исправить, нужно предоставить роботу Googlebot доступ к JavaScript, CSS и графическим файлам.
Невоспроизводимый на мобильных устройствах контент (например, требующий Flash, либо других неподдерживаемых проигрывателей). Это сильно разочаровывает посетителей. Анимированный контент можно заменить на HTML5 (подобную анимацию можно создать, например, при помощи Google Web Designer).
Неправильные переадресации. Если у вас есть отдельные мобильные версии страниц, необходимо настроить переадресацию для каждой из них. Перенаправление на другие страницы, например на главную, считается ошибкой. То же самое касается ошибки в перекрестных ссылках, когда пользователь возвращается не на страницу, с которой ушёл, а на главную.
Неудобные межстраничные объявления (реклама приложений, формы подписки и так далее). Они, как правило, раздражают пользователей, так как перекрывают всю страницу, либо их сложно закрыть.
Маленький размер шрифта, что заставляет клиента применять жесты для увеличения масштаба.
Расположенные слишком близко интерактивные элементы, из-за чего, кликая на один из них, можно нечаянно активировать другой.
Помните: мобильная версия интернет-магазина должна быть максимально удобной и функциональной. Протестируйте её на комфортность использования, выявите все, даже самые мелкие ошибки.
#SEOаудит #SEO #бизнес #сео #маркетинг #сеоанализ #анализсайта