El carrito de compra ideal

91
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

description

75 mejores prácticas para plantear el mejor carrito de la compra y proceso de check-out en una tienda online.

Transcript of El carrito de compra ideal

Page 1: El carrito de compra ideal

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

Page 2: El carrito de compra ideal

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

Page 3: El carrito de compra ideal

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).

Page 4: El carrito de compra ideal

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.

Page 5: El carrito de compra ideal

5

¿Por qué lo abandonan?

Page 6: El carrito de compra ideal

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?

Page 7: El carrito de compra ideal

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

Page 8: El carrito de compra ideal

8

1

Los gastos de envío como barrera mental

Page 9: El carrito de compra ideal

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

Page 10: El carrito de compra ideal

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

Page 11: El carrito de compra ideal

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

Page 12: El carrito de compra ideal

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

Page 13: El carrito de compra ideal

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

Page 14: El carrito de compra ideal

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

Page 15: El carrito de compra ideal

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

Page 16: El carrito de compra ideal

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

Page 17: El carrito de compra ideal

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

Page 18: El carrito de compra ideal

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

Page 19: El carrito de compra ideal

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

Page 20: El carrito de compra ideal

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

Page 21: El carrito de compra ideal

21

2

Simplificando el proceso de checkout y compra

Page 22: El carrito de compra ideal

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

Page 23: El carrito de compra ideal

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

Page 24: El carrito de compra ideal

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

Page 25: El carrito de compra ideal

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

Page 26: El carrito de compra ideal

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

Page 27: El carrito de compra ideal

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

Page 28: El carrito de compra ideal

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

Page 29: El carrito de compra ideal

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.

Page 30: El carrito de compra ideal

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

Page 31: El carrito de compra ideal

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

Page 32: El carrito de compra ideal

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

Page 33: El carrito de compra ideal

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.

Page 34: El carrito de compra ideal

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.

Page 35: El carrito de compra ideal

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 ([email protected])

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

Page 36: El carrito de compra ideal

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

Page 37: El carrito de compra ideal

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 ([email protected])

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

Page 38: El carrito de compra ideal

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

Page 39: El carrito de compra ideal

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.

Page 40: El carrito de compra ideal

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.

Page 41: El carrito de compra ideal

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

Page 42: El carrito de compra ideal

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

Page 43: El carrito de compra ideal

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.

Page 44: El carrito de compra ideal

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

Page 45: El carrito de compra ideal

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

Page 46: El carrito de compra ideal

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

Page 47: El carrito de compra ideal

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

Page 48: El carrito de compra ideal

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

Page 49: El carrito de compra ideal

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

Page 50: El carrito de compra ideal

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

Page 51: El carrito de compra ideal

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

Page 52: El carrito de compra ideal

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

Page 53: El carrito de compra ideal

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

Page 54: El carrito de compra ideal

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.

Page 55: El carrito de compra ideal

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

Page 56: El carrito de compra ideal

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

Page 57: El carrito de compra ideal

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

Page 58: El carrito de compra ideal

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

Page 59: El carrito de compra ideal

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

Page 60: El carrito de compra ideal

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

Page 61: El carrito de compra ideal

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

Page 62: El carrito de compra ideal

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

Page 63: El carrito de compra ideal

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

Page 64: El carrito de compra ideal

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.

Page 65: El carrito de compra ideal

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

Page 66: El carrito de compra ideal

66

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

53

Pago y seguridad

Page 67: El carrito de compra ideal

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

Page 68: El carrito de compra ideal

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

Page 69: El carrito de compra ideal

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

Page 70: El carrito de compra ideal

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

Page 71: El carrito de compra ideal

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

Page 72: El carrito de compra ideal

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

Page 73: El carrito de compra ideal

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

Page 74: El carrito de compra ideal

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

Page 75: El carrito de compra ideal

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

Page 76: El carrito de compra ideal

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

Page 77: El carrito de compra ideal

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

Page 78: El carrito de compra ideal

78

4

Persuadiendo cuando no se está preparado para comprar

Page 79: El carrito de compra ideal

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

Page 80: El carrito de compra ideal

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

Page 81: El carrito de compra ideal

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

Page 82: El carrito de compra ideal

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

Page 83: El carrito de compra ideal

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

Page 84: El carrito de compra ideal

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

Page 85: El carrito de compra ideal

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

Page 86: El carrito de compra ideal

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

Page 87: El carrito de compra ideal

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

Page 88: El carrito de compra ideal

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

Page 89: El carrito de compra ideal

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

Page 90: El carrito de compra ideal

90

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