DISEÑO DE INTERFACES DE USUARIO

DISEÑO CENTRADO EN EL USUARIO

Cómo utilizar el diseño centrado en el usuario,

• qué es el diseño centrado en el usuario, sus

Qué (what)
orígenes y raíces, y las disciplinas relacionadas.

Por qué (Why) • los objetivos y beneficios del DCU

• los principales métodos del DCU, así como

Cómo (How)
algunos procesos

• los roles de los distintos profesionales del

Quién (Who)
mundo del DCU y los personajes más conocidos

Cuándo (When) • cuándo hay que aplicar el DCU

Dónde (Where) • empresas y ámbitos en los que se aplica el DCU.

 DISEÑO CENTRADO EN EL USUARIO
Es una forma de PLANIFICAR, GESTIONAR y llevar a cabo
proyectos de creación, mejora e implementación de
productos interactivos.

DCU

Es considerado una filosofía o Considerado como la aplicación

enfoque de diseño según el
cual cualquier actividad del
mismo debe tener en cuenta
para quién se diseña así como
los contextos de uso
práctica de la disciplina de la
interacción persona-ordenador
(IPO), la usabilidad y la
experiencia de usuario
DISEÑO CENTRADO EN EL USUARIO
DISEÑO CENTRADO EN EL USUARIO
• EVALUAR las soluciones de diseño
a partir de lis usuarios para que
DCU
las interfaces se adapten a ellos
NO SOLO ES

• Aumentar una posible audiencia

DCU con usuarios potenciales nuevos
TAMBIÉN ES
 DISEÑO CENTRADO EN EL USUARIO
FACTORES DISEÑO TRADICIONAL DCU
Participación del Imaginaria Existen y son reales
usuario
Equipo de trabajo Diseñador programador Interdisciplinario
Proceso de desarrollo Lineal Cíclico
Metodología Centrada en el Centrada en el usuario
desarrollo/JEFE
Objetivos Del diseño programador, Del negocio y del usuario
del área de marketing, del
jefe
Estilo Visual Decora Comunica
Mantenimiento Soluciona problemas Mejora
Resultados Inciertos Medibles
 DISEÑO CENTRADO EN EL USUARIO

Personas
Diseño:
funcionalidades,
interacción,
Tecnología Interacción arquitectura de
información, diseño
gráfico

IPO/DCU
 DISEÑO CENTRADO EN EL USUARIO
Se basaba en observar cómo la gente usaba los
sistemas y creaba sus propios modelos mentales
a partir de los procesos de interacción.
IMAGEN DEL SISTEMA
Interfaz: El modelo
El modelo guía al usuario en la
la imagen mental: adquisición y construcción
conceptual: de un modelo mental
que el desarrollado ajustado al modelo
ofrecido por conceptual creado por el
sistema por el usuario
el diseñador diseñador.
presenta al a partir de la Norman (1983b)
del sistema
usuario IMAGEN
 DISEÑO CENTRADO EN EL USUARIO

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.

Se basa en el conocimiento del dominio del trabajo y el papel que las personas
desempeñan cuando interactúan con las computadoras

Conocer al Usuario

D.C.U. Diseño Participativo

Análisis etnográfico
DISEÑO CENTRADO EN EL USUARIO

Ingeniería
DCU
Software
Centrado Software Usuario

Modelo Modelos Proceso Iterativo

Interés Flujo Información Tareas

Objetivo Software Correcto Usabilidad

 DISEÑO CENTRADO EN EL USUARIO
METODOLOGÍA DE DISEÑO
Objetivo: Conocer al usuario y las actividades que realiza

 Escenario
Entorno físico (objetos)Entorno social
(reglas, protocolos)

 Modelado de usuarios
Peculiaridades (habilidades y conocimiento)
Funciones a desempeñar

Dominio
 Análisis tareas
Trabajo
Objetivos a conseguir. Modo de obtenerlos

 Prototipado
Dominio
Sistema
 DISEÑO CENTRADO EN EL USUARIO
ESCENARIO

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)

 DISEÑO CENTRADO EN EL USUARIO
MODELADO DE USUARIO
Modelado de usuario: análisis de la información 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…)
 DISEÑO CENTRADO EN EL USUARIO
ANÁLISIS DE TAREAS
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?
 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
Modelo proceso de Diseño Centrado en Usuario
 Modelo proceso de Diseño Centrado en Usuario
Conocer: Usuarios Diseño Diseño Diseño
y sus tareas Refinado completo
participativo

Diseño
Escenarios Psicología gráfico
cognitiva Pruebas
Recorridos Pruebas
escenario de Interfaces y usabilidad
Etnografía Evaluar Diseño guías
tareas tareas Evaluación en
conceptual y campo
Guías de Heurística
Descripción Metaforas estilo
Tareas

Prototipos Prototipos
alta fidelidad
de boceto

Descripción de Prototipos Prototipos Sistema

usuarios y tareas desechables evaluable preliminar
 Modelo proceso de Diseño Centrado en Usuario
Conocer: Sistema Actual
1 Usuarios y sus
Objetivos:

tareas Análisis etnográfico

Escenarios
Escenarios
Métodos:

Etnografía Evaluar
tareas
Descripción Identificación de roles y tareas
Tareas

Análisis de tareas
Producto:

Descrípción de
usuarios y tareas
 Modelo proceso de Diseño Centrado en Usuario
Entender y especificar el contexto de uso
Especificar requisitos de
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.)
software
•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
 Modelo proceso de Diseño Centrado en Usuario
Diseño
2
participativo Diseño conceptual (modelo)

Psicología Metáforas y estilo Psicología

cognitiva Recorridos Ergonomía
Diseño escenario Perfil usuario
conceptual de tareas
y Metaforas Apariencia

Prototipos
de boceto
Boceto (papel)
Nueva
Prototipos
desechables
Propuesta
 Modelo proceso de Diseño Centrado en Usuario

Diseño conceptual (modelo)

EQUIPO PROYECTO
TRADUCE
Metáforas y estilo Psicología • Requisitos de negocio a un lenguaje común
Ergonomía compartido por los usuarios y los desarrolladores
Perfil usuario • describe el conjunto de características o los
escenarios de uso que la solución debe incorporar
Apariencia • es análogo a los bocetos y escenarios que se
crean al diseñar una aplicación

Boceto (papel)
Nueva
Propuesta
 Modelo proceso de Diseño Centrado en Usuario
Diseño
3
Refinado Nuevo Diseño

Diseño
gráfico Pruebas Diseño gráfico Guías estilos
usabilidad Componentes
Interfaces
y guías Evaluación Color/codificación
Guías de Heurística Eventos...
estilo Interacción

Prototipos
alta fidelidad
Prototipo
(funcionalidad limitada) Nueva
Prototipos Propuesta
evaluable
Modelo proceso de Diseño Centrado en Usuario
Diseño
4 completo
Prototipo (funcional)

Evaluación
Laboratorios
Pruebas Usabilidad
en campo
Test Usuarios

Prototipo
(Validado)
Sistema
Evaluación
preliminar
MCU. I Escenarios

Modos de Representación
Textual (narrativo)
Secuencia de pasos
Narración particionada
Diagramas (casos de uso...)
MCU. I Escenarios Método narrativo

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, 20,50,60, 100 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
MCU. I Escenarios Secuencia de pasos

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, 20,50,60, 100 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
MCU. I Escenarios
Usuario
El usuario se aproxima al cajero e
inserta la tarjeta en la ranura
El usuario introduce el PIN
usando el teclado numérico.
El usuario elige otra cantidad
Introduce nuevamente con el
teclado numérico y pulsa ‘aceptar’
para finalizar
Narración particionada
Sistema
El cajero lee tarjeta y solicita un
código de 4 dígitos (PIN)
El cajero verifica el PIN e indica la
cantidad a desembolsar, dando la
opción de 10, 20,50,60, 100 u y otra
cantidad.
Solicita la nueva cantidad
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.
 MCU. II Análisis tareas
MÉTODOS
Para llevar a cabo el análisis de tareas, se puede utilizar diferentes métodos que se
diferencian en el grado de formalismo de su notación, poder de expresividad y finalidad.
Depende de la finalidad del estudio:
 Métodos de competencia o cognitivos.
 Identifican secuencias de comportamiento correctas, representando el tipo de
conocimiento que debe poseer un usuario acerca del uso del sistema.
 Partiendo de la descripción de tareas generan una especificación del conocimiento
del usuario.
 Métodos predictivos
 para la evaluación del rendimiento humano.
 Describen secuencias de comportamiento y el conocimiento que necesita el usuario
para su ejecución.
 Análisis centrado en rutinas de comportamiento.
 Métodos descriptivos.
 Permiten obtener una descripción más o menos completa del sistema a partir de la
información obtenida de las tareas.
 MCU. II Análisis tareas
MÉTODOS
En la siguiente tabla se detallan algunos de estos métodos con sus características más relevantes.

Método Tipo Notación Especificación Comentarios

HTA Cognitivo Gráfico Semi–Informal Modelo de descomposición del
conocimiento
GOMS Cognitivo Textual Semi–Informal Familia de lenguajes para describir
el conocimiento
UAN Cognitivo Gráfico Semi–Informal Notación para el estilo de
manipulación directa
KLM Predictivo Textual Tiempo Medición del rendimiento humano
TAG Predictivo Textual Esquemas Medida de la consistencia
CTT Descriptivo Gráfico Lógica temporal Herramientas de soporte al análisis
y verificación.
Documentar las tareas actuales
• Ej. Control de cheques (1)
#Tarea Tarea Frecu- Requisitos de Requisitos Comentarios
encia datos en de entrada
pantalla
1.0 Controlar
cheques
1.1 Encontrar Alta Número de Recorrer el •El resumen está ordenado
cheque cheque resumen de por número de cuenta, los
Fecha cuenta usuarios pueden buscar
Propósito por otros parámetros
•Todos los bancos usan el
Cantidad
mismo formato: Fecha-
Resumen de Nro-Cantidad?
cuenta del banco

1.1.1 Ingresar nuevo Baja ó Feedback de Número de Los usuarios prefieren que
cheque Modera- datos ingresados Cheque los cheques estén
da Fecha ordenados numéricamente
Propósito
Cantidad
Cobrado?
Documentar las tareas actuales
Ej. Control de cheques (2)

#Tarea Tarea Frecu- Requisitos de Requisitos Comentarios

encia datos en de entrada
pantalla
1.2 Verificar Alta Igual 1.1 Ninguno
1.3 Indicar si el Alta Igual 1.1 Estado de Los usuarios necesitarán
cheque fue Indicador de cobro del remover el cheque
cobrado Cobrado o no cheque

(etc)
Documentar las tareas actuales
• Ej. Pago de Cuentas (1)
#Tarea Tarea Frecu- Requisitos Requisitos Comentarios
encia de datos en de entrada
pantalla
1.1 Obtener el Alta
registro de
control de cuenta
bancaria
1.2 Obtener las Alta
Facturas a Pagar

1.3 Sumar las Alta Ver saldo actual Sumar cada Si el usuario no puede
facturas y y total de las monto de 1 hallar una calculadora,
comparar con facturas factura, restar debe hacerlo manualmente
saldo actual del saldo
actual
1.4 Decidir si existen Alta Ver saldo actual
suficientes menos el total
fondos para de las facturas
pagar todas las
facturas
Documentar las tareas actuales
• Ej. Pago de cuentas (2)
#Tarea Tarea Frecu- Requisitos Requisitos de Comentarios
encia de datos en entrada
pantalla
1.5 Si no existen Baja Ver saldo actual Sumar cantidad a Tedioso. Requiere
fondos y total de las pagar de cada calcular y recalcular el
suficientes, facturas facturas, restar del saldo
decidir cuanto saldo actual
se pagará de
cada factura
1.6 Escribir cheques Alta Ver cheques y Escribir cheques,
facturas beneficiario, monto
numérico, monto
textual, firma, fecha
1.7 Ingresar Alta Ver cheques y Escribir numero de Redundancia. Escribir
cheques en el registro cheque, fecha, cheques y asentarlos
registro beneficiario, y monto en registro

1.8 Calcular nuevo Alta Ver registro Restar cada entrada

saldo del saldo actual
MCU. II Análisis tareas
Tema 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 tareas HTA

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.
MCU. II Análisis tareas HTA

Secuencia de Tareas Selección de Tareas

Iteración de Tareas Tarea Unitaria

MCU. II Análisis tareas HTA

Ejemplo: Té
MCU. II Análisis tareas GOMS

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

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
MCU. II Análisis tareas GOMS
Tema 3. Diseño Centrado en el usuario

EJEMPLO

GOAL: OBTENER-DINERO
GOAL: USAR-CAJERO
INSERTAR-TARJETA
INTRODUCIR-PIN ****
INTRODUCIR-CANTIDAD 3.000$
COGER-DINERO
1.000
COGER-JUSTIFICANTE
COGER-TARJETA
MCU. II Análisis tareas KLM

KLM (KeyStroke Level Model)

Modelo predictivo (medida de rendimiento)

Familia de GOMS Medidas empíricas

MCU. II Análisis tareas KLM

Operador Descripción Segundos

K Pulsación de teclado:
Buen mecanógrafo (135 ppm)
0.08
Habilidoso (90ppm) 0.12
Normal (40ppm) 0.28
Malo 1.20
P Apuntar con el ratón 1.10

H Ubicar las manos en teclado 0.40

D(ND,ID) Dibujar un trazo 0.9ND+.016ID

(N: nº segmentos, I: longitud)

M Preparación mental 1.35

MCU. II Análisis tareas 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.
MCU. II Análisis tareas STN

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

U: I(off)
I(on) I(off)
L(encendida) L(apagada)
U: I(on)
MCU. II Análisis tareas STN

Portapapeles copia
Vacío Portapapeles
y objeto Lleno y objeto
Seleccionado Seleccionado
limpia

deselecc. Obj.
portapapeles

selecc. Obj.
Crear obj.

borrar obj.
Portapapeles vaciar Portapapeles
Vacio sin portapapeles Lleno sin
inicio selección selección
MCU. II Análisis tareas Ontología

GTA (Groupware Task Analisys)

• Descripción de la tarea en el contexto de un modelo conceptual

Referencia: Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/

MCU. II Análisis tareas Ontología

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

Referencia: Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/

MCU. II Análisis tareas 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

Referencia: Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/

MCU. II Análisis tareas Ontología

Descripción de tareas
• Descripción en detalle de las tareas. Posee herramienta: Euterpe

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 tareas Ontología

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)

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 tareas Ontología

Análisis sobre el modelo de tareas

Referencia: Martin van Welie, Task-based User Interface Designhttp://www.cs.vu.nl/~gerrit/gta/

MCU. III Prototipos

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 Prototipos

Prototipos

•Gama baja (fidelidad)

Bocetos
Storyboard

• Gama alta (fidelidad)

Simulación (Facade tools)
Hypercard,
Powerpoint, html
Generadores de IU
Jbuilder, Visual Basic, Delphi
MCU. III Prototipos Bocetos

Bocetos (Lo-Fi)

•Identifica conceptos relevantes de la interfaz Propone su ubicación y

apariencia
menú

Barra tareas
(siempre accesible)

Area dibujo

Acciones usuario (validar)

MCU. III Prototipos Bocetos

Bocetos (Lo-Fi)

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

MCU. III Prototipos Bocetos

Bocetos
Analizar metáforas, iconos, integración…
MCU. III Prototipos Bocetos
MCU. III Prototipos Bocetos

Imagen: http://micketoh.blogspot.com.es/
MCU. III Prototipos Bocetos

iPod (2001)

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

MCU. III Prototipos Storyboards

• Secuencia del escenario

MCU. III Prototipos Storyboards
• Diseño de Navegación

Referencias [Granollers04]
MCU. III Prototipos Gama Baja (LoFi)

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

Acciones usuario (transiciones)

MCU. III Prototipos Gama Baja (LoFi)
• El diálogo “transcurre” sobre ventanas

ventana
Transición
(por acción)

Diálogo o mensaje

Diálogo compuesto
(tab)
MCU. III Prototipos Gama alta (HiFi)

Uso de componentes interactivos

Sin funcionalidad

buttons menu alert

box

combo box
tabs

list box
entries
MCU. III Prototipos Gama alta (HiFi)

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]
Referencias
‣ 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
 DISEÑO CENTRADO EN EL USUARIO

http://www.nosolousabilidad.com/articulos/dcu.htm
Referencia: The Usability engineering lifecycle. D. Mayhew
http://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: Granollers
http://www.grihohcitools.udl.cat/mpiua/index.html

Referencia: S. Greenberg: “interface design / usability engineering process”. http://pages.cpsc.ucalgary.ca/~saul/481/process_diagram.html