user experience (ux) para landing pages

Download User Experience (UX) para Landing Pages

Post on 16-Feb-2017

312 views

Category:

Marketing

1 download

Embed Size (px)

TRANSCRIPT

  • UX para Landing Pages

    David Chvez

    david@epiclemon.com

  • Qu es UX?

    User eXperience

    Estudia la interaccin del cliente o usuario final con una compaa, sus servicios y sus productos.

    UX no slo abarca sitios web, sino la interaccin del cliente en cualquier canal de nuestra compaa.

    UX UIUI User Interface

  • UX fail

  • UX fail

  • UX fail

  • Sobre atencin La atencin es un recurso mental limitado.

    Fatiga de decisin: Entre ms decisiones tome uno, ms ineficientes son las ltimas decisiones.

    Asumamos que nuestro cliente est cansado de decidir todo el da, como un jefe ocupado y le hacemos una Yes/No question. Darle todo ya digerido, slo esperar la decisin final sin tanto enrollo.

    Tenemos tan solo 4 segundos (con suerte 6) para atraer la atencin del cliente.

  • No me hagas pensar!-Frida

  • Customer JourneyTres acciones fundamentales:

    1. Obtener la atencinEsto lo hace tu anuncio o el headline de tu post.

    2. Mantener la atencinEsto lo hace el headline de la landing page. Confirmar la promesa del anuncio o post.

    3. Enfocar la atencinEl 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

    Cmo me ayudan con marketing digital?

  • Destino del click

    Y ahora, qu hago?

  • PAUTAS DE DISEOLanding Pages

  • Attention ratio

    Proporcin entre lo que puedes hacer contra lo que deberas hacer.

    57:1

    1:1

    Entre el attention ratio sea mspequeo, las conversiones suben

  • Attention ratio

    15:1 3:1100% ms de registros

    A veces es difcil llegar al 1:1, pero entre ms cerca, mejor.

  • Attention ratio

  • Attention ratio

    -14% suscripciones

  • Le podras poner slo un link que lleve a mi seccin del sitio? Por favor?

    Casos de la vida corporativa

    Algo de todos los das cuando varios equipos estn involucrados

  • Horror VacuiTermino de arte visual que significa

    horror al espacio vaco.

  • Horror Vacui

    Nuestra landing page es como una pasarela.

    Confuso y sin emocin Claro y emotivo

  • Horror Vacui

    VS

  • Affordance

    Diseo de un objeto que nos indica cmo 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!

    Dnde est el CTA?

  • Juguemos a las escondidas!

    Ac est!

  • Contraste

  • Contraste

    VS

  • Considera que el 10% de los mexicanos son daltnicos

  • Interrupcin

    Agregar interrupcionespara enfocar atencin y separar secciones.

    1 seccin

    2 seccin

    3 seccin

    4 seccin

    5 seccin

  • Interrupcin

    Izquierda

    Derecha

    Centro

    CentroAtencin

  • Consistencia y repeticin

    No era 25% de descuento?

  • Consistencia y repeticin

    Misma imagen diseo es consistente

  • Alineacin

  • Alineacin

    Es importante alinear los elementos. Puede crear disgusto en la gente si no est alineado.

  • Perspectiva

    Intentar que se dirija

    a la parte importante

  • Agrupacin

    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 poltica 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 poltica 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 poltica 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. Tambin se pueden agregar premios, distintivos o clientes existentes. Ej: Alguna certificacin, badge de Google Partners.

    Pedir permiso al cliente o ponerlo annimo.

    Hacerlas interesantes y no genricas. Poner las que muestren el valor agregado y no slo 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?Envo 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

  • WIREFRAMEDiseo

  • Antes de construr la pgina

    Antes que nada, hay que pensar bien la pgina.

    Hacer wireframe de la pgina.

  • Se pueden usar herramientas

  • O a la vieja usanza

  • A|B Testing

    Nuestra pgina puede parecer perfecta, pero si los nmeros no lo demuestran, no fue exitosa.

    Siempre hay que probar cualquier modificacin y analizar los datos. No slo probar por probar.

  • A|B Testing

    No confiar en nuestra corazonada, hay que confiar en los nmeros.

    Varias herramientas para A|B testing:

  • PREGUNTAS?

  • GRACIAS!