Diseño de experiencia de usuario: teoría, historia y métodos.

1. Diseño de experiencia
de usuario
Teoría, Historia y Método
Rodrigo Ronda León [rronda@infomed.sld.cu]
Mayo 2011

2. Diseñar antes de Construir
Ahorra tiempo, recursos y
nos aleja de errores

3. SOFTWARE
proceso de creación

4. Experiencia de Usuario
User Experience (UX)
Diseño de Experiencia de Usuario
User Experience Design (UXD)

5. Experiencia de Usuario
“La percepción y respuesta de una
persona como resultado de las expectativas
ante o el uso de un producto, sistema o
servicio”
“Emociones de usuarios, sus creencias,
preferencias, percepciones, respuestas
físicas y psíquicas, comportamientos y
logros obtenidos antes, durante y al
finalizar el uso.”
ISO FDIS 9241-210:2009. Ergonomics of human system interaction
-Part 210: Human-centred design for interactive systems
-(formerly known as 13407).

6. Experiencia de Usuario
El término fue dado a conocer
por Donald Norman alrededor
de 1995 por un artículo
titulado:
“User Experience Architect, in the mid-1990s”*
Norman es uno de los pioneros del HCI en los años
80 y autor del famoso libro “El diseño de las cosas
cotidianas” The Design of Everyday Things, Basic Books
(September 17, 2002)
* Donald Norman, Jim Miller, Austin Henderson: What You See, Some of What's in the
Future, And How We Go About Doing It: HI at Apple Computer. Proceedings of CHI 1995,
Denver, Colorado, USA

7. Experiencia de Usuario
Deviene de varios fenómenos:
 Ergonomía y Human Factor
 HCI (Interacción Humano-Computadora)
 Diseño Centrado en Usuario (User-
Centered Design)
 Usabilidad
 Accesibilidad

8. Diseño de Experiencia de Usuario
Sub-campo o rama de la Experiencia
de Usuario.
Aspecto relacionado con el proceso de
creación de un software basándose en
los indicadores que influyen en las
experiencias que tiene el usuario cuando
interactúa con “algo”.

9. Diseño de Experiencia de Usuario
Término sombrilla que agrupa a varios procesos
de diseño; integra varias disciplinas y toma de
diferentes ciencias.
Por ejemplo algunos procesos:
• Arquitectura de Información
• Diseño de Interacción
• Diseño de información
Por ejemplo algunas ciencias:
• Psicología cognitiva
• Ciencias de la Información
• Ciencias de la Comunicación
• Matemáticas

10. Historia del énfasis en las tecnologías
Juan Francisco Reyes
http://www.xentido.com/2010/08/¿diseno-de-experiencia-de-usuario-o-diseno-centrado-en-el-usuario/

11. Jesse James Garret (2000) traducido por Javier Velasco
Los elementos del UX

12. Niveles de necesidad
Nivel 1. Funcionalidad. El producto cumple con una
finalidad o función, soluciona un problema.
Nivel 2. Usabilidad. El producto es fácil, cómodo y
seguro de usar. Es eficiente
Nivel 3. Placer. Cuando un producto ya es fácil de usar,
la siguiente necesidad del consumidor o usuario es que el
producto le proporcione algo más, no sólo beneficios
funcionales sino también emocionales. El producto es
deseable.
JORDAN P. W. (2000) “Designing pleasurable products.
An introduction to the new human factors. Taylor and Francis”.
London.

13. Diseño como proceso comunicativo

14. Tres círculos de la AI
Peter Morville

15. Panal de la Experiencia
de Usuario Peter Morville

16. Simplicidad como principio de diseño
Interfaces sencillas, donde no haya nada superfluo.

17. Ponerse en la posición del usuario
Los mejores diseñadores son los
que son capaces de sufrir como
usuarios los errores de diseño.
“No se puede experimentar la
experiencia hasta que lo
experimente”
Bill Moggridge, IDEO

18. Concepto
¿Qué es UXD?
Un enfoque o una filosofía de diseño.
¿De qué se trata?
De diseñar a partir del estudio de los aspectos
que influyen y determinan la experiencia que
tienen los usuarios con estos sistemas.
¿Cómo se hace?
Interactuando con los usuarios, investigándolos,
estudiando el contexto de uso, modelando,
representando, prototipando, etc.

19. Concepto
¿Utilidad?
Minimiza errores, aumenta la posibilidad del
logro del producto, facilita el proceso de
creación del producto y satisface al usuario
final.
¿Dónde se hace?
Diseño de software (en el caso de este curso).
Aplicaciones para Web, Desktop, Móvil, etc.

20. Disciplina
90 % práctica - 10 % teórica
Se aprende haciendo
“Removing testicles is the way to learn to castrate”

21. Nuestro lema es…
“Depende”
(it depends)
No existe nada absoluto en el diseño
de software, las cosas pueden
cambiar según el contexto, los
contenidos y los usuarios.

22. Criterio….
“La experiencia está más basada en
la memoria que en la realidad.
Si lo que recuerdas del producto es
maravilloso, serás capaz de perdonar
cualquier situación problemática.”
Donald Norman

23. METODOLOGÍA
¿Cómo hacer diseño enfocado
en la experiencia del usuario?

24. PROCESO
 Etapas. Responden al tiempo
transcurrido ¿cuándo?
 Actividades o tareas. Responden al
proceso ¿qué?
 Técnicas. Responden a lo que se hace
para lograr los procesos y tarea
¿cómo?
 Herramientas. Responden a qué se
usa para aplicar las técnicas ¿con qué?

25. PROCESO

26. 1
 INVESTIGACIÓN (obtener toda la
información posible del proyecto,
usuarios y producto a diseñar)
 ORGANIZACIÓN (proceso cognitivo
de procesar toda la información para
convertirla en un producto)
 DISEÑO (propuesta del diseño del
producto a partir de lo organizado)
 PRUEBA (comprobación del diseño
del producto propuesto)
2
3
4
ETAPAS

27. PROCESO

28. ETAPA 1 INVESTIGACIÓN
• Información relacionada con el
proyecto
– Necesidades generales
– Temática del producto
– Objetivos del producto
– Intensión comunicativa del producto (Informar,
entretener, alertar)
– Tipología
– Definición general de los usuarios /contexto
/contenido

29. ETAPA 1 INVESTIGACIÓN
• Estudio de Usuarios (receptores)
– Caracterización (tipología, roles, etc.)
• Perfil de usuarios
– Necesidades (de información, formación, etc.)
– Escenarios
– Tareas de usuarios

30. ETAPA 1 INVESTIGACIÓN
• Estudio del contexto.
– Características del contexto de uso
(culturales, políticas, económicas, sociales y
tecnológicas)
– Definición del modelo de negocio.
– DAFO (FODA)
– Banco de problemas
– Flujograma de procesos y actividades
– Escenarios
– Estudio de mercado, productos similares, etc.
EN CASO DE REDISEÑO DE UN PRODUCTO
– Análisis de uso (Ejemplo: Logs, Google Analytic)
– Evaluación al producto anterior

31. ETAPA 1 INVESTIGACIÓN
• Estudio de los contenidos.
– Inventario de recursos
– Mapas de conceptos
– Mapa de contenido
• Estrategia de trabajo, Análisis de
recursos de trabajo, Planificación del
tiempo de trabajo, etc.
Artefactos generados en esta etapa:
Informes y Diagramas

32. ETAPA 2 ORGANIZACIÓN
• Representación de todas las estructuras posibles
de los contenidos, en correspondencia a las
necesidades de usuarios y su contexto.
• Definición de todas las formas de jerarquizar los
contenidos.
• Hacer corresponder las estructuras planteadas a
las necesidades tanto de emisores (clientes)
como de receptores (usuarios).
Artefactos generados en esta etapa:
Diagramas manuscritos y digitales
[ARTE]

33. ETAPA 3 DISEÑO
• Definición de la estructura del producto (diagrama de
organización) (blueprint)(taxonomía)
• Definición del funcionamiento de estas pantallas.
(diagrama de funcionamiento) (flow)
• Definición de las pantallas del producto. (diagrama de
presentación) (wireframe)
• Definición de las etiquetas del producto.
• Definición de los servicios que ofrecerá el producto
digital.
• Creación de prototipos de bajo y alto nivel
Artefactos generados en esta etapa:
Diagramas digitales y prototipos, informes del
producto

34. ETAPA 4 PRUEBA
• Pruebas de prototipos
• Revisión de diagramas
 Técnicas para hacer los test
– Crítica de diseño (con usuarios y expertos)
– Test de usuarios (con usuarios potenciales
finales)
– Test heurísticos (con expertos)
– Cardsorting (aplicación a otra muestra de
usuarios)
Artefactos generados en esta etapa:
Modificaciones a los de la etapa de diseño

35. Técnicas
• Las técnicas se usan según la necesidad
dentro del proceso.
• No están obligatoriamente relacionadas
con las actividades ni las etapas.
• Se pueden usar en cualquier momento.
• Se pueden mezclar entre sí
– Cardsorting a expertos
– Tormenta de ideas con un Diseño Participativo.
– Encuesta con Análisis de frecuencia de textos.

36. Técnicas básicas
• Reunión
• Entrevista y Encuesta
• Observación
• Revisión bibliográfica
• Consulta a experto
• Representación y mapeo

37. Técnicas (principalmente para la búsqueda
de información)
• Tormenta de ideas. (brainstorming)
(focusgroup)
• Crítica de diseño.
• Diseño participativo.
• Tormenta de necesidades.
• Escenarios.
• Benchmarking. (comparación)(análisis de
homólogos)
• Análisis de frecuencia de texto.

38. Técnicas (principalmente para la
organización)
• Organización de tarjetas
(cardsorting)
– Agrupación
–Secuencia
–Posición de bloques
• Tabulación de contenidos.
• Diagramas de afinidad.
• Validación de términos.

39. Técnicas (principalmente para el
funcionamiento)
• Análisis de tareas (task analisys).
• Flujogramas.
• Caminara cognitiva (cognitive
walkthrough)

40. Técnicas (principalmente para el
diseño)
• Diagramación en papel (paper prototype)
• Diagramación del producto:
– Diagrama de organización (blueprint)
– Diagrama de funcionamiento (flow)
– Diagrama de presentación (wireframe)
• Etiquetado
• Prototipado digital