Esta nueva entrega del curso de Interacción Persona-Ordenador explica lo que es la medología de Diseño Centrado en el Usuario.
Y ello, lo hace explicando la metodología MPIu+a (acrónimo de Modelo de Proceso de la Ingeniería de la usabilidad y de la accesibilidad).
1. DISEÑO CENTRADO EN EL
USUARIO (DCU).
EL MODELO MPIu+a
Grau en Enginyeria Informàtica
Interacció Persona-Ordinador
Toni Granollers
El Curso de Interacción Persona-Ordenador ha sido realizado
por Toni Granollers bajo la licencia Creative Commons
Reconocimiento-NoComercial 4.0 Internacional License.
2. Usabilidad
• Los diseñadores y/o programadores de aplicaciones NO
PODEMOS DECIDIR POR LOS USUARIOS !!!
DISEÑO
CENTRADO en el
USUARIO
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 2 / 71
3. Metodología de Trabajo. Diseño
Centrado en el Usuario (DCU)
• Se invierte mucho
tiempos/energía/recursos
en la tecnología ...
y muy poco en las personas
que han de utilizarla (los usuarios)
Los diseñadores y/o
programadores de aplicaciones
NOPODEMOSDECIDIRPORLOSUSUARIOS!!!
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 3 / 71
4. Metodología de Trabajo.
Diseño Centrado en el Usuario
DC en la TECNOLOGÍA (DCT)
• Enfoque en la aplicación y el
desarrollo
• Todo gira en torno a la tecnología
• Se busca la manera más fácil de
implementar una solución
• Diseño basado en la modelización
• Sistemático, procesos bien definidos
• Diseño basado en metodologías de
Ingeniería del Software
• Revisión del uso a posteriori y
habitualmente revisado solo por
“tecnólogos”
DC en el USUARIO (DCU)
• Enfoque en los usuarios: en la
experiencia y el grado de satisfacción
del usuario
• Basado en la opinión del usuario
• Implicación substancial del usuario:
• Estudios de usuarios
• Diseño participativo
• Respuesta del usuario
• Pruebas con usuarios
• Se diseñan iterativamente distintos
prototipos
• Procesos muy variables e informales
• Diseño basado en la Ingeniería de
la Usabilidad
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 4 / 71
5. Estandarización del Diseño centrado en el
usuario
• marco teórico para el desarrollo de actividades centradas en
el usuario que puede ser adaptado a diversos ambientes de
desarrollo
• se concentra en el proceso de desarrollo de sistemas
interactivos
ISO 13407: Human-centred design
processes for interactive systems (1999)
http://www.iso.ch
Atención, implicar al usuario en el diseño no es
lo mismo que diseñar pensando en el usuario
!
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 5 / 71
6. • DCU permite producir un software que:
• Es más fácil de usar y entender lo que implica una
reducción de los costes de entrenamiento
• Mejora la calidad de vida de los usuarios ya que reduce el
estrés y además incrementa la satisfacción
• Incrementa significativamente la productividad y eficacia
operacional de los usuarios individuales y por lo tanto los de
la organización
• El proceso promueve comunicación entre desarrolladores
y usuarios. Esto permite que se identifiquen problemas en
un estado en el cual es aún barato y posible hacer cambios
DCU. Ventajas
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 6 / 71
7. DCU. Posibles problemas
• Es posible que se piense que DCU complica más el
trabajo
• incluir a más personas en el equipo de trabajo … usuarios y
stakeholders … que además, suelen sernos “ajenos”
• Los usuarios no siempre ven con buenos ojos el implantar un
nuevo orden de cosas ya que hay una inercia por conservar el
sistema que se pretende cambiar o implantar
• Hacer refinamientos iterativos toma tiempo y pude ser
percibido como una pérdida de tiempo
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 7 / 71
8. 1. Inclusión de los usuarios activamente
• La extensión de cuánto se han de involucrar los usuarios
depende en la naturaleza de las actividades de diseño
• Lo más efectivo es usar personas que tengan un
verdadero conocimiento y necesidad de trabajar o usar la
aplicación
• Esto también ayudará a la aceptación del producto final ya
que los usuarios finales se pueden sentir comprometidos.
• Los usuarios sentirán que el sistema fue diseñado
tomando en cuenta su opinión y no que ha sido
impuesto
DCU. Principios más importantes
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 8 / 71
9. 2. Iteración de soluciones potenciales
• Un diseño iterativo implica el seguimiento del feedback
de los usuarios. Es necesario incorporar
incrementalmente soluciones de diseño encontrada
• Las soluciones pueden ser presentada desde el uso de
esbozos, maquetas, o prototipos de gran fidelidad
ejecutados en computadoras
• El usuario debe tratar de realizar tareas reales (factibles)
usando el diseño que presenta soluciones potenciales y
su feedback debe ser usado para desarrollar (o
modificar) un nuevo diseño más adelante
DCU. Principios más importantes
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 9 / 71
10. DCU. Principios más importantes
3. Equipos de diseño
multidisciplinarios
• DCU es un proceso cooperativo en el cual hay que involucrar varias partes.
Cada una de las partes posee conocimientos y experiencias que ofrecer.
Diferentes perspectivas
• El grupo debe estar conformado por representes de todos los sectores que
serán afectados por el sistema
• Deben participar: gerentes, especialistas de usabilidad, personal
administrativo y de entrenamiento, ingenieros de software, representantes
para asegurar la calidad, y, claro, los usuarios finales del sistema (recordar:
implicados o stakeholders)
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 10 / 71
11. DCU. Actividades claves (ISO 13407:1999)
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 11 / 71
12. DCU
Actividades claves
1. Entender y especificar el contexto de uso
• Características relevantes de los usuarios
• Conocimientos, habilidades, experiencia, educación, entrenamiento, atributos físicos,
hábitos, capacidades motor-sensoriales.
• Identificar si hay grupos distintivos (ejemplo Expertos vs. Novatos)
• Conocer la tarea que se realiza
• Objetivos, frecuencia, y duración de la misma
• El ambiente en que el usuario usará el sistema
• Aspectos organizacionales (estructura del grupo, etc.), técnicos (hardware, red, etc.),
y físicos (temperatura, humedad, aspectos de salud y seguridad, etc.)
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 12 / 71
13. DCU
Actividades claves
2. Especificar los requisitos del usuario
• Identificar el personal y usuarios relevantes en el diseño
• Proveer una propuesta clara de los objetivos
• Establecer puntos de referencias con los cuales se pueda
comparar el diseño a probar
• Evidencias que los requerimientos han sido aceptados por sus
representantes
• Estar en conocimientos de requerimientos legales, por ejemplo
seguridad laboral
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 13 / 71
14. DCU
Actividades claves
3. Producir soluciones de diseño
• Crear maquetas simples al inicio
• La solución inicial pude ser basada en experiencias previas, estándares ya
reconocidos, o guías de estilo
• Lo más importante es simular la solución que presenta el diseño
• El realismo es un aspecto importante
• La creación de prototipos propicia la comunicación entre desarrolladores y usuarios
• Usar un prototipo sencillo permite probar más alternativas antes de empezar a
codificar
• Los cambios a realizar son oportunos y de posible realización
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 14 / 71
15. DCU
Actividades claves
4. Contrastar los diseños con los requisitos
• Crear un plan de evaluación
• Reportar los resultados de la evaluación y las recomendaciones de
cambio
• Iterar esta actividad hasta que el objetivo del diseño (y usabilidad)
sean logrados
• Llevar un seguimiento de los cambios, del mantenimiento, y de la
continuidad del producto
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 15 / 71
16. Ingeniería de la usabilidad
• Metodología que proporciona la manera de proceder
organizadamente para incluir la usabilidad en el
desarrollo de aplicaciones interactivas
1993 1999 2002 2003
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 16 / 71
17. Usability Engineering
[J. Nielsen, 1993]
Ingeniería de la Usabilidad
DUTCH Model
[Gerrit van der Veer, 1996]
Design web sites that work:
Usability for the Web
[T. Brink et. al., 2002]
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 17 / 71
18. MPIu+a
MPIu+a: Modelo de Proceso de la Ingeniería de la
usabilidad y accesibilidad
www.grihotools.udl.cat/mpiua
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 18 / 71
19. El modelo MPIu+a …
• es tecnológicamente independiente,
• es aplicable a todo tipo de proyectos, independientemente de su
clase y envergadura,
• se adapta a los diferentes modelos mentales de los integrantes de
los equipos multidisciplinares,
• es muy simple,
• sigue los principios del Diseño Centrado en el Usuario,
• fomenta el desarrollo de sistemas evolutivo: iterativo e incremental,
• integra la metodología y los formalismos necesarios de la Ingeniería
del Software con la de la Usabilidad, y la Accesibilidad cómo
componente fundamental de todo el proceso, y
• es consistente con los estándares de calidad relacionados.
www.grihotools.udl.cat/mpiua
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 19 / 71
21. MPIu+a. Características
• Simple y flexible
• Tres pilares
• Organización conceptual
• El usuario
• Iteratividad
• Adaptado para
equipos multidisciplinares
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 21 / 71
22. MPIu+a. Características
• Simple y flexible
• Tres pilares
• Organización conceptual
• El usuario
• Iteratividad
• Adaptado para
equipos multidisciplinares
1 2 3
Ingeniería
del Software
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 22 / 71
23. MPIu+a. Características
• Análisis Etnográfico
• Observación contextual
• Análisis de Implicados
(Stakeholders)
• Clasificar a los usuarios
• Perfiles de usuarios
• Roles
• Identificación de Objetos
• Plataforma (posibilidades y
restricciones)
• Objetivos
• Funcionales
• Usabilidad
• Accesibilidad
• Simple y flexible
• Tres pilares
• Organización conceptual
• El usuario
• Iteratividad
• Adaptado para
equipos multidisciplinares
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 23 / 71
24. MPIu+a. Características
“diseño contextual”
• Análisis de Tareas
• Modelo conceptual
• Modelos de diálogo
• Estilo
• Estándares generales
• Metáforas
• Colores
• Estándares particulares
• Diseño detallado
• Simple y flexible
• Tres pilares
• Organización conceptual
• El usuario
• Iteratividad
• Adaptado para
equipos multidisciplinares
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 24 / 71
25. La AI en las cosas cotidianas
¿Qué hace que esto ...
... sea diferente de esto?
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 25 / 71
26. Arquitectura de la Información (AI)
Peter Morville's Iceberg Diagram
• La información es una fuente de conocimiento. Pero, si no está
organizada, procesada y disponible para las personas en un formato que
les permita tomar decisiones, más que un beneficio es un estorbo.
Usuarios
Arquitectos
de la
Información
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 26 / 71
27. Arquitectura de la Información
Modelos organización de contenidos
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 27 / 71
28. Arquitectura de la Información
Modelos organización de contenidos
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 28 / 71
29. Flat vs. Deep Website Hierarchies
• Information can be organized in either flat or deep hierarchies; both have
their advantages and pitfalls.
• Although website visitors never see this type of visualization, the shape
of the hierarchy has a huge impact on the end user's experience:
• Content is more discoverable when it's not buried under multiple intervening layers
BUT deep hierarchies are more difficult to use.
http://www.nngroup.com/articles/flat-vs-deep-hierarchy
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 29 / 71
35. Radio Buttons - Mutually Exclusive Choices
Floppy Disk - Save
Manila Folder
http://www.hanselman.com/blog/TheFlopp
yDiskMeansSaveAnd14OtherOldPeopleIc
onsThatDontMakeSenseAnymore.aspx
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 35 / 71
36. 9 Rules to Make Your Icons Clear and
Intuitive
1. Always Label Your Icons, Unless Space is Limited
2. Always Represent Both the Icon Action and Object
3. Always Group Similar Icons Together
4. Always Keep the Icon Order and Placement Consistent
5. Always Give Your Icons a Common Visual Motif
6. Avoid Using Icons for Abstract Actions
7. Avoid Using Icon Images That are Too Metaphoric
8. Avoid Giving Your Icons Too Much Specific Detail
9. Avoid Using 3D Perspectives and Heavy Drop Shadows on Small Icons
http://uxmovement.com/buttons/9-rules-to-make-your-icons-clear-and-intuitive
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 36 / 71
40. MPIu+a. Características
Implementación
• Entregables
• Producto de software
• Tests unitarios
• Resultados de los tests unitarios
• Test de integración para
funcionalidades
• Resultados del test de integración
para funcionalidades
• Casos de test a nivel de sistema
• Resultados
• Producto de software (CCC)
• Tests unitarios y resultados
• Test de integración para
funcionalidades y resultados
• Documentación del producto
• Descripción de los casos de test a
nivel de sistema (CCC)
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 40 / 71
41. MPIu+a. Características
Implementación
• WEB:
• Escribir para la web
• El texto se ha de redactar de
tal manera que soporte las
tareas y los objetivos del
usuario y se adapta a la
audiencia prevista
• HTML, CSS, JQuery, PHP,
…
• Colores de los vínculos
• Posible problema de
inconsistencia
• MARCOS NO
• rompen el modelo unificado
de la web
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 41 / 71
42. MPIu+a. Características
Lanzamiento
• Test de Sistema
• objetivo: Realiza una
batería de pruebas
completa del sistema para
tener información fiable de
que el software cumple los
requerimientos de
prestaciones y funcionales
pedidos
• Despliegue
• objetivo: Comprobar que el
producto final refleja
perfectamente el producto
base
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 42 / 71
43. MPIu+a. Características
Lanzamiento
• Test de Sistema
• Entregables
• Resultados del test del
sistema
• Informe del test del sistema
• Documento de diseño del
software actualizado
• Producto
• Resultados
• Esta fase se cumple cuando
el producto de software ha
pasado todos los casos de
test del sistema y el
documento de diseño de
software es actualizado
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 43 / 71
44. MPIu+a. Características
Lanzamiento
• Despliegue
• Entregables
• La salida de esta fase es el
producto preparado para
entregar al cliente
• Resultados
• La fase está completada al
entregar el producto
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 44 / 71
45. MPIu+a. Características
• Simple y flexible
• Tres pilares
• Organización conceptual
• El usuario
• Iteratividad
• Adaptado para
equipos multidisciplinares
“prototipado contextual”
• Bocetos o esbozos
• Storyboards
• Prototipos de Papel
• Maquetas
• Maquetas digitales
• Storyboard Navegacional
• Vídeos
• Escenarios
• Lenguaje natural
• Storyboards
• Vídeos
• Casos de Uso UML
• Prototipos software
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 45 / 71
55. MPIu+a. Características
• Simple y flexible
• Tres pilares
• Organización conceptual
• El usuario
• Iteratividad
• Adaptado para
equipos multidisciplinares
•Inspección
• Heuristica
• Recorrido Cognitivo
• Recorrido de Usabilidad Plural
• Recorrido Cognitivo con
Usuarios
• Estándares
•Indagación
• Observación de Campo
• Grupo de Discusión Dirigido
(Focus Group)
• Entrevistas
• Cuestionarios
• Grabación del Uso (logging)
•Test
• Medida de Prestaciones
• Pensando en Voz Alta (Thinking
Aloud)
• Interacción Constructiva
• Test Retrospectivo
• Método del Conductor
• Ordenación de Tarjetas (card
sorting)
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 55 / 71
56. Proyecto: WEB de Els Infants de la Paeria de Lleida evaluador:
4. Control y libertad para el usuario
Sub heurísticos
Impacto Frecuencia Persistencia
a) Es posible deshacer una acción siempre que sea una operación funcional y
operativa. 3 MEDIA
b) En caso de un proceso de diversos pasos, es posible volver a pasos anteriores
del proceso para modificarlos. 3 MEDIA
c) Existe una salida de la página, del proceso o de la estructura de información
mediante acciones tipo "Desconectar" o "Cancelar". 1
d) Se inician de manera automática acciones que el usuario no ha solicitado
explícitamente. 0
e) Se utilizan animaciones no controladas por el usuario. 1
f) El scroll no ocupa más de dos pantallas. 0
g) Es posible guardar información. 1
h) Es posible imprimir la información sin perder información.
i) Existe un vínculo que permite volver al inicio de la aplicación. 0
j) Es posible aumentar y disminuir el tamaño de la letra. 1 ALTA
k) El sistema se visualiza perfectamente utilizando diferentes resoluciones de
pantalla. 0
l) La interfaz no introduce tecnologías que requieren versiones actualizadas de
elementos externos (navegadores, plugs-ins, DLL's,…). 1
notas del evaluador:
a) cuando pulsas en la opción de enviar no hay la posibilidad de cancelar. Lo envia y ja está.
b) cuando pulsas en la opción de enviar no hay la posibilidad de cancelar. Lo envia y ja está.
c)
d)
e) si, en el banner informativo
f)
g)
h) cuando he impreso toda la banda inferior se ha girado!!
i)
j)
k)
l) Si necesita el plug-in del Macromedia Flash, pero es muy habitual.
Los usuarios eligen a veces funciones del sistema por error y necesitan a menudo una salida de emergencia
claramente marcada, esto es, salir del estado indeseado sin tener que pasar por un diálogo extendido. Es
importante disponer de deshacer y rehacer
Marta Gonzalez
Evaluando ….
Thinking Aloud
Heurística
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 56 / 71
61. Test de Usabilidad
• Proceso que permite aprender de los usuarios el grado
de usabilidad de un sistema informático observandolos
mientras lo utilizan.
BBC News - How Google fine tunes its search engine
http://news.bbc.co.uk/2/hi/programmes/click_online/9751991.stm
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 61 / 71
62. MPIu+a. Características
• Simple y flexible
• Tres pilares
• Organización conceptual
• El usuario
• Iteratividad
• Adaptado para
equipos multidisciplinares
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 62 / 71
63. MPIu+a. Características
• Simple y flexible
• Tres pilares
• Organización conceptual
• El usuario
• Iteratividad
• Adaptado para
equipos multidisciplinares
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 63 / 71
68. UCD example
• Discovery Results
• Understanding of the business goals
and requirements
• Definition of the user personas and
profiles
• Description of the context of use of the
functionality required
• Understanding of the user's goals
• Understanding of the user's workflow
and task flows
• Steps:
• Stakeholder interviews
• Creation of user personas and profiles
• Setting goals and task flows
• Establishing business and user
requirements
http://www.oracle.com/webfolder/ux/applications/uxd/design.html
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 68 / 71
69. UCD example
Steps for Design
1.Concept Design
2.Wireframes
3.Design Specification
4.Visual Design
5.Validation
http://www.oracle.com/webfolder/ux/applications/uxd/design.html
• Detailed UI wireframes
• User validation
• Specifications
• Choose users/tasks/workflows to
validate
• Recruit test subjects (users)
• Write test script
• Conduct tests
• Analyze results
• Document design recommendations
• Modify designs based on feedback
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 69 / 71
70. The central premise of UCD is that the
best designed products and services
result from UNDERSTANDING the
needs of the people who will use them
http://visual.ly/user-centred-design
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 70 / 71
71. Bibliografia
• Lorés,J. Introducción a la Interacción Persona-Ordenador. AIPO (2002)
• Brinck, Tom (2002). Usability for the Web. Morgan-Kaufman
• Powell,, Thomas (1998). Web Site Engineering. Prentice Hall.
• Nielsen, J : Usabilidad diseños de sitios WEB. Prentice Hall, 2000.
• Krug, S., No me hagas pensar (2001)
• Granollers, T. (2004). MPIu+a. Una metodología que integra la Ingeniería del Software,
la Interacción Persona-Ordenador y la Accesibilidad en el contexto de equipos de
desarrollo multidisciplinares. Universitat de Lleida, juliol 2004.
http://jjg.net/elements
www.grihohcitools.udl.cat/mpiua
Diseño Centrado en el Usuario. MPIu+a - GEInformàtica, IPO 71 / 71