Советы по дизайну оплаты товаров для мобилок

Уже сегодня огромное число потенциальных покупателей готовы совершать покупки через мобильные устройства. На вопрос, сколько из них дойдут до конца и завершат платёж, ответ не так уж прост. 81% совершённых платежей в США за 2012 год - это платежи с мобильных устройств. Их суммарный доход составил 25 миллиардов долларов.

Оплата совершается не только через приложения. Все больше пользователей совершают свои покупки через веб сайты. Большинство испытуемых (81%) предпочитают приобретать товары и участвовать в акциях через обычные браузеры, а не через приложения.

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

Давайте углубимся в эту тему и посмотрим, что сможем из этого извлечь.

1. Включайте в формы только жизненно важные поля

Мы все сталкивались с этими надоедливыми вопросами: “как вы узнали о нас?”. Хоть для статистики этот вопрос и имеет какое-то значение, для покупателя это просто лишние действия, которые только раздражают его.

В общем, подобные вопросы могут встречаться не только на привычных для нас сайтах, но и на мобильных платформах. Давайте рассмотрим два примера:

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

С правой стороны Kay Jewelers показывает, насколько может быть громоздкой страница оплаты. Тут отображено множество бесполезных полей, таких как “Вечерний телефон”, “Мобильный телефон”. Вместо одного почтового индекса пользователю придётся заполнять три поля “Адреса”, а также дважды заполнять поля “Email”.

2. Даём возможность совершать платежи гостям

Данному правилу должен следовать каждый владелец сайта с электронной коммерцией (24% пока что не следуют), особенно это касается мобильной платформы. Потенциальный покупатель с огромной охотой идёт на сделку, если ему не нужно регистрироваться и подтверждать аккаунт. Если обратиться к статистике, то результат поражает. Один из интернет продавцов увеличил повышение прибыли на 300 миллионов долларов, убрав кнопку регистрации.

3. Используйте с умом элементы мобильного пользовательского интерфейса

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

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

4. Избавляйтесь от лишних элементов, а не контента

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

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

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

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

5. Отображайте стадию покупки

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

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

6. Время это самый важный ресурс

74% пользователей закроют ваш сайт, если он грузится больше пяти секунд. Пользователи намерены что-то сделать (купить, заказать), а не ждать, пока форма отобразится. В противном случае, они просто уйдут.

Старайтесь делать формы лёгкими и удобными, используйте инструменты для тестирования, оптимизации, ускорения загрузки. Я пользуюсь Mobitest-ом.

7. Убеждайте пользователей в безопасности сделки

Большинство пользователей заботит вопрос безопасности. Тут дизайнерам нужно постараться добавить достаточное количество элементов, чтоб убедить пользователя, что сделка будет безопасна. К примеру, можно добавить соответствующие иконки, SSL сертификат и номера телефонов, куда можно позвонить и уточнить детали.

8. Google Wallet, PayPal и Amazon - это наши друзья

Вместо того, чтоб заставлять пользователей заполнять какие-то данные, воспользуйтесь уже проверенными сервисами, такими как Google Wallet, PayPal и Amazon, где покупатель в два клика совершит платёж.

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

9. Используйте преимущества геолокации и звонка в сервис центр

Используйте преимущества GPS. С помощью Google Maps и ссылки вида http://maps.google.com/maps?daddr=BEST+BUY&saddr=Current+Location вы можете показать пользователю место, где он сам может забрать товар, к примеру, или где находится ваш офис.

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

10. Тестируйте ваши страницы на разных системах

Тестирование сайтов для мобильных устройств - это дело сложное, требующее времени, однако оно является очень важным, учитывая существование огромного количества операционных систем и девайсов. Конечно же вы не сможете приобрести все модели и тестировать сайт на них. Для этого можете воспользоваться специальными плагинами. К примеру, User Agent Switcher для Firefox и Chrome. С его помощью вы сможете переключаться между различными размерами экранов ОС систем.

Вывод

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