Мобильная версия сайта: полный чекаут

Мобильная версия сайта: полный чекаут

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

Специалисты Baymard Institute, который занимается исследованиями различных аспектов ecommerce, провели исследование чекаутов мобильных версий интернет-магазинов. Результаты этого исследования они изложили в материале 6 Mobile Checkout Usability Considerations. Если у вас уже есть мобильная версия интернет-магазина (или он сверстан адаптивно) – примерьте изложенные советы/находки на свой случай. Если вы только планируете обратить свое внимание на мобильный интернет – сохраните статью в избранное.

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

Контекст полей

Не видя страницы в целом, потребители обычно фокусируются на конкретном поле или пункте, который находится у них перед глазами. Заполнение этого поля воспринимается как изолированная задача, а не как часть всего процесса. В этой связи, особую важность приобретают заголовки полей, составленные таким образом, чтобы быть понятными и без общего контекста. Избегайте односложных заголовков, расширяйте их: «Адрес доставки» вместо «Адрес», «Телефон получателя» вместо «Телефон», «Время доставки» вместо «Время» и т.д.

Вход в аккаунт/регистрация/оформление без регистрации

Более половины всех участников тестов, организованных Baymard Institute, с трудом преодолевали шаг, на котором надо было выбрать оформление заказа без регистрации, регистрацию или вход в аккаунт. Для решения это проблемы Baymard предлагает довольно простое решение: выводить на экран только три соответствующих кнопки – «Регистрация», «Вход в аккаунт» и «Заказ без регистрации» (или «Налево пойдешь – без регистрации выйдешь, направо пойдешь – в аккаунт войдешь, прямо пойдешь – учетку себе заведешь»). А дальнейшие поля и текст «прятать» под них и выводить только после того, как покупатель сделал свой выбор.

Юзабилити форм в мобильных версиях

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

1. Расположение поля на одной линии с его заголовком. В результате, само поле становится коротким, и в процессе его заполнения пользователь видит лишь небольшую часть того, что он вводит. Решение: размещайте заголовки полей НАД ними.

2. Размещение заголовка непосредственно в самом поле (inline). Казалось бы, хорошее решение, но как только пользователь начинает заполнять поле (или просто переводит на него фокус), заголовок пропадает. В результате происходит некоторая дезориентация, которая может пагубно отразиться на намерении оформить заказ. Решение – не размещать заголовки полей в самих полях.

3. Общее количество полей. Как и в случае с чекаутом обычной версии интернет-магазина, чем меньше полей – тем лучше. Правда, в мобильном процессе оформления заказа это правило становится еще более критичным, так как вводить данные с экранной клавиатуры мобильного устройства – то еще удовольствие. Решение: не плодите сущности без надобности, объединяйте поля («ФИО» вместо трех отдельных полей, «Адрес» с подсказкой по очередности заполнения вместо «Индекса», «Города», «Улицы» и т.д.). Объем данных при этом останется тем же, но восприятие пользователя изменится.

Подсказки/объяснения внутри поля

Даже если заголовки полей составлены с прицелом на максимальную понятность, можно и нужно разместить подсказки внутри самих полей. Выше приведен пример с «Адресом»: разместить подсказку об очередности ввода данных («Индекс, город, улица, дом, квартира») в поле – разумное решение. В вебе подобная практика вполне распространена, и применять ее в мобильных версиях более чем логично. Поставьте себя на место покупателя, а лучше – привлеките к тестированию знакомых, протоколируйте все шаги и поля, которые вызывают у них затруднения и на основе полученных данных разрабатывайте подсказки/объяснения.

Оптимизация под экранные клавиатуры

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

  • email – input type="email"
  • телефон – input type="tel"
  • адрес – input type="text"
  • индекс, номер карты – input type="text" pattern="\d*"
  • дата – input type="date"
  • кнопка «Отправить» – input type="submit"

Автовалидация отключается с помощью novalidate, автозамена, которая иногда доставляет массу неудобств (и массу радости читателям посвященных этой функции сайтов) – посредством autocorrect="off", а от автоматической подстановки прописной буквы избавит autocapitalize="off". Список кодов с примерами см. в материале Touch Keyboard Types.

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

Любые применимые данные, которые вы можете предугадать или получить автоматически, следует использовать в мобильном чекауте. Например, на основе индекса вы можете автоматически предлагать покупателю его город, то же самое можно иногда узнать и по IP. База индексов и городов, применимая к России и уже упакованная в плагин, есть на Github: ziptastic clone for Russia. Кроме того, HTML5 позволяет запрашивать у посетителя съем данных о его местоположении, что также можно использовать в улучшении качества мобильного чекаута.

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

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

Автор: Vyacheslav Vityuk

Подписаться на новости

Читайте также

21 февраля / Комментарии

8 способов, когда дизайнеры могут обмануть вас и как этого избежать

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

далее →

27 ноября 2017 / Комментарии

Как Customer Experience изменил бизнес-процессы маркетплейса Goods

В результате нескольких месяцев проектирования «М.Видео» пришлось скорректировать бизнес-процессы под Customer Experience, другими словами, чтобы платформа стала удобнее для покупателя. Попробуем разобраться почему.

далее →

16 ноября 2017 / Комментарии

И еще 11 мифов юзабилити

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

далее →

19 октября 2017 / Комментарии

4 вопроса о поиске в интернет-магазине, ответы на которые меняют всё

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

далее →

12 июля 2017 / Комментарии

Пять объединяющих особенностей тысячи самых успешных посадочных страниц современности

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

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook