it-swarm-es.com

División de campos de número de tarjeta de crédito en cuatro entradas diferentes

Anteriormente he estado usando 4 campos para el número de tarjeta de crédito, dividiendo cada conjunto de 4 números para que sea más fácil ingresar.

Ahora estoy pensando en tener un campo, que inserta espacios después de cada conjunto de números en su lugar:

single field with spaces between groups of four digits, and old field with four separate boxes

Para el que tiene 4 campos, el cursor salta al siguiente campo automáticamente.

¿Qué formato es el preferido? ¿O hay otras alternativas mejores?

Solo acepto Visa, Mastercard y Discovery, con 16 y 17 dígitos.

114
Source

Por lo general, siempre optaría por la solución más simple. En este caso, un solo campo para que el usuario escriba .

Con campos divididos, como el de 4 recuadros que propone, agrega una carga cognitiva adicional al usuario.

  • "¿Necesito saltar manualmente a cada campo?"
  • "¿Lo hará el sistema por mí?"
  • "¿Qué pasa si presiono tab yo mismo pero el formulario saltó automáticamente? ¿Habría saltado al tercer campo en su lugar ...?

Todas estas preguntas adicionales, quizás subconscientemente, quizás más avanzadas en sus mentes, no son preguntas que incluso se considerarían en una sola forma de campo.

Claro, las opciones de 4 campos ayudan a la legibilidad, por lo que si el usuario ingresó su número incorrectamente, es más fácil para ellos volver a leer su entrada para ver qué área hicieron mal. Pero esto aún puede mitigarse en un solo campo. Tal como lo mostró arriba, puede representar la entrada del usuario con espacios en el campo único.

Otra consideración son los usuarios móviles . Si bien puede ser simple en una computadora de escritorio, un móvil tiene un teclado que necesita abrir y cerrar al ingresar al campo. Los diferentes dispositivos y sistemas operativos se comportan de manera diferente, pero es muy probable que en el salto del campo 1 al campo 2 el teclado se cierre y se abra automáticamente, causando un parpadeo discordante en la pantalla, con el usuario posiblemente intentando hacer clic en el quinto dígito justo cuando el teclado se cierra , moviendo así el cursor a otra área de la pantalla por completo, o simplemente faltando ese dígito de la entrada por completo.

Este problema móvil se ilustra muy bien en blog de Baymard , donde también señalan que los usuarios móviles tienden a presionar manualmente en cada campo, algo que los usuarios de escritorio no hacen con tanta frecuencia.

Su propuesta es una buena idea, pero creo que pertenece a la categoría de "sobreingeniería". A menos que esté notando errores significativos de entrada del usuario en un solo campo, no creo que necesite introducir una alternativa. Podría arriesgarse a disminuir la usabilidad en lugar de mejorarla.

246
JonW

Esta respuesta y esta respuesta cubren algunos de los puntos muy bien, pero por alguna razón nadie está discutiendo el soporte de autocompletar.

No use 4 campos separados.

  • Primero, es molesto, muchas de esas razones están cubiertas en las otras respuestas.
  • Además, ¡un número CC no son cuatro números de 4 dígitos, es un solo número largo. Algunas tarjetas de crédito ni siquiera tienen grupos de cuatro, en cuyo caso su entrada de cuatro campos ni siquiera tiene sentido, por ejemplo:

    enter image description here

  • La verdadera que quiero agregar es que algunos navegadores ofrecen la opción de completar la información de la tarjeta de crédito por usted. Chrome, por ejemplo tiene esta funcionalidad, y Safari en iOS 8 agregará automáticamente un botón "escanear tarjeta de crédito" habilitado para cámara a estos campos si los crea correctamente (consulte ese artículo). Y así, el campo CC ¡real "perfecto" desde una perspectiva UX es un campo único con el nombre de campo apropiado (como "Número de tarjeta de crédito") y los atributos de activación específicos del navegador apropiados (como autocomplete="cc-number" y id="cc_number").

No intentes inventar tu propio método de entrada "conveniente" para esto. Apéguese a los mismos métodos estándar de ingreso de números de tarjetas de crédito que ya se usan comúnmente (campo único, nombre y atributos apropiados), porque los desarrolladores del navegador ya son haciendo un esfuerzo por mejorar la experiencia de usuario de este tipo de campos, por lo que permite que se maneje en el lado del navegador y les da a los usuarios algo con lo que están familiarizados en lugar de algo inconveniente que también ejecuta el riesgo de romper todas las características de Nice que su navegador favorito normalmente les brinda.

143
Jason C

Como alguien que utiliza tarjetas de crédito virtuales, estoy totalmente a favor de un solo campo. Cada vez que quiero pagar, la aplicación bancaria me genera un nuevo número de tarjeta, y es muy tedioso tener que copiar y pegar cuatro veces en lugar de uno. Supongo que su formulario no llenará los 4 campos si pego 16 dígitos en el primero. Lo hará?

Además, he visto varios diseños de 4 campos que fueron increíblemente difíciles de usar. A veces presionando Backspace fue requerido para volver a un campo con un error tipográfico, en otros casos Shift+Tab fue requerido. A veces, el campo al que saltó tenía su texto preseleccionado o borrado, por lo que era básicamente imposible predecir cómo se comportaría el formulario sin observarlo después de cada pulsación de tecla.

Solo dame un campo donde pueda pegar un número de tarjeta y déjame usar Backspace para corregir cualquier error tipográfico si escribo el número manualmente. Aquí es algo que parece aceptable:

$('#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);
})  
66
Dmitry Grigoryev

La solución más simple, si no necesariamente la mejor, es un solo campo de tarjeta de crédito que permite al usuario ingresar cualquier cadena de dígitos y espacios. Debería ser trivial para la lógica del lado del servidor quitar los espacios de la cadena enviada antes de verificar si la cadena de dígitos resultante es o no un número de tarjeta de crédito válido. Si el usuario elige ingresar espacios iniciales o finales o romper los dígitos en diferentes lugares de lo que está en la tarjeta, ¿y qué?

Insertar automáticamente los espacios para el usuario puede ser un poco más fácil de usar, pero es mucho más trabajo.

Múltiples campos con auto-tabulación de uno a otro está bien, pero si toma tarjetas que no sean Mastercard/Visa, es mucho trabajo ajustar las longitudes de campo para el tipo de tarjeta (por ejemplo, 4,6,5,0 para Amex) sobre la marcha (es decir, en un script del lado del navegador). En un sitio web de una compañía de tarjetas que, por definición, solo toma un tipo de tarjeta, es claro y fácil. [Editar: OK-ish. Otras respuestas indican por qué es una desventaja para algunos usuarios]

Negarse a permitir que el usuario ingrese espacios es hostil para el usuario. Permitir que el usuario ingrese espacios y luego rechazar el número de tarjeta (¡correcto!) Como inválido después del envío es realmente abominable, en la medida en que podría rechazar a ese minorista mi costumbre en ese punto y en cambio comprarle a quien antes era mi segunda opción.

22
nigel222

Luke Wroblewski, un experto en UX con excelentes conocimientos sobre la creación de formularios eficientes, respondió a esta pregunta: se un solo campo de entrada numérico (aquí n video de cómo funciona esto ).

Como puede ver en el video de arriba de la demostración de Zachary, se utiliza un solo campo de entrada para capturar primero el número de tarjeta de crédito. Si el número de la tarjeta de crédito no es válido, se muestra un error que impide que el usuario avance. Si el número de la tarjeta de crédito es válido, el ícono genérico de la tarjeta de crédito cambia para reflejar el tipo de tarjeta ingresada. Esto elimina la necesidad de un menú desplegable o selector de "tipo" de tarjeta de crédito y le asegura a alguien que su entrada ha sido entendida.

Una vez que se valida el número de la tarjeta de crédito, se desliza hacia la izquierda dejando solo los últimos cuatro dígitos finales para referencia y el siguiente conjunto de entradas aparece en la máscara: fecha de vencimiento, código CVV (seguridad) y código postal. Como se trata de entradas numéricas, todo lo que se necesita es un conjunto de teclas programables 0-9 para mantener a las personas moviéndose por el teclado.

Dado que la fecha de vencimiento de una tarjeta de crédito no puede ser en el pasado o en un futuro lejano, la máscara de entrada una vez más ayuda a mantener a las personas alejadas de los errores. Meses o años inválidos simplemente no serán aceptados. Después de que se haya agregado una fecha de vencimiento válida, el diseño de Square presenta otra mejora excelente. El icono de la tarjeta de crédito cambia para revelar dónde se encuentra el código CVV en la tarjeta específica que se utiliza para pagar. Este pequeño detalle ayuda a las personas a saber qué información se requiere a continuación.

Debido a que CVV y Zip también son entradas numéricas, no hay razón para dejar el teclado de marcación durante todo el proceso de ingreso de pagos: no se requiere saltar entre múltiples campos de formulario. Zachary también se aseguró de que las personas puedan usar su teclado (pestaña y tecla Mayús) y mouse para moverse entre las distintas partes de esta máscara de entrada de pago.

8
David Regev

Siga los consejos de los demás y no intente reinventar la rueda. No, a menos que haya leído y entendido el estándar ISO ISO/IEC 7812 que rige los números de tarjetas de pago, que, por cierto, varían de 13 a 19 dígitos y generalmente (pero no siempre, lea las especificaciones) incluya un dígito de verificación que pueda usar para validar la entrada.
Insertar espacios donde no hay ninguno es casi siempre una mala idea. Piensa en todas las combinaciones posibles con las que tendrás que lidiar; autocompletado, se utiliza para completar el autocompletado. Pegado sin espacios, pegado con espacios, cortado para usar en otro lugar (¿el corte debe incluir los espacios?), Escrito, editado y, al final del día, ¿cuál es el problema que está tratando de resolver?

5
Paul Smith

Creo que Card.js es mi experiencia de usuario favorita cuando se trata de agregar tarjetas. No solo le permite escribir muy rápido (campos únicos, etc.), sino que también le muestra dónde están esos campos en sus tarjetas particulares para que no tenga que preguntarse dónde está la fecha de vencimiento o CVV. Te recomiendo echarle un vistazo.

4
Mariusz Ciesla

Un punto adicional menor que no creo que se aborde en otra parte: una sola caja es más accesible, especialmente en sistemas sin un conjunto completo de herramientas de accesibilidad:

  • Se escala si la ventana se amplía (solo al hacer zoom en la ventana de un navegador todavía deja al cursor una línea delgada que puede ser difícil de encontrar; un píxel si pruebo en esta página en Firefox/Windows)
  • La tabulación entre campos se comporta razonablemente (no olvides shift-tab).

  • Puede que esto ya no sea cierto, pero algunos lectores de pantalla solían tener problemas con los cuadros de entrada no etiquetados; este puede ser el caso de las tecnologías de entrada de voz, pero no las he usado.

No estoy diciendo que no puede hacer una entrada accesible (y que cumpla con los estándares) con cuadros separados, pero un cuadro único es más fácil para usted y para los usuarios que necesitan (o quieren) interfaces atípicas.

0
Chris H

Por favor, por el amor de Dios no hagas la segunda opción.

una falla ENORME UX es (lo que hace la mayoría de los sitios al implementar esto obturador) no puede volver a editar los números previamente, porque automáticamente lo obliga a ir al siguiente campo desde que completó fuera de los datos.

No olvidemos que la creación de múltiples campos hace que parezca que está llenando diferentes bits de información. En su diseño, parece que potencialmente el último campo será para el "código de seguridad".

Hacerlo un campo implica una porción de números (pero haga lo que hizo en la opción uno: sangría porque eso muestra exactamente el mismo formato que su tarjeta).

Al completar los detalles de la tarjeta de crédito, desea acercarse al diseño de la tarjeta física real porque los usuarios podrán escanear la tarjeta y buscarla para agregar la información que acaban de escanear. Mezclar cualquier cosa causará confusión y frustración (según mi experiencia trabajando en el mundo del comercio electrónico durante años).

0
Majo0od