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

Эта статья рассказ одного из наших постоянных читателей, которому пришлось оплатить одну из покупок в интернете с помощью банковской карты. А вот, что было дальше огромный сюрприз …!

Оплата картой – «за» и «против».

Оплата банковской картой – «за» и «против».

Обычно мы все оплачиваем свои покупки в Интернете наличными или электронными деньгами. Иметь дело с наличкой, честно говоря, всегда приятнее – так лучше ощущается реальная стоимость покупки. Да и сам процесс покупки в таком варианте как-то привычнее.

Активно использовать оплату электронными деньгами я начал, когда эти самые электронные деньги у меня стали появляться в достаточном количестве. Тем более, что перевод электронных денег в реальные съедает довольно ощутимые суммы (проценты). Поэтому оплата покупок электронными деньгами стала для меня одним из способов снижения необоснованных денежных потерь.

Оплату же карточками я не практиковал по двум причинам.

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

Во-вторых, мне не хочется «палить» данные своей постоянной банковской карты, а специальной карты для интернет-покупок у меня нет.

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

Первые впечатления.

Посмотрите на эту форму оплаты. Разве она не прекрасна?

Первые впечатления от платежной формы у меня выразились в «Ни фига себе какая классная форма!» Форма оплаты цепляла с первого взгляда. Количество полей здесь, откровенно говоря, не маленькое – как и в любой другой форме оплаты банковской карты. Однако приступа паники форма не вызывает – поля грамотно и красиво сгруппированы.

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

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

На самом деле данная форма использует целый ряд тонкостей, которые должны применяться в каждой веб-форме на сайте.

Количество полей.

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

Автофокус.

Автофокус – это способность поля веб-формы принимать на себя фокус ввода. В нашем примере поле e-mail приняло на себя фокус ввода сразу же при открытии страницы с формой, то есть курсор ставится автоматически в нужное место где мы будеб впечатывать данные. На самом деле автофокус – штука спорная,, использовать его нужно не всегда.

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

Технически автофокус реализуется атрибутом autofocus поля input. Не используйте его для полей, заполнение которых не обязательно.

Подсказки.

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

Второй вариант реализации подсказок – это использование атрибута placeholder=” “, отображающего текст-подсказку прямо в поле ввода. Этот атрибут относится к спецификации HTML5.

В качестве альтернативного варианта можно использовать реализацию точно такого же функционала на JavaScript. Однако, готовьтесь, что скоро придется заменить JavaScript-код на HTML5.

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

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

Использование автозаполнения в форме при вводе первых символов

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

Кнопка.

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

Только не вздумайте писать на кнопке «OK» или «Отправить». Надпись должна передавать смысл совершаемого действия, например «Оформить заказ», «Отправить заявку» или, как в нашем примере, «Оплатить».

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

Счетчик