user experience (ux) para landing pages
TRANSCRIPT
¿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
UX fail
UX fail
UX fail
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.
¡No me hagas pensar!-Frida
Customer JourneyTres acciones fundamentales:
1. Obtener la atenciónEsto lo hace tu anuncio o el headline de tu post.
2. Mantener la atenciónEsto lo hace el headline de la landing page. Confirmar la promesa del anuncio o post.
3. Enfocar la atenciónEl trabajo principal de tu landing page
UX se tiene que enfocar en estos tres puntos.
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.
Destino del click
¿Cómo me ayudan con marketing digital?
Destino del click
¿Y ahora, qué hago?
PAUTAS DE DISEÑOLanding Pages
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áspequeño, las conversiones suben
Attention ratio
15:1 3:1100% más de registros
A veces es difícil llegar al 1:1, pero entre más cerca, mejor.
Attention ratio
Attention ratio
-14% suscripciones
¿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…
Horror VacuiTermino de arte visual que significa
“horror al espacio vacío”.
Horror Vacui
Nuestra landing page es como una pasarela.
Confuso y sin emoción Claro y emotivo
Horror Vacui
VS
Affordance
Diseño de un objeto que nos indica cómo usarlo
Este tipo de manijas es parajalar, no para empujar.
Para empujar no necesito manijas.
¿Esto es un formulario?
Affordance en CTA (Call to action)
Excelente ¿Esto es un link?
¡Juguemos a las escondidas!
¿Dónde está el CTA?
¡Juguemos a las escondidas!
¡Acá está!
Contraste
Contraste
VS
Considera que el 10% de los mexicanos son daltónicos
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
Interrupción
Izquierda
Derecha
Centro
CentroAtención
Consistencia y repetición
¿No era 25% de descuento?
Consistencia y repetición
Misma imagen – diseño es consistente
Alineación
Alineación
Es importante alinear los elementos. Puede crear disgusto en la gente si no está alineado.
Perspectiva
Intentar que se dirija
a la parte importante
Agrupación
Agrupar elementos similares para dar orden y limpieza
VS
ESTRUCTURA PARA CONVERTIRFormularios
Estructura1. Headline
¿Qué ofreces? ¿Qué obtengo con llenar el formulario?
Estructura1. Headline
¿Qué ofreces? ¿Qué obtengo con llenar el formulario?
2. Subhead
Clarificar el beneficio.
Estructura1. 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.
Estructura1. 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.
Estructura1. 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.
Estructura1. 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.
MENCIONES Y TESTIMONIOSCredibilidad
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.
Menciones y testimonios
ECOMMERCECredibilidad
Reforzar descuentos y promos
¿Qué descuentos del Buen Fin?Envío gratis, ¿de verdad?No buscaba libros, ¿por qué estoy acá?
Reforzar descuentos y promos
¿Y el 50% off?
Mostrar productos relevantes
YO quiero comprar, no quiero vender
WIREFRAMEDiseño
Antes de construír la página…
• Antes que nada, hay que pensar bien la página.
• Hacer wireframe de la página.
Se pueden usar herramientas…
O a la vieja usanza…
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.
A|B Testing
• No confiar en nuestra corazonada, hay que confiar en los números.
• Varias herramientas para A|B testing:
¿PREGUNTAS?
¡GRACIAS!