Как это правильно делается: основы мобильного e-commerce дизайна

Игорь Бахарев
Всем привет! Когда-то мы писали статью "Почему 99% интернет-магазинов не стоит внедрять мобильные приложения", в которой постарались доказать, что большей части интернет-магазинов данные приложения просто не нужны и если очень хочется мобильности, то лучшее решение - мобильная версия сайта, а не отдельное приложение. Как вы поняли из заголовка, сегодня мы, совместно с коллегами из ConversionXL, попробуем разобраться в том, каким образом должна выглядеть правильная мобильная версия сайта вашего интернет-магазина. Помимо зарубежных примеров, мы рассмотрим примеры наших отечественных компаний и то, как они используют мобильные технологии во благо своих покупателей. Предлагаем начать!

Строка поиска и welcome-блок в самом верху страниц

Если углубиться в причинно-следственную связь и разобраться в том, каким образом люди сталкиваются с мобильной версией магазина, то можно выделить две наиболее распространенных логических цели:
  1. они пришли найти какие-либо продукты;
  2. они пришли найти конкретный продукт;
Учитывая их, большинство правильных дизайнеров располагает строку поиска и иконки (в том числе, категорий) в верхней части каждой страницы сайта, помогая тем самым пользователю сразу достичь свои цели. Welcome-Shopping-Browsing Более того, если в вашем интернет-магазине уже есть собственное мобильное приложение, целесообразно вынести туда блок с предоставлением возможности перейти в магазин и скачать его. Смеем предположить, что ключевая разница между аудиториями мобильной и десктопной версий сайта в том, что в большинстве случаев, через приложение идут за чем-то конкретным, чтобы в первый или последующие разы соответственно ознакомиться с тем или иным товаром (т.е. не глобальный поиск и серчинг ассортимента). А на десктопную версию заходят для ознакомления с новинками, акциями, и когда просто нечего делать. Предлагаем посмотреть, как выглядят главные страницы крупнейших российских интернет-магазинов с мобильного телефона:
Ozon.ru Сотмаркет Юлмарт Вайлдбериз
ozon sotmarket ulmart wildberries
Упс... Честно - подготавливая статью, мы ожидали несколько другие результата от компаний, знаменитых своими миллионными инвестициями и громкими именами. Насчет малого размера картинок мы умышленно сделали его таким, ведь именно так выглядят главные страницы сайтов этих магазинов на мобильных устройствах. Весьма непонятно, каким образом пользователь, который попал на сайт этих магазинов с мобильных устройств должен узнать о том, что у них есть приложения? Если отсутствие мобильной версии сайта еще можно понять, то отсутствие самой простой всплывашки или прицепленного к верху блока с упоминанием того, что для мобильных пользователей есть собственное удобное приложение (а у всех перечисленных компаний они есть) которое можно скачать перейдя по ссылке, нам совершенно непонятно. В тоже время, среди всех просмотренных нами с iPhone сайтов полноценная мобильная версия оказалась только у интернет-магазина М.Видео, причем выполненная вполне качественно и продуманно (медленное открытие страниц и навязчивый выбор магазина на странице товара вешает мобильный Google Chrome - прим. ред.) mvideo

Крупные блоки, отсутствие кучности элементов

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

Удачный пример простого вертикального можно найти на сайте http://m.toysrus.com/

toysrus

Либо сделать как сделал красивыми спискам свои категории eBay:

eBay-mobileВ списки выведены топовые категории, но, в тоже время, есть возможность перейти к полному списку всех категорий магазина. Еще одна интересная фишка, которая будет полезна на мобильной версии сайта с ограниченными визуальными возможностями, которая в переводе на русский звучит "кликните на стрелку для того, чтобы увидеть аналогичные товары". similar-likeСмеем предположить, что данная функция может найти свое применение не только на мобильной версии сайта, но и на полноценном десктопе. По крайней мере, подумать есть о чем.

Следуйте единым стандартам подачи информации

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

Лимитируйте все, что можно

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

Оставьте только самое важное

На самом деле, со страницей товара нет ничего сложно - одноколоночная подача информации и прокрутка вниз облегчает работу и восприятие вашей продукции. Исключениями могут служить два элемента, которые могут быть расположены друг за другом, например размер и цвет: lacoste Или блоки доставки или самовывоза. Наглядного примера страницы товара интернет-магазина Walmart хватит для понимания того, о чем речь: walmart  

Оформляем заказ

Конечно! Как мы можем пройти мимо самого главного этапа любого интернет-магазина? Не поверите, но тут тоже все просто! Вот как надо и не надо его делать: checkout Не забывайте о том, что ваши мобильные посетители сильно ограничены не только в визуальном просмотре страниц, но и в тактильном, ведь пальцы являются единственным средством взаимодействия с вашим сайтом.checkout-2 Заметьте разницу между обычной версией и версией для мобильных устройств. Отсюда совет - делайте ключевые блоки крупными и подталкивающими к тому, чтобы их нажимали, особенно на мобильных устройствах.

Мульти-версии

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

Маркетплейс Максмарт расширяется в регионы

Материал по теме

Эксперты из Naumen, ВТБ, Сбермаркета, ЭР-Телеком, Ленты и Газпромбанка обсудят клиентский сервис на CX Tech Day 2024

Материал по теме

Shein завалили исками по нарушению авторских прав

Подписаться на новости

Актуальное сейчас

Uber будет доставлять еду роботами в Японии

Uber совместно с партнёрами из Mitsubishi Electric запускают в Японии сервис доставки еды с помощью самоходных роботов-курьеров. Сервис будет работать через приложение Uber Eats, первые доставки начнутся в ...

Маркетплейс Максмарт расширяется в регионы

B2B-маркетплейс быстрых закупок Максмарт в феврале 2024 года запустил два фулфилмент-центра для поставщиков в городах Кемерово (Кемеровская область) и Невинномысск (Ставропольский край). Открытие рас...

Встречаемся на VII Всероссийском форуме по торговому маркетингу FMCG & Retail Trade Marketing Forum 2024

Стабилизация рынка после периода экономической неопределенности предъявляет новые вызовы в адаптации к "новой норме". Покупательское поведение претерпело существенные изменения, и производителям необходимо ...

Ozon: итоги проекта "Сделано в России" за 2023 год

За 2023 год на Ozon покупатели приобрели 18 млн товаров от 1400 локальных брендов, представленных на региональных витринах проекта "Сделано в России". Оборот продавцов в этих регионах вырос в 2,3-2,6 раза. ...

ФАС: Apteka.ru навязывает пользователям рекламу

Санкт-Петербургское управление Федеральной антимонопольной службы (УФАС) выявило и пресекло навязывание рекламы на сайте сервиса по заказу лекарств Apteka.ru. В ходе проверки УФАС установило, что рег...

Рынок eGrocery в 2023 году: аналитика InfoLine

Сервис доставки "Самокат" по итогам 2023 года увеличил продажи в два раза и занял первое место в рейтинге eGrocery Russia Top от аналитической компании Infoline. Оборот сервиса составил 165,3 млрд рублей, с...

Согласие на обработку персональных данных

×

Физическое лицо, оставляя заявку на веб-сайте e-pepper.ru через форму «Обсудим ваш проект» и форму подписки на e-mail рассылку, действуя свободно, своей волей и в своем интересе, а также подтверждая свою дееспособность, предоставляет свое согласие на обработку персональных данных (далее — Согласие) Обществу с ограниченной ответственностью «АЭРОКОМ» (ООО «АЭРОКОМ») (ИНН 9705136776, info@aeroidea.ru, +7(495)120-12-38, +7 968 900-23-45), которому принадлежит веб-сайт https://e-pepper.ru и которое зарегистрировано по адресу 111024, г. Москва, вн.тер.г.муниципальный округ Лефортово, ул. Авиамоторная, д.50, стр.2, этаж 2, помещ.XI, комната 25, офис А79, на обработку своих персональных данных со следующими условиями:

  1. Данное Согласие дается на обработку персональных данных, как без использования средств автоматизации, так и с их использованием.
  2. Согласие дается на обработку следующих моих персональных данных: персональные данные, не относящиеся к специальной категории персональных данных или к биометрическим персональным данным: адрес электронной почты (e-mail); имя; сведения о месте работы; номер мобильного телефона.
  3. Цель обработки персональных данных: обсуждение возможного проекта.
  4. В ходе обработки с персональными данными будут совершены следующие действия: сбор; запись; систематизация; накопление; хранение; уточнение (обновление, изменение); извлечение; использование; передача (предоставление, доступ); блокирование; удаление; уничтожение.
  5. Третьи лица, обрабатывающие персональные данные по поручению ООО "Аэроком” для указанной в согласии цели:
    • АО "АМОЦРМ", 21205, г. Москва, вн.тер.г. Муниципальный Округ Можайский, Тер Сколково Инновационного Центра, б-р Большой, д. 42 стр. 1
    • ООО "Яндекс", 119021, г. Москва, ул. Льва Толстого, д. 16
  6. Персональные данные обрабатываются в течение 30 дней с момента отказа в дальнейшем обсуждении проекта или с момента принятия решения о заключении договора на проект в соответствии с ч. 4 ст. 21 152-ФЗ, смотря что произойдет раньше.
  7. Согласие может быть отозвано вами или вашим представителем путем направления ООО "Аэроком” письменного заявления или электронного заявления, подписанного согласно законодательству Российской Федерации в области электронной подписи, по адресу, указанному в начале Согласия.
  8. В случае отзыва вами или вашим представителем Согласия ООО "Аэроком” вправе продолжить обработку персональных данных без него при наличии оснований, указанных в пунктах 2 — 11 части 1 статьи 6, части 2 статьи 10 и части 2 статьи 11 Федерального закона № 152-ФЗ «О персональных данных» от 27.07.2006 г.
  9. Настоящее согласие действует все время до момента прекращения обработки персональных данных, указанных в п. 6 и п. 7 Согласия.