Interaccin persona-ordenador

Ingeniera de la interfaz

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 Aspectos a considerar:
Captura de requisitos de interaccin Anlisis de tareas Realizacin de prototipos Evaluacin

Ciclo de vida

Ciclo de vida

Diseo centrado en el usuario

El proceso de diseo debe estar centrado en el usuario para recoger sus necesidades y mejorar su utilizacin El objetivo del sistema interactivo es permitir al usuario conseguir un objetivo concreto en un dominio de aplicacin 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

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

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:
Poblado bero de Els Vilars Starfire, de Sun Microsystems, sobre la interaccin en 2004

Escenarios

Starfire (1)

Vdeo 1

Vdeo 2

Escenarios

Starfire (2)

Escenarios

Starfire (y 3)

Prototipos

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

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

Anlisis de tareas

GOMS

Familia de tcnicas propuesta por Card, Moran, y Newell (1983) para modelar y describir las prestaciones de las tareas desde el punto de vista humano GOMS es un acrnimo que significa Objetivos (Goals), Operadores (Operators), Mtodos (Methods) y Reglas de seleccin (Selection rules)

Anlisis de tareas

GOMS
Objetivos

Objetivos del usuario, describen lo que pretende conseguir

Operadores
Acciones bsicas que se deben llevar a cabo para utilizar el sistema

Mtodos
Existen diferentes alternativas para conseguir un objetivo. P.ej. una ventana se puede cerrar mediante una combinacin de teclas (Alt-F4) o con el ratn (Archivo-cerrar)

Reglas de seleccin
Eleccin entre posibles alternativas para alcanzar un objetivo

Anlisis de tareas

GOMS

Ejemplo: Cerrar ventana

GOAL: CERRAR-VENTANA [select GOAL: USAR-MTODO-RATN MOVER-RATN-A-MEN-VENTANA ABRIR-MEN CLICK-SOBRE-OPCIN-CERRAR GOAL: USAR-MTODO-TECLADO PULSAR-TECLAS-ALT-F4 GOAL: USAR-MTODO-CERRAR-APLICACIN PULSAR CONTROL-ALT-DEL SELECCIONAR CERRAR-APLICACIN] Rule 1: IF (USUARIO-EXPERTO) USAR-MTODO-TECLADO ELSE USAR-MTODO-RATN Rule 2: USAR-MTODO-CERRAR-APLICACIN si se queda bloqueado el sistema

Anlisis de tareas

Dilogo

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

Notaciones para el dilogo

Diagramas de transicin

Notaciones para el dilogo

Diagramas de transicin
copia limpia portapapeles

Portapapeles Vaco y objeto Seleccionado

deselecc. objeto selecc. objeto Crear objeto borrar objeto

Portapapeles Lleno y objeto Seleccionado

inicio

Portapapeles Portapapeles vaciar Vacio sin Lleno sin portapapeles seleccin seleccin

Notaciones para el dilogo

Redes de Petri
Negrita On
Usuario pulsa Negrita Usuario pulsa itlica

Itlica On

T1

T2

T3

T4

Usuario pulsa Negrita

Usuario pulsa itlica

Negrita Off

Itlica Off

Notaciones para el dilogo

Gramticas

Uno de los primeros mtodos utilizados para la representacin del dilogo en IPO Una gramtica describe un lenguaje mediante un conjunto de reglas que especifican los literales correctos en el lenguaje Ventaja: se pueden usar herramientas para asegurar la correccin y completitud Adecuadas para lenguajes basados en rdenes Las gramticas multi-party poseen smbolos no terminales que se etiquetan con el participante: usuario (U) u ordenador (C)

<Sesin> ::= <U: Open> <C:Respuesta> <U:Open> ::= LOGIN <U: Name> <C: Respuesta> ::= HELLO [<U: Name>]

Notaciones para el dilogo

User Action Notation

Las tcnicas basadas en gramticas o diagramas son adecuadas para sistemas basados en mens, pero no para manipulacin directa UAN es una especificacin mediante un lenguaje para la descripcin de las tareas del usuario Una especificacin en UAN se realiza en una tabla dividida en 3 columnas:
acciones del usuario realimentacin de la interfaz estado de la interfaz

Notaciones para el dilogo

UAN
icon!

Respuesta del sistema: iluminar el icono

icon-!
Dejar de iluminar el objeto icono

icon >~
Movimiento de arrastre del objeto icono

Notaciones para el dilogo

UAN

Ejemplo: Tarea borrar un fichero envindolo a la papelera de reciclaje

UAN 1) 2) 3) 4) ~[file] Mv ~[x,y]* ~[trash] M^

Realimentacin File!, forall(file!): file-! Outline(file) > ~ Outline(file) > ~ Delete(file), trash!!

Estado de la interfaz Selected = file

trash! Selected = null

Notaciones para el dilogo

UAN

Ejemplo: Tarea borrar un fichero envindolo a la papelera de reciclaje

Anlisis de tareas

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

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