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

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

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

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

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

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

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

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

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

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

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

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

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