Ответьте на 3 простых вопроса и мы подскажем что вам нужно!

1

У ВАС УЖЕ ЕСТЬ
ГОТОВЫЙ САЙТ?

2

ЗНАЕТЕ ЛИ ВЫ ЧТО ТАКОЕ
ЮЗАБИЛИТИ?

Ошибки юзабилити при создании форм покупки в Интернет-магазинах

В этой статье мы рассмотрим распространенные юзабилити ошибки в создании интерфейса оформления заказа в Интернет магазинах. Хотя анализ будет проводиться среди ТОП 100 магазинов Рунета, он далеко не полон и на каждом сайте есть множество других недоработок. Но как нам кажется, перечисленные ошибки наиболее серьезны и могут привести к существенной потере прибыли. Итак, приступим.

Использование кнопки «Применить»

Покупателя можно легко привести в замешательство, если на странице оформления заказа кроме кнопок «Оплата» или «Переход к следующему шагу» есть другие с непонятным смыслом. Даже если эти кнопки будут отличаться визуально, могут возникнуть проблемы. Посмотрите на рисунок – к чему может привести нажатие кнопки? Страница перезагрузится или нет? А данные в полях не исчезнут?

Ошибки юзабилити

Правильный подход: сделайте автоматическое обновление формы вместо непонятных кнопок.

Оставьте заявку. Мы поможем исправить все ошибки!

Запрос ненужной информации

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

Запрос ненужной информации

Правильный подход:

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

Правильное оформление страницы ввода:

Оформление страницы ввода

Оставьте заявку. Мы поможем исправить все ошибки!

Форма для ввода данных платежной карты

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

Ввод данных платежной карты

Правильный подход:

  • Выделите форму ввода данных карты отдельно от общей цветовой гаммы сайта.
  • Обязательно разместите на странице элементы или текст, подтверждающий безопасность ввода данных. Большинство посетителей не понимают, что такое https:// или SSL. Они вообще не ассоциируют их с безопасностью в Интернет.

Юзабилити ошибки отсутствуют:

Отсутствие юзабилити ошибок

Поле для ввода срока действия платежной карты

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

Ввод срока действия платежной карты

А здесь ввод данных карты выполнен идеально:

Идеальный ввод данных платежной карты

Линейность процесса оформления заказа

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

Линейность процесса оформления заказа

Или еще одна старая проблема – кнопка «Назад» не работает или приводит к удалению списка товаров из корзины:

Удаление списка товаров из корзины

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

Запрос информации с помощью всплывающих окон

Правильный подход:

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

Оставьте заявку. Мы поможем исправить все ошибки!

Использование нескольких колонок

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

Использование нескольких колонок

Правильный подход - не использовать несколько колонок, кроме следующих случаев:

  • Ввод фамилии и имени
  • Поля, которые нельзя расположить друг под другом: дата рождения, номер и срок действия карты и т.д.
    • Такие данные стали исключением, потому что по факту они части одного целого. Хотя есть примеры, когда ФИО разбивается на список их трех полей, что ухудшает юзабилити. Старайтесь избегать таких визуальных решений.

      Подводим итоги

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

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

Базовые принципы юзабилити для Интернет-магазинов

Оценка юзабилити: семь основных принципов

Оценка веб сайтов: пошаговое руководство