Sie sind auf Seite 1von 49

Interaccin persona-ordenador

Ingeniera de la interfaz - Diseo


Objetivos
Conocer el proceso de diseo de sistemas interactivos

Apreciar la importancia de realizar un diseo centrado en el usuario

Presentar notaciones y mtodos para el anlisis de la interfaz de
usuario
Contenido
Introduccin

Ciclo de vida de un sistema interactivo

El diseo centrado en el usuario

Prototipos

Anlisis de tareas
Introduccin
Los sistemas interactivos se caracterizan por la importancia del
dilogo con el usuario

La interfaz es por tanto una parte fundamental en el proceso de
desarrollo y debe tenerse en cuenta desde el principio

Adems, la interfaz determina en gran medida la percepcin e
impresin que el usuario posee de una aplicacin

El usuario no est interesado en la estructura interna de una
aplicacin, sino en cmo usarla
Introduccin
Conclusin: no se puede realizar la especificacin, disear las
funciones y estructuras de datos y escribir el cdigo y una vez casi
terminado el proceso de desarrollo de la aplicacin plantearse el
diseo de la interfaz de usuario

De esta forma se obtienen interfaces muy dependientes del diseo
de los datos y las funciones, sin tener en cuenta al usuario que va a
utilizar esos datos y esas funciones
Introduccin
Una vez hecha la especificacin, propuesto un diseo y desarrollado
el cdigo, es muy difcil cambiar las caractersticas de la interaccin
y presentacin de la informacin, salvo pequeos detalles

Por tanto, debemos empezar con una idea clara de cmo queremos
la interfaz y cmo sern las interacciones con el usuario para
despus desarrollar las especificaciones funcionales que sirvan de
gua al diseo posterior
Introduccin
En el desarrollo de sistemas interactivos se pueden aplicar tcnicas de
Ingeniera del Software, pero modificando algunos aspectos de los
mtodos de diseo clsico para adaptarlos a estos sistemas


Participantes:
usuarios, diseadores, computador


Aspectos a considerar:
Captura de requisitos de interaccin
Anlisis de tareas
Realizacin de prototipos
Evaluacin
Diseo centrado en el usuario
El proceso de diseo debe estar centrado en el usuario para recoger sus
necesidades y mejorar su utilizacin
habilidades fsicas y sensoriales (visin, pulso)
habilidades cognitivas (expertos-novatos)
personalidad (introvertidos-temerosos-osados)
cultura (lenguaje)

El objetivo del sistema interactivo es permitir al usuario conseguir un
objetivo concreto en un dominio de aplicacin
Anlisis de la tarea: objetos acciones

Entorno
fsico : calor polvo riesgo -
social: grupo-individual



Diseo centrado en el usuario
Resumen

El diseo debe responder a las siguientes cuestiones:
Cmo debe ser desarrollado el sistema interactivo para
asegurar la usabilidad
Cmo puede la usabilidad de un sistema interactivo ser
evaluada o medida
Diseo de la interfaz
3 pilares:
guas de referencias y procesos
principios - estndares - guidelines
herramientas de software
diseo: prototipos
implementacin: lenguajes, ..
revisiones expertas y pruebas de usabilidad:

Ciclo de vida de la interfaz
Ciclo de vida de la interfaz
El factor humano en el diseo
Modelo Mental
abstraccin interna del usuario

Modelo Conceptual
abstraccin externa
modelo formal: elementos y relaciones
qu hace el sistema
Modelo mental
Modelo conceptual
Modelo de caja negra
Modelo funcional jerrquico
Modelo basado en estados
Modelo basado en objetos y acciones

descripcin basada en
conocimiento del usuario modelo de Tareas
conocimiento del sistema modelo Arquitectnico
Modelo de tareas (anlisis de tareas):
anlisis jerrquico de tareas,
GOMS
KLM
TAG
UAN
...


Modelos arquitectnicos
modelo de componentes interactivos (estructura)
mecanismos de interaccin (dilogos)
diagramas de transicin de estados
redes de Petri
gramticas
...


Prototipos
Son documentos, diseos o sistemas que simulan o tienen
implementadas partes del sistema final

Son herramientas muy tiles para hacer participar al usuario en el
diseo y poder evaluarlo ya en las primeras fases del desarrollo
Prototipos
Caractersticas
Funcionan, no son ni una idea ni un dibujo

Tienen un tiempo de vida corto

Pueden servir para diferentes objetivos

Han de poder ser construidos rpida y eficientemente
Prototipos
Tipos
Maqueta para tirar
Sirve para realizar una evaluacin con el usuario y posteriormente se
desecha

Incremental
Se construye con componentes separados

Evolutivo
Contina utilizndose en un proceso evolutivo
Prototipos
Escenarios
Un escenario es una historia de ficcin con representacin de
personajes, sucesos, productos y entornos

Ayuda al diseador a explorar ideas y las ramificaciones de
decisiones de diseo en situaciones concretas

El uso de los escenarios nos permite definir y desarrollar
conocimientos sobre el entorno del usuario y su espacio de trabajo
(Bruce Toganizzini)

Es interesante pensar en varios escenarios para reflejar las diferentes
situaciones y puntos de vista

Es importante ser consistente con la representacin para ver qu
pasa en situaciones concretas
Prototipos
Escenarios
Escenario de tareas
Es una descripcin del mundo del usuario tal como existe ahora

Escenario de futuro
Es una descripcin del mundo del usuario en un futuro
Escenarios
Tipos
Narrativa
Historia completa de la interaccin hecha con la existente o con un
diseo nuevo
Flowchart
Representacin grfica de las acciones y decisiones extradas de la
narrativa
Texto procedural
Descripcin paso a paso de las acciones del usuario y las respuestas
del sistema
Storyboard
Prototipo de papel
Vdeo
Escenarios
Storyboard
Es una narracin grfica de una historia en cuadros consecutivos

Podemos utilizar este concepto que se utiliza en el cine o el teatro
para la realizacin de un escenario de interaccin que puede ser
evaluado con diferentes tcnicas

El storyboard nos permite indicar los enlaces a diferentes pginas a
partir de los resultados de las interacciones del usuario
Escenarios
Storyboard
Escenarios
Storyboard
Escenarios
Prototipo de papel
Este tipo de prototipo se basa en la utilizacin de papel, tijeras,
lpiz o instrumentos que se puedan utilizar para describir un
diseo en un papel

Este sistema nos permite una gran velocidad y flexibilidad
Escenarios
Prototipo de papel cmo se hace
Para poder simular las diferentes interacciones que vamos a
realizar con el sistema, realizaremos una hoja para cada uno de
los diferentes escenarios que vamos a tener como resultado de las
diferentes interacciones que podemos realizar

Apilaremos estas hojas que nos permitirn simular la aplicacin
Escenarios
Prototipo de papel cmo se usa
Para utilizar el prototipo de papel nos situaremos en un escenario
de uso de futuro en el que el diseador acta como coordinador

El prototipo ser analizado por un posible usuario e intentar
realizar algunas de las tareas que se pretende disear

En voz alta se irn realizando las interacciones y le iremos
cambiando las hojas de papel en funcin de las interacciones que
vaya realizando
Escenarios
Prototipo de papel ventajas
El coste es muy reducido, necesitando nicamente los recursos
humanos dedicados a la realizacin del prototipo

Los cambios se pueden realizar muy rpidamente y sobre la
marcha. Si el diseo no funciona se pueden reescribir las hojas
errneas o redisearlas y volver a probar la tarea a realizar

Los usuarios o los actores se sienten ms cmodos para poder
realizar crticas al diseo debido a la sencillez del mismo por lo
que no se sienten cohibidos a dar sus opiniones
Escenarios
Prototipo de papel ejemplo
Escenarios
Vdeo
El vdeo permite rodar escenarios de futuro en los que se pueden
realizar manipulaciones durante el postproceso para simular
caractersticas del diseo que an no estn disponibles

Ejemplos:
Starfire, de Sun Microsystems, sobre la interaccin en 2004
Trabajar con prototipos requiere tiempo y experiencia en la
planificacin

Las caractersticas ms importantes del sistema pueden ser las que se
sacrifican en el prototipo (seguridad, fiabilidad)
Prototipos
Problemas
Anlisis de tareas
Una de las premisas de cualquier aproximacin con la que abordemos
el diseo es la de conocer al usuario y por tanto cmo realiza las tareas

Esta informacin se recoge en la fase de anlisis de las tareas con una
notacin que permita su formalizacin y estudio

Tarea: Unidad significativa de trabajo en la actividad de una persona
(sobre una aplicacin)

Beneficios del anlisis de tareas:
Proporciona un diseo de la aplicacin consistente con el modelo
conceptual del usuario
Facilita el anlisis y evaluacin de usabilidad. Se puede predecir el
rendimiento humano e identificar problemas de uso
Anlisis de tareas
El anlisis de tareas consiste en el estudio de:
Informacin que necesita el usuario para realizar la tarea (qu hacer)
Terminologa y smbolos del dominio del problema (elementos)
Descripcin de cmo esas tareas se realizan actualmente (cmo)

Es el proceso de analizar la manera en que las personas realizan
sus trabajos
Lo que hacen
Sobre qu cosas actan
Qu necesitan saber
Anlisis de tareas
Ejemplo
Anlisis de tareas de un vdeo:
Qu quiere realizar el usuario?
Qu informacin se necesita?
Qu acciones debe llevar a cabo?
Anlisis de tareas
Ejemplo
Objetivos del usuario:
Ver un vdeo
Grabar la telenovela de todas las tardes
Grabar una pelcula esta noche y no estoy en casa
Anlisis de tareas
Ejemplo
Informacin requerida:
Lista de programas
Tiempo de inicio, duracin, canal
Da de la semana para la grabacin
Anlisis de tareas
Ejemplo
Acciones necesarias:
Lista de programas (identificar el programa que se quiere grabar)
Seleccionar la cinta (de duracin adecuada)
Iniciar el proceso de grabacin (seleccionando ajustes adecuados)
Anlisis de tareas
Mtodos
Descomposicin de tareas
Ver el modo en el cual una tarea se puede descomponer en otras ms
simples

Anlisis basado en conocimiento
Identificar el conocimiento del usuario para llevar a cabo dicha tarea y
cmo est organizado este conocimiento

Anlisis de relaciones entre entidades
Aproximacin orientada a objetos que enfatiza los actores y objetos, las
relaciones entre los mismos y las acciones que pueden realizar
Anlisis de tareas
Anlisis jerrquico
Secuencia de Tareas Seleccin de Tareas
*
Iteracin de Tareas Tarea Unitaria
Anlisis de tareas
Anlisis jerrquico
El dilogo es el proceso de comunicacin entre dos o ms
participantes

En el diseo de interfaces de usuario, el dilogo representa la
estructura de la conversacin entre el usuario y el ordenador
Anlisis de tareas
Dilogo
Notaciones para el dilogo
Diagramas de transicin
Notaciones para el dilogo
Diagramas de transicin
inicio
Portapapeles
Vacio sin
seleccin
Portapapeles
Lleno sin
seleccin
Portapapeles
Vaco
y objeto
Seleccionado
Portapapeles
Lleno y objeto
Seleccionado
copia
limpia
portapapeles
d
e
s
e
l
e
c
c
.

o
b
j
e
t
o
s
e
l
e
c
c
.

o
b
j
e
t
o
C
r
e
a
r


o
b
j
e
t
o
b
o
r
r
a
r

o
b
j
e
t
o
vaciar
portapapeles
inicio
Portapapeles
Vacio sin
seleccin
Portapapeles
Lleno sin
seleccin
Portapapeles
Vaco
y objeto
Seleccionado
Portapapeles
Lleno y objeto
Seleccionado
copia
limpia
portapapeles
d
e
s
e
l
e
c
c
.

o
b
j
e
t
o
s
e
l
e
c
c
.

o
b
j
e
t
o
C
r
e
a
r


o
b
j
e
t
o
b
o
r
r
a
r

o
b
j
e
t
o
vaciar
portapapeles
inicio
Portapapeles
Vacio sin
seleccin
Portapapeles
Lleno sin
seleccin
Portapapeles
Vaco
y objeto
Seleccionado
Portapapeles
Lleno y objeto
Seleccionado
copia
limpia
portapapeles
d
e
s
e
l
e
c
c
.

o
b
j
e
t
o
s
e
l
e
c
c
.

o
b
j
e
t
o
C
r
e
a
r


o
b
j
e
t
o
b
o
r
r
a
r

o
b
j
e
t
o
vaciar
portapapeles

Implementacin
Una vez modeladas las tareas debe obtenerse una implementacin
correcta de las mismas
Para ello hay que tener en cuenta varios factores:
Tipos de interaccin
Posicionamiento, valor, texto, seleccin, arrastre
Principios, guas de estilo, estndares
Gestin de entradas del usuario
Peticin, muestreo, evento
Diseo de la presentacin
Gestin de errores
Herramientas para la implementacin
independencia a la interfaz

proporcionan notacin y metodologa

permiten rpidos prototipados

soporte de software
visual basic
visual c++
etc

Conclusiones
El diseo de la interfaz es parte fundamental del proceso de desarrollo
del software y debe ser considerado desde el principio
El usuario debe tomar parte en el diseo y no ser mero espectador
Existen metodologas y notaciones para el diseo que deben ser
utilizadas
La evaluacin del diseo tiene una gran importancia