Espontaneidad de las reacciones y procesos espontáneos
DCU. Metodología MPIu+a
1. Diseño Centrado en el Usuario
Metodología MPIu+a
Dr. Toni Granollers
Presentación realizada 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 !!!
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 2/64
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 NO PODEMOS
DECIDIR POR LOS USUARIOS !!!
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 3/64
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
DCU. Metodología MPIu+a [T. Granollers - UTP Panamá, Agosto 2017] 4/64
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
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
DCU. Metodología MPIu+a [T. Granollers - UTP Panamá, Agosto 2017] 5/64
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
Ventajas
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 6/64
7. 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
puede ser percibido como una pérdida de tiempo
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 7/64
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
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
La BASE: 3 principios
DCU. Metodología MPIu+a [T. Granollers - UTP Panamá, Agosto 2017] 8/64
9. 2. Iteración de soluciones potenciales
– Un diseño iterativo implica el seguimiento del feedback de
usuarios. Es necesario incorporar incrementalmente
soluciones de diseño encontrada
– Las soluciones pueden ser presentada desde el uso de
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
La BASE: 3 principios
DCU. Metodología MPIu+a [T. Granollers - UTP Panamá, Agosto 2017] 9/64
10. La BASE: 3 principios
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, por los implicados o
stakeholders
• gerentes, especialistas de usabilidad, personal administrativo y de
entrenamiento, ingenieros de software, representantes para asegurar la
calidad, y, claro, los usuarios finales
DCU. Metodología MPIu+a [T. Granollers - UTP Panamá, Agosto 2017] 10/64
12. Actividades clave
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.)
DCU. Metodología MPIu+a [T. Granollers - UTP Panamá, Agosto 2017] 12/64
13. Actividades clave
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
por sus representantes
– Estar en conocimientos de requerimientos legales,
por ejemplo seguridad laboral
DCU. Metodología MPIu+a [T. Granollers - UTP Panamá, Agosto 2017] 13/64
14. Actividades clave
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
DCU. Metodología MPIu+a [T. Granollers - UTP Panamá, Agosto 2017] 14/64
15. Actividades clave
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
DCU. Metodología MPIu+a [T. Granollers - UTP Panamá, Agosto 2017] 15/64
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
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 16/64
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]
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 17/64
18. MPIu+a: Modelo de Proceso de la Ingeniería de la
usabilidad y accesibilidad
www.grihotools.udl.cat/mpiua
MPIu+a
[Granollers, 2004]
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 18/64
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.
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 19/64
20. MPIu+a: Modelo de Proceso de la Ingeniería de la
usabilidad y accesibilidad
http://www.grihotools.udl.cat/mpiua
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 20/64
27. 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)
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 28/64
28. 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
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 29/64
29. 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
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 30/64
30. 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
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 31/64
31. 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
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 32/64
32. Prototipo de papel. Uso.
Nielsen Norman Group Training Video:
Paper Prototyping: A How-To Training Video
http://www.nngroup.com/reports/prototyping
http://www.grihotools.udl.cat/mpiua/recursos
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 33/64
33. Mapa (o storyboard) navegacional
also WHITEBOARDING
http://www.grihotools.udl.cat/mpiua/mapastoryboard-navegacional-whiteboarding
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 34/64
34. Mapa (o storyboard) navegacional
also WHITEBOARDING
http://www.grihotools.udl.cat/mpiua/mapastoryboard-navegacional-whiteboarding
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 35/64
36. En mi caso, utilizo una tableta
(wacom) para operar los distintos
softwares por comodidad y
precisión, y apenas la uso para
dibujar. Pero sin duda, a la hora
de hacer los primeros bocetos de
cualquier proyecto, nada mejor
que el papel. Personalmente, el
hecho de abandonar la pantalla
por unos momentos, estimula
mucho más el flujo de ideas y me
siento menos cohibido a la hora
de equivocarme. En definitiva, de
eso se trata. Equivocarse mucho
al principio para después valorar,
comparar y encarrilar el buen
camino.
Mucha gente es incapaz de ponerse en situación con los prototipados. Ellos
esperan ver un diseño acabado. Creo que ese es el motivo de por qué en
muchos proyectos hay que empezar aportando prototipos que en realidad
son propuestas de diseño. He visto esto en muchas ocasiones y siempre me
ha sorprendido ver como la reunión de presentación derivaba en
comentarios sobre gustos de colores, y demás ... sin dedicar ni un minuto a
cuestiones de funcionalidad y usabilidad.
Luego, claro está, aparecían los problemas.
En mi experiencia personal los prototipos de baja fidelidad
me ayudaron mucho en la comunicación y la colaboración
entres las diferentes personas del mismo equipo y
también de otros equipos como lo de IT (casi siempre un
equipo complicado en la comunicación). Con estos prototipos
conseguí hacer partícipe estas personas en una fase muy
temprana del proyecto, añadiendo los contrastes en una fase
posterior y viendo disminuir los cambios en la fase final.
Marzo 2015
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 37/64
37. Prototipo de software. Ejemplo
Incidencias urbanas (IPO 12-13)
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 38/64
39. Prototipado Iteratividad y Evolutivo
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 40/64
40. 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)
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 41/64
41. 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
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 42/64
45. Miércoles 21 de junio
examen de
recuperación IPO
Lunes 5 de junio
examen IPO
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 47/64
46. 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
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 48/64
48. Evaluación con usuarios
mediante Morae
Type of test
Éxito de la
tarea
Encontrar un televisor LCD con la garantía más larga
en el tiempo
5 de 14 (35%) participantes NO FINALIZARON la tarea
Video: El procedimiento de comparación no es claro
1.Buscar todos los
televisores LCD
2.Seleccionar
2 TV a comparar
3.Escoger la opción
“Comparar productos
seleccionados”
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 50/64
49. ?
• Dónde mira el usuario ??
Eye Tracking
Eye Tracking Evaluation:
https://www.youtube.com/watch?v
=s-273rCl-yk
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 51/64
50. no se dan cuenta de
las gesticulaciones
que representan un
comportamiento
humano de la Berta
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 52/64
51. It was surprising that, only
33 % of participants
properly performed first
task. As we analysed the
heat map, it looks that
participants didn’t see link
to registration. The reason
is that the link is small and
its colour is not contrasting
with background colour.
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 53/64
52. Remote Usability testing
Remote usability
testing allows you
to get customer
insights when
travel budgets are
small, timeframes
are tight, or test
participants are
hard to find
http://www.nngroup.com/arti
cles/remote-usability-tests
http://gazept.com
http://www.userzoom.es
https://www.youtub
e.com/watch?v=LRH
PJmx7yKA
https://www.youtu
be.com/watch?v=t
M2tlAi-0lw
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 54/64
53. MPIu+a. Características
• Simple y flexible
• Tres pilares
• Organización conceptual
• El usuario
• Iteratividad
• Adaptado para
equipos multidisciplinares
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 55/64
54. MPIu+a. Características
• Simple y flexible
• Tres pilares
• Organización conceptual
• El usuario
• Iteratividad
• Adaptado para
equipos multidisciplinares
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 56/64
58. UCD example
• Discovery Results
– Understanding of the business
goals and requirements
– Definition of the user personas
profiles
– Description of the context of use
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
DCU. Metodología MPIu+a [T. Granollers - UTP Panamá, Agosto 2017] 60/64
59. 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
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 61/64
60. What activities are you involved in
during the UX process?
Prototyping
is one of the
most
common UX
activities
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 62/64
61. 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
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 63/64
62. Gracias por su
atención !!!
Toni Granollers
Escola Politècnica Superior
Universitat de Lleida (UdL)
C/ Jaume II, 69
25001 – Lleida (Catalonia)
(+34) 973 702750
antoni.granollers@udl.cat
@DCU_MPIUA
slideshare.net/DCU_MPIUA
@
DCU. Metodología MPIu+a [T.Granollers - UTP Panamá, Agosto 2017] 64/64