Diseño del formulario de inserción de datos de pago

En un reciente post de Designmodo, Marcin Treder se explaya hablando del diseño de una de las piezas clave cuando hablamos de e-commerce: la pantalla de pago. Más concretamente de los elementos que permiten al usuario incluir sus datos de pago a través de una tarjeta de crédito. El post es The Ultimate UX Design of: the Credit Card Payment Form.

Introduce el post hablando del proceso en el que se enmarca un objeto como este:

If you’re selling something online, you know it’s not the easiest thing to do. You need to find a prospective customer, present your product in a good light, drive her through a process full of forms and finally… collect her money. At every step you’re risking a sudden loss of your client. That’s painful.

En realidad, si lo vemos desde esta perspectiva, los procesos por los que pasa el usuario a la hora de hacer una compra online son variados, pero sobre todo son muchos. Claro que eso depende en buena medida del producto, pero al fin y al cabo sí hay una serie de pasos insalvables, uno de los cuales es el que nos ocupa ahora mismo: el pago.

Habla Treder de que, efectivamente, en el proceso de compra pueden suceder muchas cosas, y si a eso sumamos la variable de la atención disponible por parte del usuario, necesitamos un diseño claro, simple, sencillo y sobre todo eficaz.

Debemos añadir un elemento más: las personas no quieren complicaciones ni riesgos a la hora de poner en la web los datos que implican incluir sus datos de pago. O lo que es lo mismo, la posibilidad de sufrir algún percance con su dinero en el proceso de inserción de datos de pago es un elemento que puede suponer una barrera a la hora de que se complete el proceso.

Todas las recomendaciones que en este sentido nos hace Treder en el post se resumen en una serie de puntos clave:

1. Ayudar al usuario en el proceso
2. Adelantar todo el trabajo posible al usuario
3. Ser lo más obvio posible
4. Hacer sentir seguro al usuario
5. Asegurarse de que el usuario conoce el precio final

Con ello tenemos disponible ya uno de los objetivos que debe cubrir el diseño de esta pantalla: minimizar la sensación de riesgo o de dificultades y de distracciones. Y en ese camino, la forma de alcanzar el objetivo de diseño pasa, sí o sí, por ayudar al usuario a que procede con éxito la última parte de la transacción.

Cosas que nos recomienda Treder para satisfacer el primer punto: ayudar al usuario en el proceso:

• Evitar elementos que supongan distracciones al usuario
• Evitar el rotulado de los campos que sea confuso o no completamente claro y evidente
• No informar acerca de qué tipos de tarjeta de crédito son aceptadas en la transacción
• No tener una llamada a la acción absolutamente evidente
• No informar acerca de la seguridad disponible para realizar la transacción

Recomendaciones para satisfacer el punto adelantar todo el trabajo posible al usuario:

• Reducir al máximo el número de campos a rellenar por parte del usuario
• Detectar automáticamente el tipo de tarjeta de crédito que utiliza el usuario, para evitarle tener que indicar de qué tipo de tarjeta se trata

Recomendaciones para satisfacer el punto ser lo más obvio posible:

• Incorporar explicaciones junto a cada uno de los campos del formulario, que expliquen con qué datos y en qué formato se deben cumplimentar
• Evitar siglas que pueden no ser comprendidas (especialmente cuando pedimos al usuario el código de seguridad de la tarjeta de crédito)
• Incorporar ayuda contextual o a través de elementos flotantes que muestren ejemplos de cumplimentación o explicaciones acerca de dónde localizar un determinado dato en la tarjeta de crédito

Recomendaciones para satisfacer el punto hacer sentir seguro al usuario.

• Indicar el tipo de seguridad que proporciona el formulario del proceso de compra en el momento del pago
• Hacer explícita esa información en todo momento, junto a los campos que el usuario tendrá a su disposición para cumplimentar los datos de pago

Recomendaciones para satisfacer el punto Asegurarse de que el usuario conoce el precio final:

• La premisa fundamental se basa en que no hagamos volver atrás al usuario para conocer el precio exacto final que se cargará en su tarjeta de crédito
• Indicar de forma explícita, junto al botón que culmina la transacción, el precio final que será cargado al usuario

En definitiva, se trata de un excelente post de Marcin Treder que nos ayuda, paso a paso, en el diseño del formulario de inserción de datos de pago con tarjeta de crédito, atendiendo a las recomendaciones que hemos comentado.

Marcin Treder es el líder de un proyecto del que hablaremos en otro momento. Se llama UXPin y es una herramienta para trabajar wireframes en los procesos de diseño. Todas las recomendaciones que se nos ofrecen en The Ultimate UX Design of: the Credit Card Payment Form están ilustradas con ejemplos de los objetos que la herramienta UXPin tiene disponibles a tal efecto.

Por último, nos deja un tutorial en vídeo de cómo abordar el diseño de este tipo de pantallas con UXPin, lo cual es también de agradecer.