Магазин O’Neill Clothing получил почти 600% увеличение прибыли от выполнения адаптивных преобразований, а на Skinny Ties увидели 377,6% увеличение выручки, в основном благодаря пользователям iPhone, за счет введения адаптивных технологий. Даже транзакции Think Tank Photo на смартфонах и планшетах увеличились более чем на 96% … вот тебе на!

В этой статье мы рассмотрим все наиболее важные шаги при планировании высоко конвертируемого мобильного веб-сайта электронной коммерции. Ниже представлены наиболее важные вопросы, которые вы должны задать:

1. Для кого мы создаем этот мобильный веб-сайт?
2. Как мы будем измерять показатель конвертации?
3. Какие факторы будут оказывать влияние на коэффициент преобразования мобильного веб-сайта электронной коммерции?
4. Что собой представляет идеальная страница продукта?

Давайте начнем.

Итак, для кого мы будем создавать этот мобильный веб-сайт?

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

Использование телефона Locations

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

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

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

(Увеличенная версия изображения).

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

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

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

• Тот, кто сравнивает. Люди этого типа просматривают продукты в магазинах, в то время как на своем мобильном устройстве ищут цену, предлагаемую в интернете. При покупке товара в магазине, они могут использовать онлайн-цену, как один из переговорных механизмов. Однако если на веб-сайте будет достаточно заманчивое предложение и продукт будет в наличии, то такой пользователь тут же выполнит покупку через свой телефон или немного позднее, по возвращению домой.
• Любитель сделок. Люди такого типа любят торговаться, и когда они находятся в магазине, то ищут онлайн ваучеры, Groupon скидки или любые другие зацепки, которые помогут совершить покупку по меньшей цене, нежели предлагает магазин. Они отличаются от предыдущей категории тем, что верят в получение специальных предложений, прав на приобретение товаров по ограниченному предложению или эксклюзивную поддержку (взять хотя бы, к примеру, эксклюзивные сделки от Secret Escapes или гарантию низкой цены от Booking.com).
• Социальные покупатели. Люди, относящиеся к данной категории, подключены к ряду социальных каналов. Социальные покупатели следят на Instagram, Twitter и Pinterest за предпочтениями знаменитостей, за лидерами в отрасли и популярными брендами. Они ищут товары, соответствующие последним тенденциям моды, гаджеты и тому подобное. Они анализируют абсолютно все, начиная от старинных фотографий и заканчивая популярными платьями, которые просто необходимо купить, чтобы быть готовыми к уик-энду.
• Коротающие время. Эти люди просто стремятся скоротать время в ожидании кого-то или чего-то. Как правило, просматривая онлайн магазины, они дают импульс реальным покупателям (форма прямого трафика) для просмотра популярных продуктов. Они могут подписаться на новостные рассылки или рассылку писем по электронной почте, а также просматривать информацию напрямую из социальных каналов.

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

(Увеличенная версия изображения).

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

Как измерить показатель конвертации?

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

• Покупка. Посетитель завершает транзакцию покупки.
• Социальное продвижение. Посетитель может следить за обновлениями на вашем социальном канале; поделиться ссылкой; «твиттнуть» или «лайкнуть» ваш продукт или бренд; написать рецензию; подписаться на новостную рассылку и так далее.
• Выполнение поставленной задачи. Посетитель выполнил поставленную задачу, будь то играть в игру, заполнить опрос, назвать конкурентов и так далее.

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

• Точность (Specific). Цель должна быть однозначной и должна явно определять, чего мы пытаемся достигнуть.
• Измеримость (Measureable). Как мы собираемся это измерять? Каким способом? Мы можем пойти дальше и сказать, кто будет нести отчетность за эту информацию и кому эти отчеты должны быть направлены.
• Достижимость (Attainable). Как будет достигнута конкретно взятая цель? Что должно быть сделано, чтобы это произошло? Есть ли у нас достаточный бюджет, умения и время?
• Релевантность (Relevant). Насколько цель соответствует общей концепции? Готов ли рынок? Есть ли в нашем распоряжении люди, обладающие достаточными навыками для реализации этой цели?
• Привязанность ко времени (Time-bound). Как быстро может быть достигнута эта цель? Когда мы собираемся приступить к ее реализации и завершить?

Ниже описаны три набора целей, которые мы установили в прошлом. Они будут оказывать непосредственное влияние на процесс проектирования и разработку мобильного веб-сайта электронной коммерции.

SMART цель 1.

• Точность. Увеличение показателя конвертации для мобильного веб-сайта на 35%.
• Измеримость. Сегментный отчет о продажах в Magento.
• Достижимость. Сделать это путем создания адаптивного веб-сайта электронной коммерции.
• Релевантность. Эта цель соответствует нашими общим задачам конверсии и задаче по внедрению мобильной технологии.
• Привязанность ко времени. Реализация должна быть осуществлена в течение трех месяцев.

SMART цель 2.

• Точность. Увеличить среднюю стоимость заказа с мобильного на £5.
• Измеримость. Объединить сегментный отчет о продажах в Magento, чтобы ежедневно получать информацию о средней стоимости заказа.
• Достижимость. Улучшение прямых продаж (убеждение потребителя приобрести более дорогую версию продукта, которая обладает какими-либо дополнительными качествами) и кросс-продаж (метод торговли, при котором покупателю, приобретающему какой-либо продукт, предлагается купить также другой продукт, дополняющий первый; например, покупка компьютера с одновременным заключением договора на его обслуживание) на страницах продуктов, а также рекомендация дополнительных продуктов в корзине.
• Релевантность. Данная цель совпадет с нашими общими целями.
• Привязанность ко времени. На достижение поставленной цели отводится 30 дней, а затем предполагается проводить постоянное улучшение путем тестирования и итерации.

SMART цель 3.

• Точность. Уменьшить количество отказов для верхнего уровня категорий до показателя ниже 56%.
• Измеримость. Проанализировать отчет посещений страниц в пределах определенного периода времени с использованием Google Analytics.
• Достижимость. Улучшить время загрузки до показателя ниже четырех секунд в 3G сети, а также улучшить дизайн целевой страницы.
• Релевантность. Хотя данные действия и не приведут к прямой конверсии, но они улучшат все другие показатели переходов, дольше задерживая пользователей на веб-сайте и увеличивая количество страниц, посещенных каждым пользователем.
• Привязанность ко времени. На тестирование отводится14-дневный период, сопровождающийся дизайнерскими итерациями, пока не будет достигнута поставленная цель.

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

Какие факторы оказывают влияние на коэффициент конверсии мобильного веб-сайта электронной коммерции?

Давайте проанализируем факторы, которые влияют на количество просмотров веб-сайта электронной коммерции с мобильных устройств.

Иерархия и навигация.

На мобильных устройствах очень востребованным является свободное пространство. Мы не можем позволить себе создание огромного меню для пользователей, с помощью которого можно просматривать многоуровневые категории. Таким образом, мы должны определить приоритеты ключевых функций и контента, а также организовать окно поиска, к которому можно будет легко получить доступ в согласованном месте. Использование off-canvas навигации становится широко распространенным явлением, и пользователи уже достаточно хорошо ориентируются в особенностях его использования.

На адаптивном веб-сайте Currys очень хорошо реализована навигация верхнего уровня на основе off-canvas, выпадающее окно поиска, мгновенный вызов корзины и учетной записи для доступа, а также поиск по магазину. Все эти элементы реализованы в пределах ограниченного пространства, которое остается постоянным в течение всего рабочего цикла клиента.

(Увеличенная версия изображения).

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

(Увеличенная версия изображения).

Коммерческое удобство использования и время загрузки для фирменной навигации.

Иногда вы должны идти на компромисс. Когда мы разрабатывали мобильный веб-сайт Crockett & Jones, наши руководящие принципы брендинга, наследование традиций и репутация компании привели нас к более красочной системе меню, которое должно усилить бренд. Мы экспериментировали с пятью интуитивными понятными моделями навигации:

(Увеличенная версия изображения).

По результатам нашего исследования ведущих мобильных веб-сайтов электронной коммерции, мы пришли к заключению, что фиксированное меню в верхней части экрана обеспечивает более высокий уровень удобства и простоты использования. Такие иконки, как на веб-сайте Currys, вряд ли бы подошли для аудитории Crockett & Jones. Вместо этого мы будем использовать кнопочное меню, которое расширяется до списка навигации с подстраницами, загружаемыми через меню матрицы. Такая модель позволяет нам освободить дополнительное место для добавления изображения, чтобы во внешнем оформлении чувствовалось британское наследие.

Слева направо: (1) расширенная навигация; (2) матрица подменю; (3) результаты поиска продуктов с использованием матрицы навигации, которая реагирует на сенсорные жесты, плюс другое расширяемое меню для фильтрации продуктов. (Увеличенная версия изображения).

Фиксированное меню навигации против нефиксированного меню навигации.

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

Основываясь на анализе крупнейших торговых марок в области электронной коммерции, я заметил тенденцию к использованию фиксированного меню навигации, что, по-моему, мнению вполне оправдано. Я отдаю предпочтение использованию фиксированной навигации. Как по мне, то необходимость каждый раз переходить в начало страницы, для использования строки меню крайне раздражает. При использовании фиксированной навигации, вы можете получить доступ к самым глубоким разделам веб-сайта только лишь одним быстрым движением пальца. Реализовать модель с использованием фиксированного меню достаточно просто с использованием специализированного jQuery плагина под названием MeanMenu или с помощью NavBar от Bootstrap.

Изображения и фотографии товаров.

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

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров