Optimiza la experiencia de tu checkout

Te mostraremos cómo puedes optimizar la experiencia de tu checkout utilizando sus componentes básicos y de la mejor manera para lograr un objetivo específico, que se traducirá en más conversiones de ventas.

La escaneabilidad ayuda a recorrer visualmente la pantalla y entender las diferentes secciones e instancias de la misma. Estos son algunos elementos que puedes agregar para ayudar a la escaneabilidad y aportar contexto al usuario:

Mantén los datos agrupados temáticamente y brinda contexto al usuario acerca de los pasos a seguir para completar su transacción. Esto ayudará a la escaneabilidad y hará que el usuario se sienta más seguro a la hora de compartir su información. Para esto, te recomendamos utilizar:

• Títulos: úsalos para agrupar temáticamente los datos requeridos e informar al usuario sobre la sección en la que se encuentra.
• Subtítulos: sirven para contextualizar o explicar qué acción se debe realizar.
• Textos explicativos: úsalos para brindar explicaciones o profundizar una información, siempre que sea necesario, para evitar dudas.

Es una barra de progreso que le indica al usuario en qué instancia de tu checkout se encuentra. Puedes segmentarla en partes iguales, indicando cada paso del checkout. De esta forma, tu usuario tendrá visibilidad del paso en el que se encuentra y cuánto falta para finalizar el proceso de pago.

Los bullets son una lista punteada de diferentes elementos. Utiliza bullets para hacer listas que ayuden a leer más rápido la información. Un listado provoca menos esfuerzo cognitivo que un párrafo de texto.

Los highlights son textos subrayados o destacados. Usa highlights para destacar palabras claves u oraciones importantes que sumen valor y permitir que la pantalla sea más fácil de escanear.

Te recomendamos utilizar formularios para recolectar los datos que necesitas del usuario. Los formularios son conjuntos de inputs, relacionados entre sí y con un objetivo en común, como por ejemplo, aquellos en los que se solicitan datos personales.

A su vez, los inputs son espacios donde los usuarios completan y editan la información requerida. Estos deben tener un orden lógico dentro del formulario y se deben diferenciar los opcionales de los obligatorios. Además, deben ser lo suficientemente largos para que el usuario vea la información ingresada y pueda revisar y editar fácilmente.

Para facilitar el llenado de datos y no cansar al usuario, te damos algunas recomendaciones:

• Utiliza pocos inputs por formulario, usa solo los indispensables.
• Elimina todo pedido de información que no sea indispensable para el proceso de compra.
• Pide cada dato una sola vez para evitar ser redundante.

Las labels son los nombres de cada input e indican qué dato se debe ingresar allí. Deben permanecer siempre visibles para que el usuario pueda escanear y completar más rápido el formulario, ya que sirven como guía y evitan el esfuerzo de recordar.

A su vez, los placeholders son los textos de relleno de cada input. Sirven para ejemplificar o explicar el dato a ingresar. Aprovecha esta instancia para colocar ejemplos de formato o accionables. Es importante saber que el placeholder desaparece cuando el cursor se ubica sobre el input o se completa el dato. Ten en cuenta esta característica y evita usarlos como única referencia de tus inputs para que el usuario no deba esforzarse por recordar qué dato va en cada campo o deba borrar lo ingresado si quiere confirmarlo.

Tanto las labels como los placeholders deben ser cortos, directos y claros para evitar que el usuario cometa errores.

Los helpers son textos explicativos que se colocan debajo de los inputs. Permiten dar información adicional acerca del dato solicitado o el motivo por el que se pide. Utilízalos para justificar datos sensibles o dar más información sobre el campo.

Los tooltips son notificaciones emergentes que ofrecen un nivel adicional de información. Utilízalos para agregar definiciones, información adicional extendida o accionables a través de links.

Los mensajes de éxito o error sirven para validar la información ingresada en los inputs. Para diferenciarlos, se pueden poner en color verde los de éxito y en rojo los de error.

Coloca mensajes de éxito solo si es necesario una confirmación o si el dato ingresado agrega valor, como por ejemplo en envíos gratuitos o descuentos. En caso de error, es importante que se aclare el mismo y se oriente al usuario hacia una solución para que no vuelva a fallar y se frustre. Si el input tiene un helper, éste debe ser reemplazado por el mensaje de error.

Los call to action (CTAs) son llamadas a que el usuario realice determinada acción. Permiten realizar las acciones principales y secundarias de una pantalla y pueden aplicarse con diferentes estilos, como botones, íconos o links, con distintas jerarquías y en diferentes lugares, como cards y tootltips, entre otros.

Te acercamos algunos consejos:

• Usa colores contrastantes para que tus CTAs destaquen y contrasten con el fondo.
• Procura que sean claros y directos para dar contexto.
• Utiliza botones para las acciones principales y escríbelas en el tiempo verbal infinitivo.
• Agrega links para acciones secundarias que añadan contexto procurando que sea un texto autoexplicativo que haga referencia hacia dónde redirige el mismo.

En un checkout, el usuario debe elegir entre diferentes opciones a lo largo de todo el proceso de pago, como por ejemplo el tipo de envío, formas de pago, número de cuotas, entre otras. En este proceso, la conversión puede variar según diferentes factores y el contexto de cada uno.

Por eso, ofrece opciones que incluyan diferentes variables posibles y ordénalas de forma descendente, teniendo en cuenta las más usadas o beneficiosas para tus clientes. Sin embargo, te recomendamos ofrecer solo las más comunes porque, de lo contrario, puedes confundir y entorpecer el proceso de selección.

• Utiliza radio buttons o botones de opciones cuando sean pocas opciones y solo se pueda elegir una de ellas.
• Ofrece dropdowns cuando sean varias opciones y no quieras ocupar tanto espacio de pantalla.
• Usa cards cuando se traten de opciones visuales, entre otras.

Además, puedes agregar las propuestas de valor más destacadas en cada opción para ayudar a que el usuario tenga más información para tomar una decisión.

Evita pedir datos repetidos o que no sean necesarios para finalizar la compra. Para eso, aprovecha las instancias de pedido de datos obligatorios y obtén información que vayas a necesitar más adelante. Por ejemplo, utiliza la información personal y de envío para tomar los datos de facturación. Así evitarás sumar un formulario extra que ralentice el proceso de pago.

También puedes utilizar checkboxes, o casillas de verificación, que infieran información de pasos previos o desplieguen un formulario en caso de que el usuario quiera cargar información diferente.

Agrega un componente de resumen fijo o un acceso directo al carrito de compras que muestre el precio total a pagar según las acciones que el usuario va realizando.

Si bien la mayoría de los usuarios revisan su compra al final, se sienten más seguros si pueden ir controlando lo que van haciendo durante todo el proceso.

Además, antes de finalizar la compra, permite que tus usuarios puedan revisar todo el proceso y el precio final. Para esto, agrega una página de confirmación o revisión, previo a realizar el pago, que incluya un resumen de todas las decisiones tomadas, toda la información cargada y el detalle del total a pagar. Es importante dar la posibilidad de editar cualquiera de los datos desde allí, sin la necesidad de volver a los pasos previos.