Upload
miguel-gea
View
1.444
Download
2
Embed Size (px)
DESCRIPTION
Diseño Centrado en el usuario tercer tema de la asignatura Diseño de Interfaces de Usuario Grado de Ingeniería Informática. Universidad de Granada
Citation preview
Diseño de Interfaces de Usuario
Miguel Gea ([email protected])Dpt. Lenguajes y Sistemas InformáticossGrado en Ingeniería InformáticaUniversidad de Granadahttp://utopolis.ugr.es/diu
edición 2013
http://www.slideshare.net/mgea/tema-3-diseo-centrado-usuario-2013
Tema 3. Diseño centrado en el Usuario
IntroducciónMetodología de diseño Diseño centrado en el usuario Modelado de usuarioEscenarios Tareas Prototipado
Introducción al DCUTema 3. Diseño Centrado en el usuario
“The old computing was about what computer could do; the new computing is about what users can do. Successful technologies are those that in harmony with user's needs”
Leonardo’s Laptop: Human needs and the new computing technology
http://mitpress.mit.edu/main/feature/leonardoslaptop/index.html
Recibe en 2003 el premio IEEE-USA Award for Distinguished Contributions Furthering Public Understanding of the Profession
(explicar aspectos de ingeniería al público en general)
Ben ShneidermanUniv. Marylandhttp://www.cs.umd.edu/hcil/
Introducción al DCU: ParticipantesTema 3. Diseño Centrado en el usuario
HCI
Diseñador
Usuario Computadora
Referencia: H. Thimbleby: “The User Interface Design”. Addison-Weley 1990
Introducción al DCUTema 3. Diseño Centrado en el usuario
Es el proceso de diseñar un producto teniendo en cuenta las necesidades concretas del usuario que lo vaya a usar, con el objeto de obtener la mayor satisfacción y experiencia de uso...
..basado en el conocimiento del dominio del trabajo y el papel que las personas desempeñan cuando interactúan con las computadoras
Conocer al Usuario
Diseño Participativo
Análisis etnográfico
D.C.U.
Referencias: - Usability Profesional Association, http://www.usabilityprofessionals.org/.Nosolousabilidad - http://www.nosolousabilidad.com/articulos/dcu.htm
Introducción al DCU: aproximaciónTema 3. Diseño Centrado en el usuario
Ingeniería Software
DCU
Software Usuario
Modelos Proceso Iterativo
Flujo Información Tareas
Software Correcto Usabilidad
Centrado
Interés
Objetivo
Modelo
Metodología de diseñoTema 3. Diseño Centrado en el usuario
Objetivo:
Dominio Sistema
Dominio Trabajo
Conocer al usuario y las actividades que realiza
Modelado de usuarios Peculiaridades (habilidades y conocimiento) Funciones a desempeñar
EscenarioEntorno físico (objetos)Entorno social (reglas, protocolos)
Prototipado
Análisis tareasObjetivos a conseguirModo de obtenerlos
Metodología Centrada en UsuarioTema 3. Diseño Centrado en el usuario
Escenarios: Visión basada en la actividad humana
Descripción que consta de: Usuarios usando artefactos para lograr un objetivo bajo unas determinadas circunstancias en un intervalo de tiempo
El escenario describe esos componentes como historias (John M. Carroll)
Metodología Centrada en UsuarioTema 3. Diseño Centrado en el usuario
Modelado de usuario: análisis info. sobre el usuario
a) Conocimiento que posee ordenadores/ sistema /
aplicación de las tareas del trabajo culturales (formación, idioma, etc.)
b) Trabajo que realiza Tipo de actividad Frecuencia de Uso Modo de Aprendizaje Importancia
c) Características personales psicológicas (motivación, estrés, actitud..) físicas (edad, sexo, discapacidad…)
Metodología Centrada en UsuarioTema 3. Diseño Centrado en el usuario
Análisis de tareas: unidad significativa de trabajo en la
actividad de una persona.
Definición: Es el “estudio de lo que un usuario tiene que realizar
en términos de acciones y/o procesos para conseguir un
objetivo”
a) Qué quiere realizar el usuario? b) Qué información es requerida? c) Qué acciones debe llevar a cabo?
Metodología Centrada en UsuarioTema 3. Diseño Centrado en el usuario
Prototipado: Es una representación limitada de un diseño que
permite a los usuarios explorar sus posibilidades (desde las
primeras fases)
Objetivos:
a) Organización preliminar del diseño b) Identificar preferencias de usuario c) Analizar diferentes alternativas d) Detectar problemas en fases tempranas e) Estudio de usabilidad
Tema 3. Diseño Centrado en el usuario
Modelo proceso de Diseño Centrado en Usuario
Referencia: The Usability engineering lifecycle. D. Mayhewhttp://twobenches.files.wordpress.com/2008/06/47-01.jpg
Referencia: Modelo de Proceso de la Ingeniería de la usabilidad y de la accesibilidad. MPIu+a. T: Granollershttp://www.grihohcitools.udl.cat/mpiua/index.html
Modelo proceso de Diseño Centrado en Usuario Tema 3. Diseño Centrado en el usuario
Conocer: Usuarios y sus
tareas
Descripción de usuarios y tareas
Diseño
participativo
Escenarios
Etnografía
DescripciónTareas
Evaluartareas
Psicología cognitiva
Diseño conceptual y
Metaforas
Prototipos de boceto
Recorridos escenario de
tareas
Diseño
Refinado
Diseño gráfico
Interfaces y guías
Guías de estilo
Prototipos alta fidelidad
Pruebas usabilidad
Evaluación Heurística
Diseño completo
Pruebas
en campo
Prototipos desechables
Prototipos evaluable
Sistema preliminar
Referencia: S. Greenberg: “interface design / usability engineering process”. http://pages.cpsc.ucalgary.ca/~saul/481/process_diagram.html
Modelo proceso de Diseño Centrado en Usuario Tema 3. Diseño Centrado en el usuario
Conocer: Usuarios y sus
tareas
Descrípción de usuarios y tareas
Ob
jeti
vos:
Mét
od
os:
Pro
du
cto
:
Evaluartareas
1Análisis etnográfico
Escenarios
Identificación de roles y tareas
Análisis de tareas
Sistema Actual
Escenarios
Etnografía
DescripciónTareas
Modelo proceso de Diseño Centrado en Usuario Tema 3. Diseño Centrado en el usuario
Diseño conceptual (modelo)
Metáforas y estilo
Apariencia
Boceto (papel)Nueva
Propuesta
Diseño
participativo
Prototipos de boceto
Prototipos desechables
Psicología cognitiva
Diseño conceptual y
Metaforas
Recorridos escenario de
tareas
PsicologíaErgonomía
Perfil usuario
2
Modelo proceso de Diseño Centrado en Usuario Tema 3. Diseño Centrado en el usuario
3Nuevo Diseño
Diseño gráfico
Interacción
Prototipo (funcionalidad limitada) Nueva
Propuesta
Guías estilosComponentes
Color/codificaciónEventos...
Diseño
Refinado
Diseño gráfico
Interfaces y guías
Guías de estilo
Prototipos alta fidelidad
Pruebas usabilidad
Evaluación Heurística
Prototipos evaluable
Modelo proceso de Diseño Centrado en Usuario Tema 3. Diseño Centrado en el usuario
4Prototipo (funcional)
Evaluación
Test Usuarios
Prototipo (Validado)
Evaluación
LaboratoriosUsabilidad
Diseño completo
Pruebas
en campo
Sistema preliminar
MCU. I EscenariosTema 3. Diseño Centrado en el usuario
Modos de RepresentaciónTextual (narrativo)Secuencia de pasosNarración particionada
Diagramas (casos de uso...)
MCU. I Escenarios Tema 3. Diseño Centrado en el usuario
Ejemplo: Reintegro de un cajero El usuario se aproxima al cajero e inserta la tarjeta en la ranura. Para ello la debe insertar con la banda magnética hacia abajo. El cajero lee la tarjeta y solicita un código de 4 dígitos (PIN) y el usuario los introduce usando el teclado numérico. El cajero verifica el PIN y presenta diferentes opciones (...) de las cuales el usuario selecciona ‘retirada en efectivo’ en el botón que hay junto a la opción. A continuación, el cajero indica la cantidad a desembolsar, dando la opción de 10, 30 y 50€ u otra cantidad. El usuario elige otra cantidad, y la máquina solicita la cantidad, que el usuario introduce nuevamente con el teclado numérico y pulsa ‘aceptar’ para finalizar. El cajero verifica que hay suficiente cantidad para solicitar la petición. Si no hay, muestra un mensaje de ‘insuficiente fondos’. En caso contrario, devuelve la tarjeta, la cantidad solicitada y el comprobante.
• Confuso (no hay clara distinción entre usuario/sistema)• Requisitos dispersos en la narración
Método narrativo
MCU. I Escenarios Tema 3. Diseño Centrado en el usuario
Ejemplo: Reintegro de un cajero
1. El usuario se aproxima al cajero e inserta la tarjeta en la ranura. Para ello
la debe insertar con la banda magnética hacia abajo. El cajero lee la tarjeta y solicita un código de 4 dígitos (PIN), el usuario los introduce usando el teclado numérico. El cajero verifica el PIN y presenta diferentes opciones (...) de las cuales el usuario selecciona ‘retirada en efectivo’ en el botón que hay junto a la opción. El cajero indica la cantidad a desembolsar, dando la opción de 10, 30 y 50€ u otra cantidad. El usuario elige otra cantidad, y la máquina solicita la cantidad, que el usuario introduce nuevamente con el teclado numérico y pulsa ‘aceptar’ para finalizar. El cajero verifica que hay suficiente cantidad para solicitar la petición. Si no hay, muestra un mensaje de ‘insuficiente fondos’. Si hay fondos, el cajero devuelve la tarjeta, la cantidad solicitada y el comprobante.
• Representación temporal
Secuencia de pasos
MCU. I Escenarios Tema 3. Diseño Centrado en el usuario
Verifica que hay suficiente cantidad. Si no hay, muestra un mensaje de
‘insuficiente fondos’. En caso contrario, devuelve la tarjeta, la cantidad solicitada y el comprobante.
Usuario Sistema
El usuario se aproxima al cajero e inserta la tarjeta en la ranura
El cajero lee tarjeta y solicita un código de 4 dígitos (PIN)
El usuario introduce el PIN usando el teclado numérico.
El cajero verifica el PIN e indica la cantidad a desembolsar, dando la
opción de 10, 30 y 50€ y otra cantidad.
El usuario elige otra cantidad Solicita la nueva cantidad
Introduce nuevamente con el teclado numérico y pulsa ‘aceptar’ para finalizar
Narración particionada
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
Objetivo del proceso de análisis
1. Identificar la actividad humana en el sistema (mentales, físicas)
2. Identificar usuarios del sistema
3. Establecer nivel de asistencia
4. Comprensión del dominio (objetos y relaciones)
Modo de obtención
Entrevistas
Observación del usuario y su trabajo
Estudio de la documentación
Método de análisis:
Descomposición de las tareas
Notaciones (clásicas)
HTA, GOMS, KLM, STN
Análisis de tareas (ontología)
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
HTA: Análisis Jerárquico de Tareas• Descripción mediante operaciones y planes• Operaciones: actividades que se realizan para alcanzar un objetivo•Planes: descripción de las condiciones que se deben cumplir para realizar
cada actividad• Uso de notación gráfica
Se diseño originalmente para identificar las necesidades de aprendizaje y
entrenamiento.
HTA
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
Secuencia de Tareas Selección de Tareas
*
Iteración de Tareas Tarea Unitaria
HTA
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
Ejemplo: Té
HTA
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
GOMS (Goal Operators Methods and Selection Rules) [Card&Moran, 1983]
• Goals : Son los objetivos del usuario, y describen lo que pretende
conseguir. Se puede evaluar el grado de satisfacción (logro) obtenido.• Operaciones: Son las acciones básicas que se deben llevar a cabo para
utilizar el sistema. Son dependientes del sistema• Métodos: Descripción de las diferentes alternativas para la consecución del
objetivo marcado• Reglas Selección: Elección entre posibles alternativas para alcanzar un
objetivo. Determinación de estrategias.
GOMS
Referencias: S. Card, T. P. Moran, A. Newell (1983). The Psychology of Human Computer Interaction. Lawrence Erlbaum, 1983 Usability body of Knowledge. http://www.usabilitybok.org/goms L. Hochstein: GOMS. http://www.cs.umd.edu/class/fall2002/cmsc838s/tichi/printer/goms.html
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
GOAL: CERRAR-VENTANA [select GOAL: USAR-METODO-CERRAR
MOVER-RATON-A-CABECERA-VENTANA MENU-POPUP CLICK-SOBRE-OPCION-CERRAR
GOAL: USAR-METODO-CERRAR-VENTANA-TECLADO PRESIONAR-TECLAS-ALT-F4
GOAL: USAR-CERRAR-APLICACION PRESIONAR CONTROL-ALT-DEL SELECCIONAR CERRAR-APLICACIÓN ]
Rule 1: Usar METODO-CERRRAR mientras no se aplique otra reglaRule 2: Usar CERRAR-APLICACIÓN si se queda bloqueado el sistema
GOMS
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
EJEMPLO
GOAL: OBTENER-DINERO
GOAL: USAR-CAJERO
INSERTAR-TARJETA
INTRODUCIR-PIN
INTRODUCIR-CANTIDAD
COGER-DINERO
COGER-JUSTIFICANTE
COGER-TARJETA
****
3.000$
1.000
estr
ateg
ia d
e di
seño
GOMS
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
KLM (KeyStroke Level Model)
Modelo predictivo (medida de rendimiento)
Familia de GOMS Medidas empíricas
KLM
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
Operador Descripción Segundos
K Pulsación de teclado:Buen mecanógrafo (135 ppm)Habilidoso (90ppm)Normal (40ppm)Malo
0.080.120.281.20
P Apuntar con el ratón 1.10
H Ubicar las manos en teclado 0.40
D(ND,ID) Dibujar un trazo
(N: nº segmentos, I: longitud)0.9ND+.016ID
M Preparación mental 1.35
KLM
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
Estimación de rendimiento de selección de un ítem (ej. de entre 16 posibles):
a) Selección de un menú por teclado (16 opc).
M + K (1er dígito) + 0.44K* (2º dígito) + K (Enter)
1.35 + 0.20 + 0.44(0.20) + 0.20 = 1.84 seg.
* Usado para las opciones de la 10-16. Probabilidad 7/16 = 0.44
b) Selección de un menú por ratón (16 opc).
M + P + K (click ratón)
1,35 + 1.10 + 0.20 = 2.65 seg.
KLM
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
Diagrama de transición de estado (STN)• Representa estados y transiciones Muestra acciones sobre el sistema
Identificar autor de la interacción (U,S,T)
I: Interruptor
L: Lámpara
I(on)L(encendida)
I(off)L(apagada)
U: I(off)
U: I(on)
STN
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
inicio
PortapapelesVacio sinselección
PortapapelesLleno sinselección
PortapapelesVacío
y objetoSeleccionado
PortapapelesLleno y objetoSeleccionado
copia
limpiaportapapeles
dese
lecc
. O
bj.
sele
cc.
Ob
j.
Cre
ar
ob
j.
borr
ar
ob
j.
vaciar portapapeles
STN
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
GTA (Groupware Task Analisys)• Descripción de la tarea en el contexto de un modelo conceptual
Ontología
Referencia: Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
Tareas
Es una actividad realizada por un agente (a través de un rol) para alcanzar
un objetivo. - Produce un cambio en el entorno- Requiere un periodo de
tiempo para realizarlo
- Se puede descomponer en subtareas
- Puede ocurrir ante un acontecimiento (evento)
Objetos
Elementos que intervienen en el sistema: - Pueden ser físicos o lógicos -
Poseen atributos - Se puede aplicar acciones (borrar, copiar...)
Ontología
Referencia: Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
Rol
Define un comportamiento humano dentro del sistema: - Lo desempeña un
agente - Es responsable de una serie de tareas
Agente
Entidad activa Tipo: humano, grupo, agente inteligente.. Pueden
desempeñar uno o varios roles
Ontología
Referencia: Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
Descripción de tareas • Descripción en detalle de las tareas. Posee herramienta: Euterpe
Ontología
Referencia: S. Lauesen. User Interface Design: A Software Engineering Perspective. Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
Análisis sobre el modelo de tareas
Identificar problemas sobre la ejecución de tareas: En la estructura de tareas
(secuencia de acciones)Inconsistencias (tareas que no realiza nadie)Carga
de trabajo (actividades por rol)verificar (permisos/autorizaciones)
Identificar aspectos del diseño Tareas complejas (suministrar información)
Tareas frecuentes (necesidad de atajos) Tareas peligrosas (diálogos de
advertencia)
Ontología
Referencia: S. Lauesen. User Interface Design: A Software Engineering Perspective. Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/
MCU. II Análisis tareasTema 3. Diseño Centrado en el usuario
Análisis sobre el modelo de tareas
Ontología
Referencia: Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/
MCU. III PrototiposTema 3. Diseño Centrado en el usuario
Prototipos
Un prototipo es un modelo a escala para desarrollar, expresar y evaluar
ideas.
Adecuados para validar • Conceptos y terminología. Adecuados, comprensibles • Navegación, para saber dónde estoy, y donde se puede ir. • Contenido adecuado para tomar decisiones. • Layout de página. Adecuado para saber donde encontrar la información• Funcionalidad para realizar todas las tareas necesarias
MCU. III PrototiposTema 3. Diseño Centrado en el usuario
Prototipos
•Gama baja (fidelidad)
Bocetos
Storyboard
• Gama alta (fidelidad)
Simulación (Facade tools)
Hypercard,
Powerpoint, html
Generadores de IU
Jbuilder, Visual Basic, Delphi
Tema 3. Diseño Centrado en el usuario
Bocetos (Lo-Fi)
• Identifica conceptos relevantes de la interfaz Propone su ubicación y
apariencia
Barra tareas(siempre accesible)
Acciones usuario (validar)
Area dibujo
menú
MCU. III Prototipos Bocetos
Tema 3. Diseño Centrado en el usuario
Bocetos (Lo-Fi)
• No permite contemplar el diálogo (estático)
MCU. III Prototipos Bocetos
Tema 3. Diseño Centrado en el usuario
Bocetos
Analizar metáforas, iconos, integración…
MCU. III Prototipos Bocetos
Tema 3. Diseño Centrado en el usuario
MCU. III Prototipos Bocetos
Tema 3. Diseño Centrado en el usuario
MCU. III Prototipos Bocetos
Imagen: http://micketoh.blogspot.com.es/
Tema 3. Diseño Centrado en el usuario
iPod (2001)
MCU. III Prototipos Bocetos
Referencias http://www.wired.com/wired/archive/14.11/ipod.html http://www.apple.com/pr/products/ipodhistory/
MCU. III PrototiposTema 3. Diseño Centrado en el usuario
• Secuencia del escenario
Storyboards
Tema 3. Diseño Centrado en el usuario
MCU. III Prototipos Storyboards
• Diseño de Navegación
Referencias [Granollers04]
Tema 3. Diseño Centrado en el usuario
• Secuencia de escenas Evaluar diálogo Comportamiento (estudiar) Una/múltiples ventanas (auxiliares)
Acciones usuario (transiciones)
MCU. III Prototipos Gama Baja (LoFi)
Tema 3. Diseño Centrado en el usuario
ventana
Diálogo o mensaje
Diálogo compuesto (tab)
Transición (por acción)acción
• El diálogo “transcurre” sobre ventanas
MCU. III Prototipos Gama Baja (LoFi)
Tema 3. Diseño Centrado en el usuario
Uso de componentes interactivos
Sin funcionalidad
buttons menu alert box
combo box
tabs
entries
list box
MCU. III Prototipos Gama alta (HiFi)
MCU. III Prototipos Gama alta (HiFi)Tema 3. Diseño Centrado en el usuario
Diseño del boceto y componentes comunes Muestra
apariencia (final) Añadir selectivamente funcionalidad
(comportamiento) Limitado a librería de componentes
Difícil realizar modificaciones del diseño
Imagen: [http://www.crunchbase.com/product/balsamiq-mockups]
ReferenciasTema 3. Diseño Centrado en el usuario
‣ S. Greenberg: “interface design / usability engineering process”. http://pages.cpsc.ucalgary.ca/~saul/481/process_diagram.html.
‣ S. Greenberg website: http://saul.cpsc.ucalgary.ca/
‣ D. Mayhew The usability engineering lifecycle: A practitioner's handbook for user interface design. Morgan Kauffmann, ISBN 1-55860-561-4. (1999)
‣ S. Lauesen. User Interface Design: A Software Engineering Perspective. Addison-Wesley, ISBN 0-321-18143-3. (2005)
‣ J. Nielsen. Usability Engineering, Academic Press. (1993). Website: http://www.nngroup.com/
‣ ISO 9241-210:2010. Ergonomics of human-system interaction. Part 210: Human-centred design for interactive systems
‣ Granollers, A. (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. Departament d'Informàtica i Enginyeria Industrial. ISBN: 9788469063781 http://hdl.handle.net/10803/8120
http://www.grihohcitools.udl.cat/mpiua/
‣ http://www.paperprototyping.com/
‣ Usability Profesional Association: http://www.usabilityprofessionals.org/
‣ nosolousabilidad. http://www.nosolousabilidad.com/articulos/dcu.htm