подписка
Подписаться
Александра Цапко
исполнительный директор, Digital-агентство"Простые решения"
22/07/2021

7 вещей, которые нужно проверить при аудите мобильной версии интернет-магазина. Чек-лист

1

Доля мобильного трафика на сайтах растет с каждым годом. По данным Liveinternet, в 2020 году поисковые системы фиксировали примерно 23 миллиона запросов со смартфонов и планшетов ежедневно.

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

1. Внешний вид сайта 

Проверить отображение сайта при различных разрешениях экрана вы можете либо сделать вручную, воспользовавшись различными устройствами, либо со своего компьютера. Для этого используем сочетание клавиш Cntrl+ Shift+ I (для Google Chrome) или на открытой странице сайта в браузере кликаем правой кнопкой мыши и выбираем пункт "Посмотреть код". 

Появится дополнительная панель с кодом, на ней можно включить режим отображения страницы в разных разрешениях как показано на картинке. Далее для выбора разных мобильных устройств используем выпадающее меню. Можно развернуть виртуальный экран с помощью кнопки на панели.132984_4a47a0db_pw5KM0EZ_1626788536

Также вы можете воспользоваться специальными сервисами для просмотра сайта в разных разрешениях экрана, вот некоторые из них:

  • https://screenfly.org/ – достаточно удобный и притом бесплатный сервис. Вы можете ​​скопировать ссылку на конкретный вариант отображения, чтобы обсудить с коллегами или составить техническое задание вебмастеру.
  • http://iloveadaptive.com/ru/ – на этом сайте можно также запустить тест скорости загрузки, о которой мы поговорим далее.

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

2. Проверка скорости загрузки страниц с мобильных устройств

Для этого рекомендую воспользоваться сервисом Google Page Speed. Последовательно проведите проверку разных типов страниц: главная страница, страница каталога, страницы товара, корзина, оформление заказа.

В результатах проверки вы увидите две вкладки: для компьютеров и для мобильных. Если сайт находится в красной зоне (суммарный балл проверки менее 50), значит скорость загрузки низкая и требуются доработки. На странице с результатами проверки ниже вы увидите рекомендации по оптимизации кода, изображений и скриптов для ускорения загрузки, которыми может воспользоваться вебмастер.

Ссылку на результаты проверки можно скопировать и прикрепить в техническое задание по доработкам.

132984_fb5c81ed_bM0gYdsu_1626788536

Стоит отметить, что достижение балла 100 не всегда возможно, например, даже использование таких сторонних сервисов как "Яндекс.Метрика" или "Карты" для сайта влияет на общий балл. Однако, нам удавалось достигать таких показателей за счет всесторонней оптимизации для важных страниц сайта.

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

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

3. Формы и оформление заказа 

Далее необходимо полностью пройти по пути клиента на сайте до совершения покупки и убедиться, что это удобно и просто сделать.

  • При добавлении в корзину появляется соответствующее уведомление с предложением оформить заказ или продолжить покупки. Также в шапке сайта должно появиться количество добавленных товаров.
  • В корзине видны изображение товара, цена, количество и общая стоимость.
  • При оформлении заказа удобно заполнять все поля, выпадающие списки отображаются корректно.
  • В формах настроены проверки для контактных данных: для телефона возможен ввод только цифр, строго 11, проверка на символ @ в поле с email.
  • Все формы отправляются корректно, при отправке появляется всплывающее уведомление.
  • Возможна регистрация по смс-коду, и через социальные сети, аккаунт Google.

132984_10fb15c7_0H5mY6Wg_1626788537

4. Функциональные элементы

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

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

Screenshot_20210723-000249

5. Контакты

Проверьте отображение страницы контактных данных в шапке и подвале сайта, а также на других страницах:

  • Карта должна быть интерактивной.
  • При клике на номер телефона смартфон сразу предлагает вызов по номеру. Телефоны должны быть указаны с кодом города без лишних пробелов.
  • При клике на e-mail предлагается переход в почтовую систему к созданию письма.
  • Ссылки на социальные сети корректные и ведут на соответствующие страницы.

Screenshot_20210723-000424

6. Элементы и взаимодействия с ними

Для высокой конверсии сайта важно, чтобы каждое взаимодействие с его элементами было удобным:

  • Меню компактно адаптировано и закреплено. 
  • Значки корзины и избранного всегда находятся в зоне видимости.
  • Прокрутка баннеров и карточек товаров имеет области взаимодействия со стрелками или активируется мягким свайпом.
  • Для длинных страниц при скролле появляется кнопка наверх.
  • Карточки товаров в каталоге имеют большую кликабельную область: изображение, название, кнопка для перехода на страницу товара.
  • Всплывающие уведомления удобно скрыть кликом по кнопке или области вне блока.
  • В каталоге товаров настроена пагинация (список страниц) и кнопка "Смотреть еще".
  • При переходе в карточку товара и последующим возвращении в каталог отсутствует прокрутка в начало страницы (пользователь должен возвращаться к последним просмотренным товарам).

Screenshot_20210723-7

7. Типографика

Обратите внимание на отображение заголовков, текстов, названий товаров:

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

 

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

Прокомментировать
Комментарии
Петр Елагин
Разработка срм систем, Точка Опоры
23/07/2021
я бы еще на тестирование отдал , чтоб не в кругу друзей сайт проверить, а сторонние люди
Читайте также
29/07/2021
В Twitter'е теперь можно открыть магазин. Но и покупать, и продавать там пока разрешено не всем, даже из США
Искусственное ограничение круга покупателей объяснимо с технической точки зрения, но все же странно для такой мощной IT-компании. Рассказываем подробно, что они там затевают... Подробнее
22/07/2021
Wildberries рассказывает, какие товары и в каких регионах все больше покупают через мобильное приложение
На сегодняшний день на площадке торгует 200 тысяч МСП и самозанятых. И маркетплейс подробно анализировал прежде всего продажи их товаров через свое приложение. И динамика, и объемы выручки впечатляют... Подробнее
15/07/2021
Покупатели смогут оценить товары с Яндекс.Маркета в интерьере: у карточек товара появились 3D- и AR-элементы
С помощью дополненной реальности площадка покажет реальные размеры вещей и их сочетаемость с другими предметами интерьера, даже с собственной одеждой и внешним видом... Подробнее
Главная Новости Удержание клиентов Контент
Александр Тябин
Руководитель проекта, Seo-Way.ru
06/07/2021
Редизайн сайта "ВсеИнструменты.ру": а что, собственно, изменилось? - обсуждение 2
С отзывами беда на товары, надо постоянно нажимать смотреть больше, плюс половина отзывов с Яндекса а не с самого сайта
Форум Открытие бизнеса Сайт и приложение
Светлана Лебедева
Ассистент коммерческого директора, ROBBO
23/06/2021
Приложение для импорта файлов из Excel 1
Добрый день !
В настоящее время для импорта файлов из Excel используем приложение "Импорт из Excel", но оно не устраивает, так как не позволяет корректно настроить источник в процессе загрузки. Подскажите, пожалуйста, есть ли какие-то более функциональные приложения для загрузки файлов из Excel в Битрикс? Свернуть
Добрый день ! В настоящее время для импорта файлов из Excel используем приложение "Импорт из Excel", но оно не устраивает, так как не позволяет корректно настроить источник в пр Еще...
Форум Открытие бизнеса Сайт и приложение