Conversion thursday -_user_experience

Experiencia de usuario Sponsoriza: Colabora:

Antes de hablar de experiencia de usuario…

Hagamos un breve repaso a la situación actual…

Evolución Usuarios internet 2000-2010 Mundial: España: De 360 millones a 1.800 De 3.5 millones a 20 millones de usuarios 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.

Designforusers Kris Colvin

¿Qué es la experiencia de usuario? 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.

¿Y qué conseguimos si generamos experiencias positivas? ¡Engagement! ¡La vinculación de los usuarios con tu marca!

Centrémonos en la experiencia de usuario online

¿Qué es? 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.

Objetivos de su diseño: - Homogeneización de las iniciativas online. - Proyección de marca única y homogénea. - Una experiencia de usuario satisfactoria.

Experiencia de usuario online 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.

La 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.

Los elementos de la experiencia de usuario - Jesse James Garret. ¡Un diagrama que cumple 10 años!

Los elementos de la experiencia de usuario - Jesse James Garret “Lo que no contaba era que diez años después, aún hubiera tanta gente que tuviera que ser educada (al respecto)". • 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

Primera capa 1 . Objetivos del sitio Corporativos, de negocio, comunicación… 2 . Brand experience online Atributos de marca que queremos que se identifiquen a medio plazo con la experiencia de uso on line. 3 . Necesidades de usuario Identificadas a través de la investigación de los usuarios.

Segunda capa 4 . Requerimientos de contenido Elementos de contenido requeridos para satisfacer las necesidades de usuario. 5 . Especificaciones funcionales Set de herramientas que el sitio debe incluir para satisfacer las necesidades del usuario.

Tercera capa 6 . Arquitectura de la información Diseño estructural del espacio de información para facilitar el acceso intuitivo al contenido. 7 . Diseño de interacción Desarrollo del flujo de las aplicaciones para facilitar las tareas del usuario, definiendo cómo el usuario interactúa con la funcionalidad del sitio.

Cuarta capa 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.

Quinta capa 9 . Diseño visual Look & feel Tratamiento gráfico de los elementos de la interfaz. Diseño emocional.

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

Utilidad Sistemas útiles aplicando el conocimiento del medio Deseabilidad A través del valor de la imagen, de la identidad, de la marca Valor Ofrecer valor para el usuario Credibilidad Generar confianza

Encontrabilidad Capacidad de un objeto de ser localizado: buscadores/SEO + mecanismos internos. Usabilidad La facilidad de uso es fundamental, pero es una faceta más. Accesibilidad Acceso universal a la web

Metodología /Proceso de trabajo

Investigación y Análisis En esta fase predomina el DESCUBRIMIENTO Descubrir Definir Testear Estudios demográficos (Eustat, INE, Objetivos y necesidades Entrevistas a usuarios Eurostat, otras fundaciones Estrategia de comunicación Encuestas privadas....) Públicos objetivos Grupos de discusión Estudio de objetivos y necesidades Personajes y escenarios Valores de marca Mapas mentales (para rediseños) Análisis de la competencia y los líderes Estudio de analítica web (google Técnicas de indagación analytics...) Entrevistas a usuarios Análisis de clicks (clicktale, clickheat...) Encuestas Revisión de experto Grupos de discusión Evaluación heurística Estudios etnográficos Test de usuarios

Investigación y Análisis > Descubrimiento 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ón encuestas, 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 Experiencias o Expectativas o Necesidades o Impresiones o Frustraciones o Actitudes o Grado de satisfacción o Contexto de uso

Investigación y Análisis > Definición Públicos objetivos

Investigación y Análisis > Definición

Concepto y diseño En esta fase predomina la DEFINICIÓN Descubrir Definir Testear Patrones de diseño de Diagramas de flujo Card Sorting (card sword, interacción Árboles de contenido optimal sort, web sort...) (designinginterfaces.com, Wireframes Test de usuarios (test de www.welie.com, Diseño de la información guerrilla rápidos...) designingwebinterfaces.com Prototipo (axure, visio, Análisis de clicks (clicktale, /explore ...) omnigraffle, pidoco, clickheat...) balsamiq, expressión blond + Predicción de atención visual sketchflow...) (attentionwizard.com) Diseño visual Testeos de reconocimiento y recuerdo (5 second test...)

Concepto y análisis > Descubrimiento

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 usuario Se 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 usuario Criterios excluyentes Trabajar en Marketing, Diseño, Desarrollo de webs, etc. Duración Alrededor 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 En esta fase predomina el TESTEO Descubrir Definir Testear Revisión de experto Prototipos de alta fidelidad Encuestas Evaluación heurística Entrevistas a usuarios Test de usuarios Testeos de optimizacion (A/B testing, Multivariate testing) Chequeo de calidad

Desarrollo e implementación > Descubrimiento Análisis heurístico 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 11 principios heurísticos. Los heurísticos son buenas prácticas que nacen como respuesta a los problemas más comunes de los usuarios.

Desarrollo e implementación > Testeo Testeos de optimización

Algunas buenas prácticas

1 Define tus objetivos y tenlos presente siempre . Comprueba que los objetivos están claros. Por ejemplo: •Notoriedad de marca •Comunicación corporativa •Aumentar ventas •Captación de clientes •Fidelización •Etc.

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

3. Define los públicos objetivo 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.

4. Planifica el proceso de diseño Cubre todas las fases, investigación y análisis, concepto y diseño, desarrollo e implementación. Cada proyecto requiere su propio plan.

5. Adáptate al usuario Adaptarse a su lenguaje, a sus conocimientos, a sus gustos, su sensibilidad Por ejemplo: • Utilizar metáforas y conceptos familiares

6. Comprueba que cada página cubre con su objetivo Si una página debe tener más de un objetivo se debe priorizar Por ejemplo:

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

7. Considera las emociones de los usuarios 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.

8. Sé consistente internamente y con los estándares Por ejemplo: • Los clientes de email son muy similares, porque siguen un estándar de facto

8 Ser consistente internamente y con los estándares

9. Es preferible reconocer algo que recordarlo El recuerdo se basa en una experiencia concreta el reconocimiento en un conjunto de experiencias. Por ejemplo:

8 En diseño es preferible reconocer que recordar

10. Dar facilidades a la interacción con el usuario sean cuales sean sus características Por ejemplo: CTRL + C Menú Principal Menú Contextual Teclado (botón derecho)

11. Evita todo lo que no sea necesario. Menos es más 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.

12. Más vale prevenir que…. 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.

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

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 followers y 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 Facebook Al 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.

Conclusiones 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.

¡Gracias! Hitz Karega: kareaga@gmail.com - @bocadorada Virginia Aguirre: Virginia.aguirre@gmail.com - @bubalie

Referencias • 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

Conversion thursday -_user_experience

by Overalia on May 21, 2010

Accessibility

Upload Details

Usage Rights

2 Embeds 48

Statistics

Conversion thursday -_user_experience — Presentation Transcript

http://www.analitica-web.com	35
http://www.slideshare.net	13