11 pautas esenciales para el diseño del proceso de checkout (II)

El siguiente post es una traducción de: Fundamental Guidelines Of E-Commerce Checkout Design

Este post es el segundo de una serie de 3.

5. No usar un botón “Aplicar” en el formulario

PROBLEMA: Los clientes no entienden los botones “Aplicar” para las diferentes secciones de un formulario.

Más de la mitad de los sujetos de la prueba se confundían con la interpretación del botón “aplicar” de los formularios.

En la mayoría de los casos lo que ocurrió con estos botones fue que:

  1. No se hizo click sobre ellos, incluso si el campo de entrada había sido completado.
  2. Se lo confundió con el botón de envío del formulario principal.

Los sujetos de la prueba simplemente no entendieron ni el significado ni el objetivo de tener en el formulario un botón “aplicar”.

Aquí podemos ver una muestra del chekout de Newegg, donde sólo la mitad de los sujetos de la prueba que rellenó su código postal también pulsó el botón “Go”.

Botón de “Apply” en la página de NewEgg.

La consecuencia de realizar un click encima del botón “aplicar” del formulario principal es que los clientes son redirigidos otra vez a la misma página después de aplicar el cambio, frustrando así sus expectativas de movimiento hacia el siguiente paso y probablemente generando la sensación de error en la página (tal y como ya vimos en la pauta número 1). Esto sucedió a dos personas de la prueba, que abandonaron la página ya que consideraron que en dicha página sucedía un error, e intentaban adivinar qué error sucedía ya que no se les mostraba ningún mensaje de error (porque técnicamente no había ninguno).

Debajo se muestra un formulario de Amercian Apparel, donde los sujetos de la muestra confundieron el significado del botón “Apply” y, por consiguiente, no pudieron proseguir con la compra.

Botón “Apply” en American Apparel.

Si es necesario poner al día un valor antes de seguir adelante,  es mejor usar AJAX o similar, sin mostrar en el formulario el botón “Aplicar”.

6. Dar formato al campo de fecha de vencimiento tal y como aparece en la tarjeta de crédito

PROBLEMA: Los campos de fecha de vencimiento de la tarjeta de crédito pueden ser difíciles de descifrar si no son presentados tal y como aparecen en la tarjeta de crédito.

Algunos sitios utilizan nombres de mes, mientras que otros sitios utilizan una combinación de nombres de mes y números, y otras utilizan únicamente números. ¿Cuál es el mejor método? El modo correcto de darle formato a un campo de fecha de vencimiento es el de emparejar lo que el cliente ve en su tarjeta de crédito (p. ej. números únicamente). Esto reduce al mínimo la confusión y la lectura incorrecta porque el usuario fácilmente puede verificar el campo del formulario con lo que tiene en su tarjeta de crédito.

A continuación mostramos cuatro ejemplos de como no formatear los campos de fecha de vencimiento. El ejemplo D, con el mes escrito en texto y el año en cuatro dígitos, es el peor caso.

El modo correcto de dar formato al campo “mes” es utilizando números y prefijar todos los números de un dígito (1 a 9) con 0, de modo que aparezcan exactamente como están escritos en las tarjetas de crédito (por ejemplo, 03 para marzo).

El modo correcto de dar formato al campo “año” es utilizando dos dígitos (por ejemplo, 14 para 2014).

Los sujetos de nuestra prueba no tuvieron ninguna dificultad cuando se incluyeron los nombres de los meses, siempre y cuando se mostraran antes los dígitos. Así, “03 – Marzo” está bien, sin embargo “Marzo – 03” no es correcto. Lo que esté escrito en la tarjeta de crédito debe aparecer siempre al principio de cada opción.

Se puede utilizar, asimismo, una barra inclinada (/) entre el campo mes y el campo de año para obtener así una visualización mucho más similar a la que aparece en las tarjetas de crédito (así, 03/14, se refiere al mes de marzo de 2014).

7. Usar sólo una columna para los campos del formulario

PROBLEMA: A los usuarios les cuesta mucho comprender las relaciones entre campos de un formulario distribuidos en dos columnas.

La mitad de los sujetos de la prueba tenían problemas cuando los campos del formulario estaban en dos columnas. Había dos  secuencias de interpretación típicas:

  1. Los campos de una de las dos columnas se omitieron. Fueron omitidos tanto por no relacionarlos unos con otros como simplemente pasados por alto por el sujeto.
  2. Se rellenaron campos sin relaciones entre ellos, a menudo causando errores de validación.

Muestra de los pasos para la creación de nueva cuenta en “Perfume’s”:

Formulario de “Perfume.com’s”

Este formulario fue interpretado de 3 modos distintos:

  1. Todos los campos del formulario deberían ser completados para crear una cuenta.
  2. El campo “de Dirección de correo electrónico” y los campos en la columna derecha deberían ser completados para utilizar el “guest checkout”.
  3. O bien la columna de la izquierda o bien la columna derecha debían ser rellenadas.

Otro ejemplo es PetSmart. Donde el comportamiento más común era pasar por alto la segunda columna, “número de identificación de Tarjeta de crédito, ” causando un mensaje de error:

Formulario de pago de PetSmart.com

En dos ocasiones los sujetos de la prueba abandonaron su compra porque siguieron rellanando los datos incorrectos en la columna incorrecta.

Nuestra sugerencia es utilizar siempre una sola columna. Ninguno de nuestros sujetos mostró dificultades en este caso.

8. Utilizar por defecto la dirección de envío como dirección de facturación.

PROBLEMA: La mayor parte de clientes compran productos para su casa, entonces el requerir tanto una dirección de facturación como una dirección de entrega no tiene sentido.

Los clientes típicamente compran productos para ser recibidos en su propia casa. Así pues, por defecto, utilizan la misma dirección para la entrega y para la facturación de dichos productos.

Al utilizar por defecto la dirección de envío como dirección de facturación, el proceso de checkout tendrá menos campos haciéndolo menos intimidatorio para el cliente. Así el usuario también reduce el riesgo de escribir mal su dirección al escribirla sólo una vez; evita que el usuario se apresure a completar el formulario y en caso que haya errores tendrá que corregirlos sólo una vez.

Checkout de NewEgg.

Además, se deberían ocultar los campos de la dirección de facturación. La inhabilitación de los campos no es suficiente. Durante la prueba, la mayor parte de los sujetos quedaban confundidos al encontrar una página web que tenía los campos deshabilitados y se preguntaban el por qué, hasta el punto que muchos de los usuarios intentaban realizar varios clicks sobre el formulario inhabilitado. En cambio, la mejor solución es mostrar únicamente los campos para la dirección de facturación, a no ser que el cliente explícitamente pida tener una dirección de envío diferente a la dirección de facturación.

Algunos sitios tienen un botón de “copiar la dirección de entrega”. El problema con este botón es que también copia los errores y entonces el cliente debe corregir la misma información dos veces. De la misma forma, el cliente podría utilizar el botón “copiar la dirección de entrega” una vez los errores están subsanados, aunque todos los sujetos de la prueba en esta situación se olvidaron de hacer click sobre dicho botón.

Formulario de dirección de entrega de Apple.

Asimismo, dependiendo de la disposición del sitio, esta opción puede ser fácilmente pasada por alto. En la página web de Apple la mitad de los sujetos de la prueba pasó por alto la opción de “copiar la dirección de entrega” y terminó por ingresar la dirección entera otra vez.

Un check box (o alguna opción similar) es la mejor manera de proceder, ya que los errores tendrán que ser corregidos solamente una vez. La página web de Amnistia Internacional es un buen ejemplo de cómo realizar el checkout en la página.

Checkout de “Amnistia International”

..

Ir al post anterior

Ir al post siguiente

..
Diego Mosquera

Blueknow

Personalizamos la experiencia de compra.