1

El carrito de compra ideal Persuabilidad en el checkout

75 ideas para crear el proceso de checkout

perfecto

David Boronat Socio fundador

de Multiplica

@davidboronat

2

Uno de las principales problemas que todo ecommerce presente son los elevados ratios de abandono que tienen los carritos de la compra.

67.45%

Media entre 22 estadísticas de ratios

de abandono desde el carrito de compra

http://baymard.com/lists/cart-abandonment-rate

http://baymard.com/lists/cart-abandonment-rate

3

Los ratios de abandono experimentan un alza en el tiempo, así como el porcentaje de usuarios que añaden productos al carrito (a pesar que los ratios de conversión tienden ligeramente a la baja).

4

El ratio de abandono es más notable cuando el total económico del pedido no son muy superiores a los costos de transporte.

5

¿Por qué lo abandonan?

6

Todavía no se han decidido. 1

Los gastos de envío como barrera mental.

2

Falta de simplicidad en el proceso de checkout.

3

¿Por qué lo abandonan?

7

Claridad

Envío gratuito

0 errores

Edición de carro

Ayuda y contacto

Seguridad percibidad

Registro implícito

Linealidad y pasos

Formularios y campos

Comprensión

Velocidad

Ahorro

Ansiedad y control

Persuasión

Simplicidad

Urgencia

Envío y costos

Opciones envío

© multiplica

Devolución

Privacidad

8

1

Los gastos de envío como barrera mental

9

Reconozcamos de primeras la procedencia del cliente para informarle sobre entregas y costos adicionales Usemos la IP país del usuario para advertir su procedencia y explicitar nuestras políticas de entrega en cada caso. Gestionaremos sus expectativas y no le haremos perder su valioso tiempo.

01

Entrega y devolución

10

Informemos del costo del envío lo antes posible. La mayoría de nuestros usuarios no quieren sorpresas y prefiere entender desde el carrito de la compra o incluso desde la ficha de productos el precio total de su pedido con impuestos y gastos de envío inclusivos. No debería ser tan difícil mostrar los gastos estimados si no podemos dar un precio cerrado o integrar algún simple calculador que ayude a estimarlo o al menos informemos que los costos de envío, tasas o impuestos se calcularán en el checkout.

02

Entrega y devolución

11

Evitemos mal gestionar las expectativas del cliente. No confundamos al usuario poniendo el importe 0 en carrito de compra para después contarle al cliente que el importe 0 es sólo cuando se recoge en tienda como se aprecia en el ejemplo.

03

Entrega y devolución

12

Al menos expliquemos que durante el proceso informaremos sobre gastos de envío e impuestos. Advirtamos de manera sutil que hay toda una serie de gastos que podremos concretar durante el proceso de checkout.

04

Entrega y devolución

13

Si es de los últimos que quedan o si no hay ningún problema de stock es un punto clave para que el consumidor perciba una total transparencia. Mostremos así mismo nuestros tiempo de entrega informemos sobre nuestro envío estándar en tiempos y costos.

05 Dejando claro si tenemos el producto en stock y cuándo podría recibir mi pedido.

Entrega y devolución

14

Ofrezcamos el envío gratuito en la medida de lo posible. En la mente del consumidor el costo de envío es probablemente la barrera más importante a superar. Tanto es así que una promoción que incluya el envío gratuito será más poderosa que un descuento de importe similar a los gastos de envío. Si ofrecemos algún regalo en la compra o envío gratuito, no dudemos en mostrarlo claramente y expliquemos que nos falta para poder obtener tal regalo, descuento o premio.

06

Entrega y devolución

15

Utilicemos como gancho el importe restante del pedido del cliente para conseguir el envío gratuito. Mostremos a ser posible en el mismo carrito de la compra qué importe nos falta para poder obtener el envío gratuito.

07

Entrega y devolución

16

Dejemos permitir definir la urgencia del envío y si lo queremos recibir como regalo. Es importante dar alternativas al usuario, para que éste tenga un mayor control sobre el proceso y le permita elegir desde el horario de entrega preferido a la urgencia del envío y, en función de ésta, los costes asociados. Yoox le da al usuario la sensación de tener el control sobre su compra permitiéndole tomar algunas decisiones sobre el envío del producto.

08

Entrega y devolución

17

Usemos nombres claros para diferenciar los múltiples opciones de envío que tenemos. Utilicemos nombres que no den margen de error alguno e incluyan siempre los días que tardaremos a entregar su pedido en cada una de las alternativas que ofrezcamos.

09

Entrega y devolución

18

Invitemos – si procede - a recibir un delivery periódico. Según la naturaleza de los productos que ofrecemos, propongamos un pedido periódico como en el ejemplo que se aprecia.

10

Entrega y devolución

19

Dejemos claras las políticas de devolución mostrando lo fácil que es devolver el producto. Tan importante es dejarle claro cuándo recibirá su pedido, cómo lo fácil y sencillo que será devolverlo si no queda satisfecho como nos propone. Zappos va un paso más allálo tiene tan claro que ofrece 365 días para poder devolver de manera gratuita cualquier producto.

11

Entrega y devolución

20

Respondamos a las preguntas y principales preocupaciones de nuestros clientes. Pongamos energía en responder a las preguntas que nuestros clientes seguro tendrán sobre entregas y políticas de devolución.

12

Entrega y devolución

21

2

Simplificando el proceso de checkout y compra

22

El proceso de check-out empieza cuando el usuario incluye un primer producto en la cesta de la compra. ¿Cuántas veces le hemos dado al botón “Añadir al carro” y hemos tenido la sensación de que no haya pasado nada? O peor, no haber entendido porque no se añadía el producto que nos faltaba por no haber explicitado la talla o el color. En Vèrtic Outdoor creamos una ventana con los campos que se precisan para poder introducir un producto en el carro de la compra en el caso de que el usuario no lo hubiera hecho antes de clicar el botón ‘Añade al carro’.

13

Proceso

23

Consigamos que el usuario entienda que ya añadió el producto en su carrito de compra. Dejémosle muy claro que el producto ha sido añadido a su carrtio de compra. Debemos ir con cuidado con ventanas flotantes que aparecen por algunos segundos cuando el usuario ha colocado un producto en el carrito de compra. Debería estar 10 segundos visible y mantenerse abierto mientras el usuario tenga el puntero del mouse dentro de la ventana.

14

Proceso

24

Pensando la mejor forma de invitarle a considerar otros productos que puedan interesarle. Evitemos abrumar al usuario. Los usuarios no son muy fans de los sites excesivamente agresivos en este punto. Al final, interesarse por otro producto puede ser la distracción perfecta para no materializar la compra. Si queremos cruzar productos, hagámoslo pero en un segundo término. Target nos deja claro que el producto se ha añadido y que podemos seguir comprando o iniciar el check-out sin perder la oportunidad de recomendarnos productos relacionados.

15

Proceso

25

Pensando la mejor forma de invitarle a considerar otros productos que puedan interesarle. Evitemos abrumar al usuario. Los usuarios no son muy fans de los sites excesivamente agresivos en este punto. Al final, interesarse por otro producto puede ser la distracción perfecta para no materializar la compra. Si queremos cruzar productos, hagámoslo pero en un segundo término. Target nos deja claro que el producto se ha añadido y que podemos seguir comprando o iniciar el check-out sin perder la oportunidad de recomendarnos productos relacionados.

15

Proceso

26

Pensando la mejor forma de invitarle a considerar otros productos que puedan interesarle. Evitemos abrumar al usuario. Los usuarios no son muy fans de los sites excesivamente agresivos en este punto. Al final, interesarse por otro producto puede ser la distracción perfecta para no materializar la compra. Si queremos cruzar productos, hagámoslo pero en un segundo término. Target nos deja claro que el producto se ha añadido y que podemos seguir comprando o iniciar el check-out sin perder la oportunidad de recomendarnos productos relacionados.

15

Proceso

27

La página de carrito de compra puede jugar un interesante rol recomendador y de venta cruzada. Debe proponernos la compra productos relacionados en el mismo carrito y facilitar que podamos verlos y añadirlos al carrito de la compra sin la necesidad de salir del mismo proceso como nos propone de manera óptima una vez más Etsy.

16

Proceso

28

Debe ser percibido como ágil, lineal y fluido, reduciendo al máximo el número de pasos Debemos evitar crear un proceso que no sea literalmente lineal ya que habitualmente generan confusión en el usuario (especialmente cuando pedimos al usuario que se registre). Sobre el número de pasos deberíamos situarnos siempre por debajo de los 5 pasos y poder resolver el procesos de checkout en 2 o 3 pasos a ser posible.

17

Proceso

29

Debe ser percibido como ágil, lineal y fluido, reduciendo al máximo el número de pasos Debemos evitar crear un proceso que no sea literalmente lineal ya que habitualmente generan confusión en el usuario (especialmente cuando pedimos al usuario que se registre). Sobre el número de pasos deberíamos situarnos siempre por debajo de los 5 pasos y poder resolver el procesos de checkout en 2 o 3 pasos a ser posible.

17

Proceso

5.08 pasos ���de media

http://baymard.com/checkout-usability/benchmark

Según el informe del Webcredible, cerca del 10% de los clientes abandonan un proceso de compra cuando lo perciben como excesivamente largo.

30

Mira mamá, sin pasos. Debemos evitar crear un proceso que no sea literalmente lineal ya que habitualmente generan confusión en el usuario (especialmente cuando pedimos al usuario que se registre). Sobre el número de pasos deberíamos situarnos siempre por debajo de los 5 pasos y poder resolver el procesos de checkout en 2 o 3 pasos a ser posible.

18

Proceso

31

O casi sin pasos. Debemos evitar crear un proceso que no sea literalmente lineal ya que habitualmente generan confusión en el usuario (especialmente cuando pedimos al usuario que se registre). Sobre el número de pasos deberíamos situarnos siempre por debajo de los 5 pasos y poder resolver el procesos de checkout en 2 o 3 pasos a ser posible.

19

Proceso

32

3 pasos debería ser suficiente: Envío > Pago > Confirmación No debería haber necesidad alguna para trabajar con más pasos. La primera ventaja de plantear el proceso en 3 pasos es que nos permite capturar el correo electrónico en un primer paso, de tal manera que si no completan el proceso siempre podremos enviar un mail de recordatorio. La segunda ventaja es que nos permitirá plantear estructurar un formulario menos intimidante.

20

Proceso

33

20

Proceso

3 pasos debería ser suficiente: Envío > Pago > Confirmación Gilt resuelve su proceso de Check-out con 3 simples pasos. Además, durante el proceso se nos recuerda el producto que estamos comprando.

34

Preocupémonos sobre todo de los tiempos que toman las transiciones entre pasos (menos de 2 segundos). Evitemos demasiados elementos en cada página y optimicemos todas las imágenes o elementos pesados y asegurémonos que el uso de webservices de terceros para la validación de direcciones o la autorización de tarjetas de créditos funcione a la perfección.

21

Proceso

De media el 18% de los usuarios que abandonaron sus carritos de la compra por descargas de las páginas demasiado lentas.

35

Evitemos cualquier elemento de distracción que haga perder segundos innecesariamente. Evitemos demasiados elementos visuales en cada página ya que pueden reducir la atención y el foco en el proceso de checkout. Necesitamos que el proceso sea lo más limpio y directo. Al mismo tiempo optimicemos todas las imágenes y el uso de webservices de terceros (para la validación de direcciones o la autorización de tarjetas,…) ya que de media el 18% de los usuarios que abandonan sus compras lo hacen por descargas de las páginas demasiado lentas. Navegación

Hide navigation during checkout SEVERITY: INTERRUPTION FREQUENCY: A FEW REFERENCE: #36

ISSUE: Showing navigation during checkout adds unnecessary visual clutter to the process. ^ere has been much debate in UI and e-commerce circles whether or not to remove all

navigation during checkout, creating an ‘enclosed checkout’. During testing, some of the test subjects directly mentioned that they’d like to see the

navigation gone, while others mostly complained about clutter and were at times distracted during checkout (in part due to the constant presence of the standard

navigation). On those sites where the navigation was hidden, no test subject complained about it being missing from the site.

Since navigation is something you display on all pages, slimming it down or removing it entirely from your checkout will make all your checkout pages feel less intimidating to

your customers. By doing so, you will allow the customer to focus on the task at hand - buying a product from your store.

One thing worth mentioning is that you should always maintain your general visual style in the checkout process. Logo and brand colors should stay the same during checkout and

you should always keep a single navigation path back to shopping (e.g your logo should Keeping the entire navigation throughout the checkout process adds clutter and can distract your

customers from completing the sale. -

E-Commerce Checkout Usability Layout Page 93 of 192 Licensed to David Boronat (david@multiplica.com)

TOP 100 BENCHMARK 89 examples available in Baymard Pro 64% adhered · 6% neutral · 30% violated

be clickable) - not forcing your customers to reenter your URL in case they want to add more to their order.

Navigation is one of those visual elements that can tip over a checkout process from being perceived as moderately cluttered to overly complex. Obviously, the more complex your checkout is, the more it makes sense to hide or slim down your navigation during these

steps. GUIDELINE: Hide or slim down the standard navigation links during checkout to reduce

22

Proceso

36

Debe evitar cualquier ruta de navegación que no lleve a materializar la compra. A pesar la enorme discusión que hay sobre si mantener la navegación en el proceso de checkout o eliminarla, múltiples tests con usuarios demuestran que los usuarios no encuentran a faltar la navegación del sitio una vez entran en el proceso de checkout. Crearemos un proceso más limpio y directo eliminando la navegación central y simplemente considerando una opción que le permita ir a seguir comprando.

23

Proceso

37

Planteemos procesos de checkout express o de compra con un solo click. Evitemos demasiados elementos visuales en cada página ya que pueden reducir la atención y el foco en el proceso de checkout. Necesitamos que el proceso sea lo más limpio y directo. Al mismo tiempo optimicemos todas las imágenes y el uso de webservices de terceros (para la validación de direcciones o la autorización de tarjetas,…) ya que de media el 18% de los usuarios que abandonan sus compras lo hacen por descargas de las páginas demasiado lentas. Navegación

Hide navigation during checkout SEVERITY: INTERRUPTION FREQUENCY: A FEW REFERENCE: #36

ISSUE: Showing navigation during checkout adds unnecessary visual clutter to the process. ^ere has been much debate in UI and e-commerce circles whether or not to remove all

navigation during checkout, creating an ‘enclosed checkout’. During testing, some of the test subjects directly mentioned that they’d like to see the

navigation gone, while others mostly complained about clutter and were at times distracted during checkout (in part due to the constant presence of the standard

navigation). On those sites where the navigation was hidden, no test subject complained about it being missing from the site.

Since navigation is something you display on all pages, slimming it down or removing it entirely from your checkout will make all your checkout pages feel less intimidating to

your customers. By doing so, you will allow the customer to focus on the task at hand - buying a product from your store.

One thing worth mentioning is that you should always maintain your general visual style in the checkout process. Logo and brand colors should stay the same during checkout and

you should always keep a single navigation path back to shopping (e.g your logo should Keeping the entire navigation throughout the checkout process adds clutter and can distract your

customers from completing the sale. -

E-Commerce Checkout Usability Layout Page 93 of 192 Licensed to David Boronat (david@multiplica.com)

TOP 100 BENCHMARK 89 examples available in Baymard Pro 64% adhered · 6% neutral · 30% violated

be clickable) - not forcing your customers to reenter your URL in case they want to add more to their order.

Navigation is one of those visual elements that can tip over a checkout process from being perceived as moderately cluttered to overly complex. Obviously, the more complex your checkout is, the more it makes sense to hide or slim down your navigation during these

steps. GUIDELINE: Hide or slim down the standard navigation links during checkout to reduce

24

Proceso

38

Facilitemos también una compra más rápida permitiendo repetir mi compra anterior. Esto en un supermercado como Tottus tiene todo el sentido del mundo. En esta tienda no sólo planteamos este tipo de accesos directos. También, insistimos en la posibilidad de comprar ‘En línea’, ‘Por teléfono’ o ‘En nuestras tiendas’

25

Proceso

Compra rápida Compra lo que llevas siempre Repite tu compra anterior

39

Vayamos con mucho cuidado con los códigos promociones o cupones. A nadie le gusta pagar más de lo necesario. Por ello, deberemos ir con mucho cuidado con los códigos promocionales. Una integración inteligente pasaría por incluir en la misma URL el cupón al cual aspira el usuario y fue el motivo que le llevó a visitarnos y podríamos automáticamente incluirle el cupón o descuento. En cualquier caso, busquemos una manera visual secundaria para reducir su posible efecto negativo. Y no insistamos demasiado durante todo el proceso.

26

Tema a testear

De media 1 de cada 4 compradores abandonan sus carritos de la compra con el propósito de buscar un cupón en el sitio o en la red.

40

No rompamos el encanto de comprar en tu sitio. Tus usuarios quieren comprar y pagar. No registrarse. Permite comprar sin necesidad de registrarse hasta el último momento. El usuario debe poder comprar y, si lo desea, registrarse, pero una vez haya finalizado su compra y de manera implícita en el proceso de compra. Deberíamos pensar nuestro proceso de compra de manera más fácil y sencilla para nuestros nuevos clientes considerando un registro tan sencillo como incluir un simple campo que diga: Escribe un password (si deseas ir más rápido en futuras compras).

27

Proceso

Según Forrester Research, el 23% de nuestros potenciales compradores abandonan sus carritos si se les obliga a registrarse.

41

Demos las máximas facilidades y opciones de inicio. Facilitemos las máximas alternativas de check-in como nos propone Nike al integrar Paypal como una opción de pago.

28

Proceso

42

Si no puedes evitarlo, al menos no lo llames “registro”, hazlo visible y explícame las ventajas. Los usuarios no quieren registrarse. Asocian el registro a más spam. Hagamos lo posible para disimular el registro.

29

Proceso

43

La mayoría de clientes esperan que el proceso en pasos se convierta en la navegación misma del proceso de checkout para revisar o editar cualquier dato durante el proceso. Numeremos y etiquetemos claramente cada paso del proceso. Preocúpate que el botón Back mantenga la sesión y no obligue al usuario a volver a entrar ninguno de los datos.

30

Proceso

Debe darnos sensación de control indicándonos dónde estamos, qué pasará e ir a cualquier paso.

44

Usa recursos de navegación que no den margen de error. Por ejemplo, al usar radio buttons. Los radio buttons deben usarse de manera que visualmente se vean como opciones alternativas. De ahí la importancia de compactarlos y acercarlos.

31

Proceso

45

Debe dar siempre la opción de contactar o incluso realizar fácilmente el pedido a través del teléfono. Facilitemos la posibilidad de realizar el pago o terminar un pedido por teléfono, dando un número de pedido que le permita materializar fácilmente su compra a través de otro canal.

32

Proceso

http://www.crutchfield.com

46

No abrumemos a nuestros usuarios con demasiados campos en un mismo paso. Cualquier usuario se sentirá contrariado si le pedimos complementar más 10-12 campos. Lo primero que pensarán es cuánto tiempo me demoraré para completar este paso. A su vez, debemos intentar que los campos respiren entre ellos. Troceemos y agrupemos cómo corresponde los campos que precisamos que los usuarios nos complementen y escondamos aquellos campos que sólo se precisen si los clientes nos responden en un determinado sentido.

33

Formularios y campos

47

Con un orden y formato de los campos óptimo y con unos tamaños que aseguren la máxima legibilidad Facilitemos las cosas. Una cosa es el tipo de letra de lectura. La otra cuando debemos introducir datos sensibles. Evitemos usar fonts que estemos por encima de un tamaño 12 o más y nunca usemos tamaños por debajo de los 10. Facilitemos al máximo el completar el formulario con un orden lógico e intuitivo de los campos.

34

Formularios y campos

48

Indiquemos qué datos sí o sí deben facilitarnos y cuáles son simplemente opcionales. Es algo de mínimos que no todos los sites cumplen pero que evita más de un error innecesario, permite que el usuario tenga una percepción de mayor velocidad. Los usuarios esperan ver claramente qué datos son obligatorios. Hagámoslo evidente con un ‘*’ cuando corresponda e incuyamos el texto ‘(opcional) con un color gris al final de la etiqueta del campo.

35

Formularios y campos

49

Pongamos ejemplos que ayuden a entender qué datos pedimos y con qué formato Podemos reducir la ansiedad del usuario poniendo ejemplos de cómo entrar determinados datos. Por ejemplo, cómo debo poner mi número de teléfono, mi dirección o mi número de tarjeta (¿con espacios? ¿sin ellos?).

36

Formularios y campos

50

Usemos descripciones claras y concisas a nuestras etiquetas. Utilizar etiquetas claras evitará más de un error en el momento de completar un formulario. No dudemos en añadir ejemplos o descripciones muy concisas que ayuden al usuario. Si precisamos de mayor explicación, pongamos al lado del campo en enlace ¿Qué es? que le prermita al usuario profundizar sin tener que ensuciar la página. No dudemos en explicar porqué solicitamos algunos campos sensibles (como el correo electrónico o el número de teléfono).

37

Formularios y campos

51

Usemos siempre una única columna Intentemos usar siempre que sea posible una única columna pues ayuda a hacer el proceso más fluido. A muchos usuarios, trabajar en dos columnas les despista y cofunde.

38

Formularios y campos

52

Pidamos una única vez la misma información Tus clientes odian tener que introducir la misma información varias veces. Aunque pueda parecer algo obvio, el 50% de los 100 ecommerce más importante – según Baymard Institute – te solicitan algún dato al menos dos veces en varias partes del proceso de checkout. El código postal y el nombre del titular de la tarjeta son campos que deberíamos autocompletarlos probablemente.

39

Formularios y campos

53

Automaticemos toda la introducción de datos siempre que nos sea posible. La tecnología actual nos permite saber fácilmente el país donde se encuentra nuestro clientes. Usemos este tipo de datos para facilitarle la introducción de datos. El país nos condicionará algunos campos que puede llegar a generar confusión como son los estados, departamentos o provincias.

40

Formularios y campos

54

Evitando desde el mismo sistema los errores más habituales. Ante cualquier error del usuario, asumámoslo como nuestro y ofrezcamos un mensaje de error claro con un uso de textos con un color y una ubicación que no genere duda alguna. Pongamos especial atención a los posibles errores que el usuario puede tener al entrar su correo electrónico, password o número de su tarjeta de crédito. A nadie le gusta ver que su con tarjeta ha sido rechazada por algún error y menos si no somos capaces de ofrecerle al usuario ninguna solución.

41

Formularios y campos

Desactivemos la posiblidad de copiar y pegar el campo de correo o password cuando le pidamos al usuario que nos entre dos veces ese mismo dato.

55

Ofrezcamos mensajes de errores claros y contextuales. Ubiquemos claramente los mensajes de error cerca del campo que se ha introducido erróneamente y hagamoslo de una manera suficientemete visual pero que no genere alarma o desconcierto. Evitemos mostralo sólo arriba de la página especialmente en páginas que tiene scroll.

42

Formularios y campos

56

Validando los campos en tiempo real Los usuarios – en general – preferien una validación de cada dato que introducen (una vez lo han salido del campo en cuestión) con un pequeño JavaScript/AJAX que nos permita ayudarle a identificar posibles errores lo antes posible.

43

Formularios y campos

57

Solicitemos, lo antes posible, los datos de contacto: email y/o teléfono. Si disponemos del correo electrónico o el teléfono siempre podremos intentar recuperar a un cliente que haya abandonado su proceso de compra. Bonobos lo tiene claro.

44

Formularios y campos

58

Permitamos usar la dirección de envío como dirección para los datos de facturación. No obliguemos al usuario a introducir dos veces su dirección si precisa factura y planteemos un checkbox que permita definir si la dirección de facturación es la misma que la dirección de envío. No habrá necesidad de que mostremos los datos de facturación si suponemos que son los mismos que los de envío

45

Formularios y campos

59

No obliguemos a nuestros clientes a recibir a nuestro newsletter. Invitésmoslo. A nuestros clientes poca gracia les hará si planteamos nuestro proceso de registro a nuestro newsletter por defecto. De ahí que debamos optar siempre por un opt-in en lugar de un opt-out y buscar un argumento o gancho para que los clientes quieran recibir ofertas y novedades interesantes.

46

El 32% de los 100 ecommerce analizados por Baymard obligan al usuario a recibir su newsletter sin opción alguna a no hacerlo.

Formularios y campos

60

Con llamadas a la acción claras y visuales para que el usuario fluya más fácilmente. Usemos llamadas a la acción que no generen dudas alguna. Estudiemos duplicar tales botones arriba y abajo si el paso del proceso requiere de scroll. Evitemos múltiples botones. Apostemos por una llamada a la acción central en forma de botón, acompañada de llamadas secundarias en formato de enlace o de botón pero que use un color secundario (gris…). En cualquier caso, no inventemos demasiado y vayamos por lo convencional en formatos de botón.

47

Llamadas a la acción

61

Debe hacer un buen uso de colores y contrastes y siempre ser consistente en todo el proceso. La visualización de cada paso debe ser nítida y los elementos clave deben tener un tratamiento gráfico claro. Interesante es entender qué colores usar para cada recurso. Por ejemplo, el azul refuerza la idea de seguridad y confianza, el rojo crea urgencia o el naranja funciona muy bien en las llamadas a la acción.

48

Llamadas a la acción

62

No pongas tus llamadas a la acción más importantes debajo del fold. Evitemos tener nuestras llamadas a la acción centrales siempre encima del fold y si no es posible repitamos arriba a y abajo las mismas llamadas a la acción.

49

Llamadas a la acción

63

Con copies en las llamadas a la acción que no generen duda alguna. Un copy adecuado es básico para que el usuario entienda perfectamente la acción que REALMENTE está realizando al clicar en una de nuestras llamadas a la acción. ‘Comprar’ puede tener mayor fuerza que ‘Añadir a la cesta’ o ‘Añadir al carrito’ pero podría sugerir al usuario que estará finalizando su compra o se está comprometiendo a comprar si haber podido revisar su compra.

50

Llamadas a la acción

64

Mostrando claramente nuestra preocupación por la seguridad y la privacidad de los datos. Debe incluir cualquier elemento que transmita seguridad (VeriSign, logos de las tarjetas de crédito…). Utilicemos recuadros o cajas con un color diferente para remarcar cualquier elemento que tenga que ver con la introducción de datos de pago. Y evitemos en lo posible incluir elementos no seguros en páginas seguras (http://). Lo peor que nos puede pasar es leer un mensaje de Explorer diciendo: “this page contains insecure elements.”

51

Pago y seguridad

Según una encuesta de Econsultancy, el 58 abandonaría su compra si percibiera cualquier inseguridad en el pago.

65

Detecta el tipo de tarjeta de tu cliente Según los números de la tarjeta, es posible determinar el tipo de tarjeta con lo que podemos minimizar errores y evitar pedirle el tipo de tarjeta.

52

Pago y seguridad

66

Evitemos usar asteriscos para proteger/esconder datos sensibles. Usemos ‘Visa card ending in 1217’

53

Pago y seguridad

67

Visualmente diferenciemos el área donde facilitar datos de pago. Cualquier área es percibida como más segura si tiene un tratamiento visual que la refuerce. El uso de bordes, background, íconos de seguridad contribuyen claramente a incrementar la percepción de seguridad. Hagámos uso de este tipo de recursos.

54

Pago y seguridad

68

Integremos múltiples procesos de checkouts complementarios. Planteemos integrar sistemas complementarios de pago como Paypal, MasterPass o V.me by Visa.

55

Pago y seguridad

69

Hagamos todos los íconos clickables. Facilitemos al máximo al usuario su interacción con los elementos del formulario. Si usamos íconos para las diferentes formas de pago o tipos de tarjetas hagamos que actúen en la interacción. Los usuarios tienen a percibir los íconos como clicables. Pongámoslo fácil.

56

Pago y seguridad

70

Debe ofrecer las máximas opciones de pago posibles. El 25% de los usuarios abandonan porque no encuentran la modalidad de pago que más les acomoda. E intentemos ofrecer por defecto siempre el método de pago más utilizado.

57

Pago y seguridad

71

Ofrezcamos opciones de financiación (si es posible) La integración de opciones de pago aplazado o en cuotas o la opción de fórmulas de financiación o Bill me later siempre será bienvenida.

58

Pago y seguridad

72

A lo largo de todo el proceso, reduzcamos la ansiedad del cliente sobre los productos que está comprando. Aunque parece algo trivial, no hacerlo puede reducir un 10% nuestros ratios de conversión. Deberemos en cualquier caso incluir foto del producto, enlace a su ficha, precio y cantidad seleccionada. Nos parece también una idea muy buena mostrar un resumen del pedido cerca del momento de la verdad: darle al botón definitivo de comprar.

59

Claridad y control

73

Permitamos fácilmente añadir/editar la cantidad y/o los productos que tenemos en el carrito de compra. Evitemos por ello íconos difíciles de interpretar y mostremos claramente las opciones disponibles. Sin éstas son múltiples consideremos una visualización rápida como se muestra a continuación.

60

Claridad y control

74

Dejando claro en qué momento se realizará el pago y qué momento todavía no. Tras introducir los datos de tarjeta el cliente puede pensar que ya vamos a proceder al pago. Dejémosle claro si podrá todavía revisar su pedido o compra.

61

Claridad y control

75

Dejemos después bien claro que la compra se ha materializado. Apple aprovecha su página de Confirmación para agradecer la compra, mostrar próximos pasos y comunicar la creación de la cuenta en la tienda Apple con consejos para gestionar futuras compras. Un buen modo de reforzar el vínculo con el cliente.

62

Claridad y control

76

Ofrezcamos mensajes claros y permanentes a lo largo de todo el proceso de compra. Insistamos en todo el proceso con aquellos mensajes que sean más claves para tranquilizar y persuadir a nuestros clientes.

63

Claridad y control

77

Debe posibilitar hablar vía chat con algún vendedor Debe posibilitar hablar vía chat con algún vendedor o con alguien del departamento de atención al cliente (desde la misma página de check-out). Debe considerar que se abra automáticamente un layer – cuando hayan pasado varios minutos de inactividad por parte del usuario en una determinada página del check-out – que ofrezca hablar con alguien de atención al cliente como nos plantea 1-800-flowers. .

64

Claridad y control

78

4

Persuadiendo cuando no se está preparado para comprar

79

Incentivemos la primera compra con un descuento o promoción por comprarnos por primera vez. Discriminemos por cookie y ofrezcamos a los usuarios que nos visitan pro primera vez (o al menos así lo creemos) un cupón o descuento para realizar nuestra primera compra.

65

Persuasión

80

Empujemos al usuario poniéndole presión a avanzar en el proceso. Made inicia el proceso de Check-out en su cesta mostrando los pasos que se deben realizar. Además permite hacerlo desde el usuario registrado o el invitado. Y todo con un contador que muestra que expira en 14 minutos.

66

Persuasión

81

Dejémosle claro el ahorro que está obteniendo en su compra con nosotros. Insistamos – si obviamente procede - en el ahorro que conseguirán si compran con nosotros.

67

Persuasión

82

Hagámosle sentir que si no nos compra ahora, puede arrepentirse más tarde. Creemos la máxima sensación de urgencia.

68

Persuasión

83

Dejémosle claro que no lo encontrará a mejor precio en ningún otro sitio. Debe ofrecer el disclaim ‘mejor precio garantizado’ en la medida de lo posible.

69

Persuasión

84

No dudemos en explicarle la ventajas de comprar online con nosotros. Busquemos diferentes momentos para insistir en las ventajas de comprar en nuestra tienda online (devolución, entrega, seguridad…).

70

Persuasión

85

Ok. Puede ser que todavía no sea el momento, pero facilitémosle que nos compre más adelante. Ofrezcamos siempre la posibilidad de guardar su carrito de compra para futuras visitas. Permitamos al usuario iniciar el proceso de check-out, interrumpirlo y retomarlo en cualquier momento o disponer de un carrito de compra persistente.

71

Persuasión

86

Hagámosle retargeting. Puede que más tarde sí sea el momento. Una opción pasa por el retargeting tanto en nuestro site como en la publicidad online que estamos comprando. Empresas como Mercadolibre llevan tiempo trabajando con estos modelos con resultados muy interesantes.

72

Persuasión

87

No le pongamos tan fácil desistir de su compra con nosotros. El precio y el timing son los dos principales motivos para no completar una compra. Poco podemos hacer en el site una vez nos han dejado. El email parece ser nuestra justa baza para rescatar a esos usuarios. Debemos definir cuáles son las mejores reglas de rescate vía email. Algunas tiendas apuestan por un triple email (uno, a las pocas horas del abandono del site; un segundo, a las 24 horas y un tercero pasada la semana).

73

3 de cada 4 usuarios que abandonan nuestro sitio tras poner un producto en el carrito de compra tienen posibilidades reales de reaccionar positivamente si les sabemos enviar el mail adecuado en las siguientes horas inmediatas a su salida de nuestro site

Persuasión

88

No dudemos en buscar una nueva compra futura en nuestra página de confirmación Pensemos si la página de confirmación de compra nos puede servir para invitarle a considerar una segunda compra futura.

74

Claridad y control

89

Y busquemos fórmulas para que nuestros ya clientes nos recomienden. A Groupon les hemos propuesto incentivar al usuario para conectarse con Facebook Connect y compartir sus compras con ciertos incentivos económicos.

75

Claridad y control

90

Ya no podréis decir que no se os ha dicho :)

91

david@multiplica.com