Presentación impartida por Alberto Blanch, Responsable de Desarrollo de Negocio de Presencia Web de Arsys, en los eventos OMExpo 2018 y eShow Barcelona 2018, celebrados en abril de 2018. Más información en https://www.arsys.es/blog/nosotros/eventos/omexpo-2018-arsys y https://www.arsys.es/blog/nosotros/eventos/eshow-barcelona-2018 .

1. ¿De verdad necesitas saber si tu
cliente está casado?
• Alberto Blanch – Arsys
• Street Art de Banksy

3. Qué, cómo y cuándo
https://verne.elpais.com/verne/2018/03/21/articulo/1521641336_237841.html

4. 4. Flujo3.Diseño2. Textos1.Campos

5. ¡Por pedir, que no sea!
Según un estudio de Baymard,
mostramos de media 24
campos por defecto cuando
valdría con 12…
… todo un lujo cuando la tasa
de abandono en la compra es
del 68%

6. El tamaño no importa
https://www.weforum.org/agenda/2016/01/how-small-data-will-transform-companies/
https://www.bbvaopenmind.com/small-data-frente-a-big-data-de-vuelta-a-lo-basico/

7. ¡Por pedir, que no sea!
 ¿Qué datos necesito realmente? ¿Para qué los voy a usar
en el futuro? ¿Seguro que los vas a usar?
 ¿Deben ser obligatorios? ¿Los debo mostrar por defecto o
pueden ser desplegables?
 ¿Los puedo pedir más tarde? Quizá algunos datos los
puedes pedir después de finalizar la contratación.
 Explica para qué es cada dato que pides.

8. ¿Qué campos son realmente esenciales?
1. Campo único de Nombre y Apellidos
2. Email
3. Teléfono (si le vas a llamar, y sólo uno)
4. Checkbox para autorizar comunicaciones
5. Dirección (puede haber más campos expandibles)
6. Código postal
7. País (se puede preseleccionar por geo-targeting)
8. Checkbox Facturación = Envío
9. Selector envío
10. Tarjeta de crédito
11. Fecha
12. CVV

9. ¿Cuántas monjas piden pizza?
Fuente:
http://mainlinepizzaquest.blogspot.com.es/

10. Hay formas de simplificar
 Los datos repetidos, marca por defecto
que son los mismos (dirección facturación,
titular tarjeta, titular de un dominio…). No
supongas que son distintos
 Pide un orden lógico para evitar errores y
dependencias extrañas. Podrás pre-rellenar
(ej. ciudad a partir de código postal)
 Usa un campo único de nombre y apellidos
¡No te repitas!

11. Puedes usar geo-targeting para ahorrar pasos
También puedes pre-rellenar la ciudad a partir del código postal (si es único)

12. Considera el Social Login
https://conversionxl.com/blog/social-login/
https://blog.loginradius.com/2014/05/are-typical-registration-processes-causing-you-to-lose-users/
 A la gente le molesta tener que crear más cuentas y contraseñas
 Aunque tendrá más o menos sentido en función de si el público es persona
o empresa

13. Campos: Resumen
 Pide sólo lo que necesites
 Pide sólo una vez
 Usa un orden lógico
 Pre-rellena cuando sea posible

14. 4. Flujo3.Diseño2. Textos1. Campos

15. Textos: Cuidado con los tecnicismos

16. Que el comportamiento sea el esperado

17. Textos
 Evita tecnicismos
 Descripciones cortas y claras
o Puedes poner un link adicional con información
o No pongas “Estándar” y “Urgente” en lugar de “3-4 días / 1 día”
 Cuidado con algunas palabras
o “Continuar” -> Puede significar “Continuar comprando” o “Continuar con el
proceso de checkout ”
 Deja claro cuándo tiene lugar la transacción y ya no hay vuelta atrás
o Si pides el número de tarjeta en un paso previo a “Continuar”, puedes
aclarar que “tendrás una oportunidad de revisar la compra antes de
finalizarla y sin que se realice ningún cargo”

18. 4. Flujo3.Diseño2. Textos1.Formularios

19. Parecidos razonables
Que tu tienda se parezca a otras tiendas no es
malo… al revés, hará que tus usuarios se sientan
más cómodos y sepan manejarse.
https://blog.epages.com/en/2017/12/11/sex-and-shopping-5-insights-for-online-shop-owners/

20. Diseño: Botones
 El botón de acción primaria debe
o Ser más grande que el resto (de botones, y de logos)
o tener un estilo diferenciado del resto: la gente no lee.
o estar en un lugar prominente (abajo a la derecha, y si hace falta, se ponen dos)
o y siempre en el mismo sitio.
 Muestra un botón de “Atrás”
CONTINUARATRÁS

21. Diseño: Múltiples columnas
http://baymard.com/blog/avoid-multi-
column-forms

22. Diseño: Demasiadas opciones pueden confundir

23. Diseño: ¡Los móviles!
https://search.google.com/test/mobile-friendly
https://webmasters.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html
 Según ONTSI, sólo el 40% encuentra
las versiones móviles de los sitios
online de compra como adecuados.
 Google va a empezar a priorizar en
la indexación las versiones móviles

24. Diseño: El botón de Finalizar no debería de estar muy lejos

25. Diseño: Resumen
 Incluye una opción de comprar SIN REGISTRAR
 Una columna, mejor que dos
 Múltiples tamaños y formatos: móvil, tablet…
 Botón primario para la acción primaria: la más lógica
 Ojo con demasiadas opciones, animaciones...
 Evita imágenes que tienen apariencia de botón pero que luego no son
clicables, pueden ser confusas…
 ….Y haz que los elementos clicables (especialmente los primarios) parezcan
clicables y no un simple texto

26. 4. Flujo3.Diseño2. Textos1.Formularios

27. ¡¡¡En sólo 10 pasos!!!

28. Navegación: ¿De veras quieres hacer una encuesta ahí?

29. Navegación: Resumen
 Intenta que el carro esté siempre fácilmente visible
 Ten un proceso lineal. Un error típico es que al crear una cuenta vuelvas hacia atrás
en lugar de continuar al siguiente paso
 Que los datos sean persistentes
 Recuerda: el botón de atrás!
 Muestra claramente los pasos del proceso, e intenta que puedan clicar en los pasos
como si fueran enlaces (ojo que tampoco puedan saltarse pasos)
 Botón de acción esté al alcance sin hacer scroll
 Venta cruzada: sí, pero con precaución

31. Cuando el error es el sistema de detección de errores

32. Ojo con algunos automatismos

33. Errores: explicaciones poco claras

34. Maltrata tu contratación
 Hazte una lista de pruebas y llévalas a cabo periódicamente
Prueba:
o Todos los pasos
o Configuraciones y opciones de producto
o Promociones y cupones
o Venta cruzada
o Opciones de producto (todas las tallas, variantes…)
o Todos los campos del formulario
o Navegadores y formatos
o Métodos de pago
o Todas los tipos de cliente (cliente nuevo, cliente existente, cliente visitante…)

35. Errores: algunos consejos
 No borres la información que ya he rellenado el usuario
 Valida en directo, pero no lo hagas tan rápido que confunda
 Usa un texto de ayuda y que no desaparezca cuando escribes
 Campos adecuados a la longitud esperable
 Mensajes de errores claros

36. Bonus Track
No te olvides de prestar mucha atención al resto de factores que
influyen en cualquier proceso de contratación:
 Precio: sin sorpresas al final.
 Envío: la rápida y la gratuita
 Seguridad y Confianza: SSL, sellos de ecommerce
 Pasaba por ahí: guardar el carrito, rescatar por correo

37. Gracias
Presentación disponible en: http://arsys.es/blog

38. Algunos enlaces de interés
 http://arsys.es/blog
 https://baymard.com/checkout-usability
 https://www.truconversion.com/blog/conve
rsion-rate-optimization/how-to-reduce-
your-shopping-cart-abandonment-rate/
 https://www.experimentengine.com/blog/2
015/06/04/reduce-shopping-cart-
abandonment/
 http://www.invesp.com/blog/shopping-cart-
abandonment-rate-statistics-infographic/
 http://blog.wishpond.com/post/100199913
905/exit-popups-just-gave-you-a-fighting-
chance
 http://www.invespcro.com/blog/the-top-7-
reasons-for-shopping-cart-abandonment-
tips-for-avoiding-them/
 http://www.apsis.com/blog/abandoned-
shopping-carts-back-basics
 Google Forms
 Formbakery
 Formsite
 TypeForm
 FormAssembly
 Quizlet
 Formstack
 -basics