Мобильная версия интернет-магазина: делаем правильно
На самом деле, перед тем, как задумываться о создании мобильной версии интернет-магазина, следует изучить данные о вашей аудитории. Приходит ли кто-то в ваш интернет-магазин с мобильных устройств? Подразумевает ли ваша товарная группа присутствие в рядах целевой аудитории тех, кто активно пользуется планшетами/смартфонами? Мобайл – тренд, но актуален ли он для вашего конкретного случая? Если на поставленные выше вопросы вы даете положительные ответы, а статистика за последние полгода показывает упорный рост доли мобильного трафика, этот материал – для вас.
Основные типы мобильных покупателей
Специалисты из 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; }
}
Результат – оптимальные условия для восприятия контента посетителем.
Итого: прорабатывая мобильную версию сайта, думайте о потенциальных посетителях и применяйте лучшие решения. Разговоров о том, что доля мобильного трафика будет только расти, очень много, так что какие-то основания у этого тренда наверняка есть. Возможно, полноценная, продуманная мобильная версия интернет-магазина обойдется недешево, но если ваша аудитория принадлежит к той части человечества, которая не отталкивает от себя достижения научно-технического прогресса, вложения окупятся о принесут прибыль.
