Tema 3 diseño centrado usuario (2013)

Tema 3:
Diseño Centrado en el Usuario
(DCU)
DISEÑO DE INTERFACES DE USUARIO
edición 2015
!
!
Miguel Gea (mgea@ugr.es)
Dpt. Lenguajes y Sistemas Informáticos
Grado en Ingeniería Informática
Universidad de Granada
http://utopolis.ugr.es/diu

Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu
Indice
DCU (parte I)
Metodología de diseño
Diseño centrado en el usuario
Modelado de usuario
Escenarios
Tareas
Prototipado
2

El personaje: Ben Shneiderman
“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 (2007)
- 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)
- Profesor en Universidad de Maryland
http://www.cs.umd.edu/hcil/
3

DCU: Participantes
4
HCI
Diseñador
Usuario Computadora
[THIM90]

Introducción al DCU
5
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..
..a philosophy based on the needs and interests of the user,
with an emphasis on making products usable and
understandable” [Norman86]
Conocer usuario y tareas
Diseño participativo (interdisciplinar)
Diseño y prueba (prototipos)
Proceso iterativo (test-test-test)
D.C.U.

Metodología DCU
6
Aproximaciones:
- Ingeniería de la Usabilidad [MAYHEW99]
- HCD Proceso diseño Centrado en Usuario [ISO13407]
- Lean UX [GOTHELF13]
Basados en etapas con diferentes métodos y
entregables (del diseño del producto)

Metodología: HCD - ISO 13407
7
Diseño centrado en Humano para Procesos Interactivos,
parte de estándar ISO 13407 sobre planificación y gestión
del proceso de diseño. Complemento de ISO 9421:
“Ergonomic requirements for office work with visual display
terminals (VDTs)”
[SHARP11] [ISO13407]
http://journal.code4lib.org/articles/561

Metodología: Ingeniería de la usabilidad
8
[MAYHEW99]
img: http://twobenches.files.wordpress.com/2008/06/47-01.jpg
Modelo de ciclo de vida
con tres pasos básicos:
- análisis de requisitos
(perfil usuario, análisis de tareas,
principios de diseño, requisitos
plataforma: plan de usabilidad)
- diseño/test/desarrollo
(modelo conceptual, mockup,
wireframe, guias de estilo,
evaluación, prototipo, test)
- instalación
(despliegue, test, feedback)

Metodología: Lean UX
9
Procedente de la cultura StartUp:
- obtener un producto lo antes posible para que sobreviva
el proyecto.
- Obtener conocimiento que sea la base para la iteración del
producto
Fundamentos:
1) design thinking: Pensamiento de diseño (IDEO)
2) desarrollo ágil centrado en individuos y sus interacciones,
en el producto, en la colaboración con clientes/usuarios, dando
respuesta a los cambios necesarios
3) lean startup: construye-evalúa-aprende [GOTHELF13]

Métodos (Usabilidad+UX)
10
A/B testing, affinity diagram, analytics, brainstorming,
card sorting, competitor analysis, context of use,
contextual inquiry, cost-benefit analysis, design
guidelines, experience canvas, experience journey
map, focus groups, getting started, heuristic
evaluation, interviews, minimum viable product (MVP),
mockup, paper prototyping, patterns, performance
testing, personas, planning usability, prototyping,
questionnaires, remote testing, scenarios, sketches,
stakeholder meeting, storyboarding, style guides,
subjective evaluation, surveys, task analysis, usability
testing, use cases, user observation (ethnography),
user satisfaction, wireframe, wizard of oz

Métodos: tipología
11
Según ámbito de aplicación
Fase de Estrategia/Análisis/Investigación (THINK)
Fase de Diseño /Desarrollo (MAKE)
Fase de Pruebas / Lanzamiento (CHECK)
Según tipo de datos usados
Cuantitativos / Cualitativos

proceso UX
12
ref: http://uxmastery.com/resources/process
THINK
MAKE
CHECK

proceso UX: THINK
13
THINK
MAKE
CHECK
competitor analysis, stakeholder
meeting, contextual inquiry
(ethnography), surveys,
personas, context of use, cost-
benefit analysis,
experience journey map,
interviews, questionnaires,
scenarios, task analysis

proceso UX: MAKE
14
THINK
MAKE
CHECK
design guidelines,
experience canvas,
minimum viable product
(MVP), mockup, paper
prototyping, patterns,
sketches, style guides,
wireframe, storyboarding,
use cases

proceso UX: CHECK
15
THINK
MAKE
CHECK
analytics, focus groups, heuristic
evaluation, user satisfaction,
wizard of oz, prototyping,
questionnaires, remote testing,
performance testing, usability
testing, A/B testing,

FASE I: Escenario (scenario)
16
Narración describiendo “un día en la vida de una persona”
y de su relación con artefactos (visión basada en la
actividad humana). Se describe cómo se llevan a cabo las
tareas en un contexto específico. La descripción consta
de:
- Usuarios
- usando artefactos
- para lograr un objetivo
- bajo unas determinadas circunstancias
- en un intervalo de tiempo
Relacionado con experience journey map
Aplicación de técnicas de etnografía (observación de
campo)
El escenario describe esos componentes como historias (John M. Carroll)

FASE I: Modelado de usuario
17
Proceso de identificación de las características del
usuario para adaptar el sistema intelectivo a sus
necesidades.
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, discapacidad…)
Relacionado con personas, experience journey map

FASE I: Análisis de tareas
18
Tarea: unidad significativa de trabajo en la actividad de
una persona. 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?
Relacionado con personas, experience journey map

FASE II: Prototipo
19
Es una representación limitada de un diseño que permite a
los usuarios explorar sus posibilidades (desde las primeras
fases poder expresar y evaluar ideas)
Adecuados para validar:
- Organización preliminar del diseño (layout) adecuado
para saber donde encontrar la información
- Navegación, para saber dónde estoy, y donde se puede ir.
- Conceptos y terminología. Adecuados, comprensibles
- Contenido adecuado para tomar decisiones.
- Identificar preferencias de usuario
- Analizar diferentes alternativas
- Estudio de usabilidad
Relacionado con mockup, paper prototyping, sketches,
style guides, wireframe, storyboarding

Escenario: Recepción Multimedia
20
Crear una Recepción multimedia en una empresa.
Tarea:
Referencias [Granollers04]
Atender a clientes
Mostrar información relativa a su negocio
Favorecer la familiaridad y cercanía
Sorprender al cliente
Imagen de modernidad
Motivación
caso estudio

caso estudio
Escenario: Recepción Multimedia
21
Recepción multimedia

caso estudio
Prototipos: Recepción Multimedia
22Referencias [Granollers04]

Referencia: [Granollers04]
caso estudio
DCU: Recepción multimedia

Escenario: Cajero Videoclub
24
Crear una cajero para videoclub
Planteamiento
- Atender a las necesidades del tiempo de ocio de
usuarios
- Ayudar a elegir películas
- Valorar el grado de usabilidad del sistema
Hipótesis: el diseño de un nuevo artefacto implica un
nuevo proceso de aprendizaje
caso estudio

25
Análisis etnográfico: Descripción Videoclub tradicional…
caso estudio

26
Análisis etnográfico: Descripción Videoclub tradicional…
- Servicios que oferta
- Ubicación películas
- Rotulación películas y estado
- Tipos Usuarios
- Formas de búsqueda
- Asesoramiento
- Satisfacción
caso estudio

27
Análisis etnográfico: ubicación películas
caso estudio

28
PRUEBA
Análisis etnográfico videoclub tradicional:
modo de uso
Alquilar película:
El usuario busca en los estantes, clasificados
por categorías (novedades, cómicas). El usr.
coge la carátula de la película y la lleva al
estante. El usuario conoce de antemano que
está disponible porque no tiene un identificativo
de “alquilada”.

29
¿y qué pasa con el formato de la película?
¿y otros tipos?
Normas:
Para poder alquilar una película, el cliente debe ser socio.
En la inscripción de un nuevo socio, este debe pagar una
cuota, que se destinara a un seguro
El socio deberá pagar una multa en dos casos: retraso en la
fecha de devolución y devolver la película en mal estado

30
Análisis Contexto de uso del nuevo escenario
¿Cómo se identifica al usuario?
¿Cómo paga el usuario?
¿Cómo recoge/devuelve películas?
****

31
Análisis Etnográfico del nuevo escenario
Tipos de usuarios
Acciones más frecuentes
Opciones seleccionadas
Frecuencia uso
Tasa de éxito

32
Tipo de escenarios y
capacidad cognitiva
a desarrollar
Tradicional
• Búsqueda visual
• Clasificación no consistente
• (novedades/acción/españolas...)
• Orden aleatorio dentro del estante
• Que no tengan identificativo de “alquilada”
Cajero
• Selección por criterios (tipo, actor, año...)
• Navegación por menús (adelante-atrás)
• Normas de privacidad (tarjeta, cód..)
• Sin asistencia de otro usuario
• Uso secuencial (timing de uso – impaciencia del resto usuarios)
Importancia de la imagen para
el reconocimiento de una película

33
Al observar a distintos usuarios hemos visto deficiencias en el
diseño del cajero automático de videoclub:
• A determinados usuarios (niños, personas mayores), les
cuesta familiarizarse con el funcionamiento del cajero
debido a que no están acostumbrados a aplicaciones
informáticas.
• No hay recomendaciones “reales” (del boca a boca)
• Confunde mucho el uso alternativo de pantalla táctil y
teclado numérico
• Cuando hay muchas películas es muy cansada la
búsqueda
• Las búsquedas no permiten combinaciones (aventuras Y
Novedad Y Director==XX)
• Zona especial para devoluciones (compartido para
recoger/devolver películas) incómodo
• Mucho tiempo para seleccionar película (colas de espera)

34
SOCIOS / NUEVOS SOCIOS (INSCRIPCION + TARJETA) / DUEÑO
ALQUILAR
(IDENTIFICAR, BUSCAR, SELECCIONAR, CONSULTAR SALDO, RECOGER)
ASOCIADO: NO HABER VISTO ANTES, “GUSTAR”
DEVOLVER PELICULA
(IDENTIFICAR, MINORAR SALDO, ENTREGAR)
RECARGAR TARJETA
(IDENTIFICAR, SELECCIONAR RECARGA, ENTREGAR DINERO)

35
Permitir lectura
banda ambas
caras / Forzar un
único modo
Identificación por
huella dactilar
Acceso no
autorizado / error?
ANALISIS DE TAREAS (HTA)

36
Siempre poder anular
acción
Permitir búsquedas
complejas
¿Cuánto tiempo es
prudencial?
ANALISIS DE TAREAS (HTA)

37

Indice
DCU (parte II)
> Escenarios
> Análisis de Tareas
> Prototipos
> Storyboard
38

I: Escenarios
39
Diferentes modos de Representación
Textual (narrativo)
Secuencia de pasos
Narración particionada
Diagramas (casos de uso...)

I: Escenarios
40
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

I: Escenarios
41
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.
2. El cajero lee la tarjeta y solicita un código de 4 dígitos (PIN), el
usuario los introduce usando el teclado numérico.
3. 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.
4. 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.
5. El cajero verifica que hay suficiente cantidad para solicitar la
petición. Si no hay, muestra un mensaje de ‘insuficiente fondos’.
6. Si hay fondos, el cajero devuelve la tarjeta, la cantidad solicitada
y el comprobante.
• Representación temporal

I: Escenarios
42
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

II Análisis tareas: HTA
43
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

44
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.
Secuencia de Tareas Selección de Tareas
*
Iteración de Tareas Tarea Unitaria

45
Preparar Té

II Análisis tareas: GOMS
46
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.
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

47
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 regla
Rule 2: Usar CERRAR-APLICACIÓN si se queda bloqueado el sistema

48
EJEMPLO
GOAL: OBTENER-DINERO
GOAL: USAR-CAJERO
INSERTAR-TARJETA
INTRODUCIR-PIN
INTRODUCIR-CANTIDAD
COGER-DINERO
COGER-JUSTIFICANTE
COGER-TARJETA
****
3.000$
1.000
estrategiadediseño

II Análisis tareas: KLM
49
KLM (KeyStroke Level Model)
• Modelo predictivo (medida de rendimiento)
• Familia de GOMS
• Medidas empíricas

50
Operador Descripción Segundos
K Pulsación de teclado:
Buen mecanógrafo (135 ppm)
Habilidoso (90ppm)
Normal (40ppm)
Malo
0.08
0.12
0.28
1.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

51
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.

II Análisis tareas: STN
52
Diagrama de transición de estado (STN)
• Representa estados y transiciones
• Muestra acciones sobre el sistema
• Identiﬁcar 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)

II Análisis tareas
53
inicio
Portapapeles
Vacio sin
selección
Portapapeles
Lleno sin
selección
Portapapeles
Vacío
y objeto
Seleccionado
Portapapeles
Lleno y objeto
Seleccionado
copia
limpia
portapapeles
deselecc.Obj.
selecc.Obj.
Crearobj.
borrarobj.
vaciar
portapapeles

III. Prototipos
54
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
• Forma del producto
Gama:
Low-Fi: organización, estructura (layout)
Hi-Fi: Apariencia casi definitiva, simulación de navegación

III. Prototipos para evaluación producto
55

Tema 3. Diseño Centrado en el Usuario: metodología. Diseño de Interfaces de Usuario. Universidad de Granada http://utopolis.ugr.es/diu 56
iPod (2001)
Referencias http://www.wired.com/wired/archive/14.11/ipod.html http://www.apple.com/pr/products/ipodhistory/
III. Prototipos para evaluación producto

IV. Storyboard
57
Cambio de foto de usr.
Secuencia de acciones en escenario.
checkin hotel [Granollers04]

IV. Storyboard: navegación
58

Referencias
[THIM90] H. Thimbleby: The User Interface Design. Addison-Weley 1990
[NORMAN86] D. Norman, S Draper. User centred system design. Erlbaum, 1986
[GOTH13] J. Gothelf. LEAN UX. Applying Lean principles to Improve User Experiences. O’Reilly, 2013
[MAYHEW99] D. Mayhew. The usability engineering lifecycle. Morgan Kauffman, 1999
[SHARP11] H. Sharp, Y. Rogers, J. Preece: Interaction Design: Beyond Human Computer interaction, 3ª
ed. John Wiley & Sons, 2011
[DIX03] A. Dix, J. Finlay, G. Abowd, R. Beale: Human-Computer Interaction, 3ª ed. Prentice Hall, 2003.
[BROWN08] Tim Brown. Design Thinking. Harvard Business Review, June 2008.
Online: https://www.ideo.com/images/uploads/thoughts/IDEO_HBR_Design_Thinking.pdf
[GRANOLLERS04] 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/
Referencias métodos:
http://uxdesign.cc/ux-methods-deliverables/
http://www.usabilitynet.org/tools/methods.htm
http://austinknight.com/ux-design-guide/
http://www.usability.gov/how-to-and-tools/methods/
http://uxmastery.com/resources/techniques/
UsabilityNet - http://www.usabilitynet.org
Usability Profesional Association, http://www.usabilityprofessionals.org/
Nosolousabilidad - http://www.nosolousabilidad.com/articulos/dcu.htm
59

Referencias
[Lowde13] T. Lowdermilk: User-Centered Design, O’Reilly Media 2013
[GRANOLLERS04] 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/
[DIX03] A. Dix, J. Finlay, G. Abowd, R. Beale: Human-Computer Interaction, 3ª ed. Prentice Hall, 2003.
60

Tema 3 diseño centrado usuario (2013)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (15)

Similaire à Tema 3 diseño centrado usuario (2013)

Similaire à Tema 3 diseño centrado usuario (2013) (20)

Plus de Miguel Gea

Plus de Miguel Gea (20)

Tema 3 diseño centrado usuario (2013)