Мобильная версия интернет-магазина: делаем правильно

Смотрите в каталоге
Программы лояльности, купоны, скидки и т.п.

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

Основные типы мобильных покупателей

Специалисты из Columbia Business School определили пять типов мобильных покупателей: эксплуататор (exploiter), ушлый (savvy), ориентирующийся на цену, ищущий впечатлений и традиционалист. Лоуренс Хоулет, на статье которого основан этот материал, составил собственный список, рассматривая потребителей с точки зрения использования ими смартфонов в контексте принятия решения о покупке.

Сравнивающий

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

Любитель выгоды

Придя в магазин, такой покупатель обязательно залезет на Groupon в поисках купона.

Социальный покупатель

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

Ожидающий

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

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

Зачем вам эти типы? Для составления «персоны», которая поможет в разработке сайта. В принципе, аудитория и ее склонности определяются товарной группой. Например, вряд ли в рядах посетителей магазина электроинструмента будет много «социальных покупателей». Определите, какой тип мобильного клиента является наиболее частым вашим гостем, и делайте мобильную версию для него.

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

Дизайн мобильной версии: главная

Чем отличается мобильная версия от обычной, «десктопной»? Тем, что поле коммуникации (размер экрана) здесь гораздо меньше. Соответственно, мы не можем позволить себе мега-меню, развернутые категории и т.п. При этом, все должно быть сделано так, чтобы у посетителя не возникало никаких сложностей при работе с мобильной версией сайта. В качестве хорошего примера рассмотрим мобильную версию сайта Curry’s.

3-springvaluelarge.jpg

Здесь реализован ряд грамотных решений.

  • Вверху страницы – лого и основные навигационные пункты (меню, поиск, локатор магазина, профиль, корзина).
  • Под лого и меню на главной странице – баннерное место. На скриншоте баннер приглашает сразу ознакомиться с самыми выгодными предложениями. При этом, баннер не доминирует на странице.
  • При прокручивании страницы логотип исчезает, остается только фиксированный навигационный блок.
  • Список категорий вызывается смахиванием «из-за границ» видимой области. Такой механизм достаточно широко применяется в различных приложениях, так что его использование в мобильной версии оправдано и позволяет расширить поле коммуникации.
  • Все кнопки и пункты, на которые можно нажать, имеют достаточный размер (ширина 52 px или 72 px для большого пальца).

Дизайн мобильной версии: страница товара

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

  • снимок товара с наиболее выгодной точки;
  • укрупненный снимок, позволяющий разглядеть детали;
  • снимок с «антуражем» из сопутствующих товаров;
  • круговой снимок (360°);
  • снимок «в работе» (использование товара в реальной жизни).

Важно: скорость мобильного интернета порой оставляет желать лучшего, так что делайте картинки как можно менее «тяжелыми». Но без ущерба качеству.

Не забывайте и о тексте: его размер должен быть таким, чтобы мобильному посетителю не пришлось щуриться или приближать страницу, порождая горизонтальный скролл. Попробуйте решить вопрос с помощью CSS: пропишите для мобильных устройств с небольшим экраном (@media screen and (max-width: 320px)) размер шрифта 2em и вес 100.

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

@media (light-level: normal) {

p {

background: url("texture.jpg");

color: #333 }

}

@media (light-level: dim) {

p {

background: #222;

color: #ccc }

}

@media (light-level: washed) {

p {

background: white;

color: black;

font-size: 2em; }

}

Результат – оптимальные условия для восприятия контента посетителем.

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

Компании и сервисы: Frendi
Автор: Vyacheslav Vityuk

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

Читайте также

21 февраля / Комментарии

Дизайн, ориентированный на конверсии

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

далее →

1 февраля / Комментарии

Маленькая деталь страницы товара в зарубежных магазинах одежды, которую пока игнорируют наши продавцы

Одежда – один из самых продаваемых товаров в интернете. Ранее мы публиковали резюме отчёта об исследовании, проведённом аналитическим агентством Nielsen, «Nielsen: какие товары россияне чаще всего покупают в интернете». Согласно результатам этого исследования, одежда не просто самый популярный товар, приобретаемый в интернете. Этот вид товаров на 14% опережает «ближайшего преследователя», потребительскую электронику. Очевидно, что у многих интернет-магазинов одежды дела идут неплохо. Могут ли они идти ещё лучше? Если они внедрят в свои товарные страницы одну маленькую деталь, ответ запросто может быть положительным.

далее →

13 декабря 2016 / Комментарии

Мобильная версия интернет-магазина: предпраздничная подготовка

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

далее →

25 октября 2016 / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

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

далее →

26 сентября 2016 / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook