El documento aborda la evolución de la experiencia de usuario en el contexto actual de la web 2.0, donde la interacción y la colaboración se han vuelto esenciales. Se enfatiza la importancia de crear experiencias digitales positivas para aumentar el engagement con los consumidores, centrándose en elementos como el diseño, la usabilidad y la accesibilidad. Además, se discuten metodologías de investigación y análisis para mejorar la usabilidad y la satisfacción del usuario en entornos online.

1. Experiencia de usuario
Sponsoriza: Colabora:

2. Antes de hablar de
experiencia de usuario…

3. Hagamos un breve repaso a la
situación actual…

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

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

6. La evolución de Internet y de la
tecnología han cambiado la forma en
que trabajamos, vivimos,
aprendemos, nos divertimos…

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

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

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

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

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

14. ¡Estamos ante un nuevo
escenario!
¡Con nuevas formas de
comunicarnos, relacionarnos,
experimentar y compartir!

15. ¡Ahora más que nunca lo que
importa son las personas!
Centrar nuestro enfoque en ellas

16. Y debemos…

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

18. ¡En este contexto la
experiencia de usuario cobra
una nueva dimensión!

20. Las personas somos clientes,
consumidores y usuarios.
Y cómo tal, tenemos experiencias
con las marcas, sus productos y
sus servicios.

21. Designforusers
Kris Colvin

22. ¿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.

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

24. Centrémonos en la experiencia de
usuario online

25. ¿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.

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

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

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

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

30. 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”

32. ¡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.

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

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

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

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

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

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

39. Las facetas de la experiencia de
usuario - Peter Morville

40. Las facetas de la experiencia de
usuario - Peter Morville
• Semantic Studios
• Autor “Information architecture”.
• Acuñador término “Findability”

41. Las facetas de la experiencia de usuario
Peter Morville

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

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

44. Metodología /Proceso de trabajo

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

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

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

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

51. Investigación y Análisis > Definición

52. Investigación y Análisis > Definición

53. 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...)

54. Concepto y análisis > Descubrimiento

55. Concepto y análisis > Definición

56. Concepto y análisis > Definición

57. Concepto y análisis > Definición

58. 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).

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

60. 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)

61. Concepto y análisis > Testeo
Análisis de clicks

62. Concepto y análisis > Testeo
Predicción de
atención visual

63. Concepto y análisis > Testeo
Reconocimiento y recuerdo

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

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

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

67. Algunas buenas prácticas

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

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

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

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

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

73. 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:

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

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

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

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

78. 8 Ser consistente internamente y con los estándares

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

80. 8 En diseño es preferible reconocer que recordar

81. 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)

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

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

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

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

86. 13 Ofrecer salidas de emergencia a los usuarios que se equivocan

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

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

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

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

91. 16 Adaptar la ayuda a los usuarios

92. Ejemplo PRIVALIA

93. 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).

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

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

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

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

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

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

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

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

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

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