11 Pautas esenciales para el diseño del proceso de checkout (I)

Tweet about this on TwitterShare on LinkedIn0Share on Facebook0Share on Google+0Email this to someone

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

Este post es el primero de una serie de 3.

En este artículo vamos a hablar de la cara menos afable de los sitios web de comercio electrónico. Según estudios de comercio electrónico recientes, al menos el 59.8 % de clientes potenciales abandona su carro de compra (MarketingSherpa lo pone en el 59.8 %, SeeWhy en el 83 % y MarketLive en el 62.14 %). La pregunta principal es ¿qué hace que los clientes abandonen su carro de compra tan a menudo? ¿Existe algún error fundamental que los diseñadores de sitios de comercio electrónico cometen demasiado a menudo? ¿Existe alguna directriz común o una regla básica que hace más difícil o puede facilitar la compra de productos para nuestros usuarios? ¿Y, finalmente, existe algún modo significativo de mejorar las tasas de conversión para nuestros productos?

Bien, esto es exactamente lo que quisimos averiguar. En 2010, reclutamos una gran serie de usuarios web y procedimos a realizar un estudio de utilidad, enfocando el estudio y concentrándonos sólo en la experiencia del usuario, observando el proceso de compra desde el “carro” ” hasta la “orden completada”. El estudio fue conducido usando la metodología “think aloud” y fue documentado mediante la grabación de todo lo que sucedía en la pantalla de ordenador. El comportamiento de los sujetos fue analizado posteriormente examinando con detalle estas grabaciones.



El estudio ha demostrado que es difícil llevar a los usuarios al paso final del proceso de checkout cuando lo único que resta por hacer es dar los detalles de su tarjeta de crédito.

Los 15 sitios web de comercio electrónico que probamos son: 1-800-Flowers, AllPosters, American Apparel, Amnesty, Apple, HobbyTron, Levi’s, Newegg, Nordstrom, Oakley, Perfume.com, PetSmart, Thomann, Walmart and Zappos.

En total, a los sujetos de la prueba se les presentaron más de 500 problemas de usabilidad, desde distraerlos con gráficos animados hasta desorientarlos con flujos ilógicos. Estos problemas fueron posteriormente analizados y compilados en 63 directrices de usabilidad incluidos un informe titulado “La usabilidad en el proceso de checkout”. De este informe compartimos a continuación 11 directrices fundamentales.

1. El Proceso de checkout debería ser completamente lineal

PROBLEMA: Tener pasos dentro de pasos confunde e intimida a los clientes, ya que esto rompe con su modelo mental de checkout lineal.

Una de las peores violaciones de usabilidad que descubrimos en nuestras pruebas eran los procesos de checkout no lineales. Los sujetos del estudio abandonaban los sitios  que tenían un proceso de checkout no lineal. En el momento de las pruebas, tanto Walmart como Zappos tenían un proceso de checkout no lineal.

El forma típica de terminar por casualidad en un proceso de checkout no lineal es la de crear pasos dentro de pasos. Esto pasa, por ejemplo, cuando el cliente tiene que poner una dirección de entrega preferida (el problema de Walmart) o crear una cuenta en una página separada (el problema de Zappos) y luego ser redirigido a un paso del checkout anterior para completar el proceso.

Debajo, se puede ver el flujo de checkout de Walmart. Como se puede observar no es lineal porque el subpaso dirección de entrega preferida dirige al usuario a un paso anterior:

El proceso no lineal de Walmart.

Por suerte, hacer un proceso completamente lineal es fácil. En este caso, un subpaso como la creación de cuenta nunca debería remitir a un paso anterior en el proceso de checkout,  al contrario, debería dirigir al cliente al siguiente paso de comprobación.

Esto es crítico porque el modelo mental de la mayor parte de los clientes determina que un proceso de comprobación debería ser lineal. Al ver la misma página dos veces, la mayor parte de los clientes concluirían que el sitio web tiene un error, ya que esto es lo  que pasa con los errores de validación.

Como comentó una de las personas de la prueba: “En esta página ya estaba yo antes, ¿he hecho algo mal?”.

2. Añadir descripciones a los campos que se han de rellenar

PROBLEMA: Sin descripciones muchos campos pueden ser ambiguos.

¿Qué quiere decir “Dirección – línea 2″? Comentó una persona durante la. Otras lo confundieron con dirección de facturación.

La mayoría de los sujetos de la prueba tenían problemas de comprensión de ciertas etiquetas. Hubo variedad en las dificultades de comprensión de las etiquetas. Aunque cabe destacar que hubo problemas críticos en alguno de los casos, por ejemplo, un sujeto dejó una compra porque no podía entender cierta etiqueta de un campo obligatorio, y fue imposible para ella completar el proceso de checkout. Por lo tanto, intente proporcionar siempre instrucciones claras para cada campo.

Un formulario que causó confusión pertenece a HobbyTron, donde la gente que lo utilizó tuvo que adivinar a que se refería “Primero”:

En el sitio de Apple la mayoría los sujetos de la prueba escribieron su código postal en la el espacio etiquetado como “Prefijo local”:

Cuando se tienen campos con etiquetas sin ninguna explicación algunos clientes probablemente se puedan confundir sobre la información a añadir en el campo. Facilite el proceso añadiendo descripciones y ejemplos en formato corto al lado de las etiquetas, y como no todos los clientes necesitan ayuda complementaria, se pueden ocultar estas ayudas detrás de un link “¿Qué es esto?”, o reduciendo levemente su color o el tamaño de la fuente.

A continuación se pueden ver ejemplos de cómo las descripciones en las etiquetas de los campos pueden ayudar a los clientes a entender que ingresar en cada uno de los campos:

Inclusive los campos más obvios como la dirección de correo electrónico son grandes oportunidades para explicar para qué se utilizarán los datos del cliente. “Dirección de correo electrónico” puede ser una descripción suficiente, pero la mayoría de la gente querrá saber con qué fines se utilizará dicha dirección de correo electrónico.

Por último, para los campos en que los usuarios deben rellenar basándose en un papel o una tarjeta, pueden se de mucha ayuda el incluir imágenes (por ejemplo, la imagen de una fecha de vencimiento de una tarjeta de crédito).

3. Evitar palabras contextuales como “Continuar”

PROBLEMA: Las palabras contextuales como “Continuar” son ambiguas y tienden a confundir a los clientes.

Dependiendo del estado de ánimo del cliente, un botón etiquetado como “Continuar” en un carro de compra podría significar una de las siguientes dos cosas:

  1. Seguir haciendo compras
    Por ejemplo, si el cliente también busca una camisa para comprar con los vaqueros.
  2. Seguir al proceso de checkout
    Si el cliente tiene todos los productos que necesita y solamente quiere pagar.

Otro ejemplo es “Back”. ¿Volver a la última página? ¿Volver a los resultados de búsqueda? ¿Dónde? ¿Y qué hay de la palabra “Proceder”? Estos son todas las palabras contextuales con cambio de significado dependiendo el contexto y el estado de ánimo del cliente.

HobbyTron era uno de los sitios en los que los sujetos de la prueba hicieron click en “Continuar” pensando que continuaban al proceso de checkout:

Botón Continuar de Hobbytron

Después de hacer click sobre un botón incorrecto, uno de los sujetos de la prueba comentó:

Era confuso porque pensé “quiero seguir”. No pensé en continuar comprando, más bien en seguir con el checkout.

Este es un buen ejemplo de como las palabras son contextuales y pueden ser abiertas a la interpretación y confundir a los clientes. Aproximadamente la mitad de los sujetos de la prueba pulsaron una vez el botón incorrecto debido a palabras contextuales.

En su lugar, utilice palabras que no son abiertas la interpretación como “Checkout”  y “Comprar más”.

4. Refuerce visualmente los campos delicados en la página de pago

PROBLEMA: Los clientes podrían dudar si los campos de tarjeta de crédito no parecen seguros (independientemente de la seguridad real).

Muchos de los sujetos de la prueba no pensaron en la seguridad hasta que tuvieron que ingresar los datos de su tarjeta de crédito. De hecho, muchos de ellos comentaron sobre ciertas partes de la página de checkout en términos de ser “segura” o “insegura” (típicamente relacionado con detalles de la tarjeta de crédito).

Las partes de la página con iconos, credenciales o texto de seguridad y una robustez general eran percibidas como más seguras, mientras que las partes sin estas señales visuales inspiraron menos confianza, a pesar del hecho que estos campos eran todos parte del mismo formulario en la misma página. Técnicamente, no había ninguna diferencia en la seguridad. Sin embargo, la mayor parte de los clientes no entienden el funcionamiento técnico de los formularios. Todo lo que ellos saben del sitio es lo que les dicen sus sensaciones mientras navegan en ella.

Hay una divergencia clara entre el modelo mental que tiene el cliente sobre la seguridad de la página y la seguridad real que la página posee.

Como una persona de la prueba que abandonó su compra diciendo que la página “no me parecía bastante segura”. Su reacción no estaba basada en la seguridad técnica o real del sitio, sino más bien sobre la seguridad percibida.

A continuación se puede observar una maqueta rápida que hice para ilustrar como se puede visualmente hacer más seguros los campos para el ingreso de los detalles la tarjeta de crédito (la versión B). Ver el color de fondo, la imagen de candado y el sello de GeoTrust:

Maqueta con refuerzo visual.
Al añadir señales visuales (como bordes, color de fondo, iconos de seguridad y credenciales) alrededor de los campos de los detalles de la tarjeta de crédito, se puede aumentar la seguridad percibida por los clientes no técnicos.
..

Ir al post siguiente

..
Diego Mosquera

Blueknow

Personalizamos la experiencia de compra.
Tweet about this on TwitterShare on LinkedIn0Share on Facebook0Share on Google+0Email this to someone
Emprendedor digital especializado en ecommerce y optimización de la conversión. Ha trabajado en empresas de internet por más de 10 años en diversos sectores (ecommerce, marketplace, turismo, directorios, etc).

Trackbacks for this post

  1. Genera confianza en el visitante y vende más | Blueknow Blog
  2. Aumenta tu conversión sin aumentar tus costos | Blueknow Blog
  3. La experiencia de tu tienda online puede mejorarse | Blueknow Blog

Escribe aquí tus comentarios

*