Tema 3 diseño centrado usuario (2013)

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

http://utopolis.ugr.es/diu

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/

http://www.cs.umd.edu/hcil/

http://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

http://www.usabilityprofessionals.org/usability_resources/about_usability/what_is_ucd.html

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)


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…)


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?


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

http://twobenches.files.wordpress.com/2008/06/47-01.jpg%5D

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


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


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


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


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


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


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)


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


Secuencia de Tareas Selección de Tareas

*

Iteración de Tareas Tarea Unitaria

HTA


Ejemplo: Té

HTA


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


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


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


KLM (KeyStroke Level Model)

Modelo predictivo (medida de rendimiento)

Familia de GOMS Medidas empíricas

KLM


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


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


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


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


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/


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



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



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/


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/


Análisis sobre el modelo de tareas

Ontología


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


Prototipos

•Gama baja (fidelidad)

Bocetos

Storyboard

• Gama alta (fidelidad)

Simulación (Facade tools)

Hypercard,

Powerpoint, html

Generadores de IU

Jbuilder, Visual Basic, Delphi


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


Bocetos (Lo-Fi)

• No permite contemplar el diálogo (estático)



Bocetos

Analizar metáforas, iconos, integración…






Imagen: http://micketoh.blogspot.com.es/


iPod (2001)


Referencias http://www.wired.com/wired/archive/14.11/ipod.html http://www.apple.com/pr/products/ipodhistory/


• Secuencia del escenario

Storyboards


MCU. III Prototipos Storyboards

• Diseño de Navegación

Referencias [Granollers04]


• Secuencia de escenas Evaluar diálogo Comportamiento (estudiar) Una/múltiples ventanas (auxiliares)

Acciones usuario (transiciones)

MCU. III Prototipos Gama Baja (LoFi)


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)


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

Documents

Tema 3 diseño centrado usuario (2013)