Este documento ofrece consejos sobre diseño de experiencia de usuario (UX) para páginas de aterrizaje. Explica que UX estudia la interacción del cliente con una empresa a través de cualquier canal, no solo sitios web. Luego, ofrece recomendaciones sobre cómo captar y mantener la atención del usuario a través del diseño, incluyendo el uso de encabezados, separación de secciones y alineación de elementos. También recomienda estructurar los formularios para maximizar las conversiones.

1. UX para Landing Pages
David Chávez
david@epiclemon.com

2. ¿Qué es UX?
User eXperience
• Estudia la interacción del cliente o usuario final con una
compañía, sus servicios y sus productos.
• UX no sólo abarca sitios web, sino la interacción del cliente en
cualquier canal de nuestra compañía.
UX ≠ UI
UI – User Interface

3. UX fail

4. UX fail

5. UX fail

6. Sobre atención
• La atención es un recurso mental limitado.
• Fatiga de decisión: Entre más decisiones tome uno, más ineficientes son
las últimas decisiones.
• Asumamos que nuestro cliente está cansado de decidir todo el día,
como un jefe ocupado y le hacemos una “Yes/No question”. Darle todo
ya digerido, sólo esperar la decisión final sin tanto enrollo.
• Tenemos tan solo 4 segundos (con suerte 6) para atraer la atención del
cliente.

7. ¡No me hagas pensar!
-Frida

8. Customer Journey
Tres acciones fundamentales:
1. Obtener la atención
Esto lo hace tu anuncio o el headline de tu post.
2. Mantener la atención
Esto lo hace el headline de la landing page. Confirmar la promesa del anuncio o post.
3. Enfocar la atención
El trabajo principal de tu landing page
UX se tiene que enfocar en estos tres puntos.

9. Destino del click
El anuncio, newsletter, o post de social media NO
debe de ir a la home, debe de ir a la landing page.

10. Destino del click
¿Cómo me ayudan con marketing digital?

11. Destino del click
¿Y ahora, qué hago?

12. PAUTAS DE DISEÑO
Landing Pages

13. Attention ratio
Proporción entre lo que puedes hacer contra lo que
deberías hacer.
57:1
1:1
Entre el attention ratio sea más
pequeño, las conversiones suben

14. Attention ratio
15:1 3:1
100% más de registros
A veces es difícil llegar al 1:1, pero entre más cerca,
mejor.

15. Attention ratio

16. Attention ratio
-14% suscripciones

17. ¿Le podrías poner sólo un link que lleve a mi sección del sitio?
¿Por favor?
Casos de la vida corporativa
Algo de todos los días cuando varios equipos
están involucrados…

18. Horror Vacui
Termino de arte visual que significa
“horror al espacio vacío”.

19. Horror Vacui
Nuestra landing page es como una pasarela.
Confuso y sin emoción Claro y emotivo

20. Horror Vacui
VS

21. Affordance
Diseño de un objeto que nos indica cómo usarlo
Este tipo de manijas es para
jalar, no para empujar.
Para empujar no necesito manijas.

22. ¿Esto es un
formulario?

23. Affordance en CTA (Call to action)
Excelente ¿Esto es un link?

24. ¡Juguemos a las escondidas!
¿Dónde está el CTA?

25. ¡Juguemos a las escondidas!
¡Acá está!

26. Contraste

27. Contraste
VS

28. Considera que el 10% de los mexicanos
son daltónicos

29. Interrupción
Agregar “interrupciones”
para enfocar atención y
separar secciones.
1ª
sección
2ª
sección
3ª
sección
4ª
sección
5ª
sección

30. Interrupción
Izquierda
Derecha
Centro
Centro
Atención

31. Consistencia y repetición
¿No era 25% de descuento?

32. Consistencia y repetición
Misma imagen – diseño es consistente

33. Alineación

34. Alineación
Es importante alinear los elementos. Puede crear
disgusto en la gente si no está alineado.

35. Perspectiva
Intentar que se dirija
a la parte importante

36. Agrupación
Agrupar elementos similares para dar orden y
limpieza
VS

37. ESTRUCTURA PARA CONVERTIR
Formularios

38. Estructura
1. Headline
¿Qué ofreces? ¿Qué obtengo con llenar el formulario?

39. Estructura
1. Headline
¿Qué ofreces? ¿Qué obtengo con llenar el formulario?
2. Subhead
Clarificar el beneficio.

40. Estructura
1. Headline
¿Qué ofreces? ¿Qué obtengo con llenar el formulario?
2. Subhead
Clarificar el beneficio.
3. Beneficios
Clarificar nuevamente el beneficio a manera de bullets. Opcional.

41. Estructura
1. Headline
¿Qué ofreces? ¿Qué obtengo con llenar el formulario?
2. Subhead
Clarificar el beneficio.
3. Beneficios
Clarificar nuevamente el beneficio a manera de bullets. Opcional.
4. Formulario
Ya que tenemos claro el beneficio, ahora sí podemos pedir los
datos. Agregar política de privacidad.

42. Estructura
1. Headline
¿Qué ofreces? ¿Qué obtengo con llenar el formulario?
2. Subhead
Clarificar el beneficio.
3. Beneficios
Clarificar nuevamente el beneficio a manera de bullets. Opcional.
4. Formulario
Ya que tenemos claro el beneficio, ahora sí podemos pedir los
datos. Agregar política de privacidad.
5. Call to Action
El CTA que describe qué pasará cuando lleno el formulario.

43. Estructura
1. Headline
¿Qué ofreces? ¿Qué obtengo con llenar el formulario?
2. Subhead
Clarificar el beneficio.
3. Beneficios
Clarificar nuevamente el beneficio a manera de bullets. Opcional.
4. Formulario
Ya que tenemos claro el beneficio, ahora sí podemos pedir los
datos. Agregar política de privacidad.
5. Call to Action
El CTA que describe qué pasará cuando lleno el formulario.
6. Cierre
Última oportunidad para mencionar cosas importantes, como
beneficio, urgencia, etc.

44. MENCIONES Y TESTIMONIOS
Credibilidad

45. Menciones y testimonios
• Agregar lo que los clientes opinan de nosotros o nuestro
producto/servicio. También se pueden agregar premios, distintivos o
clientes existentes. Ej: Alguna certificación, badge de Google Partners.
• Pedir permiso al cliente o ponerlo anónimo.
• Hacerlas interesantes y no genéricas. Poner las que muestren el valor
agregado y no sólo menciones que digan “excelente”.
• Si no se hay menciones, es mejor no poner nada o pedirle a un
empleado que las escriba o inventarla.

46. Menciones y testimonios

47. ECOMMERCE
Credibilidad

48. Reforzar descuentos y promos
¿Qué descuentos del Buen Fin?
Envío gratis, ¿de verdad?
No buscaba libros, ¿por qué estoy acá?

49. Reforzar descuentos y promos
¿Y el 50% off?

50. Mostrar productos relevantes
YO quiero comprar, no quiero vender

51. WIREFRAME
Diseño

52. Antes de construír la página…
• Antes que nada, hay que pensar bien la página.
• Hacer wireframe de la página.

53. Se pueden usar herramientas…

54. O a la vieja usanza…

55. A|B Testing
• Nuestra página puede parecer perfecta, pero si los
números no lo demuestran, no fue exitosa.
• Siempre hay que probar cualquier modificación y
analizar los datos. No sólo probar por probar.

56. A|B Testing
• No confiar en nuestra corazonada, hay que
confiar en los números.
• Varias herramientas para A|B testing:

57. ¿PREGUNTAS?

58. ¡GRACIAS!