eng soft 2008

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


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



copia

limpiaportapapeles

deselecc.objeto

selecc.objet

o

Crear

objeto

borrar

objet

o

vaciar

portapapelesinicio

Portapapeles

Vacio sinseleccin

Portapapeles

Lleno sinseleccin

PortapapelesVaco



copia

limpiaportapapeles

deselecc.objeto

selecc.objet

o

Crear

objeto

borrar

objet

o

vaciar

portapapeles


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


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


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


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


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


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

eng soft 2008

Documents