Soluciones para errores habituales en un Check Out

En el proceso de compra dentro de una web pueden surgir muchos errores que afecten negativamente a la experiencia final del usuario.

Para evitar que un usuario no termine por abandonar el proceso de checkout o que se quede atascado sin poder avanzar hay que fijarse en varios aspectos clave que influyen en su experiencia de uso.

Los puntos clave para conseguir una experiencia de usuario satisfactoria en un proceso de compra son:

Optimización en dispositivos móviles

La usabilidad y adaptabilidad de los elementos en una interfaz móvil deben estar cuidados y muy bien adecuados.

Para conseguir reducir la fricción de conversión por parte de un usuario se debe evitar errores de usabilidad en el proceso de compra.

El 37% de los usuarios utiliza el móvil para realizar compras y la tasa de abandono es mucho más alta que en un entorno de escritorio, ya que muchas interfaces no se ajustan de manera correcta.

Buenas prácticas

  • Diseño adaptable: Los formularios deben adaptarse de forma automática al tamaño de la pantalla donde se muestra.
  • Teclado: Cuando deban introducirse datos numéricos (cantidades, número de tarjeta…) se debería mostrar el teclado numérico.
  • Wallets: Ofrece medios de pago como los monederos virtuales de Apple o Google Pay para facilitar el pago a los usuarios que las tengan configuradas.

Formularios

Los usuarios prefieren una experiencia breve y rápida en el momento de la compra. Los formularios de compra no deben dificultar el proceso, eliminar la fricción recogiendo los datos justos y necesarios reduce el tiempo y carga cognitiva del usuario.

Buenas prácticas

  • Simple y rápido: Solicita los datos únicamente necesarios, el checkout de la compra no debe durar más de 1 minuto.
  • Mensajes de error: Indicar en tiempo real los errores en los datos de pago.
  • Formato de los números: Formatea con espacios los números de la tarjeta para que el usuario los reconozca más fácilmente. (Ej: Añadir espacio cada 4 dígitos en la tarjeta)
  • Dirección predeterminada: Usa la misma dirección de facturación y de envío de forma predeterminada y permite que el cliente añada otra dirección para el envío manualmente.
  • Función de autocompletar la dirección y autorrellenar: Aplica y optimiza la recopilación de la dirección al aceptar tanto la función nativa de autorrellenar (guardada en el navegador del cliente) como la función para autocompletar la dirección.
  • Información de pago guardada: Permite el guardado opcional de datos como el pago y direcciones para que lo clientes no tengan que volver a introducirlos manualmente.
Formularios-con-funciones-de-rellenado-automatico-y-reocmendaciones-en-los-checkouts-1

Localización y Métodos de pago

En los casos en los que se pretende ofrecer la compra de un producto o servicio a nivel internacional, es muy importante adecuar el check out a los estándares de cada región.

Es importante tenerlo en cuenta ya que no se utilizan los mismos medios de pago en España que en Estados Unidos o en Argentina.

Buenas prácticas

  • Idioma y divisa: Traduce y muestra la moneda local para que la experiencia del cliente esté adaptada a la ubicación de cada cliente.
  • Campos dinámicos: Haz que los campos se modifiquen y adecuen de forma automática a la información que deba introducir el usuario. (Ej: si tu formulario reconoce una tarjeta del Reino Unido, debería añadir de forma dinámica un campo para el código postal británico)
  • Métodos de pago locales: Ofrece métodos de pago según la ubicación del cliente y del dispositivo que utilice.
  • Cuotas: Plantéate ofrecer servicios del tipo «compra ahora, paga después» si el importe medio de tus pedidos es alto y si es un método de pago habitual en el mercado en el que se encuentran tus clientes.
Ofrecer-varios-metodos-de-pago-en-un-checkput-para-trasmitir-mas-confianza-1

Seguridad y confianza del comprador

Transmitir una sensación de seguridad y confianza al comprador es prioridad para conseguir una experiencia de usuario excelente. Cuidar los detalles en la web y en el checkout final mejorarán la precepción de los usuarios y reducirán la fricción de compra.

Pero para obtener la confianza del usuario hay que ofrecerle información personalizada cuando exista algún error e indicarle pasos que puede dar para solucionarlos en el momento.

(Ej: Si su tarjeta ha sido rechazada, mostrarle un mensaje como “Su tarjeta ha sido rechazada, inténtelo con otra“).

Buenas prácticas

  • Controles visuales de seguridad: Mostrar elementos visuales que transmiten seguridad (Ej: Un candado, este reforzará la idea de un entorno seguro)
  • Resúmenes del carrito de compra: muestra un resumen de todos los artículos del pedido para transmitir confianza.
  • Marca de la tarjeta: A medida que se introduzca el número de tarjeta mostrar de forma automática un icono con la marca de la tarjeta (Visa o Mastercard).
  • Sesión de invitado: permitir a los clientes realizar el proceso de compra como invitado, sin que tenga que tener una cuneta de usuario con más información de l necesaria.
  • Creación de cuenta: permite a los clientes crear una cuenta a través de la que puedan volver a verificar sus pedidos si así lo desean.
  • Autenticación reforzada de clientes (SCA): gestiona los requisitos de SCA a nivel europeo aplicando la autenticación de tarjetas y 3D Secure de forma dinámica cuando así lo exija el banco del titular de la tarjeta

Fuente información:

Muchas de estas buenas prácticas para el check out son de sentido común pero cogen más fuerza aún cuando vienen indicadas en un estudio a nivel europeo realizado por Stripe en 2021.


Óscar López Poveda

Diseñador UX/UI y de producto digital.

Soy Óscar López y vivo diseñando y creando ideas, me encanta descubrir, aprender y compartir todo lo que aprendo sobre entornos, productos digitales y UX. Me apasiona el diseño y siempre estoy abierto a apuntarme a un «bombardeo» de poryectos y descubrir personas que les apasione el mundo digital.

Recibe todas las semanas contenido de calidad sobre Diseño UX y UI en tu mail👇🏼👇🏼

Sigue leyendo...

  • Atajos de teclado en Figma

    Si eres diseñador digital y trabajas en el mundo de producto digital…. fijo que conoces y utilizas Figma. Como en…
  • Regla 60 30 10

    En el momento de diseñar, ya sea para interfaces de usuario o publicaciones en redes sociales, existe un momento crucial:…
  • Qué es el No Code

    El No Code, también conocido como desarrollo Sin Código, se refiere a un movimiento y un conjunto de herramientas y…