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

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

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

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

Специалисты из 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

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

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

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

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

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

далее →

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

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

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

далее →

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

Комфорт покупателей как залог успешного бизнеса. Основные ошибки в юзабилити интернет-магазинов

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

далее →

11 августа / Комментарии

Чек-лист юзабилити интернет-магазина

По-настоящему проверить удобство интернет-магазина без подтверждения данными веб-аналитики, не получится. Контекст взаимодействия; задачи, опыт и мотивы пользователей; устройства, с которых пользователи просматривают магазин — всё это влияет на конверсию и не может быть оценено чек-листом.
При составлении чек-листа, я ориентировался на исследования института Baymard, Юзабилити Лаб, Mastercart и студии Сибирикс + некоторые собственные наблюдения.

далее →

Навигация как способ управления вниманием пользователя

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

далее →

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