user experience (ux) para landing pages

UX para Landing Pages

David Chávez

david@epiclemon.com

¿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!