7/21/2019 Eng Soft 2008
1/53
Interaccin persona-ordenador
Ingeniera de la interfaz
7/21/2019 Eng Soft 2008
2/53
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
7/21/2019 Eng Soft 2008
3/53
Contenido
Introduccin Ciclo de vida de un sistema interactivo El diseo centrado en el usuario Prototipos Anlisis de tareas
7/21/2019 Eng Soft 2008
4/53
Introduccin
Los sistemas interactivos se caracterizan por laimportancia del dilogocon el usuario
La interfaz determina en gran medida la percepcine impresinque el usuario posee de una aplicacin
El usuario no est interesado en la estructura internade una aplicacin sino en cmo usarla
La interfazes una parte fundamentalen el proceso de desarrollo y de!etenerse en cuenta desde el principio
7/21/2019 Eng Soft 2008
5/53
Introduccin
No se puede realizar la especificacin disear lasfunciones y estructuras de datos y escri!ir el cdigo yuna vez casi terminado el desarrollo de la aplicacinplantearse el diseo de la interfaz de usuario
"e esta forma se o!tienen interfaces muydependientes del diseo de los datos y las funcionessin tener en cuenta al usuarioque va a utilizar esosdatos y esas funciones
7/21/2019 Eng Soft 2008
6/53
Introduccin
#na vez $ec$a la especificacin propuesto un diseoy desarrollado el cdigo es muy difcil cambiar lascaracter%sticas de la interaccin y presentacin de lainformacin salvo pequeos detalles
Por tanto de!emos empezar con una idea clara decmo queremos la interfazy cmo sern lasinteracciones con el usuario para despus desarrollarlas especificaciones funcionales que sirvan de gu%a aldiseo posterior
7/21/2019 Eng Soft 2008
7/53
Introduccin
En el desarrollo de sistemas interactivos se aplicantcnicas de Ingenier%a del &oft'are modificandoalgunos aspectos de los mtodos de diseo clsicopara adaptarlos a estos sistemas
Aspectos a considerar( Captura de requisitos de interaccin Anlisis de tareas )ealizacin de prototipos Evaluacin
7/21/2019 Eng Soft 2008
8/53
Ciclo de vida
7/21/2019 Eng Soft 2008
9/53
Ciclo de vida
7/21/2019 Eng Soft 2008
10/53
Diseo centrado en el usuario
El proceso de diseo de!e estar centrado en elusuariopara recoger sus necesidades y me*orar suutilizacin
El o!*etivo del sistema interactivo es permitir al
usuario conseguir un o!*etivo concreto en undominio de aplicacin
El diseo de!e responder a las siguientes cuestiones( Cmo de!e ser desarrollado el sistema interactivo para
asegurar la usabilidad Cmo puede la usa!ilidad de un sistema interactivo ser
evaluadao medida
7/21/2019 Eng Soft 2008
11/53
Prototipos
&on documentos diseos o sistemas que simulan otienen implementadas partes del sistema final
&on $erramientas muy +tiles para $acer participaral usuario en el diseo y poder evaluarlo desde lasprimeras fases del desarrollo
7/21/2019 Eng Soft 2008
12/53
Prototipos
Caractersticas
,uncionan no son ni una idea ni un di!u*o -ienen un tiempo de vida corto Pueden servir para diferenteso!*etivos
.an de poder ser construidos rpiday eficientemente
7/21/2019 Eng Soft 2008
13/53
Prototipos
Tipos
Maqueta para tirar &irve para realizar una evaluacin con el usuario y
posteriormente se desec$a
Incremental &e construye con componentes separados
Evolutivo Contin+a utilizndose en un proceso evolutivo
7/21/2019 Eng Soft 2008
14/53
Prototipos
Escenarios
#n escenarioes /una historia de ficcin conrepresentacin de personajes, sucesos, productos yentornos
Ayuda al diseador a e0plorar ideas y lasramificaciones de decisiones de diseo en situacionesconcretas
/El uso de los escenarios nos permite definir ydesarrollar conocimientos so!re el entorno del usuarioy su espacio de tra!a*o1 2Bruce Toganizzini3
Es interesante pensar en varios escenariospara
refle*ar las diferentes situaciones y puntos de vista Es importante ser consistentecon la representacin
para ver qu pasa en situaciones concretas
7/21/2019 Eng Soft 2008
15/53
Prototipos
Escenarios
Escenario de tareas Es una descripcin del mundo del usuario tal como es a$ora
Escenario de futuro Es una descripcin del mundo del usuario en un futuro
7/21/2019 Eng Soft 2008
16/53
Escenarios
Tipos
4arrativa .istoria completa de la interaccin $ec$a con la e0istente o
con un diseo nuevo
Flowchart
)epresentacin grfica de las acciones y decisiones e0tra%dasde la narrativa
-e0to procedural "escripcin paso a paso de las acciones del usuario y las
respuestas del sistema
Storyboard
Prototipo de papel 5%deo
7/21/2019 Eng Soft 2008
17/53
Escenarios
tor!board
Es una narracin grfica de una $istoria en cuadrosconsecutivos
Es un concepto que se utiliza en el cine o el teatro Permite indicar los enlaces a diferentes pginas a
partir de los resultados de la interaccin del usuario
7/21/2019 Eng Soft 2008
18/53
Escenarios
tor!board
7/21/2019 Eng Soft 2008
19/53
Escenarios
tor!board
7/21/2019 Eng Soft 2008
20/53
Escenarios
Prototipo de papel
&e !asa en la utilizacin de papel ti*eras y lpiz paradescri!ir un diseo en un papel
Permite una gran velocidady fle0i!ilidad
7/21/2019 Eng Soft 2008
21/53
Escenarios
Prototipo de papel " c#o se
$ace
)ealizamos una $o*a para cada uno de los diferentesescenariosque vamos a tener como resultado de lasdiferentes interacciones que podemos realizar
Apilamos estas $o*as para simular la aplicacin
7/21/2019 Eng Soft 2008
22/53
Escenarios
Prototipo de papel " c#o se usa
Para utilizar el prototipo de papel nos situamos en unescenario de usode futuro en el que el diseadoract+a como coordinador
El prototipo es analizado por un posi!le usuarioque
intenta realizar algunas de las tareas que se pretendedisear En voz alta va realizando las interaccionese iremos
cam!iando las $o*as de papel en funcin de lasinteracciones que vaya realizando
7/21/2019 Eng Soft 2008
23/53
Escenarios
Prototipo de papel " ventajas
El coste es muy reducido necesitando +nicamente losrecursos $umanos dedicados a la realizacin delprototipo
Los cam!ios se pueden realizar muy rpidamentey
so!re la marc$a6 &i el diseo no funciona se puedenreescri!ir las $o*as errneas o redisearlas y volver apro!ar la tarea a realizar
Los usuarios o los actores se sienten ms cmodospara poder realizar cr%ticas al diseo de!ido a la
sencillez del mismo por lo que no se sienten co$i!idosa dar sus opiniones
7/21/2019 Eng Soft 2008
24/53
Escenarios
Prototipo de papel " eje#plo
7/21/2019 Eng Soft 2008
25/53
Escenarios
Prototipo de papel " eje#plo
E i
7/21/2019 Eng Soft 2008
26/53
Escenarios
%deo
Permite rodar escenarios de futuro en los que sepueden realizar manipulaciones mediante postprocesopara simular caracter%sticas del diseo que a+n noestn disponi!les
E*emplos( Po!lado %!ero de Els 5ilars Starfire de &un 7icrosystems so!re la interaccin en 899:
Escenarios
7/21/2019 Eng Soft 2008
27/53
Escenarios
tarfire &'(
5%deo ;
5%deo 8
Escenarios
7/21/2019 Eng Soft 2008
28/53
Escenarios
tarfire &)(
Escenarios
7/21/2019 Eng Soft 2008
29/53
Escenarios
tarfire &! *(
Prototipos
7/21/2019 Eng Soft 2008
30/53
-ra!a*ar con prototipos requiere tiempoy e0perienciaen la planificacin
Las caracter%sticas ms importantes del sistemapueden ser las que se sacrificanen el prototipo
2seguridad fia!ilidad3
Prototipos
Proble#as
7/21/2019 Eng Soft 2008
31/53
+n,lisis de tareas
#na premisa de cualquier apro0imacin al diseo esconocer al usuario,y por tanto cmo realiza las tareas
Esta informacin se recoge en la fase de anlisis de lastareascon una notacin que permita su formalizacin y
estudio -area( Unidad significativa de trabajo en la actividad deuna persona2so!re una aplicacin3
7/21/2019 Eng Soft 2008
32/53
+n,lisis de tareas
El anlisis de tareas consiste en el estudio de( Informacin que necesita el usuario para realizar la tarea
2qu $acer3 -erminolog%a y s%m!olos del dominio del pro!lema
2elementos3 "escripcin de cmo esas tareas se realizan actualmente2cmo3
Es el proceso de analizar la manera en que laspersonas realizan sus tra!a*os
Lo que $acen &o!re qu cosas act+an =u necesitan sa!er
+n,lisis de tareas
7/21/2019 Eng Soft 2008
33/53
+n,lisis de tareas
Eje#plo
Anlisis de tareas de un v%deo( >=u quiere realizar el usuario? >=u informacin necesita? >=u acciones de!e llevar a ca!o?
+n,lisis de tareas
7/21/2019 Eng Soft 2008
34/53
, s s de ta eas
Eje#plo
@!*etivos del usuario( =uiero ver un v%deo =uiero gra!ar una serie que se emite todas las tardes =uiero gra!ar una pel%cula esta noc$e y no estoy en casa
+n,lisis de tareas
7/21/2019 Eng Soft 2008
35/53
+n,lisis de tareas
Eje#plo
Informacin requerida( Lista de programas -iempo de inicio duracin canal "%a de la semana
+n,lisis de tareas
7/21/2019 Eng Soft 2008
36/53
Eje#plo
Acciones necesarias( Lista de programas 2identificar el programa que se quiere
gra!ar3 &eleccionar la cinta 2de duracin adecuada3
Iniciar el proceso de gra!acin 2seleccionando a*ustesadecuados3
+n,lisis de tareas
7/21/2019 Eng Soft 2008
37/53
.todos
"escomposicin de tareas 5er el modo en el cual una tarea se puede descomponer en
otras ms simples Anlisis !asado en conocimiento
Identificar el conocimiento del usuario para llevar a ca!o latarea y cmo est organizado este conocimiento
Anlisis de relaciones entre entidades Apro0imacin orientada a o!*etos que enfatiza los actores y
o!*etos las relaciones entre los mismos y las acciones que sepueden realizar
+n,lisis de tareas
7/21/2019 Eng Soft 2008
38/53
+n,lisis jer,r/uico
Secuencia de Tareas Seleccin de Tareas
*
Iteracin de Tareas Tarea Unitaria
+n,lisis de tareas
7/21/2019 Eng Soft 2008
39/53
+n,lisis jer,r/uico
+n,lisis de tareas
7/21/2019 Eng Soft 2008
40/53
0O
,amilia de tcnicas propuesta por Card 7oran y4e'ell 2;B3 para modelar y descri!ir lasprestaciones de las tareas desde el punto de vista$umano
D@7&es un acrnimo que significa @!*etivos2oals3 @peradores 2!perators3 7todos 2"ethods3y )eglas de seleccin 2Selection rules3
+n,lisis de tareas
7/21/2019 Eng Soft 2008
41/53
@!*etivos @!*etivos del usuario descri!en lo que pretende conseguir
@peradores Acciones !sicas que se de!en llevar a ca!o para utilizar el
sistema 7todos
E0isten diferentes alternativas para conseguir un o!*etivo6P6e*6 una ventana se puede cerrar mediante una com!inacinde teclas 2Alt,:3 o con el ratn 2Arc$ivocerrar3
)eglas de seleccin Eleccin entre posi!les alternativas para alcanzar un o!*etivo
0O
+n,lisis de tareas
7/21/2019 Eng Soft 2008
42/53
Ejemplo: Cerrar ventana D@AL( CE))A)5E4-A4A
Fselect D@AL( #&A)7G-@"@)A-H47@5E))A-H4A7E45E4-A4AA
7/21/2019 Eng Soft 2008
43/53
El dilogo es el proceso de comunicacin entre dos oms participantes
En el diseo de interfaces de usuario el dilogorepresenta la estructura de la conversacin entre el
usuario y el ordenador
Di,logo
1otaciones para el di,logo
7/21/2019 Eng Soft 2008
44/53
Diagra#as de transicin
1otaciones para el di,logo
Di d t i i
7/21/2019 Eng Soft 2008
45/53
Diagra#as de transicin
inicio
Portapapeles
Vacio sinseleccin
Portapapeles
Lleno sinseleccin
PortapapelesVaco
y objetoSeleccionado
PortapapelesLleno y objetoSeleccionado
copia
limpiaportapapeles
deselecc.objeto
selecc.objet
o
Crear
objeto
borrar
objet
o
vaciar
portapapelesinicio
Portapapeles
Vacio sinseleccin
Portapapeles
Lleno sinseleccin
PortapapelesVaco
y objetoSeleccionado
PortapapelesLleno y objetoSeleccionado
copia
limpiaportapapeles
deselecc.objeto
selecc.objet
o
Crear
objeto
borrar
objet
o
vaciar
portapapelesinicio
Portapapeles
Vacio sinseleccin
Portapapeles
Lleno sinseleccin
PortapapelesVaco
y objetoSeleccionado
PortapapelesLleno y objetoSeleccionado
copia
limpiaportapapeles
deselecc.objeto
selecc.objet
o
Crear
objeto
borrar
objet
o
vaciar
portapapeles
1otaciones para el di,logo
2 d d P t i
7/21/2019 Eng Soft 2008
46/53
2edes de Petri
Negrita On
Negrita Off
Itlica On
Itlica Off
Usuario pulsa
Negrita
Usuario pulsa
Negrita
Usuario pulsa
itlica
Usuario pulsa
itlica
T1 T2 T3 T4
1otaciones para el di,logo
0 ,ti
7/21/2019 Eng Soft 2008
47/53
0ra#,ticas
#no de los primeros mtodos utilizados para larepresentacin del dilogo en IP@
#na gramticadescri!e un lengua*e mediante uncon*unto de reglas que especifican los literalescorrectos en el lengua*e
5enta*a( se pueden usar $erramientas para asegurar lacorreccin y completitud Adecuadas para lengua*es !asados en rdenes Las gramticas #ulti$partyposeen s%m!olos no
terminales que se etiquetan con el participante(
usuario 2#3 u ordenador 2C3 M&esinN ((O M#( @penN MC()espuestaN M#(@penN ((O L@DI4 M#(4ameN
MC( )espuestaN ((O .ELL@ FM#( 4ameNK
1otaciones para el di,logo
3 + ti 1 t ti
7/21/2019 Eng Soft 2008
48/53
3ser +ction 1otation
Las tcnicas !asadas en gramticas o diagramas sonadecuadas para sistemas !asados en men+s pero nopara manipulacin directa
#A4 es una especificacin mediante un lengua*e para
la descripcin de las tareas del usuario #na especificacin en #A4 se realiza en una ta!la
dividida en columnas( acciones del usuario
realimentacin de la interfaz estado de la interfaz
1otaciones para el di,logo
3+1
7/21/2019 Eng Soft 2008
49/53
icon )espuesta del sistema( iluminar el icono
icon "e*ar de iluminar el o!*eto icono
icon NQ 7ovimiento de arrastre del o!*eto icono
3+1
1otaciones para el di,logo
3+1
7/21/2019 Eng Soft 2008
50/53
UAN Realimentacin Estado de la interfaz
1) ~[file] Mv File!, forallfile!) file"! #elected $ file
%) ~[&,']( *tlinefile) + ~
) ~[tras-] *tlinefile) + ~ tras-!
.) M/ 0eletefile), tras-!! #elected $ n*ll
E*emplo( -area 1!orrar un fic$ero envindolo a la papelera de recicla*e1
3+1
1otaciones para el di,logo
3+1
7/21/2019 Eng Soft 2008
51/53
E*emplo( -area 1!orrar un fic$ero envindolo a la papelera de recicla*e1
3+1
+n,lisis de tareas
I#ple#entacin
7/21/2019 Eng Soft 2008
52/53
I#ple#entacin
#na vez modeladas las tareas de!e o!tenerse unaimplementacincorrecta de las mismas
Para ello $ay que tener en cuenta varios factores( -ipos de interaccin
Posicionamiento valor te0to seleccin arrastre Principios gu%as de estilo estndares Destin de entradas del usuario
Peticin muestreo evento
"iseo de la presentacin
Destin de errores
Conclusiones
7/21/2019 Eng Soft 2008
53/53
Conclusiones
El diseo de la interfaz es parte fundamental delproceso de desarrollo del soft'are y de!e serconsiderado desde el principio
El usuario de!e tomar parte en el diseo y no ser
mero espectador E0isten metodolog%as y notacionespara el diseo
que de!en ser utilizadas La evaluacindel diseo tiene una gran importancia