14 признаков хорошего дизайна сайта мобильной коммерции

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

Джеймс Герд замечает:

Думаю, мы увидим больше оптимизации посадочных страниц, ориентированных на общий пользовательский опыт, и лучшие линейные показатели, такие как количество отказов, переходов на сайт/в корзину и совершенных заказов.

Распространение смартфонов в купе со статистикой использования побудили многих маркетологов задуматься о собственном мобильном дизайне. Стюарт МакМиллан дал следующий комментарий:

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

Назовем некоторые элементы хорошего дизайна сайта мобильной коммерции.

GPS-поиск ближайшего магазина

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

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

Вот пример работы Tesco:

tesco_1-blog-third tesco_2-blog-third

Click To Call

Еще один функционал, который пользователь ожидает увидеть на сайте. Посетители должны иметь возможность позвонить по номеру магазина или службы по работе с клиентами за один клик.

Элементы, характерные только для мобильных устройств

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

Другой пример – автоматически выводить буквенную раскладку, когда пользователь работает с текстом.

Легкое расшаривание

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

У M&S были с проблемы с расшариванием после реконструкции мобильного сайта, и это быстро заметил один из пользователей.

Обратите внимание на кнопку «Поделиться» на этой странице товара H&M.

product_page-blog-third

Предварительно заполненные формы

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

Само собой разумеется, что это значительно упрощает работу, которую необходимо проделать клиентам для бронирования номера.

Автозаполнение

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

CTA на странице загрузки

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

Посмотрите на мобильный сайт Schuh. Они решили, что детали товара так же важны, как и call to action. Поэтому была установлена автоматическая прокрутка страницы в обход навигации.

schuh_fold

Дублируйте операционные системы

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

Реализовать это можно, создав мобильный сайт с внешним видом и функционалом мобильного приложения, основанного на операционных системах Android, Apple или Windows Mobile.

Это может быть трудно, зато пользователи оценят ваши усилия. Однако стоит помнить, что придерживаясь общей концепции операционной системы, вы можете нарушить более сложные системы.

Свайп, пинч, двойное нажатие

По данным Think Insights Google, 29% пользователей считают невозможность увидеть подробную информацию о товаре барьером для совершения покупки с помощью смартфона.

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

Кросс-платформенная корзина

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

Amazon, конечно, является одним из самых известных примеров использования этой опции.

Различные методы оплаты

Безопасность по-прежнему является важным фактором для пользователей, особенно старшего поколения. По информации Think Insights, 46% пользователей считают небезопасным использование кредитных карт через смартфоны.

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

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

office_depot

Формат Click and collect

Помимо всего прочего, ретейлерам следует также предложить пользователям покупки в формате Click and collect.

Более важным фактором, чем безопасность для пользователей является удобство. Покупатели часто бывают в разъездах и хотят получить товар в тот же день. Так что если товара осталось немного или пользователи хотят быть уверенными, что не проведут в магазине время в пустую, то Click and collect – идеальный вариант.

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

Простота

Стюарт МакМилан (Schuh) комментирует этот элемент следующим образом:

Я уверен, что расширенное внедрение сайтов мобильной коммерции станет началом изменения восприятия веб-дизайна. Формула «чем проще, тем лучше» действительно может оказаться решением всех проблем. Дойдя до этого одним из первых, мобайл помог решить нам проблемы с дизайном. Это помогло избежать многих ненужных элементов пользовательского интерфейса.

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

Скорость

Увеличение скорости загрузки необходимо, независимо от того придется вам уменьшить размер мобильного сайта или начать подгружать контент постепенно. До появления 4G этот вопрос не поднимался, зато сейчас он является вполне актуальным.