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