PDF de programación - Diseño en HCI - Ingeniería de la usabilidad

Diseño en HCI (Preece et al 2002)

 Prototipos

 Diseño conceptual

 Uso de prototipos en el diseño conceptual

 Diseño físico

Prototipos (Preece et al. 1994 y 2002)

 ¿Qué es un prototipo?

 ¿Por qué un prototipo?

 Prototipos de baja calidad

 Prototipos de alta calidad

 ¿Cómo seleccionar el tipo de prototipo?

¿Qué es un prototipo?

 Un prototipo es un producto imaginario con

el cual los usuarios pueden interactuar
 Basados en papel
 Un software complejo
 Una maqueta de cartón
 Una pieza de metal
 Una maqueta exacta a escala

Fuente: Preece, J. 2002, Interaction design : beyond human-computer interaction)

¿Por qué un prototipo? (1/4)

 En la mayoría de los casos los usuarios no
saben decir que es lo que quieren, pero si
ven algo y lo usan, descubren lo que no
quieren

 Son muy útiles como ayuda cuando se

discuten ideas con los clientes

¿Por qué un prototipo? (2/4)

 En el proceso de desarrollo se construyen

prototipos para poder interactuar con varias
versiones que permite a los diseñadores:
 Estudiar la factibilidad técnica
 Clarificar requerimientos “borrosos” o “vagos”
 Comprobar que cierto diseño es compatible con

el resto del sistema

 No es recomendable seguir el proceso de

diseño centrándose sólo en un prototipo, se
deben tener en cuenta los aspectos
positivos de todos.

¿Por qué un prototipo? (3/4)

 Dependiendo del objetivo se puede
construir un tipo de prototipo u otro

 Horizontal

 Modela muchas características de un sistema

pero con poco detalle.

 Útil en las etapas tempranas de diseño
 Prueba del modo de interacción global

¿Por qué un prototipo? (4/4)

 Dependiendo del objetivo se puede
construir un tipo de prototipo u otro

 Vertical

 Modela pocas características de un sistema pero

con mucho detalle.

 Útil en etapas más avanzadas del diseño y tiene

como objetivo la prueba de detalles del diseño

 Diagonal

 Horizontal hasta un cierto nivel, a partir del cual

se puede considerar vertical

Prototipos de baja calidad (1/9)

 Aquel que no se parece mucho al producto final

 v.g. Papel vs software

 Se utilizan porque son simples, baratos y crean

rápidamente

 Se utilizan en las primeras etapas del desarrollo

ya que sólo se usan para explorar alternativas.

 Baja Fidelidad: conjunto de dibujos (por

ejemplo, una presentación de escenarios) que
constituye una maqueta estática, no
computerizada y no operativa de una interfaz
de usuario para un sistema en planificación

Prototipos de baja calidad (2/9)

 Storyboard

 Consiste en una serie de imágenes mostrando

como un usuario progresa usando el dispositivo
que se está desarrollando

 Pueden ser un conjunto de pantallas o una serie
de dibujos mostrando como usuario lleva a cabo
una tarea

 Este tipo de prototipo se puede utilizar en

conjunción con escenarios

Prototipos de baja calidad (3/9)

 Storyboard (Hartfield and Winograd 1996)

Fuente: Preece, J. 2002, Interaction design : beyond human-computer interaction)

Prototipos de baja calidad (4/9)

 Storyboard

 Ejemplo: Producir un storyboard que represente

como se llena el depósito del coche

Prototipos de baja calidad (5/9)

 Storyboard

Fuente: Preece, J. 2002, Interaction design : beyond human-computer interaction)

Prototipos de baja calidad (6/9)

 Sketching

 Técnica que se basa en la utilización de dibujos

hechos por los usuarios

 Mediante esta técnica se crean “cosas” y

“acciones” que permitan mostrar el
funcionamiento del sistema

Prototipos de baja calidad (7/9)

 Sketching

Fuente: Preece, J. 2002, Interaction design : beyond human-computer interaction)

Prototipos de baja calidad (8/9)

 El Mago de Oz

 El usuario interactúa con una pantalla pero en

vez de responder el sistema, responde una
persona del equipo de desarrollo.

 Se debe utilizar al principio del desarrollo para

poder explorar alternativas.

Prototipos de baja calidad (9/9)

 Guiados

 El usuario ve como una persona del equipo de

desarrollo dirige el sistema

 Evita tener que diseñar las acciones de bajo nivel

del sistema

Prototipos de alta calidad (1/2)

 Utiliza materiales similares a los del

producto final

 Alta Fidelidad: conjunto de pantallas que

proporcionan un modelo dinámico,
computerizado y operativo de un sistema en
planificación.

 Para el desarrollo de software se puede

utilizar software como Director, Visual Basic
y SmallTalk

Prototipos de alta calidad (2/2)

 Este tipo de prototipos está orientado a

analizar temas técnicos o para vender
“ideas”

 No se debería utilizar para explorar ideas

¿Cómo seleccionar el tipo de
prototipo?

 Prototipos evolutivos: hay que tener en cuenta

que las restricciones actuales pueden afectar
las decisiones del futuro

 Condiciones de entorno para el diseño

 Está claro para que se han diseñado los

prototipos de baja calidad

 Los prototipos de alta calidad pueden engañar

a los usuarios

 Prototipos por incrementos: hay que tirar el

tiempo invertido y partir de cero

Diseño conceptual (1/25)

 Tiene como objetivo transformar los requisitos

y necesidades del usuario en un modelo
conceptual.

 Un modelo conceptual es una descripción del

sistema propuesto como un conjunto integrado
de ideas y conceptos sobre qué debería hacer,
cómo debería comportarse y cómo debe
parecer.

 Los diseñadores realizan un diseño conceptual y

usuarios realizan su modelo mental

Diseño conceptual (2/25)

 Es una etapa muy ligada a la recogida de

información, pero hay que diferenciar entre
lo que debería hacer y la solución adoptada.

Diseño conceptual (3/25)

 Algunas guías a tener en cuenta:

 Mantener una mente abierta sin olvidar a los

usuarios y su contexto

 Discutir las ideas con los usuarios del sistema
 Usar prototipos de baja calidad para conseguir

información rápidamente

 Iterar, iterar e iterar

Diseño conceptual (4/25)

 Tres maneras de pensar el modelo

conceptual:
 El modo de interacción
 La existencia de una metáfora
 El paradigma de interacción a utilizar

Diseño conceptual (5/25)

 El modo de interacción

 Se refiere a la forma en que el usuario invoca
acciones cuando interactúa con el dispositivo.
 Navegar por el producto

 Responder cuestiones

 Aprendizaje del sistema

 Depende de las actividades que el usuario va a

llevar cabo con el producto

 Modo de interacción vs Estilo de interacción

Diseño conceptual (6/25)

 El modo de interacción

 Basado en actividades

 Instrucciones

 Conversación

 Manipulación y navegación

 Exploración y hojeado

 Basado en objetos

 Analogías

Diseño conceptual (7/25)

 El modo de interacción

 Ejemplo: ¿Qué tipo de actividades tiene...

 un juego?

 un paquete gráfico?

Diseño conceptual (8/25)

 El modo de interacción

 Ejemplo: ¿Qué tipo de actividades tiene...

 un juego?

 Manipulación y navegación

 un paquete gráfico?

 Instrucciones y conversación

Diseño conceptual (9/25)

 El modo de interacción

 Otra alternativa:

 Modelos orientados a los procesos

 Aquellas aplicaciones en las que no se puede identificar un

trabajo fundamental (v.g. Oficina de atención telefónica)

 Modelos orientados a productos

 Aquellas aplicaciones en las que los productos son

identificables individualmente (v.g. Documento Word)

Diseño conceptual (10/25)

 El modo de interacción

 Ejemplo: En el sistema del calendario

compartido, ¿cómo se debería llevar a cabo la
tarea de definir una cita entre varios usuarios
considerando algunas restricciones (urgencia,
tiempo límite, ...)?

Diseño conceptual (11/25)

 El modo de interacción

 Ejemplo: En el sistema del calendario

compartido, ¿cómo se debería llevar a cabo la
tarea de definir una cita entre varios usuarios y
algunas restricciones (urgencia, tiempo límite,
...)
 Mediante una conversación en la que el sistema me diera

las fechas posibles en las que se puede celebrar la
reunión.

Diseño conceptual (12/25)

 La existencia de una metáfora

 Las metáforas tienen como objetivo combinar

conocimiento familiar con otro nuevo, de manera
que ayuden al usuario a comprender el sistema.

 Balancear la combinación de elementos nuevos

con elementos conocidos.

Diseño conceptual (13/25)

 La existencia de una metáfora

Fuente: http://37signals.com/svn/archives2/on_a_grand_scale_information_design_and_science.php

Diseño conceptual (14/25)

 La existencia de una metáfora

 Proceso para seleccionar una buena metáfora:

 Comprender qué hará el sistema

 Identificar qué partes del sistema pueden causar

problemas

 Generar metáforas

Diseño conceptual (15/25)

 La existencia de una metáfora

 Cuestiones a responder por una posible metáfora

 ¿Cuánta estructura proporciona la metáfora?

 ¿Cómo es de relevante la metáfora?

 ¿Es fácil de representar la metáfora?

 ¿Comprenderán los usuarios la metáfora?

 ¿Cómo es de extensible la metáfora?

Diseño conceptual (16/25)

 La existencia de una metáfora

 Ejercicio: En el sistema del calendario

compartido, ¿cómo se responden estas cinco
preguntas?
 Estructura

 Relevancia

 Representación

 Comprensión

 Extensibilidad

Diseño conceptual (17/25)

 Paradigma de interacción

 Filosofías de diseño que ayudan a desarrollar el

producto

Diseño conceptual (18/25)

 Paradigma de interacción

 Ejemplo: Considerar el calendario compartido

desde las siguientes perspectivas:
 Computación ubicua

 Computación “pervasiva”

 Computación “vestible”

Diseño conceptual (19/25)

 Estas formas de pensar el modelo

conceptual sirven para tener una visión del
producto

 Estas ideas deben ser pensadas antes de

realizar un prototipo o de ser evaluadas con
los usuarios

Diseño conceptual (20/25)

 Aspectos a tener en cuenta

 Tecnologías a utilizar

 Multimedia

 Realidad virtual

 ...

 Dispositivos a usar

 Pantalla táctil

 Voz

Diseño conceptual (21/25)

 Aspectos a tener