Post on 13-Jun-2015
description
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