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

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

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

Главные типы мобильных клиентов

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

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

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

Любитель пользы

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

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

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

Ожидающий

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

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

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

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

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

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

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

В качестве хорошего примера разглядим мобильную версию сайта Curry s.

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

Тут реализован последовательность грамотных ответов.

  • Вверху страницы – лого и главные навигационные пункты (меню, поиск, локатор магазина, профиль, корзина).
  • Под меню и лого на основной странице – баннерное место. На скриншоте баннер приглашает сходу ознакомиться с самыми удачными предложениями. Наряду с этим, баннер не господствует на странице.
  • При прокручивании страницы логотип исчезает, остается лишь фиксированный навигационный блок.
  • Перечень категорий вызывается смахиванием «из-за границ» видимой области. Таковой механизм достаточно активно используется в разных приложениях, так что его применение в мобильной версии оправдано и разрешает увеличить поле коммуникации.
  • Все кнопки и пункты, на каковые возможно надавить, имеют достаточный размер (ширина 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; }

}

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

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

Случайные статьи:

Adobe Muse уроки | 12.Создание мобильной версии сайта


Подборка похожих статей:

admin