El documento ofrece consejos para simplificar los formularios de registro y compra en línea. Recomienda pedir sólo los datos esenciales de forma obligatoria, en un orden lógico y con explicaciones claras. También sugiere utilizar diseños de una sola columna, botones destacados y una navegación sencilla entre los pasos para mejorar la experiencia del usuario y reducir el abandono.

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

3. ¡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%

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

5. ¡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.

6. ¿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

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

8. 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!

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

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

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

12. Textos: Cuidado con los tecnicismos

13. Que el comportamiento sea el esperado

14. 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”

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

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

17. Diseño: Botones
 Muestra un botón de “Atrás”
 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.
CONTINUARATRÁS

18. Diseño: Demasiadas opciones pueden confundir

19. Diseño: ¡Los móviles!

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

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

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

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

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

26. Errores: explicaciones poco claras

27. Ojo con algunos automatismos

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

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

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

31. Gracias
Presentación disponible en el canal de Arsys en SlideShare

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