Разделение полей номера кредитной карты на четыре разных входа

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

Теперь я думаю о том, что у меня есть одно поле, которое вместо каждого набора чисел вставляет пробелы:

109 голосов | спросил Source 6 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 06 Sep 2016 11:18:27 +0300 2016, 11:18:27

10 ответов


242

Я обычно выбирал бы самое простое решение. В этом случае одно одно поле для ввода пользователем .

С полями разделения, например, с 4-коротким, который вы предлагаете, он добавляет дополнительную пользовательскую нагрузку для пользователя.

  • «Нужно ли мне вручную переходить на каждое поле?»
  • «Будет ли система делать это для меня?»
  • «Что делать, если я нажал вкладку tab сам, но форма автоматически подпрыгнула - будет ли она прыгать в третье поле вместо этого??

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

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

Еще одно соображение - мобильные пользователи . Хотя на рабочем столе это может быть просто, на мобильном телефоне есть клавиатура, которую нужно открыть и закрыть при вводе поля. Различные устройства и ОС ведут себя по-разному, но вполне вероятно, что при прыжке с поля 1 на поле 2 клавиатура будет автоклинироваться и автоматически открываться, вызывая резкую вспышку на экране, при этом пользователь может попытаться щелкнуть пятую цифру, как только клавиатура закрывается , тем самым полностью перемещая курсор в другую область экрана или просто не удаляя эту цифру из записи.

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

Ваше предложение - хорошая идея, но я думаю, что это относится к категории «overengineering». Если вы не замечаете существенные ошибки ввода пользователя в одном поле, я не думаю, что вам нужно представить альтернативу. Вы можете снизить риск использования, а не улучшать его.

ответил JonW 6 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 06 Sep 2016 11:39:38 +0300 2016, 11:39:38
138

Этот ответ и этот ответ хорошо освещает некоторые моменты, но почему-то никто не обсуждает поддержку автозаполнения.

Не используйте 4 отдельных поля.

  • Во-первых, это раздражает, многие из этих причин рассматриваются в других ответах.
  • Кроме того, номер CC не является четырьмя 4-значными цифрами , это одно длинное число. Некоторые кредитные карты даже не имеют групп из четырех человек, и в этом случае ваш четырехпользовательский ввод не имеет смысла, например:

     введите описание изображения здесь>> </a> </p>
</li>
<li> <p> Настоящий, который я хочу добавить, - это некоторые браузеры, которые позволяют вам заполнять информацию о кредитной карте. <a href= Chrome, например, имеет эту функцию, а Safari на iOS 8 будет и autocomplete="cc-number").

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

ответил Jason C 6 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 06 Sep 2016 18:16:56 +0300 2016, 18:16:56
63

Как кто-то, кто использует виртуальные кредитные карты, я сильно сторонник одного поля. Каждый раз, когда я хочу заплатить, у меня появилось новое количество карт, созданное для меня банковским приложением, и очень утомительно, что нужно копировать-вставить четыре раза вместо одного. Я предполагаю, что ваша форма не будет заполнять 4 поля, если я вставляю 16 цифр в первую. Будет ли это?

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

Просто дайте мне одно поле, в которое я могу вставить номер карты, и позвольте мне использовать Backspace , чтобы исправить любые опечатки, если я случайно наберу номер вручную. Здесь , что выглядит приемлемым:

$('#test_form').on('keyup', function(e){
    var val = $(this).val();
    var newval = '';
    val = val.replace(/\s/g, '');
    for(var i=0; i < val.length; i++) {
        if(i%4 == 0 && i > 0) newval = newval.concat(' ');
        newval = newval.concat(val[i]);
    }
    $(this).val(newval);
})  
ответил Dmitry Grigoryev 6 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 06 Sep 2016 14:54:08 +0300 2016, 14:54:08
22

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

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

Несколько полей с автоматической вкладкой от одной к другой в порядке, но если вы берете карты, отличные от Mastercard /Visa, то очень много работы по настройке длины поля для типа карты (например, 4,6,5 , 0 для Amex) «на лету» (то есть в сценарии на стороне браузера). На веб-сайте карточной компании, который по определению только когда-либо берет один вид карты, это понятно и легко. [Изменить: OK-ish. Другие ответы указывают на то, почему некоторые пользователи пользуются некоторыми преимуществами]

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

ответил nigel222 7 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 07 Sep 2016 14:08:36 +0300 2016, 14:08:36
8

Luke Wroblewski, эксперт UX с большим пониманием построения эффективных форм, ответил на этот вопрос: использовать один цифровой ввод поле (здесь видео о том, как это работает ).

  

Как вы можете видеть в видео выше демонстрации Zachary, для первого номера кредитной карты используется одно поле ввода. Если номер кредитной карты недействителен, отображается ошибка, которая препятствует движению пользователя вперед. Если номер кредитной карты действителен, значок общей кредитной карты изменяется, чтобы отобразить тип введенной карты. Это устраняет необходимость в раскрытии или выборе отдельной кредитной карты «тип» и убеждает кого-то в том, что их запись была понята.

     

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

     

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

     

Поскольку CVV и ZIP также являются числовыми вводами, нет причин когда-либо покидать панель набора номера во время процесса ввода платежа: никаких переходов между несколькими полями формы не требуется. Захари также удостоверился, что люди могут использовать свою клавиатуру (вкладку и сдвиг-вкладку) и мышь, чтобы перемещаться между различными частями маски ввода платежа.

ответил David Regev 7 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 07 Sep 2016 14:35:43 +0300 2016, 14:35:43
5

Пожалуйста, следуйте советам других и не пытайтесь изобретать велосипед. Если вы не прочитали и не поняли стандарт ISO ISO /IEC 7812 , который регулирует номера платежных карт, которые путь от 13 до 19 цифр и обычно (но не всегда - чтение спецификации) включают контрольную цифру, которую вы можете использовать для проверки ввода.
Вставка пробелов там, где их нет, почти всегда плохая идея. Подумайте обо всех возможных комбинациях, с которыми вам придется иметь дело; автоматически заполняется, используется для заполнения автозаполнения. Вставка без пробелов, вставленная в пробелы, разрезанная для использования в другом месте (если разрез включает пробелы?), Введенный, отредактированный и в конце дня, в чем проблема, которую вы пытаетесь решить?

ответил Paul Smith 8 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 08 Sep 2016 17:31:41 +0300 2016, 17:31:41
4

Я думаю, Card.js - мой любимый пользовательский опыт, когда дело доходит до добавления карт. Он не только позволяет вам вводить очень быстро (отдельные поля и т. Д.), Но также показывает, где находятся эти поля на ваших конкретных карточках, поэтому вам не нужно задаваться вопросом, где находится дата истечения срока действия или CVV. Я рекомендую вам проверить это.

ответил Mariusz Ciesla 6 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 06 Sep 2016 16:05:36 +0300 2016, 16:05:36
0

Пожалуйста, для любви к Богу не делайте второго варианта.

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

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

Создание одного поля подразумевает один кусок чисел (но, пожалуйста, сделайте то, что вы сделали в первом варианте: отступы, потому что это показывает тот же формат, что и ваша карта).

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

ответил Majo0od 7 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 07 Sep 2016 16:56:39 +0300 2016, 16:56:39
0

Небольшая дополнительная точка, о которой я не думаю, адресуется в другом месте: один ящик более доступен, особенно в системах без полного набора инструментов доступности:

  • Он масштабируется, если окно масштабируется (просто масштабирование окна браузера по-прежнему оставляет курсор тонкой линией, которую трудно найти - один пиксель, если я тестирую на этой странице в firefox /windows)
  • Вкладка между полями ведет себя разумно (не забудьте shift-tab).

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

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

ответил Chris H 13 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 13 Sep 2016 15:11:31 +0300 2016, 15:11:31
-1

Мое решение в конце концов состояло в том, чтобы использовать одно поле. Затем каждые 4 цифры он добавляет пробел. Поэтому он создает меньше путаницы, но также позволяет вам четко просматривать номера кредитных карт в том же формате, что и карта.

Возникли потенциальные проблемы:

  • Различное количество номеров кредитных карт, например. 16 или 17
  • При удалении номеров он также должен удалять пробелы при необходимости
  • Что делать, если вы используете клики по числу и добавляете или удаляете, как что влияет на интервал?
  • Ввод слишком быстро - javascript не всегда реагирует достаточно быстро

Если вы можете обойти эти проблемы, я считаю это наиболее интуитивным.

Я создал форму здесь https://jsfiddle.net/9apu6ux3/, поскольку вы можете ее увидеть хорошо разделяет цифры, но трудно сделать пуленепробиваемые.

ответил Source 7 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 07 Sep 2016 01:14:51 +0300 2016, 01:14:51

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132