Cómo diseñar un flujo de pago de comercio electrónico que convierta
Publicado: 2021-07-22Su flujo de pago de comercio electrónico es donde está el dinero. Piénsalo. Los visitantes aleatorios abandonan el sitio antes de ingresar al embudo de pago. Los compradores motivados vienen aquí para terminar su pedido.
Cualquier pequeña mejora de diseño en su UX de pago generalmente tiene un impacto directo en la cantidad de dinero que gana su sitio.
Un sitio de comercio electrónico que analicé recientemente tenía una página de pago en la que el 84,7% del tráfico procedía a comprar. Calculé que si pudiéramos aumentar eso al 90%, resultaría en 461 pedidos más y $ 87,175 adicionales por mes, un aumento del 23,9% en los ingresos. Las ganancias “pequeñas” pueden ser enormes.
Entonces, la pregunta es, “¿Cómo podemos lograr que más personas pasen por nuestro flujo de pago y completen las compras? Las tácticas específicas dependen de su sitio, pero los principios para encontrar la respuesta son universales.
Un marco para pensar en los pagos de comercio electrónico: el modelo de comportamiento de Fogg
La conclusión es la siguiente: Comportamiento = Motivación x Habilidad x Desencadenante.
Aquí está el modelo:
Desea apuntar a la parte superior derecha del gráfico: alta motivación, fácil de hacer, un disparador en su lugar. Si tiene una gran motivación y poca capacidad (difícil de hacer), lo que obtendrá es frustración. Si tiene poca motivación pero es fácil de hacer (por ejemplo, sacar la basura), se molesta.
Cómo Amazon usa el modelo de comportamiento de Fogg
Cuando Amazon le envía un correo electrónico con una promoción de producto, eso es motivación y un detonante. La gente hace clic en el enlace y accede a la página del producto. Leen la copia y las reseñas, y miran la imagen, todo lo cual aumenta la motivación. "Agregar al carrito" es el disparador para iniciar el proceso de pago.
¿Qué pasa con la habilidad? ¿Qué tan fácil es completar el proceso de pago? Aquí es donde Amazon patea traseros. Solo necesita escribir su contraseña y hacer clic un par de veces. El flujo de caja no tiene fricción.
Aquí está el flujo de trabajo real en la aplicación de comercio móvil de Amazon:
Hecho y hecho. Repasemos todo el proceso de pago paso a paso para ver qué hace que uno sea bueno.
Nota: Puede obtener muchos otros consejos para el comercio electrónico en nuestro informe completo de pautas de comercio electrónico (pautas 247 específicamente para el comercio electrónico).
Cómo diseñar la función "Agregar al carrito" y la página del carrito de compras
Todo comienza cuando las personas agregan algo al carrito. En el momento en que un visitante agrega el primer artículo a su carrito, no está navegando, está comprando.
¿Qué aspecto debería tener “Agregar al carrito”?
Cuando las personas agregan algo al carrito en las páginas de sus productos, ¿qué debería suceder?
I t debe ser estúpidamente obvio que han añadido algo a la cesta. Confirmación clara. Es ridículo cuántos sitios arruinan esto al no mostrar una confirmación adecuada o al mostrar una pequeña animación o un pequeño texto de confirmación que es difícil de notar.
No te puedes perder un carrito agregar en Bonobos. Después de hacer clic en "Agregar al carrito", el carrito aparece con una pequeña animación, lo cual es bueno porque el ojo humano reacciona al movimiento. Es una señal visual sutil que indica el cambio de visitante a comprador.
El contenido del carrito junto con el botón "Pagar" también permanecen visibles hasta que el usuario hace clic en otro lugar. Eso es bueno. Cambiaría el color del botón "Pagar" a otro que no sea azul; no se destaca lo suficiente. Lo principal en la jerarquía visual es el botón "Agregar al carrito", pero el producto ya está en el carrito.
ASOS también muestra una pequeña animación. Abren el contenido del carrito y lo pliegan después de unos segundos. El botón "Agregar a la bolsa" también cambia a "Agregado", que es una buena confirmación para los compradores:
Mantendría abierto el contenido del carrito hasta que el usuario haga una elección haciendo clic en algún lugar. De esta manera, el botón "Pagar" sigue mirándolos a la cara.
Si bien siempre queremos que compren más cosas, mejorar el proceso para comprar incluso un solo artículo puede generar grandes mejoras. Empujarlos hacia la caja es siempre una buena idea.
Una vez que el producto está en el carrito, ¿entonces qué?
Hay dos enfoques principales:
- Muestre la confirmación de "agregar carrito" y mantenga a los usuarios en la misma página. Ventajas: la gente no pidió pasar a otra página, por lo que no hay sorpresas. También podrían considerar agregar más artículos al carrito antes de pagar. Contras: Ya tienen el producto que están mirando en el carrito. Sería más útil para usted si buscaran otra cosa que quisieran comprar.
- Transferir al usuario a la página del carrito. Ventajas: los está acercando un paso más a realizar un pago. Esta también es una gran oportunidad para realizar ofertas adicionales. Contras: es posible que pierda la oportunidad de maximizar los "artículos por carrito".
Amazon lo lleva a una página de carrito, confirma que agregó un producto al carrito y le muestra las ventas adicionales. Lo que Amazon hace bien es reducir el contenido del carrito, por lo que las ventas adicionales se destacan:
El equilibrio correcto de estrategias potenciales depende de su industria y sus objetivos, y definitivamente desea probar esto.
Métricas a tener en cuenta:
- Valor medio de transacción;
- Cantidad promedio por transacción.
No queremos aumentar la cantidad de transacciones solo, sino también la cantidad gastada por cada transacción.
Mostrar bien el contenido del carrito
Los principios clave para mostrar el contenido del carrito de manera eficaz son la claridad y el control.
- Claridad. Es fácil y obvio comprender lo que hay en el carrito y el costo final, incluidos el envío y los impuestos. Los costos sorpresa en el futuro hacen que la gente abandone los carritos.
- Control: es fácil realizar cambios, como actualizar la cantidad o eliminar productos.
ASOS tiene una buena visión de la página del carrito:
Lo que hacen bien:
- Fotos de productos;
- Nombre y precio del producto;
- Posibilidad de eliminar, guardar para más tarde o cambiar detalles como el tamaño;
- Muestre el tipo de pagos que aceptan;
- Muestre el precio total y confirme la entrega gratuita;
- Llamada a la acción clara para "Pagar";
- Reduzca la incertidumbre destacando "Devoluciones fáciles".
Indochino tiene un enfoque agradable y minimalista para presentar el contenido del carrito. Dicho esto, la página todavía tiene algunos problemas, como un cuadro de cupón prominente y la imposibilidad de cambiar las cantidades:
Obtenga la jerarquía visual correcta
Lo primero en la jerarquía visual debería ser continuar con el pago. (Pruebe diferentes CTA). Debe haber dos llamadas a la acción: una arriba y otra debajo del carrito.
Algo como esto: los dos botones de pago se destacan claramente:
Modcloth ha mejorado esta página desde la última vez que la revisamos. Anteriormente, la actualización de la cantidad requería escribir. Ahora, puede usar steppers para aumentar o disminuir la cantidad.
Tenga en cuenta que Modcloth también ofrece una opción de PayPal. Si bien la mayoría de la gente prefiere pagar con tarjeta de crédito, ofrecer 1 o 2 métodos de pago alternativos (por ejemplo, PayPal, Amazon) es una buena idea y se ha demostrado que ayuda a las conversiones. Sin embargo, demasiadas opciones son dolorosas.
Modcloth también te recuerda que tienen devoluciones gratuitas y envío gratis en pedidos superiores a $ 75.
No destaques los cupones
Cuando las personas ven el campo "Ingrese el código de cupón aquí", se sienten menos especiales. "¿Cómo es que no tengo uno?" Muchos van a Google para buscar un cupón; muchos nunca regresan. Salir del sitio en busca de cupones es una razón común para el abandono del carrito de compras.
Entonces, esta no es una buena idea:
En su lugar, tenga un vínculo de texto que diga "¿Tiene un cupón?" o algo similar. Cuando alguien haga clic en el enlace, haga que aparezca un campo de entrada, como el de arriba. Los enlaces de texto son menos prominentes, por lo que menos personas les prestarán atención.
Los clientes que ya tienen un código de cupón buscarán una forma de ingresarlo. A menos que lo ocultes muy bien, lo encontrarán y podrán aplicar su código de cupón.
Recuerde a los compradores lo bueno: envío, devoluciones y seguridad
¿Cuándo recibirán sus bienes? Cuánto cuesta el envio. ¿Es gratis? ¿Será segura la transacción? Recuérdele a la gente.
A continuación, se muestra un ejemplo que muestra esos tres mensajes clave debajo del botón de pago, que también dice "Pague ahora de forma segura":
Carritos persistentes FTW
Cuando las personas agregan algo al carrito, no deje que el contenido del carrito caduque. Utilice los correos electrónicos de abandono del carrito y los anuncios de reorientación para que las personas regresen la semana que viene o el mes que viene para que puedan continuar donde lo dejaron.
Proceso de registro: ¿Crear una cuenta o no?
Muchos sitios de comercio electrónico quieren que los compradores se registren antes de comprar. Algunos incluso fuerzan el registro (es decir, no es posible comprar sin registrarse). En pocas palabras: no lo hagas. Duele las conversiones. Mucho.
Uno de cada cuatro abandona las compras en línea debido al registro forzoso. El registro forzoso es parte del "síndrome del comercializador codicioso". Es fácil entender por qué los especialistas en marketing de comercio electrónico quieren hacerlo: esperan que el usuario se “bloquee” y compre más porque tiene una cuenta.
¿Es ese realmente el caso? Oh por favor. ¿En cuántos sitios web tienes una cuenta registrada? ¿Te sientes ahora fiel a ellos por ese motivo? Apuesto a que no ha iniciado sesión en la mayoría de ellos más de una vez.
Aquí hay una buena historia sobre el registro forzado, contada por el gurú de la usabilidad Jared Spool:
Es difícil imaginar un formulario que pueda ser más simple: dos campos, dos botones y un enlace. Sin embargo, resulta que este formulario impedía que los clientes compraran productos de un importante sitio de comercio electrónico, por una suma de $ 300,000,000 al año. Lo que era aún peor: los diseñadores del sitio no tenían ni idea de que existía un problema.
La forma era simple. Los campos eran Dirección de correo electrónico y Contraseña. Los botones eran Iniciar sesión y Registrarse. El enlace era Contraseña olvidada. Era el formulario de inicio de sesión del sitio. Es una forma que los usuarios encuentran todo el tiempo. ¿Cómo podrían tener problemas con eso?
El problema no estaba tanto en el diseño del formulario como en el lugar donde vivía. Los usuarios lo encontrarían después de llenar su carrito de compras con productos que querían comprar y presionar el botón Pagar . Llegó antes de que pudieran ingresar la información para pagar el producto.
El equipo vio que el formulario permitía a los clientes habituales comprar más rápido. A los compradores primerizos no les importaría el esfuerzo adicional de registrarse porque, después de todo, volverán por más y apreciarán la conveniencia en compras posteriores. Todos ganan, ¿verdad?
Realizamos pruebas de usabilidad con personas que necesitaban comprar productos del sitio. Les pedimos que trajeran sus listas de la compra y les dimos el dinero para hacer las compras. Todo lo que tenían que hacer era completar la compra.
Nos equivocamos con los compradores primerizos. Les importaba registrarse. Resintieron tener que registrarse cuando encontraron la página. Como nos dijo un comprador: “No estoy aquí para entablar una relación. Solo quiero comprar algo ".
Al eliminar el registro forzoso, aumentaron las ventas en $ 300 millones.
El equipo de Spool también descubrió que la mayoría de las personas tenían varias cuentas en el sistema. La gente había olvidado que ya tenían cuentas. Recibieron mensajes de error cuando intentaron crear uno con su correo electrónico estándar, por lo que tuvieron que usar un correo electrónico alternativo para crear más cuentas.
¿Qué deberías hacer en su lugar? Ofrezca siempre un pago como invitado. Puede trabajar en el registro después de la venta:
- Ni siquiera menciones la palabra "Registrarse". Diga "Cliente nuevo" o un término similar.
- Después de pagar, ofrezca la creación de una cuenta en la página "Gracias". Ya tiene su nombre, correo electrónico y dirección de la caja, por lo que no debería tomar más que unos pocos clics para crear una cuenta. Solicite la contraseña deseada (o proporcione una opción para generarla automáticamente) y confirme el permiso para crear su cuenta.
En mi experiencia, el enfoque más común en los sitios de comercio electrónico sigue siendo subóptimo. En general, está demasiado ocupado y les pide a los nuevos clientes que tomen una decisión, lo que genera dudas:
Hay varias opciones mucho más preferibles.
Opción de registro de pago 1
Ofrezca a los usuarios dos opciones, nuevas o recurrentes:
Asos no siempre tuvo este enfoque. Esta fue su página de registro anterior, que tenía tres opciones:
¡Eliminar este enfoque y cambiar a una versión optimizada redujo el abandono del carrito en un 50%!
Sigue siendo (esencialmente) un registro forzado, pero está empaquetado de manera diferente. También es más fácil con las opciones de inicio de sesión social. Un problema de usabilidad típico se reduce a unos pocos clics.
Opción de registro de pago 2
El abandono del carrito de compras es un problema importante. Solicitar su correo electrónico por adelantado facilita el inicio de un proceso de recuperación de carrito abandonado. Además, hay dos opciones fáciles, sin sobrecarga sensorial:
Opción de registro de pago 3
Otra excelente manera es omitir la pantalla de inicio de sesión por completo. En su lugar, simplemente elija por defecto el pago como invitado. Las personas con una cuenta existente pueden iniciar sesión a través del enlace y los nuevos clientes pueden crear una cuenta después de pagar:
Lo que Diamond Candles hace bien ni siquiera es visible. Te crean una cuenta automáticamente, pero no la mencionan. Supongamos que realiza cuatro pagos como invitado con la misma dirección de correo electrónico, luego finalmente decide crear una cuenta (ingrese una contraseña, esencialmente).
Todos sus pedidos anteriores con esa dirección de correo electrónico se fusionan para esta cuenta, por lo que su cuenta recién creada viene con un historial de pedidos adecuado.
Opción de registro de pago 4
Con esta opción, se ofrece el registro de cuenta junto con un incentivo al completar la compra. Aquí hay un ejemplo de Speedo:
A la gente no le molesta el registro de una cuenta hasta que le pagan dinero. Si tuviera que elegir, ¿qué es más importante para usted: registros de cuenta o compras?
Por lo general, las páginas de "agradecimiento" no son muy útiles, pero no es así en este caso. Le ofrecen una oferta obvia: ingrese una contraseña y obtenga un cupón (más seguimiento de pedidos, compras más rápidas, etc.). El porcentaje de creación de cuentas para nuevos usuarios aquí suele ser superior al 75%.
La página de pago de comercio electrónico
Esta es la página de dinero. Cualquier mejora en su página de pago final marcará una gran diferencia en su cuenta bancaria. Aquí hay algunos principios que lo ayudarán a crear un mejor paso final en su flujo de pago.
Solicite la información de la tarjeta de crédito al final
Haga que las personas completen la información de envío antes de comenzar a facturar. Esto pone en acción los principios de compromiso y coherencia de Cialdini. Una vez que las personas comienzan a hacer algo, sienten que deben terminar.
Ya se les ha pedido que ingresen su nombre, correo electrónico e información de envío, que, idealmente, es la misma que la dirección de facturación, por lo que no es necesario que la vuelvan a escribir.
El mismo principio, a veces llamado la técnica del pie en la puerta, se aplica a los campos de formulario. Comience primero con los campos más fáciles, como el nombre. El campo de número de tarjeta de crédito es el "más difícil", por lo que debería aparecer al final.
Esto es lo que no debes hacer:
Esto es mejor. (Se obtiene aquí desde la página de envío).
Lo bueno: tiene un flujo claro de 1 a 2 o 3 pasos. El campo del nombre viene antes de los detalles de la tarjeta y no es necesario volver a ingresar la dirección de facturación (si es la misma que la del envío).
Lo malo: la CTA principal es "Guardar y continuar". Continuar donde ? Debe ser específico, como "Continuar con la revisión" o cualquiera que sea la siguiente acción.
Utilice un formulario de pago que se parezca a una tarjeta de crédito real
Agregue un toque de la vida real diseñando el formulario de pago de esta manera esqueuomórfica:
Puede obtener una interfaz para esto llamada Skeuocard de forma gratuita (!) Para implementar en su sistema. Pruebe una demostración aquí.
Haga que el proceso de pago parezca seguro
La seguridad es una preocupación seria. Además de hacer los pagos realmente seguros con SSL, cuéntele a la gente al respecto. Este es un ejemplo de un formulario creado para parecer seguro:
Algunas razones por las que funciona:
- Color de fondo diferente para el campo de número de tarjeta de crédito.
- Logotipo de SSL.
- Declaración escrita: “Pago seguro con tarjeta de crédito. Este es un pago seguro cifrado con SSL de 128 bits ".
- Explicaciones de caducidad y código de seguridad.
Tenga en cuenta que si su audiencia no es experta en tecnología, es posible que no sepa qué son SSL o HTTPS, así que hable en términos sencillos.
Almacene tarjetas de crédito en su sistema
Claro, tiene que lidiar con el cumplimiento de PCI y existe el riesgo de ser pirateado, pero ganará mucho más dinero con los usuarios que regresan. Cuando las personas no necesitan ingresar su información de facturación, la compra se convierte en un proceso de un solo clic.
Amazon lo está matando en gran parte porque la fricción para los compradores que regresan se ha eliminado casi por completo. El flujo de pago es apenas un flujo, es un evento de un solo clic.
Es mucho más probable que los visitantes recurrentes compren que los visitantes nuevos, pero eso no es nada comparado con los compradores recurrentes. Facilíteles las cosas.
Conclusión
Comience sus esfuerzos de optimización de comercio electrónico en el flujo de pago. Las ganancias relativas aquí darán como resultado sumas absolutas muy buenas.
Para mejorar la UX de su proceso de pago:
- Deja clara la función "Agregar al carrito".
- Facilite a los visitantes el cambio o la eliminación de artículos del carrito.
- Optimice el proceso de registro: permita que los nuevos compradores se registren después de la compra.
- En la página de pago, solicite primero la información más sencilla.