En las webs de comercio electrónico, la usabilidad a la hora de introducir los datos en un formulario, por ejemplo los números de las tarjetas de crédito, suele ser la gran olvidada. Por suerte, hay gente como la que está detrás de Creditcard.js que parecen ser de la escuela de «haz una sola cosa y hazla bien». Su creación es una librería para webmasters y programadores escrita en JavaScript; pensada para quienes trabajan con formularios de pago que incluyen tarjetas de crédito. De sus funciones pueden extraerse algunas conclusiones interesantes aplicables a cualquiera que tiene una tienda y una página en la que incluir datos de pago.
La primera cuestión es presentar y limitar el tipo de caracteres válidos en las tarjetas de crédito. Las tarjetas suelen usar un formato del estilo 0123 4567 9012 3456 (cuatro grupos de cuatro dígitos), en el que varios dígitos se agrupan y separan por espacios. Un detalle que facilita a los usuarios introducir los datos, permitir solo caracteres válidos (números), evitar letras y avisar en caso de que la suma de control sea inválida. El tamaño de los grupos y la posición de los espacios puede variar según la entidad emisora de la tarjeta (Visa, American Express, etcétera.)
Un detalle interesante es aceptar como válidos los espacios y guiones: algunos usuarios tienen la costumbre de utilizarlos, o quizá copian-y-pegan la información desde otro documento. En esos casos basta simplemente con ignorarlos guardando solo la información relevante que son los dígitos numéricos. Controlando también la longitud máxima de los números se evitan errores y dígitos duplicados (o que faltan). En definitiva: se avisa al usuario antes en caso de problemas para que no prosiga con un proceso que si falla, puede resultar un tanto frustrante; una buena forma es marcar los números y un aviso en color rojo al moverse a los pasos siguientes.
Otra forma de indicar al usuario de que va por el «camino correcto» es la auto-detección del tipo de tarjeta. Las American Express empiezan todas por 34, las Visa por 49… Una vez se ha comenzado a teclear se puede mostrar el nombre o incluso un icono –siempre que no «despiste» demasiado– para confirmar visualmente de forma elegante que todo es correcto.
Otra eterna lucha es el formato de la fecha de caducidad de la tarjeta: ¿mejor usar un menú desplegable con los nombres de los meses? ¿Con dos dígitos? ¿Dejando un campo de texto libre? Lo mejor es procurar que coincida con el aspecto que muestra la propia tarjeta, que suele ser MM/AA (mes y año, con dos dígitos). Si se conoce el tipo de tarjeta usado, se puede afinar incluso más. Se puede utilizar también un menú desplegable para el mes, otro para el año y de paso comprobar que no se introduce un valor de una tarjeta que haya caducado.
Respecto a los famosos dígitos del código de seguridad, la recomendación es incluir un enlace en forma de icono o interrogación que explique dónde encontrarlos en la tarjeta original (que suele ser en el reverso, a la derecha del número de tarjeta y la firma). Empleando además una limitación al número de dígitos posibles se garantiza que no se utilice un número incorrecto.
Siguiendo todos estos consejos –o algunos de los detalles de programación más técnicos que propone la gente de CreditCard.js– se puede mejorar cualquier formulario detalle a detalle. Tal vez cada mejora sea pequeña, pero una vez hecha se va sumando a las demás, proporcionando en conjunto una forma más segura, fácil y agradable visualmente al usuario – lo cual puede convertir una compra fallida en una compra realizada, sin ir más lejos.
{Foto: Captain Toothpaste Credit Card (CC) Cory Schmitz @ Flickr}
Nos encantará conocer tu opinión, pero primero tenemos que indicarte que los comentarios están moderados, y no aparecerán inmediatamente en la página al ser enviados. Evita, por favor, las descalificaciones personales, los comentarios maleducados, los ataques directos o ridiculizaciones personales, o los calificativos insultantes de cualquier tipo, sean dirigidos a los autores, a cualquier otro comentarista o la empresa propietaria de esta página. Estás en tu perfecto derecho de comentar anónimamente, pero por favor, no utilices el anonimato para decirles a las personas cosas que no les dirías en caso de tenerlas delante. Intenta mantener un ambiente agradable en el que las personas puedan comentar sin temor a sentirse insultados o descalificados. No comentes de manera repetitiva sobre un mismo tema, y mucho menos con varias identidades o suplantando a otros comentaristas. También, procura que tus opiniones estén relacionadas con lo que se comenta en esta entrada. Los comentarios off-topic, promocionales, o que incumplan todas estas normas básicas serán eliminados.