Хороший пример формы для ввода данных банковской карты - Uexpert
  • +7 (495) 055-13-58
    (9:00-20:00)
  • Бесплатная консультация

Хороший пример формы для ввода данных банковской карты

· 19 февраля, 2017 · Примеры из реальных проектов

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

Оплата банковской картой на сайте WebMoney

Оплата банковской картой на сайте WebMoney

Как видим на первом примере (Оплата банковской картой на сайте WebMoney) нам показали справа внешний вид карты, но без каких-либо пояснений. Например, нет пояснения что такое CVV/CVC и где его искать.

Разработчики не учли «Золотое правило №7. Минимализм и обоснованность», в котором есть замечательный принцип:

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

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

Оплата банковской картой на сайте МТС

Оплата банковской картой на сайте МТС

На втором примере (Оплата банковской картой на сайте МТС) нам показали не только банковскую карту, но и объяснили где какие поля искать. Это уже хороший пример. Есть лишь один минус — картинка отвлекает от процесса ввода информации и нужно переключать внимание с неё на поля ввода.

Разработчики не учли «Золотое правило №4. Визуальная ясность», в котором говорится

Создайте ясную структуру и иерархию всех визуальных элементов. Поддерживайте визуальное сканирование интерфейса. Минимизируйте визуальный шум.

В данном случае картинка справа создаёт визуальный шум.

Оплата банковской картой на сайте VK

Оплата банковской картой на сайте VK

И наконец на третьем примере (Оплата банковской картой на сайте VK) мы сразу видим что и куда нужно вводить. Поля ввода располагаются в тех же местах, где они находятся на реальной банковской карте. Это самый удобный вариант.

А у вас на сайте учитываются принципы юзабилити при взаимодействии с пользователями?

Хотите узнать насколько удобен и понятен ваш сайт для вашей целевой аудитории?

Закажите юзабилити-экспертизу вашего проекта сегодня и получите реальные продажи уже завтра — http://uexpert.ru/ekspertnaya-otsenka-interfejsa/

Поделитесь в соц. сетях:

Другие материалы



Запросите





Нажимая на кнопку вы даёте своё согласие на обработку персональных данных. Политика обработки персональных данных

Свяжитесь с нами

  • info@uexpert.ru
  • +7 (495) 055-13-58