conversion thursday - user experience

Sponsoriza:

Experiencia de usuario

Colabora:

Antes de hablar de experiencia de usuario…

Hagamos un breve repaso a la situación actual…

Mundial:

De 360 millones a 1.800 millones de usuarios

Evolución Usuarios internet 2000-2010

España:

De 3.5 millones a 20 millones de usuarios

¡Una generalidad que no está de más recordar!

La evolución de Internet y de la tecnología han cambiado la forma en

que trabajamos, vivimos, aprendemos, nos divertimos…

La web 2.0 y los social media forman ya parte de nuestras vidas.

El acceso multiplataforma y la difusión de los nuevos smartphones no tiene marcha atrás.

Los usuarios colaboran e intercambian información de forma ágil.

Los mercados se convierten en conversaciones y ahora hablamos de reputación online.

También hay que hablar del consumidor de nueva generación, informado e inteligente: crossumer y prossumer.

¡Estamos ante un nuevo escenario!

¡Con nuevas formas de comunicarnos, relacionarnos,

experimentar y compartir!

¡Ahora más que nunca lo que importa son las personas!

Centrar nuestro enfoque en ellas

Y debemos…

- Generar nuevas formas de relacionarnos con nuestros usuarios, clientes, consumidores.

- Buscar nuevas formas de transmitir mensajes.

- Potenciar la interacción del consumidor con la marca a través de una experiencia directa.

- Conectar con el consumidor a través de la red.

¡En este contexto la experiencia de usuario cobra

una nueva dimensión!

Las personas somos clientes, consumidores y usuarios.

Y cómo tal, tenemos experiencias con las marcas, sus productos y

sus servicios.

DesignforusersKris Colvin

La sensación, sentimiento, respuesta emocional y

satisfacción del usuario respecto a un producto,

resultado de interactuar con el producto y su proveedor

(la marca).

Una experiencia positiva de usuario está en directa

relación con una percepción positiva de la marca.

¿Qué es la experiencia de usuario?

¡Engagement!¡La vinculación de los usuarios con tu marca!

¿Y qué conseguimos si generamos experiencias positivas?

Centrémonos en la experiencia de usuario online

Conjunto de percepciones y sensaciones que desarrolla un usuario durante su relación e interacción con los elementos de tu identidad digital, y en concreto con tu sitio web.

¿Qué es?

- Homogeneización de las iniciativas online.

- Proyección de marca única y homogénea.

- Una experiencia de usuario satisfactoria.

Objetivos de su diseño:

Tu web es el reflejo de tu marca en internet, es tu principal escaparate.

La experiencia de usuario online empieza con la percepción de la marca.Todo cuanto haya en un sitio web forma parte de la experiencia de usuario.

Experiencia de usuario online

Concepto global que depende de numerosos factores:

- Transmisión de valores de marca.

- Utilidad y valor del producto/servicio.

- Contenidos y servicios ofrecidos.

- Respuesta a las necesidades y expectativas de los

usuarios.

- Creatividad.

- Diseño visual.

- Usabilidad/ Arquitectura de la información consistente /

Navegación eficiente.

- Facilidad de aprendizaje y recuerdo.

La experiencia de usuario online

Los elementos de la experiencia de usuario - Jesse James Garret.

¡Un diagrama que cumple 10 años!

“Lo que no contaba era que diez años después, aún hubiera tanta gente que tuviera que ser educada (al respecto)".

Los elementos de la experiencia de usuario - Jesse James Garret

• Adaptive Path

• Acuñador término “AJAX”

¡Perdónanos Jesse!

Vamos a hacer algún pequeño ajuste al modelo

Orientación tanto a la consecución de tareas

como a la recuperación de información.

Considerar la experiencia de marca online.

Objetivos

Brand experience online

Necesidades de usuario

Necesidades de contenidos

Especificaciones funcionales

Arquitectura de información

Diseño de interacción

Diseño de interfaz:

información + navegación

Diseño visual

2. Brand experience online

Corporativos, de negocio, comunicación…

1. Objetivos del sitio

Atributos de marca que queremos que se identifiquen a

medio plazo con la experiencia de uso on line.

Identificadas a través de la investigación de los usuarios.

3. Necesidades de usuario

Primera capa

4. Requerimientos de contenido

Set de herramientas que el sitio debe incluir para satisfacer

las necesidades del usuario.

5. Especificaciones funcionales

Elementos de contenido requeridos para satisfacer las

necesidades de usuario.

Segunda capa

6. Arquitectura de la información

Diseño estructural del espacio de información para facilitar

el acceso intuitivo al contenido.

Tercera capa

Desarrollo del flujo de las aplicaciones para facilitar las

tareas del usuario, definiendo cómo el usuario interactúa

con la funcionalidad del sitio.

7. Diseño de interacción

8. Diseño de interfaz: navegación e información

Diseño de los elementos de la interfaz para facilitar la

navegación e interacción del usuario .

Diseño de la presentación de la información para facilitar el

entendimiento.

Cuarta capa

Look & feel

Tratamiento gráfico de los elementos de la interfaz.

Diseño emocional.

9. Diseño visual

Quinta capa

Las facetas de la experiencia de usuario - Peter Morville

Las facetas de la experiencia de usuario - Peter Morville

• Semantic Studios

• Autor “Information architecture”.

• Acuñador término “Findability”

Las facetas de la experiencia de usuario Peter Morville

Valor

Deseabilidad

Sistemas útiles aplicando el conocimiento del medio

Utilidad

A través del valor de la imagen, de la identidad, de la marca

Ofrecer valor para el usuario

CredibilidadGenerar confianza

Encontrabilidad

La facilidad de uso es fundamental, pero es una faceta más.

Usabilidad

Capacidad de un objeto de ser localizado: buscadores/SEO

+ mecanismos internos.

Acceso universal a la web

Accesibilidad

Metodología /Proceso de trabajo

Investigación y Análisis

DescubrirEstudios demográficos (Eustat, INE,

Eurostat, otras fundaciones

privadas....)

Estudio de objetivos y necesidadesValores de marcaAnálisis de la competencia y los líderesTécnicas de indagación Entrevistas a usuariosEncuestasGrupos de discusiónEstudios etnográficos

En esta fase predomina el

DESCUBRIMIENTO

DefinirObjetivos y necesidadesEstrategia de comunicaciónPúblicos objetivosPersonajes y escenariosMapas mentales

TestearEntrevistas a usuariosEncuestasGrupos de discusión

(para rediseños)

Estudio de analítica web (google

analytics...)

Análisis de clicks (clicktale, clickheat...)

Revisión de expertoEvaluación heurísticaTest de usuarios

Análisis de la competencia y los líderes

Para extraer:• Factores de éxito y valorarlos en nuestra propuesta.

• Factores de fracaso para no repetirlo, hacerlo mejor y que sea una ventaja competitiva.

Investigación y Análisis > Descubrimiento

Técnicas de indagaciónencuestas, entrevistas, grupos de discusión y estudios etnográficos

• Para la toma de requisitos.• Obtención de información subjetiva.

Hay que fijarse en:o Experienciaso Expectativaso Necesidadeso Impresioneso Frustracioneso Actitudeso Grado de satisfaccióno Contexto de uso

Investigación y Análisis > Descubrimiento

Públicos objetivos

Investigación y Análisis > Definición

Investigación y Análisis > Definición

Investigación y Análisis > Definición

Concepto y diseño

DescubrirPatrones de diseño de interacción (designinginterfaces.com,

www.welie.com,

designingwebinterfaces.com

/explore ...)

En esta fase predomina la

DEFINICIÓN

DefinirDiagramas de flujoÁrboles de contenidoWireframesDiseño de la informaciónPrototipo (axure, visio,

omnigraffle, pidoco,

balsamiq, expressión blond +

sketchflow...)

Diseño visual

TestearCard Sorting (card sword,

optimal sort, web sort...)

Test de usuarios (test de

guerrilla rápidos...)

Análisis de clicks (clicktale,

clickheat...)

Predicción de atención visual (attentionwizard.com)

Testeos de reconocimiento y recuerdo (5 second test...)

Concepto y análisis > Descubrimiento

Concepto y análisis > Definición

Concepto y análisis > Definición

Concepto y análisis > Definición

Concepto y análisis > Testeo

Card sorting

Se trata de una prueba con usuarios en la que se les pide que ordenen una

serie de tarjetas rotuladas previamente (menos de 40) en categorías.

Las categorías pueden estar definidas previamente o no, por lo que puede que

sean ellos los que lo definan y les den un nombre.

Con esta prueba se comprueba respecto a la lógica de los usuarios los árboles de

contenidos definidos previamente.

Puede hacerse de forma presencial o remota (online).

Concepto y análisis > Testeo

Test de usuarioSe trata de una prueba en la que los usuarios realizan una serie de tareas

previamente preparadas y se valora en qué medida se realizan con éxito.

Se extrae información a través de la observación del comportamiento del usuario.

Se puede registrar la prueba y calcular ratios y métricas, pero no hacerlo no quiere

decir que no se mejora. No poder hacer este registro no debe ser obstáculo para

no hacer el test.

Número de participantes: 6 es una buena cifra

Concepto y análisis > Testeo

Test de usuarioCriterios excluyentesTrabajar en Marketing, Diseño, Desarrollo de webs, etc.

DuraciónAlrededor de 1 hora con entrevista y cuestionarios incluidos.

Qué vamos a medir• Errores (cantidad y motivos)• Tareas no completadas• Tiempo invertido para cada tarea• Satisfacción post test• Comentarios y lenguaje no verbal (interpretación)

Concepto y análisis > Testeo

Análisis de clicks

Concepto y análisis > Testeo

Predicción de

atención visual

Concepto y análisis > Testeo

Reconocimiento y recuerdo

Desarrollo e Implementación

DescubrirRevisión de expertoEvaluación heurística

En esta fase predomina el

TESTEO

DefinirPrototipos de alta fidelidad

TestearEncuestasEntrevistas a usuariosTest de usuariosTesteos de optimizacion (A/B

testing, Multivariate testing)

Chequeo de calidad

Desarrollo e implementación > Descubrimiento

Análisis heurístico

11 principios heurísticos.

Los heurísticos son buenas prácticas que nacen como respuesta a los problemas más comunes de los usuarios.

En 1990 Jakob Nielsen hizo un estudio

sobre alrededor de 250 problemas típicos de usabilidad.

Concluyo que podían agruparse en 11 categorías

Desarrollo e implementación > Testeo

Testeos de optimización

Algunas buenas prácticas

Comprueba que los objetivos están claros.

Por ejemplo:

•Notoriedad de marca

•Comunicación corporativa

•Aumentar ventas

•Captación de clientes

•Fidelización

•Etc.

1. Define tus objetivos y tenlos presente siempre

Define los atributos y valores de marca con los que quieres que se identifique la experiencia de uso de tu sitio web.

2. Define los valores de tu marca

Define claramente a quien te diriges y a quien no, para orientarte a ellos y sólo a ellos.

Por ejemplo:• Si tengo una tienda de jóvenes diseñadores de

moda, un público objetivo principal son las mujeres que trabajan de entre 25 y 35 años.

3. Define los públicos objetivo

Cubre todas las fases, investigación y análisis, concepto y diseño, desarrollo e implementación.

Cada proyecto requiere su propio plan.

4. Planifica el proceso de diseño

Adaptarse a su lenguaje, a sus conocimientos, a sus gustos, su sensibilidad

Por ejemplo:• Utilizar metáforas y conceptos familiares

5. Adáptate al usuario

Si una página debe tener más de un objetivo se debe priorizar

Por ejemplo:

6. Comprueba que cada página cubre con su

objetivo

6. Comprueba que cada página cubre con un objetivo

Por ejemplo:• Elevar las cejas significa INSEGURIDAD, INCREDULIDAD,

SORPRESA y EXASPERACIÓN, en nuestro contexto nada bueno.

• Fruncir el ceño: NECESIDAD DE CONCENTRACIÓN, DESAGRADO, PERCEPCIÓN DE FALTA DE CLARIDAD.

• Desviar la mirada: DECEPCIÓN. Hacia abajo expresa actitud de FRACASO, pero también puede reflejar CULPA, VERGÜENZA o SUMISIÓN

• Sonreir: SATISFACCIÓN• Apretar los labios: FRUSTRACIÓN y CONFUSIÓN.

ANSIEDAD, NERVIOSISMO y PREOCUPACIONES EMOCIONALES.

7. Considera las emociones de los usuarios

• Mover la boca: INCERTIDUMBRE o sentirse PÉRDIDO.• Expresarse oralmente (suspiros, jadeos, tos): FRUSTRACIÓN

o DECEPCIÓN• Tocarse la cara con las manos: CONFUSIÓN,

INCERTIDUMBRE o CANSANCIO• Reclinarse hacia atrás: EMOCIONES NEGATIVAS o de

RECHAZO.• Inclinar el cuerpo hacia delante: DEPRESIÓN y

FRUSTRACIÓN

Y siempre que lo veamos PREGUNTAR, qué ocurre.

7. Considera las emociones de los usuarios

Por ejemplo:• Los clientes de email son muy similares, porque siguen

un estándar de facto

8. Sé consistente internamente y con los

estándares

8 Ser consistente internamente y con los estándares

El recuerdo se basa en una experiencia concreta el reconocimiento en un conjunto de experiencias.

Por ejemplo:

9. Es preferible reconocer algo que recordarlo

8 En diseño es preferible reconocer que recordar

Por ejemplo:

Menú Principal Menú Contextual(botón derecho)

CTRL + C

Teclado

10. Dar facilidades a la interacción con el

usuario sean cuales sean sus características

Recuerda que con el 20% de la funcionalidad o los contenidos se atiende el 80% de las necesidades. Por ello se debe priorizar lo más probable frente a lo posible.

11. Evita todo lo que no sea necesario. Menos

es más

11 Evita todo lo que no sea necesario. Menos es más.

Hay que hacer lo posible en el diseño para evitar errores del usuario.

Hacer más relevante la acción primaria para evitar que la gente no se equivoque.

Otros ejemplos pueden ser poner el foco automáticamente el cajetín de búsqueda o los auto-recomendadores evitan también errores tipográficos en las búsquedas.

12. Más vale prevenir que….

Los usuarios se suelen equivocar a pesar de todo. Pero no es el final, hay que ayudarlos a recuperarse de los errores.

13. Ofrece salidas de emergencia a los

usuarios que se equivocan

13 Ofrecer salidas de emergencia a los usuarios que se equivocan

14. Informar siempre en un tiempo

razonable de lo que está ocurriendo

Al pulsar el botón se sustituye por una barra de progreso

Mensajes de feedback al finalizar una tarea

La fortaleza de la contraseña se muestra en tiempo real

15. Diseña los mensajes de error de manera

que sean comprensibles y sirvan para solucionar el problema

Un error no es tan importante si no ocurre muchas veces y si los usuarios se recuperan rápidamente de él.

Este mensaje no se entiende y no ayuda a solucionar el problema

15 Diseña los mensajes de error de manera que sean comprensibles y srivan para solucionar el problema

16. Adapta la ayuda a los usuarios dándoles

distintas opciones para cada necesidad por niveles

A los personas nos cuesta pedir ayuda pero no por ello dejamos de necesitarla, debemos ofrecerla con mano izquierda, pero sin eliminar el apartado de ayuda para quien lo pida.

16 Adaptar la ayuda a los usuarios

Ejemplo PRIVALIA

Objetivo principal:¿Log in?

En otras páginas se explica que Privalia es un Club Privado de venta online y cómo te puedes hacer socio.

¿Me asocio a Privalia?

Una buena amiga dice que SÍ y me ha pasado una invitación, 5€ para ella y 5€ para mí si me hago (incentivo).

Escaparate

Privalia envía emails con avisos de novedades.

Tiene una cuenta de Twitter con menos de 1.000 followersy una página en Facebook con más de 70.000 personas a las que les gusta su página.

Pero...Es un poco lento navegar hasta dónde quieres... muy mejorable.Lo más destacado es lo último, por ello hay novedades que se pierden porque ese día se han lanzado muchas...

Me gustan estas zapatillas

Y no son caras, bueno además me ahorro 56€. Lo quiero.

¿Y dónde está el botón de comprar? ¿Añadir a la cesta? ¿Adquirir? … No, no lo encuentro.

Sigo buscando...Aquí están las tallas, yo uso 38, cantidad 1 par.

Aquí está el botón, podía haber aparecido antes, aunque sea deshabilitado.

Bueno, bonito y barato.

Tienda en Facebook

Qué peligro.

Recibo todos los días un email y no me resisto, como para añadirles en el Twitter.

Mira otro email de Privalia…

Han abierto una tienda en Facebook. ¿Una tienda? Si ya tienen la suya...

A ver si mejoran un poco la tienda, voy a ver...

Tienda en Facebook

¿Pre-aperturas de campaña y ventas exclusivas?

Se acabo eso de esperar a las 7 de la mañana a que abran la venta para comprar los productos más golosos.

Es una venta para FANS.

Tienda en FacebookAl final el proceso de compra se hace en la tienda de Privalia.

Pero desde Facebook aumentan la expectación entre los mejores clientes, los fans de Privalia.

Conclusiones

Privalia es un Club PRIVADO de venta online que tiene algunos problemas de usabilidad y arquitectura de la información, pero oferta productos MUY DESEADOS a PRECIOS MUY REBAJADOS. Y por ello triunfa.

Facebook es una red social CERRADA que tiene problemas de usabilidad, pero se caracteriza por sus MICROINTERACCIONES (me gusta, pequeño comentario, etc.), por ser MULTIPLATAFORMA e ideal para pantallas táctiles. Permite a las personas y organizaciones estar en contacto con muy poco esfuerzo, por ello triunfa.

La tienda de Privalia en Facebook, a pesar de tener los mismos problemas de usabilidad que por separado, también aporta muchas ventajas:

• Productos deseados a precios reducidos• Promociones, ventas exclusivas, pre-aperturas de

campaña• Red social de muchos usuarios, multiplataforma• Apropiado para microinteracciones, genera

"enganche”Solucionar los problemas de usabilidad contribuirá a una mejor experiencia de usuario, lo que en definitiva también se puede traducir a mayores beneficios.

Conclusiones

¡Gracias!

Hitz Karega: kareaga@gmail.com - @bocadorada

Virginia Aguirre: Virginia.aguirre@gmail.com - @bubalie

• Wikipedia

• Del 1.0 al 2.0 claves para entender el nuevo marketing www.clavesdelnuevomarketing.com

• www.marketingdemocratico.com

• www.capire.info

• www.usando.info

• www.jbarahona.com

• http://blog.jjg.net/ Jesse Jame Garret

• http://www.wordle.net generador nube de tags

Referencias

• Fundamentos para el diseño de la experiencia de usuario online – Nacho Gil http://www.slideshare.net/nachogil/elementos-de-la-experiencia-de-usuario-online-0103

• Juan Marketing http://www.juanmarketing.com/diesel-cam-punto-venta-facebook

• FAZ #2. 10 heurísticos emocionales. Eva Lera y Muriel Garreta-Domingo

• Formación interna de Arista

• No me hagas pensar. Steve Krug

• El diseño de las cosas cotidianas. Donald. A Norman

• El diseño emocional. Donald A. Norman

Referencias