¿Hasta qué punto se pueden simplificar los formularios de compra de comercio electrónico? ¿Es posible hacerlo cómodamente en los dispositivos móviles, con sus limitaciones de tamaño y teclado? Aunque parezca increíble, la respuesta es sí. De hecho, es posible crear un formulario en una sola pantalla, como muestra el vídeo.

Con el objetivo de crear un sistema rápido y fácil de usar que sea adecuado para un dispositivo móvil, Luke Wroblewski explica en la web de desarrolladores de Intel cómo condensar toda la información necesaria en un solo pantallazo – de hecho un solo campo. El resultado es tan mágico que parece simplemente increíble, e incluso quien lleve tiempo trabajando en Internet se asombrará sin duda ante la técnica y elegancia del método.

Los datos que se necesitan en este tipo de formularios suelen ser el nombre del cliente, el tipo de tarjeta, el número de tarjeta, la fecha de caducidad y el CVV o código de seguridad que aparece en la parte trasera.

La primera idea de este método es considerar en que lo que debe introducir el usuario es simplemente un largo número. Con esto en mente resulta que es mucho más fácil mostrar un teclado de tipo numérico (de teléfono o calculadora) que el teclado convencional, donde la mayor parte de los signos y las letras no son necesarios.

Quienes trabajan con transacciones bancarias saben que los primeros cuatro dígitos de la tarjeta se corresponden con el tipo de tarjeta, de modo que no es difícil mostrar el icono correspondiente (VISA, MasterCard, American Express…) cuando se han introducido los cuatro primeros dígitos. Un campo menos.

Para los números basta aceptar las pulsaciones del 0 al 9 y formatear el resultado visualmente en cuatro grupos de cuatro dígitos para que resulte más fácil de leer – aunque esto puede variar de un tipo de tarjetas a otras, pero se puede tener en cuenta. También es bien sabido que este número incluye un dígito para un chequeo de control (checksum), de modo que se puede validar sobre la marcha si el número es válido o contiene un error. Si hay algún problema basta con marcarlo en rojo y esperar a que el cliente lo corrija.

Al terminar con el número se puede hacer que todo se desplace a la izquierda para continuar dejando ver la fecha –que también es numérica, del tipo MM/AA, mes/año– y los tres dígitos del CVV. Para teclear todo esto se puede seguir usando el teclado numérico. Elegantemente, Wroblewski propone además cambiar el icono de la tarjeta para mostrar la parte posterior que es donde está el código CVV (lo cual además se puede personalizar según el tipo de tarjeta).

Si hace falta algún dato adicional como el nombre se puede pedir antes o después de este proceso, ya con el teclado normal, o tomarlo de los datos de registro si el usuario ha tenido que registrarse previamente. (Para otras ideas y entornos por aquí explicamos hace tiempo algunas técnicas sobre los detalles de un formulario electrónico de pago con tarjeta de crédito).

Los más observadores se habrán dado cuenta de las técnicas usadas para que el resultado sea tan simple y asombroso:

  • Hay varios campos simplificados en uno solo
  • El teclado es adecuado para el fin que se persigue
  • El teclado permanece siempre a la vista
  • El usuario no tiene que saltar de un campo a otro

¡Ojalá todos los formularios fueran así!


Tags: