EnginyeriaInteraccio SR

Enginyeria dInteracci
Graus en Enginyeria Informtica &

Enginyeria en Sistemes Audiovisuals
1r curs, 1r Trimestre
Enfocament del curs

Estructura
Treballs
Calendari
PRESENTACI DEL CURS
Material:
Profs. Narcs Pars, Alicia Burga, Jonathan Chacn, Joan Mora i Valeria Righi
contacte: narcis.pares@upf.edu
Material basat en loriginal del Prof. Josep Blat
Enginyeria dInteracci ESUP DTIC - UPF
1r Curs, 1r Trim
Estructura Curs a Teoria
Enfocament del Curs

Anlisi
Interfcies
TS1 - Introducci a les Interfcies

Introducci a les Interfcies
Aspectes de la qualitat de les interfcies i les interaccions
Disseny
Abstracte
Teoria
Disseny
Concret i
Prototipatge
Avaluaci
dInterfcies
Enginyeria dInteracci
Disseny dInteracci
i GUIs
Disseny
Concret i
Prototipatge
Avaluaci
dInterfcies
1r Curs, 1r Trim
Qu s una interfcie? Bones i Males interfcies

Noci de caixa negra i el model mental
Qu s dissenyar la interacci?
Indagaci contextual
Modelitzaci del treball
TS4 - Disseny Centrat en ls

Metodologia de Disseny Centrat en ls
TS5 Control Parcial

Primer Control Parcial
TS6 Cognici i Tipus Interfcies

Aspectes Cognitius dels Usuaris
Qu vol dir prototipatge?

Importncia dels prototips
Escenaris
Wireframes, Mock-ups & Prototipus
Paper Prototyping
Story Board
Wizard of Oz
Alt i Baix Nivell de Prototips
Consorci W3C
Algunes eines per fer prototips
Model de Continguts i de Navegaci
Tcniques de dileg
Ajuda a l'usuari
Dispositus
Directrius d'usabilitat i accessibilitat
TS8 Prototipatge
Eines de Prototipatge
Disseny Centrat en l's i Disseny Centrat en l'Usuari

Rols dUsuari
Tasques dUsuaris i Casos ds
Tipus dInterfcies
Estils de dileg
TS7 Tipus Interfcies

Variabilitat dInterfcies i Interaccions
TS3 - Disseny Centrat en ls

Disseny
Abstracte
Qu s la interacci? Tipus d'interacci
TS2 - Disseny Contextual

LUsuari: Entenent-lo i aspectes socials i contextuals:
Metodologia de Disseny Contextual
Anlisi
Interfcies
Seminaris i
Prctiques
1r Curs, 1r Trim
Aspectes segons Norman

Aspects segons Card, Moran & Newell
el Model de Processador Hum
TS9 Usabilitat
Avaluaci dUsabilitat
Avaluaci: per qu? qu? i com?

Prova dUsabilitat
TS10 Control Parcial

Segon Control Parcial
1r Curs, 1r Trim
Treballs i Avaluaci
Activitats
d'avaluaci
Control Parcial 1
Control Parcial 2
Seminari 1
Seminari 2
Criteris
d'avaluaci
Mnim requerit
per aprovar
l'assignatura
Pes en la
nota final
Recuperaci
Respondre
preguntes curtes
i/o tipus test de
forma correcte i
focalitzada.
Cal treure al
menys un 5,0 de
la mitja dels dos
parcials
Els dos parcials

fan mitja entre s
a parts iguales.
El resultat t un
pes de 1/3 sobre
la nota final.
Recuperables al
juliol de forma
separada
Correcte treball a
classe amb
dileg amb el
professor i
correcte
lliurament dels
exercicis.
Es puntuen tan
sols amb tres
notes possibles:
0,0 / 5,0 / 10,0
en funci de la
qualitat.
Els exercicis han
de ser lliurats a
final de cada
classe. Altrament
tindran nota 0,0
Fan mitja entre

ells a parts
iguales donant
una nota final en
el rang
[0,0 , 1,0]
Aquesta nota se
suma a la nota
final
NO Recuperables
Seminari 3
Prctica 1
Prctica 2
Prctica 3
Prctica 4
Prctica 5
Prctica 6
Prctica 7: Memria
Final i Presentaci
Oral
Contingui
clarament tots
els punts definits
en lenunciat.
Cada punt
raonat, redactat i
illustrat.
Correcte
lliurament:
format i terminis.
Cal treure al
menys un 5,0
De la mitja
ponderada de les
7 prctiques.
Una prctica no
lliurada o no
lliurada a temps
compte 0,0
P7: Presentaci
Oral obligatria
tractament
examen.
Per tal de poder obtenir la nota mitja final,

tant la mitja de controls com la de
prctiques ha de ser una
nota mnima de 5,0
NF = MCP*0,33 + MSem + Mprac*0.66
NF: Nota Final

Es realitza una
mitja ponderada
de les 7
prctiques
segons els
segents
coeficients (per
ordre):
0,5 - 1,5 - 1,0 1,0 - 2,0 - 1,5 2,5
El resultat t un
pes de 2/3 sobre
la nota final.
MCP: Mitja Control Parcials

MSem: Mitja Seminaris [0,0 1,0]
Recuperables al
juliol de forma
conjunta amb
treball extra i
presentacin oral
individual.
Introducci a les Interfcies

Aspectes de la qualitat de les interfcies i les interaccions
Qu s la interacci?
Tipus d'interacci
Qu s una interfcie?
Bones i Males interfcies
Noci de caixa negra i el model mental
Qu s dissenyar la interacci?
MPrac: Mitja Prctiques
TS1 - INTRODUCCI A LES INTERFCIES
1r Curs, 1r Trim
Qu s la Interacci?
1r Curs, 1r Trim
Interacci Persona-Ordinador
Antecedents i Evoluci
Cincies Socials:
Interacci entre persones
Qumica:
Interacci entre compostos
Targes perforades & impressora
Fsica:
Interacci entre cossos
Housing
Employ
-ment
Economia:
Interacci entre factors
Corporate
Investment
Informtica:
Interacci Persona-Ordinador (Human-Computer Interaction, HCI)
1r Curs, 1r Trim
1r Curs, 1r Trim
Teclat i Pantalla
1951 Whirlwind Computer MIT
Primer joc
dordinador
1958 William
Higinbotham
1r Curs, 1r Trim
Afegim el mouse: Douglas Engelbart,
Stanford Research Institute,1963
Ivan Sutherland,
el visionari
Sketchpad,
1963
1r Curs, 1r Trim
1r Curs, 1r Trim
1r Curs, 1r Trim
Dispositius ms
estranys com
guants i cascs
de visualitzaci
(NASA 1983)
Pantalles de
gran format i
cmera per
captar usuari
1r Curs, 1r Trim
Qu vol dir?
Sensors de posici
+ habitaci de
projeccions
+ ulleres 3D
= CAVE
1r Curs, 1r Trim
Interacci no s una sola cosa
1r Curs, 1r Trim
1r Curs, 1r Trim
Qu s una Interfcie?
Interfcies no informtiques?
All que se situa entre el sistema i la persona.

All que dna a la persona accs i retorn, vers i des del
sistema.
Podem tenir noci dinterfcie sense ordinadors.
Quines interfcies, en que no intervenen ordinadors,
utilitzem habitualment en el nostre entorn?
1r Curs, 1r Trim
1r Curs, 1r Trim
1r Curs, 1r Trim
1r Curs, 1r Trim
De quin costat t la
nansa una tassa?
1r Curs, 1r Trim
Bones i males Interfcies
1r Curs, 1r Trim
Interfcies vs Funcionalitat
Quines sn bones i quines dolentes?

I per qu?
I per qu ning no ho va pensar abans?
I com es poden avaluar formalment?
I com es poden millorar?
http://www.baddesigns.com/doors.html
http://www.baddesigns.com/fridge.html
http://www.baddesigns.com/condom.html
http://www.baddesigns.com/manylts.html
NO CONFONDRE LA FUNCIONALITAT
AMB LA INTERFCIE
Funcionalitat ve fixada per necessitats o requeriments
daplicaci
(en el nostre cas ens ve donada i no la podem canviar)
Interfcie permet accedir a Funcionalitat
per aix pot ser millor o pitjor
(en el nostre cas s el que dissenyem)
1r Curs, 1r Trim
pot canviar i
1r Curs, 1r Trim
Qu s una Interfcie en informtica?
Qu s una Interfcie?
Interfcies
Digitals o
Grfiques
En un sistema amb ordinador

Habitualment es pensa en elements fsics: ratolins, teclats,
pantalles, joysticks, guants, cascs, etc.
Important que les interfcies no noms sn per entrar dades
al sistema (teclat, mouse, ...) si no tamb per obtenir
respostes (sortides) del sistema (pantalles, impressora, ...)
Physical
Physical
Physical
Interfaces
Interfcies
Interfaces
Interfaces
Fsiques
Output
Input
Tamb cal tenir en compte la vessant digital de les

interfcies: cursor, finestres, botons, mens, icones, etc.
1r Curs, 1r Trim
Per qu s tan important una Interfcie?
s all que ens permet fer-nos

una idea dall que fa el sistema
?
1r Curs, 1r Trim
1r Curs, 1r Trim
Caixa Negra i Model Mental
s lnica forma que tenim

daccedir al sistema i a laplicaci
El sistema s una caixa negra

no cal que la gent spiga com fa
les coses (per dins),
per s que cal que tingui clar
(des de fora) qu pot fer i qu
passa.
Usuaris han de tenir clar:
Qu els demana o ofereix el sistema
Qu passa quan ells fan una acci sobre el

sistema quin s el resultat
Els usuaris es fan la seva pellcula

(model mental) a partir del que veuen del
sistema la interfcie
Els usuaris faran accions correctes o no

segons si la interfcie els explica b qu
han de fer
Els usuaris faran previsions correctes o no,

del que passar, segons la interfcie els ho
deixi clar
?
1r Curs, 1r Trim
Caixa Negra i Model Mental
Disseny dInteracci
Qu s Dissenyar?
Com shan de comunicar sistema i persona
Quines parts duna aplicaci pot controlar lusuari
Com les podr controlar lusuari?
Amb quines accions?
Amb quines interfcies?
Com senllacen aquestes interfcies a lacci dins de laplicaci? (mapatge
dentrada)
Com respondr el sistema?

Amb quina informaci?
Amb quins estmuls? (imatge, so, text, vibraci...)
Amb quines interfcies?
Com senllacen aquestes respostes a les interfcies vers la persona? (mapatge de
sortida)
1r Curs, 1r Trim
Disseny dInteracci
1r Curs, 1r Trim
Disseny dInteracci
Comunicaci entre persona i el sistema

Depn de quina s laplicaci i la forma en que es vol comunicar
paradigma dinteracci
Exemple 1: Aplicaci de gesti duna empresa
Base de Dades: info. productes, provedors, clients, materials, factures,
etc.
Usuaris es comuniquen amb sistema per extreure, entrar i gestionar
dades
paradigma d information retrieval
Exemple 2: Aplicaci de simulaci urbanstica en realitat virtual

Entorn modelat: edificis, carrers, arbrat, mobiliari urb, etc.
Diferents tipus dinteracci mostren diferents

especificitats de disseny:
Exemple 1: Aplicaci de gesti duna empresa
interfcie grfica dusuari (GUI) controlada amb
teclat i mouse a travs de pantalla de sobretaula
Exemple 2: Aplicaci de simulaci durbanisme
experincia de RV amb casc i guant de dades
Usuaris es comuniquen amb el sistema per explorar, experimentar,

percebre, entendre
paradigma d experincia
1r Curs, 1r Trim
1r Curs, 1r Trim
Interfcies Grfiques d'Usuari (GUIs)

MM/
Web
Paradigma
dInteracci
De langls: Graphical User Interface (GUI)
Donat que habitualment les aplicacions dempresa o

domstiques utilitzen unes interfcies fsiques
estndard (teclat, mouse i pantalla) tota la flexibilitat
es dna a partir dels elements grfics de laplicaci.
Interfcie
Fixades:
Teclat,
mouse i
monitor
Disseny dInteracci
Aquesta flexibilitat del mn digital s molt potent i es

poden fer moltes interfcies grfiques diferents.
Disseny
dInterfcie
Centrat en
usuari
Disseny
dInteracci
Estndards
de disseny
GUI
Cicle de
desenvolupa
ment
Criteris
dAvaluaci
Avaluaci
Usablitat_
Rendiment
1r Curs, 1r Trim
s adoptar un punt de vista centrat en l'usuari
Perfil d'usuari
Tasques
Lloc d'interacci
s un procs, normalment iteratiu
Requeriments
Dissenys conceptuals
Prototipus de baix i alt nivell
Avaluaci (i no tan sols de l'aplicaci final)
Posta en funcionament
s un procs multidisciplinar (els millors dissenys)
Dissenyadors grfics, industrials, interactius
Enginyers (especialitzats en ergonomia)
Antroplegs i socilegs
Informtics, ...
Qualitat del Disseny dInteracci
Qualitat del Disseny dInteracci
Molts tipus dusuaris, despais dinteracci i tecnologies
Primer Dissenys
Conceptuals
representaci
abstracta de
funcionament
Important Definici, Comprensi de Dimensi i Espai

problema:
Qu volem fer?
1r Curs, 1r Trim
Quins sn problemes a solucionar?

Per qu sn importants?
Com millorar-ho?
Com saber que ho hem assolit?
1r Curs, 1r Trim
1r Curs, 1r Trim
Tipus dInteracci
Tipus dInteracci
Instruccional
Manipulativa
Li donem ordres - el que volem mitjanat tecles de mens, del teclat

Mquines de refrescos
Manipulem els objectes

(selecci, moure, obrir,
tancar)
Conversacional
Parlem com si tingussim una conversa
Exploratria
Interfcies de llenguatge natural (veu o escrit)
Ens movem a un mon virtual (a la pantalla); sales interactives...

1r Curs, 1r Trim
1r Curs, 1r Trim
Disseny i Avaluaci de GUIs
Fites d'usabilitat
Diversos investigadors han donat diversos criteris

a tenir en compte en el disseny dinterfcies:
Temps d'aprenentatge
(learnability)
Velocitat d'utilitzaci
(efficiency)
Autors rellevants:
Donal Norman: The Design of Everyday Things
Retenci al llarg del

temps (memorability)
Jacob Nielsen: Usability Engineering
Minimitzar errors dels

usuaris
&
Ajudar usuaris en cas
derror
Ben Shneiderman: Designing the User Interface

Yvonne Rogers i altres: Interaction design: beyond human-computer
interaction
Satisfacci subjectiva
(subjective satisfaction)
1r Curs, 1r Trim
1r Curs, 1r Trim
10
Les interaccions creen experincies

interactives
Tipus dAvaluaci
Avorrit, Divertit, Excitant, Emotiu, Angoixant,
Necessita preparaci dels experts

Definir els objectius
(les guies, la consistncia,
navegabilitat, ...)
... i haurien de ser accessibles

Usuari
s convenient que es faci

en diferents etapes
del disseny
Tecnologia
Millor si tenen relaci

amb el projecte i
treballen amb
continutat
Context
Una primera forma d'avaluaci s l'anlisi per part

d'experts
1r Curs, 1r Trim

Una altra forma d'avaluaci
sn els qestionaris (impresos,
on-line).
Una segona forma d'avaluaci es fa en laboratoris

d'usabilitat amb "test" extensiu
Els laboratoris sn rees especialment preparades, amb un rea pels
usuaris i altra per als observadors (amb un vidre semi-mirall)
Els usuaris han de ser
representatius dels que
ho seran
Una part del qestionari va dirigida a

analitzar la qualitat de la interfcie;
usualment es relaciona amb el
model d'interfcie desenvolupat,
amb els diferents elements d'input,
interacci, ...
Consideracions tiques
sn importants:
voluntarietat, privacitat
Altra part del qestionari recull

dades objectives sobre els usuaris
(edat, experincia amb ordinador,
treball, ...) i impressions subjectives
Vdeo per a registrar i

revisar s s molt
recomanable
Necessiten ser preparats

acuradament, i cal valorar les
avantatges i inconvenients de que
siguin curts o llargs, ...
Logs dels usuaris tamb
s important que els resultats siguin

precisos respecte als parmetres
senyalats al principi
1r Curs, 1r Trim
1r Curs, 1r Trim
1r Curs, 1r Trim
11

Una quarta forma d'avaluaci s durant l's
real del producte (es veu facilitat pel fet que
els programes tenen diferents versions)
Pot fer-se mitjanant entrevistes individuals o grups
de discussi focalitzats " Pot automatitzar-se per
software que reculli els "logs" d'activitat
Pot fer-se a travs dels serveis de suport per telfon
o on-line
Facilitant els missatges dels usuaris per e-mail o
altres formes (exemple de l'agent de Netscape)
Mitjanant news o forums de grups d'usuaris
(independents!)
Seleccionar una Interfcie a millorar per a la resta de

prctiques
P1 INTERFCIE A MILLORAR
Utilitzant congressos i publicacions d'usuaris
1r Curs, 1r Trim
1r Curs, 1r Trim
Entendre l'usuari
LUsuari: Entenent-lo i aspectes socials i contextuals:

Indagaci contextual
TS2 - DISSENY CONTEXTUAL

1r Curs, 1r Trim
1r Curs, 1r Trim
12
Entendre l'usuari
Aspectes socials i contextuals:

Idea bsica Contextual Design:
Hugh Beyer, Karen Holtzblatt: Contextual design: defining customer-centered systems,

Morgan Kaufmann, 1998 (QA76.9.S88 B49)
Els usuaris no interaccionen amb els sistemes informtics de

manera allada.
Sistemes donar suport real al treball, a l'activitat (pot ser

amb nous mtodes)
Entendre prctica del treball o de l'oci o deducaci o ...
Relacions Socials molt importants.
Noms possible en context propi del treball o de l'oci o

deducaci o ...
Habitual que estiguin integrats en context social o de grup.
Dissenyadors:
Disseny Contextual intenta passar de "persona allada" a "persona

dins un grup.
Important quan estudiem entorns de treball (o estudi, oci, ...)
Les prctiques de treball sn socials i les eines s'utilitzen en un context
social
1r Curs, 1r Trim
desenvolupar tota una estratgia institucional (o corporativa),

estructurar un sistema doni suport a redisseny del treball.
Tamb estratgia de sistema
oci, educaci, etc.
suporti redisseny d'altres activitats:
1r Curs, 1r Trim
Indagaci Contextual (Contextual Inquiry)
Metodologia
Fases:
Indagaci contextual (contextual inquiry): entendre els usuaris
Modelitzaci del treball (work modelling): representaci del treball (o de l'oci o

educaci o ...)
Consolidaci (consolidation): integraci dels resultats
Redisseny del treball (work redesign): visi implementada mitjanant storyboarding
Disseny de l'entorn d'usuari (user environment design): explicitaci del disseny, incloent
l'entorn
Prototipat a baix nivell i test amb usuaris (Mock-up and test with customers): proves
amb prototips des del primer moment
Posant en marxa (putting into practice): procs d'implementaci
Filosofia:
nica forma d'obtenir dades fiables dels usuaris
context mentre treballen.
en el seu
Orientacions fonamentals sn:

Observar els usuaris
Agafar una relaci d'aprenentatge amb ells
Nosaltres noms utilitzarem dues primeres fases
s adaptaci de mtodes
etnogrfics a restriccions
d'enginyeria.
1r Curs, 1r Trim
1r Curs, 1r Trim
13
Guies de com desenvolupar-la:

Observar treball descobrir qu s important.
Usuaris no sadonen de tot el que fan, especialment les coses importants i quotidianes
Observar treball agafar detalls.
Evitar generalitats i visions molt sumries
Relaci de partenariat: alternar observaci i probing

(verificaci/consulta)
Interpretacions: compartir-les amb usuaris
Observar el treball obtenir estructura

Estratgies i tcniques de treball
es descobreixen mitjanant exemples
Relaci: Mestre (usuari)
Enfocar s clau: guiar les converses

(Atenci: aix pot amagar l'inesperat)
Aprenent (nosaltres)
Expandir el focus: desafiant suposicions, en lloc d'intentar

validar-les
Evitar altres models de relaci com:
entrevistat (usuari) / entrevistador (nosaltres)
novell (usuari) / expert (nosaltres)
convidat (usuari) / amfitri (nosaltres)
1r Curs, 1r Trim
1r Curs, 1r Trim
Essencial entendre que l'objectiu d'aquesta indagaci s

capturar l'activitat real dels usuaris, ms enll de
l'ordinador i del programa.
Estructurar la indagaci contextual:

Convencions
inicials:
presentaci,
explicacions,
permisos
(5-15 min)
Transici:
les noves regles de
joc; inici relaci
mestre - aprenent
(1-2 min)
Indagaci:
l'usuari es posa a
treballar i l'indagador
interromp demanant
aclariments sobre els
detalls del treball
Tancament:
es comenten les
primeres
interpretacions i
s'aclareixen
punts febles
(10 min)
1r Curs, 1r Trim
Moltes vegades es tracta, precisament, d'entendre

tot el que no hi ha al programari actual,
o no es fa amb aquest programari.
1r Curs, 1r Trim
14
Exemple Complert: El Caixer Automtic

Estudiem ls dun caixer automtic dels que es troben directament sobre el
carrer; s a dir, que no es troben dins dun espai tancat dins loficina bancria.
Modelitzar ajuda a:
visualitzar el treball,
mostra distincions importants
Volem entendre tot all que envolta ls del caixer i no noms la seva
interfcie context
Triem un parell dusuaris representatius.
Models:
Demanem que utilitzin el caixer automtic com sempre ho fan.
Flux (flow), comunicaci i coordinaci

Successi (sequence), passes detallades
Artefactes (artifact), objectes fsics
Cultural, restriccions
Fsic (physical), estructura de l'entorn
Demanem perms per observar-los. Podem demanar perms per enregistrarlos.

Cal situar-nos a una certa distncia per veure la situaci global, per prou a
prop per veure qu fan a la interfcie.
Cal no interrompre a menys que tinguem un dubte que hgim de resoldre en
aquell precs moment i no puguem deixar per desprs.
Finalment modelitzem all que hem vist.
1r Curs, 1r Trim
1r Curs, 1r Trim

Modelitzaci del treball: Model de Flux
Exemple:
Model de Flux:
Reporte de
problemas
Personal
entidad
bancaria
Com el treball est dividit entre gent
Operaciones
realizadas, saldo
Pareja
Com gent es coordina per a fer la feina

Identifica individus, grups, responsabilitats
Consulta de
operaciones
Confirmacin
pago nmina
Subratlla camins de comunicaci i accions o temes
Transferencia
Identifica artefactes de comunicaci
Informacin
requerida
Confirmacin
de cobro
Llocs de comunicaci i trencaments
RRHH
empresa de
trabajo
Representaci grfica:
Qu cuenta
uso?
Ya cobr
este
mes?
Consulta de
pagos
Usuario ATM
Transferencia
nmina
Consulta de
pagos
Individus com bombolles i llista de responsabilitats

Camins com fletxes enllaant bombolles
Otros
usuarios
esperando
Artefactes com rectangles petits
1r Curs, 1r Trim
Tardas
mucho?
Confirmacin
de pago
Entidades
domiciliadas
1r Curs, 1r Trim
15
Modelitzaci del treball: Model de Successions
Exemple:
Treure diners
Model de Successions:
Trigger: Acceder al cajero

Intent: sacar dinero
Cajero pide identificacin

Intent: identificarse
Busca tarjeta o libreta
Representa passes per a que accions ocorrin

Dna informaci de baix nivell til per decisions detallades
de disseny
Identifica objectius, primaris i secundaris
Identifica triggers (desencadenants) d'accions
Detalla accions reals, el seu ordre, bucles, branques i
trencaments
Inserta tarjeta/libreta
a veces no recuerda el PIN y lo encuentra

en el mbil o la agenda
Introduce PIN
Intent: sacar una cantidad predeterminada
Selecciona operacin:
retirar dinero
puede no tener
la cantidad requerida
Selecciona cantidad
Confirma operacin
puede olvidar la tarjeta
Retira tarjeta
puede olvidar el dinero
Retira dinero
1r Curs, 1r Trim
Modelitzaci del treball: Model Fsic:
Exemple:
Model Fsic:
Examinar com l'espai facilita o dificulta el treball
Model del lloc de treball i de l'entorn espacial, que reflecteix
el treball
1.
El barri pot ser problemtic en

seguretat.
2.
La vorera s estreta i la gent

molesta en passar.
3.
Laltura del caixer ha de ser

(1)
cmode per estar dret per
gent amb diferents alades. I
qu passa amb gent en cadira
de rodes?
Al model cal representar grficament:

els llocs on es treballa
les estructures que limiten i defineixen
l'espai: parets, mobiliari
l's de l'espai, i els moviments
les xarxes d'eines i artefactes
la disposici d'eines, artefactes i estructures
trencaments
1r Curs, 1r Trim
1r Curs, 1r Trim
4.
No hi ha lloc segur per deixar

bossa, motxilla, cartera, etc.
5.
Gent esperant fan pressi a

usuari
6.
Gent al voltant poden veure

informaci privada: PIN, saldo,
dades personals, etc.
7.
Lloc sorolls pot dificultar

estmuls acstics.
8.
La llum ambient o del sol

directa pot dificultar tasques.
(3)
(4)
(5) (6)
(2)
(7)
(8)
1r Curs, 1r Trim
16
Modelitzaci del treball: Model dArtefactes
Exemple:
Model dArtefactes:
Objectes utilitzats o creats durant el treball

Objectes expliquen" histries sobre el treball
Mostren suposicions, conceptes, estratgies, estructura
Molt important recrrer els artefactes amb els usuaris i guardarne cpies
la informaci que es presenta

les parts i la seva estructura
les anotacions (que denoten l's informal)
la presentaci
l's
trencaments
altres distincions conceptuals
Usos:
1. Recordar el PIN.
2. Mirar un correu on diu compte
bancari per transferncia.
3. Trucar familiar per consultar o
acordar.
4. Etc.
1r Curs, 1r Trim
Problemes
1. Depn de tenir bateria!
2. Inutilitza una m.
3. Un element ms a protegir
(seguretat), tant en privacitat com
en lobjecte en s.
1r Curs, 1r Trim
Modelitzaci del treball: Model Cultural

Exemple:
Model Cultural:
Intenta visualitzar la cultura del context: expectatives, desigs,
poltiques, valors
Usuaris submergits dins una cultura s invisible (aigua i peixos,
aire i persones)
Fer aparixer influncies explcitament: qu condiciona eleccions,
qu suposa restriccions, ...
Influncies rellevants: estndards, poltiques, poder, valors,
identitats grupals, emocions, estil, preferncies,...
els influenciadors (individus o grups) que afecten la prctica del treball

l'extensi d'aquest efecte
les influncies
trencaments
1r Curs, 1r Trim
No gastis
tant!
Parella
La gent fent
cua t pressa!
Possible
Inseguretat
Publicitat de
nous productes
bancaris
Gent del Barri

He destar
pendent de
moltes coses
Necessito que
traspassis
diners al compte
U1
Usuari Caixer
Automtic
Tal persona ha
perdut la feina per
la crisi
Em sento insegur
utilitzant caixer
automtic
Vull que facis totes

les operacions en
caixer automtic
Banc
Encarregat de la
compra setmanal al
super.
Cal aprendre a
utilitzar tecnologies
interactives
Mira aquest com

gasta tot i que
estem en crisi
Societat
1r Curs, 1r Trim
17
NO tots els models sn sempre rellevants

En cada cas cal seleccionar el/els ms adequat/s
que aporten ms informaci
Exemple
Model de Flux:
A continuaci donem altres exemples.
1r Curs, 1r Trim
1r Curs, 1r Trim
Exemple
Model de Successions:
Exemple
Model dArtefactes:
1r Curs, 1r Trim
1r Curs, 1r Trim
18
Exemple
Model Cultural:
Exemple
Model Fsic:
1r Curs, 1r Trim
1r Curs, 1r Trim
Desenvolupament d'un qestionari

d'usabilitat
Descobrir els bons aspectes i els aspectes millorables de la interfcie
Cal que sigui clar i no massa llarg
Tipus d'informaci que volem recollir
Com la volem recollir
Preparaci
Disseny dun qestionari dusabilitat per avaluar

Interfcie a millorar
Dissenyar un qestionari dentre 1 i 2 pgines

Provar-lo amb un parell de persones per veure si s'entn
Preparar qestionari final
Administrar-lo
S1 - DISSENY QESTIONARI
Pensar demografia
Edat dels usuaris
Coneixements dels usuaris
1r Curs, 1r Trim
1r Curs, 1r Trim
19
Desenvolupament d'un qestionari

d'usabilitat
Qestionari d'usabilitat
Benvinguda i Introducci
Dades de demografia
mai personals! garantir anonimat
Qu volem saber:
Com ha estat de fcil/difcil aprendre el sistema?
Quines parts del sistema donen ms dificultats?
Quins suggeriments poden fer per a millorar el
sistema?
Demografia
1. Edat
Com sn d'tils els manuals d's?
20-30
30-40
40-50
>50
Batxillerat
Llicenciat
2. Sexe
Home
3. Formaci
Quin temps han dedicat a aprendre el sistema?
4. Coneixements
Informtics
5. Expert en el tema
de laplicaci
1
<20
1r Curs, 1r Trim
ESO
Cicle
Formatiu
Informtic
de carrera
Gens
expert
Molt
Expert
1r Curs, 1r Trim
Interfcie
Errors i informaci
No
Aplicable
1 2 3 4 5
11. La interfcie s agradable
Total desacord
Total acord
12. Magrada utilitzar aquesta interfcie
Total desacord
Total acord
13. Lorganitzaci de les opcions de

men s clara i fcil de trobar
Total desacord
Total acord
14. El significat de cada opci queda

clar sense haver-hi dentrar
Total desacord
Total acord
15. Els botons i opcions es poden llegir

amb facilitat
Total desacord
Total acord
16. Els colors de la interfcie aporten

un bon contrast per a la llegibilitat
Total desacord
Total acord
17. Els colors de la interfcie no em

cansen la vista
Total desacord
Total acord
1r Curs, 1r Trim
Doctorat
Mai he
utilitzat
Ordinador
Detalls Interfcie
Dona
Missatges dErrors i Ajuts
No
Aplicable
1 2 3 4 5
7. Si mequivoco en un pas laplicaci

majuda a recuperar-me rpidament
i fcilment
Total desacord
Total acord
8. Els missatges derror de laplicaci

em diuen de forma clara com
corregir lerrada
Total desacord
Total acord
9. La informaci donada (com ajuts

daplicaci, o ajuts puntuals duna
zona en concret, etc.) s fcil
dentendre
Total desacord
Total acord
10. Em resulta fcil trobar la informaci

que necessito
Total desacord
Total acord
1r Curs, 1r Trim
20
Visi Global
Cloenda
Reacci Global a laplicaci
No
Aplicable
1 2 3 4 5
Visi Global Subjectiva
No
Aplicable
1 2 3 4 5
1. En general estic satisfet/a del com

ns de fcil utilitzar laplicaci.
Total desacord
Total acord
18. Laplicaci t totes les funcionalitats

i capacitats que jo esperaria tenir
Total desacord
Total acord
2. s senzill utilitzar aquesta aplicaci
Total desacord
Total acord
Total desacord
Total acord
3. Puc efectivament acomplir la meva

feina amb aquesta aplicaci
19. Globalment estic satisfet amb

laplicaci
Total desacord
Total acord
4. Puc acomplir la meva feina

rpidament amb aquesta aplicaci
Total desacord
Total acord
5. Puc acomplir la meva feina de forma

eficient
Total desacord
Total acord
6. Em sento cmode/a utilitzant

aquesta aplicaci
Total desacord
Total acord
Agrair al participant
1r Curs, 1r Trim
Avaluaci a partir del Qestionari

d'usabilitat
Preguntes Esbiaixades
Estadstiques tipus:
Efectes de lentrevistador:
12. Magrada utilitzar aquesta

interfcie
5
16%
1
12%
2
17%
4
33%
3
22%
30
25
20
15
10
5
0
1r Curs, 1r Trim
Li importaria a vost que un familiar prxim es

cass amb una persona de color?
25
17
13
12
12. Magrada utilitzar aquesta

interfcie
1r Curs, 1r Trim
Enquestador de color:
26% enquestats responen s
Enquestador blanc:
72% enquestats responen s
1r Curs, 1r Trim
21
Efectes del referent:
Efectes de com es pregunta:
El President del Govern reclama dels

ciutadans un sacrifici ms gran.
Hi est vost dacord o en desacord?
El teu color preferit s el verd o el vermell?

Quin s el teu color preferit?
Molts experts creuen que...

Quina s la seva opini?
Quin dels segents colors prefereixes:

Verd
1r Curs, 1r Trim
- Vermell
Efectes de com es pregunta:
Efectes de certes paraules:
Quantes hores al dia perds

navegant a Internet?
Quantes hores al dia navegues
a Internet?
Creu vost que shauria de prohibir

fumar en els avions?
Creu vost que shauria de permetre
fumar en els avions?
Creu vost que fumar en els avions
shauria de:
Prohibir
1r Curs, 1r Trim
1r Curs, 1r Trim
- Permetre
1r Curs, 1r Trim
22

Perqu Disseny Centrat en l's?
Rols dUsuari
Avaluar Interfcie a Millorar amb Qestionari

dUsabilitat i fer Indagaci Contextual
P2 AVALUACI INTERFCIE
TS3 - DISSENY CENTRAT EN LS

1r Curs, 1r Trim
Disseny Centrat en l's i Disseny Centrat

en l'Usuari
Disseny Centrat
en lUsuari
Disseny Centrat
en ls
Disseny centrat en lUsuari
Disseny centrat en ls
Enfocament als usuaris: en l'experincia i el grau

de satisfacci
Basat en lopini dels Usuaris
(implicaci substancial dels usuaris)
Enfocament en l's que lusuari far de

l'aplicaci. Ofereix eines que ajuden a dissenyar
en funci d'aquest s.
Basat en la concreci de models
(implicaci selectiva dels usuaris)
Estudis d'usuaris
Models exploratius
Disseny participatiu
Validaci dels models
Respostes i proves dels usuaris
Tcniques de revisi de la usabilitat
Processos molt variables i informals
Disseny basat en el modelatge sistemtic:

processos ben definits
Disseny mitjanant el mtode evolutiu de prova

i error
Disseny basat en metodologies d'enginyeria del

software
1r Curs, 1r Trim
Metodologia del DCU ofereix marc per treballar amb usabilitat:
Ofereix models ms fcils d'entendre per usuaris i dissenyadors

especialment prototipat rpid inicial
Evita fer prototips massa detallats i inflexibles massa aviat
Evita notaci sofisticada

model de continguts
ms flexibles
millorar treball equip de disseny
s flexible de notaci UML (Enginyeria del Software) model de rols i tasques i notaci simple
DCU utilitza models abstractes
enlloc de representar accions literals, tancades i limitades sobre la manipulaci concreta d'objectes
els models abstractes representen les idees bsiques a partir de les quals es construir el sistema.
Tradicionalment
dissenyadors &
enginyers
d'interfcies d'usuari
1r Curs, 1r Trim
1r Curs, 1r Trim
23
Metodologia DCU
Els models basats en l'abstracci ms simples que els que

representen
no es centren noms en el detall
ofereixen visi global
Els pasos de la metodologia s mostren a continuaci:
Doble visi del sistema

batejada modelatge bifocal
ajuda dissenyadors i usuaris a moure's entre:
visi panormica
altra de ms detallada del disseny
Els models abstractes

moltes portes obertes a innovaci
a concepci de diverses alternatives
1r Curs, 1r Trim
1r Curs, 1r Trim
Metodologia DCU
Metodologia DCU
Abans de dissenyar interfcie d'usuari

qu esperen usuaris fer amb el sistema que hi haur
darrera la interfcie.
A mesura que desenvolupem sistema

adquirir capacitat de detectar possibles errors de disseny:
Preguntes: determinar necessitats ms bsiques usuaris
Per qu no funciona (no s efectiu)?

Qu puc fer perqu suporti la interacci dels usuaris amb ms eficincia?
Sovint programadors cometen l'error d'ignorar els usuaris finals del

sistema
Qu estaran fent els usuaris?

Qu voldran fer els usuaris amb el sistema?
prenen ells mateixos, i

segons els seus coneixements i
necessitats, les decisions sobre
el disseny d'una interfcie
en l'entorn real d'explotaci
la utilitzaran els usuaris (i no
els programadors).
Qu necessiten que el sistema els ofereixi per poder-ho dur a

terme?
Com ha de donar el sistema el que necessiten?
1r Curs, 1r Trim
dileg
Disseny interfcies d'usuari ha

de ser:
1r Curs, 1r Trim
24
Metodologia DCU
Metodologia DCU
La interfcie presenta el qu els dissenyadors han

ents que els usuaris necessiten.
Dissenyadors i usuaris han de parlar de la interfcie

una simple conversa no prou illustrativa
ens cal modelar el que aprenem dels usuaris
poder mostrar qu hem ents de les seves
necessitats.
Tot i que usuaris finals sn nostres principals fonts

d'informaci
altres perfils tamb poden aportar informaci:
Clients: les persones que compren el software.
Caps (jefes): que sn d'alguna manera clients indirectes.
Experts en el domini del sistema.
Professors de sistemes anteriors.
Supervisors dels usuaris finals.
1r Curs, 1r Trim
Metodologia DCU
1r Curs, 1r Trim
Rols dUsuari
Qu s un Rol dUsuari?
Podem trobar amb tres tipus d'usuaris:
Mmm... nosaltres s que no sabem res...
Usuaris que ho saben tot i estan disposats a dirigir ells el disseny.
Usuaris que aporten informaci i alhora escolten i

mediten la informaci que se'ls hi aporta a ells.
Collecci abstracta de necessitats, interessos, expectatives,

comportaments, i responsabilitats
caracteritzen una relaci entre una classe o tipus d'usuari i el
sistema.
diferents colleccions, constitueixen els diferents rols
Abstracci: no s una persona real, ni un ttol, ni una posici o funci.
Evidentment, els 'millors' sn els tercers

procs de comprensi mtua.
Aquesta negociaci no s trivial, per poder-la dur amb eficincia cal tenir una
combinaci d'habilitats tcniques i interpersonals.
En aquest punt ens separem del disseny centrat en

l'usuari
emprem metodologies denginyeria del software
per expressar els resultats obtinguts d'aquesta
negociaci amb els usuaris.
dileg amb els usuaris negociaci,
1r Curs, 1r Trim
1r Curs, 1r Trim
25
Rols dUsuari
Rols dUsuari
Models de Rols dUsuari
Com construir el model de rols d'usuari?
Forma ms senzilla: llistes simples de rols amb una

descripci en termes de necessitats, interessos,
expectatives, comportaments i responsabilitats.
Fcils de desenvolupar per no mostren aspectes
importants dels rols interpretats pels usuaris, alguns dels
quals poden ser molt similars.
Cada Rol dUsuari

posar un nom: capturi la naturalesa del rol
breu descripci: necessitats, interessos, expectatives, comportaments i responsabilitats
caracteritzar i diferenciar dels altres
Rols: podem deduir responent preguntes com:

Qui podr utilitzar o utilitzar la interfcie?
Quin s el grup al que pertany?
Qu distingeix com faran servir la interfcie?
Qu caracteritza la relaci amb la interfcie?
Soluci: Mapes de Rols dUsuari
Qu necessita de la interfcie?
Revelen com els diferents rols encaixen definint qui far

servir el sistema i com.
Es diu mapa perqu representa les relacions entre els rols.
1r Curs, 1r Trim
Com es comporta amb relaci a la interfcie?

Com espera que es comporti la interfcie?
Es pot comenar amb tipus d'usuaris concrets i anar generalitzant cap a

l'abstracci del rol
Rols dUsuari
Rols dUsuari
Reprenem lexemple del Caixer Automtic

vist a Disseny Contextual
Estudiem ls dun caixer automtic dels que es troben
directament sobre el carrer; s a dir, que no es troben
dins dun espai tancat dins loficina bancria.
Ara ens interessa analitzar quins rols poden aparixer
entre els usuaris quan sapropen a utilitzar un Caixer
Automtic.
1r Curs, 1r Trim
1r Curs, 1r Trim
Usuari expert en banca:

Necessitats i Interessos: diverses (depenent de la situaci rol dusuari
abstracte)
Comportaments: usuari expert del sistema bancari, la seva terminologia i
funcionament (ex. sap que es un IBAN). Mostra seguretat en ls del sistema
Expectatives: rapidesa
Usuari NO expert en banca:

abstracte)
Comportaments: usuari NO expert del sistema bancari, la seva terminologia i
funcionament. Mostra inseguretat en ls del sistema
Expectatives: facilitat ds, explicacions detallades pas a pas, explicacions de la
terminologia
1r Curs, 1r Trim
26
Rols dUsuari
Rols dUsuari
Usuari del mateix banc:

abstracte)
Comportaments: usuari del mateix banc que el caixer, t coneixements
daquest caixer. Mostra seguretat i rapidesa
Necessitats: retirar diners

Interessos: saber si ha de pagar comissi per fer loperaci
Comportaments: No s un usuari de la sucursal. Pot ser expert en caixers per
no daquest especfic (cada caixer funciona diferent). Pot mostrar inseguretat
perqu no est acostumat a usar aquest caixer
Expectatives: espera tenir una interfcie semblant a la del caixer del seu banc
Viatger estranger:
Necessitats: Utilitza el caixer quan s de viatge i per a treure diners.
Interessos: saber a quant est el canvi de la seva moneda, saber si ha de pagar
comissi per fer loperaci, tenir una interfcie en el seu idioma,
Comportaments: mostra inseguretat perqu no est acostumat a aquest caixer
1r Curs, 1r Trim
Rols dUsuari
Necessitats: actualitzar llibreta

Interessos: veure saldo i moviments impresos, caixer amb lector llibreta
Comportaments: poc coneixement de tecnologia, inseguretat
Expectatives: ser guiat durant loperaci,
Responsabilitat: identificar-se
Transferidor:
Necessitats: ingressar diners en efectiu

Interessos: seguretat al seu voltant, privacitat
Comportaments: cautela, dna importncia al context fsic
Expectatives: , confirmaci de lxit de la transacci
Responsabilitat: identificar-se, (triar compte), introduir diners, confirmar quantitat
1r Curs, 1r Trim
Informaci organitzada en forma de colleccions de perfils (profiles)

combinen diversos factors & defineixen caracterstiques usuaris en rol
concret
Els profiles ms rellevants sn:
Expectatives: : fcil introduir detalls transferncia, confirmaci de lxit de la transacci

Responsabilitat: identificar-se, introduir dades transferncia
Pagador factures:
Necessitats: pagar factura en efectiu
Interessos: fcil introduir detalls factura
Comportaments: cautela en inserir dades, comprova que les dades introdudes siguin
correctes
Expectatives: que hi hagi correspondncia entre les dades que demana el caixer per a
completar loperaci i all que diu la factura, rpid,
Responsabilitat: introduir dades factura, introduir diners
Depositor:
Capturen la major informaci possible sobre relacions dels usuaris amb la

interfcie
especial mfasi en context operacional: entorn i context en que sutilitza
interfcie
Necessitats: transferir diners a compte aliena

Interessos: fcil introduir detalls transferncia
Comportaments: cautela en inserir dades, comprova que les dades introdudes siguin
correctes
Necessitats: diners
Comportaments: cautela, verifica la quantitat de diners lliurada, dna importncia al context fsic
Expectatives: quantitat de diners lliurada correcta
Responsabilitat: identificar-se, triar quantitat, recollir diners
Models de Rols dUsuari Estructurats
Actualizador de llibreta:
Extractor:
Necessitats: veure moviments

Interessos: identificar els moviments de manera clara, privacitat, que pugui llegir sense pressa
Expectatives: llistat clar
Responsabilitat: identificar-se, (triar compte)
Rols dUsuari
Necessitats: una dada concreta

Interessos: veure saldo de manera rpida i senzilla; privacitat
Expectatives: rapidesa global
Consultador Moviments:
Usuari dun altre banc:
Consultador Saldo:
1r Curs, 1r Trim
Incumbents: qu sap l'usuari del domini del sistema

Expertesa (Proficiency): quin nivell t l'usuari fent anar el sistema
Interacci: freqncia, regularitat, continutat, concentraci, intensitat, complexitat,
nivell de predicci, qui t el control ... en l's del sistema
Criteri d'usabilitat: importncia relativa d'objectius d'usabilitat respecte a un rol donat
Suport funcional: funcions especfiques, caracterstiques o facilitats que es necessiten
per donar suport als usuaris en un rol concret
1r Curs, 1r Trim
27
Rols dUsuari
Rols dUsuari
Models de Rols dUsuari ESTRUCTURATS
Models de Rols dUsuari ESTRUCTURATS

Extractor (no estructurat)
Consultador Saldo (no estructurat)

Necessitats: una dada concreta
Interessos: veure saldo de manera rpida i senzilla; privacitat
Necessitats: diners
Comportaments: cautela, verifica la quantitat de diners lliurada, dna importncia al

context fsic
Expectatives: quantitat de diners lliurada correcta
Responsabilitat: identificar-se, triar quantitat, recollir diners
Expectatives: rapidesa global

Consultor de Saldo (estructurat)
Extractor (estructurat)
Incumbents: pot saber molt o poc de banca
Incumbents: coneixement regular del sistema de banca
Expertesa (Proficiency): diversos nivells de coneixements de caixers. (si s

usuari de llibreta pocs coneixements)
Expertesa (Proficiency): bon coneixement de caixers, pot usar diversos caixers
Interacci: diversa freqncia (1 cop/semana), dna importncia al context
Interacci: diversa freqncia ds, operaci rpida que necessita poca

concentraci
Criteri d'usabilitat: assegurar correcta introducci de la quantitat, assegurar lliurament

correcte de diners, prevenir distraccions dusuari (oblit targeta/diners), assegurar privacitat
Criteri d'usabilitat: oferir accs molt rpid a la informaci, assegurar privacitat
Suport funcional: identificaci usuari, (selecci compte), seleccionar quantitat, lliurar diners
Suport funcional: identificaci usuari, (selecci compte), mostrar saldo, sortir

1r Curs, 1r Trim
Rols dUsuari
1r Curs, 1r Trim
Rols dUsuari
resembles
Mapes de Rols dUsuari
Usuari Expert de Banc
Usuari NO Expert de Banc
Revelen com els diferents rols encaixen definint qui far servir el sistema i
com.
resembles
Es diu mapa perqu representa les relacions entre els rols.
Usuari del mateix banc
Relacions poden ser de varis tipus: Afinitat, Classificaci o Composici
Usuari de tarjeta
Afinitat
resembles
resembles
Viatger Estranger
Usuari dun altre banc
Usuario de libreta
Rols que sn similars en l'estil d'interacci, expectatives, caracterstiques

comunes.
Es representa amb una lnia de punts amb la paraula: resembles
Consultador
Depositador
Actualizador
resembles
Rol X
Transferidor
Extractor
resembles
Rol Y
C. Saldo
C. Moviments
Pagador Factures
1r Curs, 1r Trim
1r Curs, 1r Trim
28
Rols dUsuari
Rols dUsuari
resembles
Classificaci
Un rol que representa una versi ms especialitzada dun

altre rol.
Es representa amb una doble lnia dirigida cap al rol ms
general, indicant-ho amb la paraula: specializes.
resembles
Rol X
specializes
resembles
Viatger Estranger
specializes
Usuari de tarjeta
specializes

specializes
specializes
resembles
Usuario de libreta
specializes
Consultador
Depositador
Actualizador
Rol X1
Rol X2
C. Saldo
Extractor
Transferidor
specializes
resembles
C. Moviments
Pagador Factures
1r Curs, 1r Trim
Rols dUsuari
1r Curs, 1r Trim
Rols dUsuari
resembles
Composici
Alguns rols combinen les caracterstiques de dos o ms rols.

specializes
specializes
resembles
Es representa amb una lnia simple dirigida cap als rols

'simples', indicant-ho amb la paraula: includes
specializes
resembles
Viatger Estranger
specializes
Usuari de tarjeta
resembles
Usuario de libreta
includes
includes
Rol X
includes
Consultador
Depositador
Actualizador
specializes
Rol Y
Rol Z
C. Saldo
Transferidor
Extractor
resembles
C. Moviments
Pagador Factures
1r Curs, 1r Trim
1r Curs, 1r Trim
29
Rols dUsuari
Tasques i Casos ds
Com construir el model de rols d'usuari? (cont.)
Per desenvolupar eines que realment ajudin a les persones a

realitzar la seva feina hem d'entendre qu fan i qu pretenen
fer.
El procs bsic s senzill en la teoria:

1. Escoltar i aprendre dels usuaris
2. Construir el model
3. Compartir el model amb els usuaris per treure'n feedback
4. Refinar el model
i tornar al 3 iterativament, si s necessari.
Particularment importants els passos de 2. Construir el model:

Construir un model bsic de rols d'usuari brainstorming llista de rols candidats
cada rol t nom que descriu relaci entre aquest tipus d'usuaris i el sistema
Repassar llista simplificar i generalitzar el model: agrupar rols, eliminar solapaments i
duplicats, establir relacions, ...
Completar els detalls
de cada rol.
descriure: necessitats, interessos, expectatives i comportaments
Identificar un o ms focal user roles: rols ms vitals pel disseny de la interfcie

Exemple: en sistema de reserva d'hotel focal user rol: Recepcionista
1r Curs, 1r Trim
El primer pas ha estat determinar els rols que els usuaris

interpreten en relaci al sistema
El segon pas s entendre i modelar la naturalesa del treball
que aquests rols han de suportar.
Saber amb detall qu intentaran dur a terme els usuaris en el
seu treball utilitzant el sistema i qu necessitaran per fer-ho.
1r Curs, 1r Trim
Tasques i Casos ds
Tasques i Casos ds
Modelar les tasques
Modelar les tasques
Hi ha moltes maneres de modelar una feina.

Diagrames de flux (flowchart)
{ No confondre amb Model de Flux ! }
Escenaris (Scenarios)
Descriu les tasques en termes de

seqncia lgica d'esdeveniments o
processos
Incls tasques llargues i complexes es
poden dividir en sries de passos
seqencials
Descripcions narratives d'una activitat o

activitats, que prenen forma d'histries
que passen en un temps i en un context
donat
Narren la interacci entre un usuari o
tipus d'usuari i el sistema.
Problema: posen molt d'mfasi en
realisme i detall
s'obscureix
organitzaci general
ms difcil allar i
entendre els nuclis bsics d'interacci
Concepte darrere tots els programes

d'ordinador i mquines d'estats finites
Els diagrames de flux ms utilitzats per
modelar tasques dordinadors que no de
persones
1r Curs, 1r Trim
1r Curs, 1r Trim
30
Tasques i Casos ds
Tasques i Casos ds
Modelar les tasques
Casos ds

Casos ds
Jacobson: introdu concepte com a part del seu mtode d'enginyeria del software
orientada a objectes.
La lnia del mig representa simblicament la divisi entre l'usuari i

el sistema
el que seria la interfcie d'usuari (!)
s una descripci narrativa entre un usuari (en algun rol) i un sistema

Representen vista de caixa negra de funcionalitat que sistema ofereix a l'usuari
Es representen normalment en forma de narrativa contnua i lineal
Millora introduda per la metodologista Rebecca Wirfs-Brock
la narrativa es divideix en dues parts:
model d'acci de l'usuari (user action model): mostra el que l'usuari fa
model de resposta del sistema (system response model): mostra la resposta
del sistema a les accions de l'usuari
D'aquesta manera es divideixen clarament les responsabilitats i interessos de
l'usuari dels del sistema
1r Curs, 1r Trim
Tasques i Casos ds
Rebecca
Wirfs-Brock
1r Curs, 1r Trim
Tasques i Casos ds
Casos ds dependents de tries tecnolgiques

Exemple gettingCash assumeix:
s de targes amb bandes magntiques
un dispositiu visual i s dun men
usuari introduir peticions a travs de teclat
Cont molts passos imposats per una interfcie d'usuari concreta
i un disseny intern assumit
alguns dels aspectes de la interfcie han estat ja determinats sense haver estat
dissenyada!!
Aquestes decisions i limitacions:

potser sn la millor manera d'afrontar l'acci que vol dur a terme l'usuari...
o potser no... ?!?!?
Volem aconseguir narrativa estructurada (expressada

en el llenguatge del domini de l'aplicaci)
descripci simplificada, generalitzada, abstracta i
no dependent de la tecnologia
d'una tasca o interacci completa d'un usuari en un
determinat rol en relaci a un sistema.
Es basa en el propsit o intencions d'un usuari
no en els passos concrets o mecanismes
amb que aquesta intenci es pot dur a terme.
Hem perdut oportunitat d'explorar altres alternatives per aconseguir un

millor disseny
1r Curs, 1r Trim
1r Curs, 1r Trim
31
Tasques i Casos ds
Casos ds Essencials
s una narrativa estructurada:
una frase o ttol que descriu la intenci global
una narrativa de dues parts:
el model d'intenci de l'usuari (user intention model)
Tasques i Casos ds
ATENCI!
Aix NO vol dir que siguin els
casos ds ms importants ni
bsics!
Diferncia Casos ds
Exemple gettingCash:
Cas ds Essencial
Cas ds
Vol dir que sn els que tenen

lessncia de la relaci
usuari sistema
equival a user action model (de Rebecca Wirfs-Brock)

l'atenci passa de centrar-se en l'acci a centrar-se en la intenci
el model de responsabilitat del sistema (system responsability model)
equival a system response model (de Rebecca Wirfs-Brock)
l'atenci passa de centrar-se en la resposta a centrar-se en la responsabilitat
Generalment molt ms curts i simples que els casos d's per les
mateixes interaccions
1r Curs, 1r Trim
En aquesta assignatura farem servir casos d's essencials tant a

teoria, com a prctica
1r Curs, 1r Trim
Tasques i Casos ds
Tasques i Casos ds
Narratives Casos ds Essencials exemple Caixer Automtic
Casos ds Essencials de lexemple del Caixer Automtic
Identificacin: El usuario se identifica y el sistema lo reconoce
Retiro de efectivo: El usuario elige la opcin de retirar dinero, selecciona la cantidad y,

si tiene dicho monto, retira su dinero
Consulta saldo: El usuario elige la opcin de consultar saldo y recibe la informacin

adecuada
Consulta movimientos: El usuario elige la opcin de consultar movimientos, y recibe un

registro de sus ltimos movimientos.
Ingreso de dinero: El usuario elige la opcin de ingresar dinero en efectivo, ingresa el

dinero en (una de) su(s) cuentas, y el sistema confirma la transaccin
Transferencias: El usuario elige la opcin de transferir dinero a una cuenta de otra

persona (que debe tener cuenta en el mismo banco), traspasa dinero de su cuenta a
dicha otra cuenta , y el sistema confirma la transaccin
Pago de recibos: El usuario elige la opcin de pagar un recibo, el sistema debe

reconocer el recibo a pagar para solicitar efectivo, y el sistema confirma la transaccin
Cierre de operaciones: El usuario indica que quiere cerrar las operaciones, y el sistema
cierra la sesin
1r Curs, 1r Trim
Identificacin del usuario

INTENCIN DEL USUARIO
RESPONSABILIDAD DEL SISTEMA
Acceder al sistema
Pedir identificacin
Insertar identificacin
Verificar identificacin
Dar acceso
1r Curs, 1r Trim
32
Tasques i Casos ds
Tasques i Casos ds
Retirar dinero
Consultar saldo
Presentar opciones

Presentar opciones
Escoger la opcin sacar dinero

Presentar opciones de cantidad
Escoger la opcin Consultar

Saldo
Preguntar por medio de informacin
Escoger cantidad
Elegir
Verificar que la cantidad es viable
Ofrecer la informacin
Restar cantidad a la cuenta
Dar el dinero
Tomar el dinero
1r Curs, 1r Trim
1r Curs, 1r Trim
Tasques i Casos ds
Tasques i Casos ds
Ingresar dinero (propia cuenta)

Transferencia (cuenta de otro, mismo banco)

Presentar opciones
Presentar opciones
Elegir la opcin Transferencias
Elegir la opcin Ingresar dinero
Preguntar la cantidad a transferir

Elegir una cantidad
Preguntar por la cantidad
Verificar que la cantidad es viable
Elegir cantidad
Restar cantidad a la cuenta origen

Insertar dinero
Pedir el nmero de cuenta a transferir

Poner el dinero en la cuenta del
usuario
Confirmar
Ofrecer el nmero de cuenta

Mover el dinero de una cuenta a otra
Confirmar
1r Curs, 1r Trim
1r Curs, 1r Trim
33
Tasques i Casos ds
Tasques i Casos ds
Pago de recibos
Cierre de operaciones

Presentar opciones
Elegir Cerrar operaciones
Elegir la opcin Realizar un pago
Cerrar sesin
Pedir la identificacin del recibo a
pagar
Identificar el pago
Insertar dinero
Realizar el pago
Confirmar
1r Curs, 1r Trim
Tasques i Casos ds
Tasques i Casos ds
El Mapa i Model de Casos ds
Especialitzaci
Casos d's no estan allats
interrelacions entre ells
1r Curs, 1r Trim
El Mapa de Casos ds modela interrelacions
Simplifica el model global de casos d's

separa propsits d'interacci genrics o generals d'adaptacions ms
especialitzades que tenen propsits ms concrets.
D'aquesta manera no hem de reescriure els patrons d'interacci ms generals
sin que els podem reutilitzar referenciant-los.
Model de Casos ds:
Es representa amb una doble lnia dirigida cap al cas d's ms general i amb
la paraula: specializes
Quan expressem interrelacions descrivim estructura global del treball que

el sistema i la interfcie d'usuari, hauran de suportar
Cos de cada Cas ds Essencial

Mapa de Casos ds que expressa com aquests estan interrelacionats
Cas ds X
El Mapa de Casos ds ha de partir l's en un nombre raonable de casos que

tingui significat pels usuaris
specializes
Els Casos ds Essencials poden estar interrelacionats de varies maneres:

especialitzaci, extensi, composici i afinitat
1r Curs, 1r Trim
Cas ds X1
1r Curs, 1r Trim
34
Tasques i Casos ds
Exemple Caixer
Automtic
Tasques i Casos ds
Utilitzar Caixer
Automtic
specializes
specializes
specializes
Consulta
Compte
Retirar
Efectiu
Consulta
Saldo
Extensi
Cas ds Abstracte
(no sactua ni implementa)
specializes
Ingressar
Efectiu
specializes
Pagar
Rebut
Transferncia
Un cas d's n'estn un altre si aquest darrer representa formes

d'interacci complementries o diferents.
Separant aquestes extensions del cas d's base es mant la
simplicitat i claredat dels casos base i es permet la reusabilitat.
Es representa amb una lnia discontnua dirigida cap al cas d's base
i amb la paraula: extends
Consulta
Operacions
Cas ds X
extends
Identificaci
Usuari
Tancar
Operacions
Cas ds (X+)Y
1r Curs, 1r Trim
Tasques i Casos ds
1r Curs, 1r Trim
Tasques i Casos ds
Composici
Exemple Caixer
Automtic
Utilitzar Caixer
Automtic
Cas ds Abstracte
specializes
specializes
specializes
specializes
Els casos d's es poden descompondre en parts o subcasos

barreja entre especialitzaci i extensi, per amb diferncia important:
el supercas es refereix explcitament als casos d's que necessita per completar la
interacci
specializes
no passa en especialitzaci ni extensi

Consulta
Compte
Retirar
Efectiu
Ingressar
Efectiu
extends
extends
Consulta
Saldo
Consulta
Operacions
Transferncia
Pagar
Rebut
Cas ds X
uses
Identificaci
Usuari
supercas no 'sap' els subcasos que l'utilitzen
Es representa amb una lnia dirigida cap als subcasos i la paraula: uses
Tancar
Operacions
Cas ds Y
1r Curs, 1r Trim
uses
Cas ds Z
1r Curs, 1r Trim
35
Tasques i Casos ds
Exemple Caixer
Automtic
Tasques i Casos ds
Utilitzar Caixer
Automtic
specializes
specializes
specializes
Consulta
Compte
Retirar
Efectiu
extends
Afinitat
Cas ds Abstracte
specializes
Ingressar
Efectiu
Relaci aparent per no prou definida entre casos d's

Ho modelem agrupant casos d's en clsters lgics basant-nos en
el grau de similitud i els situem junts al mapa de casos d's
specializes
Pagar
Rebut
Transferncia
extends
Els podem relacionar amb una lnia discontnua i la paraula:

resembles
uses
uses
Consulta
Saldo
uses
Consulta
Operacions
uses
uses
Cas ds X
resembles
uses
uses
Identificaci
Usuari
Tancar
Operacions
Cas ds Y
1r Curs, 1r Trim
Tasques i Casos ds
Exemple Caixer
Automtic
specializes
Com construm el Model de Casos ds?
Cas ds Abstracte
specializes
specializes
Model de Casos ds comprs per:

La narrativa estructurada de cada cas d's essencial
specializes
Mapa de Casos ds.
resembles
Consulta
Compte
Retirar
Efectiu
extends
Ingressar
Efectiu
Consulta
Saldo
Consulta
Operacions
Pagar
Rebut
Transferncia
extends
resembles
uses
uses
1r Curs, 1r Trim
Tasques i Casos ds
Utilitzar Caixer
Automtic
specializes
uses
uses
El punt d'inici habitual per identificar els casos d's s: Model de

Rols dUsuari
uses
Per cada rol ens preguntem:

uses
Identificaci
Usuari
Qu volen complir els usuaris en aquest rol?
uses
Per completar aquest rol, qu han de ser capaos de fer els usuaris?
Tancar
Operacions
Quines capacitats calen per suportar el que els usuaris necessiten?
1r Curs, 1r Trim
1r Curs, 1r Trim
36
Tasques i Casos ds
Com construm el Model de Casos ds?
Jacobson proposa a ms:
Quines sn les tasques principals dels usuaris en aquest rol?
Quina informaci han d'examinar, canviar o crear els usuaris del rol?

Rols dUsuari
De qu necessiten estar informats del sistema?

De qu necessitaran informar al sistema?
Per cada acci ens hem de formular la pregunta per qu un usuari

en aquest rol voldr fer aix?
Igual com hem fet amb rols d'usuari determinar Casos ds
Focus: aquells entorn dels quals s'organitza tota (o bona part de)
la interfcie d'usuari
1r Curs, 1r Trim
TS4 - DISSENY CENTRAT EN LS

Model de Continguts
i de Navegaci
Model de Continguts
i de Navegaci
Un usuari desenvolupa la seva feina:
en un lloc concret
amb uns determinats materials i eines
aquests es troben fcilment a l'abast de qui l'est realitzant
sn contexts d'interacci
o espais d'interacci
De forma similar ocorre

en les interfcies
1r Curs, 1r Trim
1r Curs, 1r Trim
Qu s el Model de Continguts?
Representaci abstracta dels continguts de diversos espais d'interacci d'un sistema i

les relacions entre ells
El contingut de cada espai d'interacci sn: eines i materials necessaris per
completar els casos d's
Els contexts d'interacci sn els llocs de la interfcie d'usuari d'un sistema on els
usuaris interaccionen amb totes les funcions, contenidors i informaci necessria per
dur a terme una determinada tasca o conjunt de tasques relacionades.
Dissenyar bona arquitectura dinterfcie d'usuari

especificar eines, materials i espais, distribuint els continguts dinterfcie al llarg d'un
determinat nombre d'espais diferents per interconnectats entre s.
Modelar com usuaris, en un rol, poden navegar d'un context d'interacci a un altre
quan han de portar a terme determinats casos d's
al model de continguts s'hi inclou un mapa de navegaci
es modela l'estructura completa de l'arquitectura de la interfcie d'usuari en
abstracte
1r Curs, 1r Trim
37
Model de Continguts
i de Navegaci
Model de Continguts
i de Navegaci
Prototipat Abstracte (Abstract Prototyping)
Prototipat Abstracte (Abstract Prototyping) utilitzant Post-it
Procs de determinar els continguts i organitzaci de la interfcie d'usuari

encoratja pensar sobre qu hi ha a la interfcie d'usuari abans de
preocupar-se com ser visualment o com es comportar
Exemple: Interfcie per a comprador de cases

Cercador dHabitatges
Una bona manera de crear els models dels continguts s amb Post-it (Karen
Holtzblatt i Hugh Beyer)
Selector
dEstil
dHabitatge
Model de Continguts: un tros de paper per cada espai d'interacci a

representar
Espais s'anomenen d'acord amb propsits o funcions a oferir
En cada Context dInteracci: eines i materials que cal oferir als usuaris es
representen amb Post-it de varis colors.
Plnol de Casa
(plnol ampliable)
Low-fidelity prototype vs. High-fidelity prototype
1r Curs, 1r Trim
1r Curs, 1r Trim
Model de Continguts
i de Navegaci
Model de Continguts
i de Navegaci
Model de Continguts:
dissenyadors treballen estructura i organitzaci global
no cal fer dibuixos ni decidir un determinat tipus de GUI widget.
Altres avantatges:
Post-it podem recollocar i provar diverses combinacions
Exemple: aplicaci dibuix

eina triar tipus lnies en espai d'interacci
llista amb scroll? paleta flotant? combo box? ... ?
Si usuaris veuen prototipus molt visuals o simulacions de pantalles

confonen amb interfcie final
En algun punt haurem de prendre decisi

en aquests primers moments interfcie oferir a l'usuari algun mecanisme.
En canvi, Post-it en un full no confondran mai

es podran centrar en
Post-it deixa moltes opcions obertes: aparena visual, comportament,

components
Disseny simple
si tot el que necessiten s present a la interfcie
si est ben organitzat en els diversos contexts d's
Selector
dEstil
dHabitatge
Plnol de Casa
(plnol ampliable)
estrictament necessari
Post-it bo per pensar i plasmar arquitectura interfcie
ATENCI: no manera ms prctica per documentar
documentaci en Content Lists
Evita: partir d'estereotips i adoptar solucions preestablertes

sense considerar si sn ptimes en context determinat
1r Curs, 1r Trim
1r Curs, 1r Trim
38
Model de Continguts
i de Navegaci
Model de Continguts
i de Navegaci
Com construm el Model de Continguts?
Deriva directament del Model de Casos ds

Cada Cas ds t el seu propi context d'interacci
quan dos o ms casos d's sn molt similars o relacionats estretament es
poden integrar en un mateix context d'interacci
si un cas d's molt complex aconsellable partir-lo en varis contexts
d'interacci (no passar-se massa contexts d'interacci per una
mateixa tasca pot frustrar a usuari)
Per tractar extensi i subclasses: totes les eines que es necessiten

haurien d'estar a mateix espai d'interacci que cas d's base
o com a molt, a espai adjacent (espai d'interacci al qual s'hi
accedeix mitjanant una sola transici)
1r Curs, 1r Trim
Materials: dades, contenidors, displays, rees de

treball, sobre les quals les eines
operen.
Selector
dEstil
dHabitatge
Es representen habitualment Post-it

grans, de colors clids:
groc, taronja, rosa
Eines: all que pot fer una funci

Es representen habitualment Post-it petits, de colors freds:
verds i blaus
1r Curs, 1r Trim
Model de Continguts
i de Navegaci
Model de Continguts
i de Navegaci
Exemple Caixer Automtic
Passos a seguir ms o menys els segents:
Plnol de Casa
(plnol ampliable)
Espai de treball: Finestra de benvinguda
Examinar narratives dels casos d's essencials lnia a lnia

determinar, per cada un d'ells, quines eines i materials haur
d'oferir l'espai d'interacci
Logo del Banc
Fer inventari de dades i contenidors de dades:

afegir Post-it per cadascun amb breu descripci caracterstiques
(s'hi pot afegir tamb text explicatiu)
Tornem a repassar casos d's per
extreure funcions o operadors
afegir Post-it amb un nom breu que descrigui la funci
(s'hi poden afegir comentaris)
1r Curs, 1r Trim
Preguntar
identificaci
Introduir
identificaci
1r Curs, 1r Trim
39
Model de Continguts
i de Navegaci
Model de Continguts
i de Navegaci

Espai de treball: Selector de quantitat
Espai de treball: Seleccionar una operaci
Collecci de
quantitats preestablertes
Collecci
doperacions
Opci dintroduir
a m quantitat
Selector
quantitat
Selector
doperacions
Eina per
introduir
Opcions de
llenguatge
Selector de
llenguatge
Sortir
1r Curs, 1r Trim
Navegador
contextual
Sortir
Model de Continguts
i de Navegaci
Model de Continguts
i de Navegaci
Espai de treball: Introduir quantitat
1r Curs, 1r Trim
Espai de treball: Treure diners Confirmaci doperaci
Quantitat a ser retirada - Status
Feedback de la
quantitat
introduda
Acceptar
Introduir quantitat
Navegador
contextual
Sortir
1r Curs, 1r Trim
Navegador
contxtual
Sortir
1r Curs, 1r Trim
40
Model de Continguts
i de Navegaci
Model de Continguts
i de Navegaci

Espai de treball: Transferncia bancria
Espai de treball: Mirar Moviments Compte
Opcions de
compte bancria
destinaci
Transaccions del compte

bancari i lquid total
Selector
destinaci
Navegaci
Navegaci
contextual
Opcions per
introduir quantitat
Sortir
1r Curs, 1r Trim
Navegaci
contextual
Model de Continguts
i de Navegaci
Model de Continguts
i de Navegaci
Mapa de Navegaci
Mapa de Navegaci
Eina per
introduir
Sortir
1r Curs, 1r Trim
representa l'arquitectura global de la interfcie d'usuari

modela les relacions entre els diferents contexts d'interacci
diagrama on cada espai dinteracci es representa per un objecte
rectangular simple
fletxes connecten aquests objectes representen possibles
transicions d'un espai a un altre
Mapa modela com usuaris poden navegar entre els diferents
contexts d'interacci
Presenta vista global de tot el sistema
aconsellable revisar per fer simplificacions dels contexts
d'interacci
1r Curs, 1r Trim
1r Curs, 1r Trim
41
Model de Continguts
i de Navegaci
Model de Continguts
i de Navegaci
Mapa de Navegaci
Pantalla
Benvinguda
Identificar-se
( Fragment del diagrama

complert )
Seleccionar
Operaci
OK
Seleccionar
Mirar
Moviments
Treure
Diners
Transferncia
...
Quantitat
Predeterminada
Quantitat
especfica
OK
Selector de
Quantitat
Si substitum objectes rectangulars que representen

contexts d'interacci per impressions de pantalla un
cop ja dissenyada interfcie
mapes de navegaci es poden fer servir per
documentar s del sistema
poden ser especialment tils per usuaris que volen
tenir una visi general
Introduir
Quantitat
1r Curs, 1r Trim
1r Curs, 1r Trim
Disseny dels Rols dins el Disseny Centrat en ls

sobre la vostra interfcie
Realitzar tot el Disseny Centrat en ls de la vostra

interfcie
S2 - DISSENY ROLS
P3 DISSENY CENTRAT EN LS
1r Curs, 1r Trim
1r Curs, 1r Trim
42
Aspectes Cognitius dels Usuaris

Aspectes segons Norman
Aspects segons Card, Moran & Newell
el Model de Processador Hum

Tipus dInterfcies
Estils de dileg
Tcniques de dileg
Ajuda a l'usuari
Dispositus
Primer Control Parcial
TS5 CONTROL PARCIAL

TS6 COGNICI I TIPUS INTERFCIES

1r Curs, 1r Trim
Aspectes cognitius
1r Curs, 1r Trim
Aspectes cognitius
Interactuar amb tecnologies digitals s una activitat cognitiva
PREPARATS?!
Atenci,
Percepci,
Memria,
Lectura,
Decisi (entre diferents alternatives)
Exemple d'atenci:
Trobeu el preu d'una habitaci doble al Holiday Inn de Bradley
(en 2 segons)
1r Curs, 1r Trim
1r Curs, 1r Trim
43
Aspectes cognitius
Don Norman
(al llibre The Psychology of Everyday Things)
etapes duna acci:
Don Norman
Exemple
Aspectes cognitius
Formar la meta
Formar la intenci
Especificar l'acci
Executar l'acci
Percebre l'estat
del sistema
Interpretar l'estat
del sistema
Avaluar el resultat
Poden haver fortes discrepncies entre el que intenta l'usuari i el

que se li permet;
set
O entre l'expectativa de l'usuari del que ha de passar i el que

realment fa el sistema;
Decideix visitar una web de notcies

Decideix consultar la web de la BBC
Decideix posar BBC a Google
Entra BBC i executa la cerca
Veu que li surt una pgina de resultats
s til per a tenir en compte que...

... la meta dels usuaris pot ser inadequada
... els usuaris poden no saber com especificar o executar una acci
desitjada
Es fa una idea de quin resultat correspon a la BBC
... la re-alimentaci (feedback) pot ser inadequada o desorientar l'usuari
Veu que efectivament pot anar a la BBC
1r Curs, 1r Trim
Aspectes cognitius
L'estat del sistema i les alternatives d'actuaci han de ser ben visibles
El sistema ha d'estar basat en un bon Model Conceptual

Affordance o Potencialitat
Don Norman
principis fonamentals per a un bon disseny
Visibilitat
Visibilitat
ha de quedar clara per cada part de la interfcie
interfcie incloure bons mapatges reveladors de relacions entre
Constraints o Limitacions
lgiques, fsiques i culturals
Feedback o Realimentaci usuari ha de rebre

feedback continu sobre les seves accions.
Model Mental
?
=
Model Conceptual
Dissenyador
1r Curs, 1r Trim
Aspectes cognitius
Don Norman: principis fonamentals per a un bon disseny
Mappingo Mapatge
diferents etapes
... els usuaris poden no trobar com fer anar aspectes concrets de la
interfcie
Usuari
1r Curs, 1r Trim
1r Curs, 1r Trim
44
Aspectes cognitius
Aspectes cognitius
Don Norman
Don Norman
Model Conceptual: Mappingo Mapatge
Model Conceptual: Affordance o Potencialitat
1r Curs, 1r Trim
Aspectes cognitius
Aspectes cognitius
Don Norman
Don Norman
Model Conceptual: Constraints o Limitacions

lgiques, fsiques i culturals
1r Curs, 1r Trim
1r Curs, 1r Trim
Model Conceptual: Feedback o Realimentaci
1r Curs, 1r Trim
45
Aspectes cognitius
Aspectes cognitius
Card, Moran & Newell
Aspecte de psicologia humana

format enginyeril
til per HCI (IPO)
Tamb modela la Memria en el

context de soluci de problemes i processament
d'informaci
Model simplificat del Processador Hum

clcul de temps per executar una tasca
Aquest model serveix per a diferents objectius:

comprensi general de l'actitud dels
usuaris davant les interfcies i per tant
criteris qualitatius que ajuden al disseny
prediccions teriques de temps de reacci
dels usuaris quan utilitzen les interfcies
1r Curs, 1r Trim
Aspectes cognitius
Aspectes cognitius
Afirmacions relacionades (psicologia aplicada):

Un nmero mgic: 7 2
En mitja una persona pot reconixer rpidament set
porcions d'informaci simultniament
Aquesta informaci es pot mantenir
entre 15 i 30 segons en memria de
treball o de curt termini
1r Curs, 1r Trim
Memria de curt termini i memria de llarg termini s'utilitzen

conjuntament per a processar informaci i solucionar problemes
Curt termini
processa entrades perceptives
Llarg termini
genera i implementa solucions
Problemes complexos se solucionen amb conceptes

de ms alt nivell posant en una mateixa memria
diversos conceptes de ms baix nivell
Memries extremadament voltils
Interrupcions originen prdues de memria
La mida de les porcions depn de la

familiaritat de l'usuari amb el material
Endarreriments fan que es necessiti

"refrescar" o actualitzar la memria
1r Curs, 1r Trim
1r Curs, 1r Trim
46
El Keystroke Level Model
Modelitzar la complexitat duna interfcie

crrega cognitiva dels usuaris
Modelat:
Definir una (o diverses) tasca representativa de la interfcie
Model ms utilitzat: Model de Teclejat
Subdividir tasca en accions elementals per a cada disseny

alternatiu
No saplica de forma absoluta

No s una mesura absoluta deficincia
Les accions poden ser: prmer una tecla, moure el ratol,

captar un smbol a pantalla, etc.
Saplica per a
comparar dos
(o ms) dissenys
alternatius.
Es calcula el temps invertit en cada acci

Es calcula el temps total per a cada disseny alternatiu
Es comparen els dos temps
1r Curs, 1r Trim
1r Curs, 1r Trim
Per calcular temps de cada acci:
Exemple
Tasca: Esborrar un fitxer en Windows
1er model de resoluci
Seleccionar l'arxiu (icona o nom):

P + BB = 1.1 + 0.2
Anar al men "Arxiu": P + B = 1.1 + 0.1
Seleccionar acci "Eliminar": P + B = 1.1 + 0.1
Confirmar o cancellar l'operaci al quadre de

dileg: M + P + BB = 1.2 + 1.1 + 0.2
TEMPS TOTAL: 6,2 s
2on model de resoluci
Anar a l'arxiu (icona o nom): P = 1.1
Prmer el bot dret del ratol: BB = 0.2 (apareix

men contextual)
Triar opci Eliminar" a men contextual:

P + BB = 1.1 + 0.2
Confirmar o cancellar la operaci al quadre de

dileg: M + P + BB = 1.2 + 1.1 + 0.2
TEMPS TOTAL: 5,1 s

1r Curs, 1r Trim
1r Curs, 1r Trim
47

Tipus dInterfcies
Als 1990
Als 1980 a nivell comercial...
Interfcies grfiques avanades
Command line
Animacions interactives
Dir, ls, cd ..
Mons virtuals (interaccions amb 3D)
WIMP: Window, Icon, Menu, Pointing device

/ GUI
Web
Text Usabilitat - simple?
Finestres
User experience - ms complexes i atractives?

Per fcils d'utilitzar?
Icones
Mens
Veu
Ratol
Planificaci de viatges (quan parlem amb una aplicaci de veu)
Xerox Alto (1973) Apple Lisa (1983)

Apple Macintosh (1984)
MS Windows (1985) etc.
Tipus dInterfcies
Reconeixedor de veu - accessibilitat d'interfcies gestuals i tctils ?
1r Curs, 1r Trim
Tipus dInterfcies
Tipus dInterfcies
Als 2000
Als 2000
Dispositius Mbils
Sharables /que es poden

compartir
Telfons Mbils
PDA (Personal Digital Assistant)
iPod/iPhone/iPad
1r Curs, 1r Trim
Displays on gent pot escriure:

Smartboard
1r Curs, 1r Trim
1r Curs, 1r Trim
48
Tipus dInterfcies
Tipus dInterfcies
Als 2000
Als 2000
Tangibles (manipulem objectes fsics)

Hiroshi Ishii
Wearable (que s poden portar com a elements de roba)

Steve Mann
Sixth Sense
Ex. UPF MTG: ReacTable
1r Curs, 1r Trim
Tipus dInterfcies
Tipus dInterfcies
Als 2000
Reflexi
Robots
Quina interfcie escollim?

Depn de tasques, usuaris, requeriments
varis
Domstics
de companyia
1r Curs, 1r Trim
1r Curs, 1r Trim
1r Curs, 1r Trim
49
Estils de dileg
Estils de dileg
Tres estils principals:

wysiwyg, manipulaci directa,
icnic.
WYSIWYG - What you see is what
you get
Manipulaci directa
Objectes, relacions, ...
representats visualment +
operacions mitjanant
interacci directa amb
aquestes representacions
Molt potent i fcil d'aprendre
Per a usuaris experts pot ser
lent
Exemple tpic processadors de

text:
pantalla paper
Avantatges clars
Per tamb limitacions:
altres vegades instruccions

poden ser ms tils
Ex.
difcil correspondncia entre dos

entorns
conceptes no representables
A vegades el programa s ms que

el que hi ha a la vista: full de clcul
1r Curs, 1r Trim
Cut & Paste: text, imatges, etc.

Dragndrop
Objectes 3D
Zoom mapa en mbil multitouch
1r Curs, 1r Trim
Estils de dileg
Estil icnic
Llenguatge representaci per icones
(elements pictrics)
Objectius: reconixer, recordar, discriminar
Tant per objectes com instruccions
Poden tenir dinmica feedback per usuari
Problemes d'identificaci arrels culturals,
socials, etc.
Guies sobre icones

Tipus dInterfcies
Estils de dileg
Tcniques de dileg
Ajuda a l'usuari
Dispositus
Utilitzar representacions familiars

Limitar el nombre d'icones
Combinar icones per a crear nous objectes o
accions
Afegir informaci detallada
Fer-los distingibles del fons
Estudiar efectes 3D, animaci
TS7 TIPUS INTERFCIES
Altres estils de dileg els hem comentat

abans amb les diferent tipus d'interfcies
1r Curs, 1r Trim
1r Curs, 1r Trim
50
Tcniques de dileg
Tcniques de dileg
1er objectiu del disseny

crear organitzaci
rellevant per tasca
d'usuari: comprensi,
convenincia, facilitat per
aprendre i recordar, ...
Mens
Serveixen per a selecci de
tasques
Mens simples
Binaris (per lletres, botons de
selecci, botons de rdio)
Mltiples (id)
Pull-down, pop-up
Scrolling
Permanents (toolbars, palettes)
Widgets
Successions, mens mltiples

per a situacions ms complexes
1r Curs, 1r Trim
Tcniques de dileg
Tcniques de dileg
Mens (II)
Arbres, grafs acclics i cclics, mapes de

mens
Serveixen quan cal omplir molts

camps de dades
Guies de disseny:
Ttol significatiu
Instruccions comprensibles
Agrupament i ordenaci
lgiques
Adequaci visual
Etiquetes familiars si s possible
Terminologia i abreviatures
consistents
Visibilitat de l'espai i fronteres
Moviment del cursor adequat
Correcci d'errors per a
carcters individuals i camps
Prevenci d'errors
Missatges per a valors
inacceptables
Missatges explicatius
Senyal de compleci
Disposici visual
ttols, i camins en mens estructurats
terminologia consistent i familiar en els
tems
subratllat
indentaci
separadors
Formularis
profunditat vs amplria (els usuaris s'estimen

ms, mens ms amplis amb menys
profunditat)
agrupament semntic
ordenaci dels tems s important (per
temps, ordre numric, propietats, ...
relacionades amb la tasca; si no hi ha ordre
natural relacionat amb la tasca, altres criteris
poden ser ordre alfabtic, ms utilitzats
primer, ...)
agrupar tems s important tamb
1r Curs, 1r Trim
1r Curs, 1r Trim
1r Curs, 1r Trim
51
Tcniques de dileg
Tcniques de dileg
Formularis
Caixes de dileg
Sn combinacions de men (opcions) i a vegades formulari, per a
tasques especfiques
Informen i guien lusuari
1r Curs, 1r Trim
Tcniques de dileg
Guies de disseny intern
1r Curs, 1r Trim
Tcniques de dileg
Caixes de dileg
Guies de disseny extern
Caixes de dileg
Guies de disseny intern
Guies de disseny extern
Ttol significatiu
Aparici i desaparici suaus
Ttol significatiu
Aparici i desaparici suaus
Successi ordenada
Frontera petita per distingible
Successi ordenada
Frontera petita per distingible
Estil consistent visual, consistncia de

terminologia
Aparici prop del lloc adient
Estil consistent visual, consistncia de

terminologia
Aparici prop del lloc adient
Botons estndard
Prevenci d'errors
Possibilitat de cancellar i missatge de

completar
Fcils de fer desaparixer
1r Curs, 1r Trim
Botons estndard
Possibilitat de cancellar i missatge de

completar
Prevenci d'errors
Fcils de fer desaparixer
1r Curs, 1r Trim
52
Tcniques de dileg
Tcniques de dileg
Finestres
Finestres
Les finestres faciliten mltiples tasques i consultes

d'informacions
Disseny de
finestres
individuals
ttols
marcs
scroll
accions
Disseny de
finestres mltiples
nombre fixat, lloc,
...
arbitrries
cascades
avantatges i
inconvenients
coordinaci de
finestres
1r Curs, 1r Trim
Tcniques de dileg
Tcniques de dileg
Finestres
Missatges d'error
Errors de resoluci
1r Curs, 1r Trim
Els missatges d'error constitueixen un bon exemple de

com millorar la usabilitat en dilegs amb l'usuari.
1r Curs, 1r Trim
1r Curs, 1r Trim
53
Tcniques de dileg
Tcniques de dileg
Missatges d'error
Visualitzaci (display) en general
s important evitar
Categories de disseny
to de condemna a l'usuari
genericitat (p.e. WHAT? or SYNTAX ERROR)
obscuritat (e.g. FAC RJCT 004004400400)
elegncia i senzillesa: unitat, refinament i adequaci

escala, contrast i proporci: agrupament, jerarquia, relaci i equilibri
Les frases han d'estar centrades en el control de

l'usuari
suggerint control de l'usuari sobre el programa
donant control sobre la quantitat d'informaci que doni el
sistema
ajuda contextual pot ser important
1r Curs, 1r Trim
mdul i programa: focus, flexibilitat i consistncia de les aplicacions

imatge i representaci: immediatesa, generalitat, cohesi i
caracteritzaci
estil: distinci, integritat, comprensi i adequaci
Tcniques de dileg
Tcniques de dileg
1r Curs, 1r Trim
Disposici de camps
separaci
organitzaci
etiquetes i dades
caixes?
Resultats experimentals
forma estructurada superior a narrativa
etiquetes de dades, agrupament, indentaci i subratllat, alineaci
sols informaci rellevant a les tasques
consistncia en localitzaci, estructura, terminologia
Semblana per a tasques similars
1r Curs, 1r Trim
1r Curs, 1r Trim
54
Tcniques de dileg
Tcniques de dileg
Color
Pot servir per a reforar o suavitzar la visualitzaci,
accentuar aspectes, discriminar subtilment,
reforar la organitzaci lgica, provocar emocions,
...
Guies d'utilitzaci:
1r Curs, 1r Trim
conservadorisme, limitar el nombre i fora

suport a les tasques, control de l'usuari
consistncia en la codificaci
respectar els costums
simultanejar les tasques
1r Curs, 1r Trim
Tcniques de dileg
Ajuda a l'usuari
Modes
Encara disseny interfcie excellent molt important (en disseny

centrat en l'usuari): cicle de vida d'explotaci i manteniment
suport i assistncia a l'usuari.
Manuals, tutories de formaci i sistemes d'ajut
Actualment:
Algunes interfcies tenen modes; un exemple s el software de

SeaMonkey, que podem estar en Composer, Navigator,
Messenger, ... cada mode amb les seves opcions d'interfcie.
Els modes plantegen qestions especials de disseny.
forma impresa (en paper) poc habitual

forma on-line o electrnica o telefnica
Llegir de pantalla o de paper s diferent (al menys actualment).
L'ajuda contextual avantatge en el cas electrnic
Visites guiades i demos ajuden molt a la comprensi prctica.
Preparaci manuals
1r Curs, 1r Trim
disseny centrat en els usuaris !
centrar-se en les tasques, accions, ...

centrar-se en les tasques freqents, diferenciar els usuaris, ...
ensenyar la jerarquia d'objectes, el model conceptual
reforar la sintaxi
1r Curs, 1r Trim
55
Ajuda a l'usuari
Ajuda a l'usuari
La preparaci de manuals (escrits) s un procs
Sistemes Online
comenar des del principi del disseny, generant documentaci

testejar amb els usuaris
refinar
les fases poden ser:
Prototipus
Esborrany
Editat
Revisat
Fase de test de camp
Publicaci i test massiu
Revisi
Manteniment
1r Curs, 1r Trim
Tasques
Avantatges potencials
adaptats a l'usuari, i a l's
progressivitat, adaptaci a la tasca
Guies
fcil d'accedir i fcil per a retornar
especificitat
control de l'usuari
no ha de ser un substitutiu d'un disseny d'interfcie dolent
transformar b els manuals en online: canviar formats per a pantalla
utilitzar els recursos (hipertext, cerques, contex, indexat, bookmarks, histria ...)
tutories, demos (utilitzar multimdia)
1r Curs, 1r Trim
Dispositius de senyalitzaci
llistes d'instruccions, tems de men

sensitius al context
globus
assistents
Dispositus
Tipus de sistemes
Informaci disponible amb l'ordinador, sense necessitat

de paper
Possibilitats que no tenen els escrits d'animacions,
indexat, cerca de text, ...
Baix cost d'actualitzaci
Problemes de dificultat de llegir, de poca informaci en
pantalla
Dificultats de navegaci
Interferncia amb l's dels programes
Taula de continguts i ndex de paraules (obligatori)

Glossaris per a clarificar termes
Annexes de missatges d'error
Ajuda online
Avantatges
Desavantatges
no oblidar
Ajuda a l'usuari
1r Curs, 1r Trim
seleccionar (d'un conjunt de coses, en un men,

identificar un fitxer o directori, una part d'un dibuix, ...)
posicionar (un punt en un espai, una finestra, desplaant
un bloc de text o una part d'un dibuix, ...)
orientar (indicar una direcci de l'espai, rotar un
objecte, ...)
cam (per rpida successi de seleccions, posicions i
orientacions, ...)
quantificar (especificant valors en una escala, ...)
1r Curs, 1r Trim
56
Dispositus
Dispositus
Tasques
Tasques
seleccionar (d'un conjunt de coses, en un men,

identificar un fitxer o directori, una part d'un dibuix,
...)
1r Curs, 1r Trim
posicionar (un punt en un espai, una finestra,

desplaant un bloc de text o una part d'un dibuix,
...)
Dispositus
Dispositus
Tasques
Tasques
orientar (indicar una direcci de l'espai, rotar un

objecte, ...)
1r Curs, 1r Trim
1r Curs, 1r Trim
quantificar (especificant valors en una escala, ...)
1r Curs, 1r Trim
57
Dispositus
Dispositus
Exemples de dispositius
directes:
llapis de llum (permet apuntar a un punt de la pantalla, i du bot de
control)
pantalla tctil (tocant amb els dits, operacions semblants a ratol,
dificultats, ...)
1r Curs, 1r Trim
Dispositus
Exemples de dispositius
indirectes
ratol amb botons

trackball
joystick
tauleta grfica
touchpad
(pantalla tctil + visibilitat en pantalla)
1r Curs, 1r Trim
Dispositus
Comparar dispositius
Comparar dispositius
factors humans (errors, aprenentatge, precisi,
rapidesa, satisfacci, ...)
altres (cost, durabilitat, espai, pes, ergonomia, ...)
directes ms rpids per menys precisos
Avaluaci: Llei de Fitts MT = a + b log2(2A/W)

MT - Movement Time
ID Index of Difficulty = log2(2A/W)
Ex. Tauletes
Indirectes
no tan rpids ms precisi
Ex. Teclat
Mouse cas especial

molt rpid i precs
W
1r Curs, 1r Trim
1r Curs, 1r Trim
58
Dispositus
Veu i so
Hi ha guies de disseny per usabilitat molt detallades.
Llibre Usability Engineering de Jacob Nielsen (p. 93)

Llistes exhaustives: 162 a 944 recomanacions !!!!
Nielsen (al mateix llibre) llista curta:
La veu pot servir tant com a dispositiu d'entrada com de sortida

El reconeixement de veu pot utilitzar-se per a entrada
molt interessant per a discapacitats, per a canvi de paradigmes, quan les
mans estan ocupades
per a tasques diferents (entrada de dades per veu, edici per teclat, ...)
Problemes
Soroll en ambients compartits
Canvi dusuari
Usuari refredat
poc "humana", intelligent, millorant

tons com a entrada i sortida
realimentaci, avisos, ...
context
La sntesi de veu pot utilitzar-se com a sortida

So i udio poden servir com a entrada i sortida
1r Curs, 1r Trim
Dileg senzill i natural
Parlar el llenguatge de l'usuari
Minimitzar la crrega de memria de l'usuari
Consistncia
Realimentaci
Sortides clarament marcades
Dreceres (pels usuaris experimentats)
Missatges d'errors bons
Prevenci d'errors
Ajuda i documentaci
Tamb hi han directrius per a fer interfcies accessibles: Ex. WAI (Web Accesibility Initiative)
Accessible
Usable
1r Curs, 1r Trim
Aplicar el Keystroke Level Model a dos disseny

alternatius per la vostra interfcie
P4 DISSENYS ALTERNATIUS

Escenaris
Paper Prototyping
Story Board
Wizard of Oz
Alt i Baix Nivell de Prototips
Consorci W3C
Algunes eines per fer prototips
TS8 PROTOTIPATGE
1r Curs, 1r Trim
1r Curs, 1r Trim
59
Prototipus
Aproximaci provisional a all que es vol dissenyar

El prototip no t molts dels detalls finals
es concentra en la funcionalitat general
dna idea dels elements que participen en la interfcie per
no necessriament com seran situats
Els prototipus sn artefactes

que simulen part de les
caracterstiques del sistema
no es dna informaci de lacabat grfic
Cal generar alternatives de forma rpida i gil:

La millor forma dobtenir una bona idea
s tenir moltes idees (Linus Pauling)
1r Curs, 1r Trim
Prototipat
Diferents representacions
Com sha de representar?
Pot ser una descripci textual o representacions visuals i

diagrames, o mock-up de la interfcie
s tan sols la interfcie o b inclou alguna component

computacional?
Implementaci parcial (incomplerta) de gran part de la
funcionalitat del sistema
Llenguatges
Models
Escenaris
Esquemes i maquetes
Storyboarding
Prototipus
Implementaci total (completa) dun subconjunt de funcionalitats

del sistema
1r Curs, 1r Trim
1r Curs, 1r Trim
Ms Simblica
Ms Realista
1r Curs, 1r Trim
60
Objectius
Qu representar en el prototipus?
Un dels objectius dels prototipus inicials s avaluar la

interacci.
Metes y tasques
Provar si els usuaris podran entendre y dur a terme les accions

esperades
Accions de lusuari
Comportaments de la interfcie
Comenar a veure pantalles representatives, que

incloguin el format i contingut bsic
Estructura de la interfcie
Components de la interfcie
Desprs, desenvolupar algunes funcionalitats

representatives (les ms habitualment utilitzades)
1r Curs, 1r Trim
Aspectes esttics layouts, colors, tipus,
Proces Iteratiu
Exemple:
construir 10 llibretes en 30 minuts
Eina per a poder comentar idees amb els interessats
(stakeholders)
Vehicle de comunicaci entre membres dun equip
Sistema efectiu per a testejar coses un mateix
Cal:
Model espiral
descobrir detalls de disseny

que apareguin problemes i desavantatges
veure dubtes que puguin sorgir a usuaris
observar si hi ha possibilitats derrors en els usuaris
1r Curs, 1r Trim
Objectius, alternatives,
restriccions
1r Curs, 1r Trim
Avaluar
Construir sistemes parcials, avaluar i repetir
Planificar
Desenvolupar
1r Curs, 1r Trim
61
Avantatges
Fases
Early prototyping: En la fase danlisi, per a seleccionar
o validar requeriments
Rapidesa
Flexibilitat
Poder investigar dissenys alternatius
Middle prototyping: Durant el disseny, per a confirmar

el comportament o validar aspectes clau
Simular el disseny a baix cost

Amb lavaluaci, es poden detectar problemes i fer canvis
substancials
Tot i que s necessari avisar lusuari que no utilitzar un
producte final
Late prototyping: En la fase dimplementaci, per a

investigar parmetres operacionals importants
Retroalimentaci (feedback) contnua

1r Curs, 1r Trim
Evoluci del Prototipat
1r Curs, 1r Trim
Escenaris (Scenarios)
Situacions ds hipottiques o fictcies. Tpicament involucra alguna
persona, esdeveniment, situaci i/o ambientaci
Ha daclarir el context doperaci
En general en format narratiu, per pot ser en la forma desbossos, o

tamb en vdeos
1r Curs, 1r Trim
1r Curs, 1r Trim
62
Escenaris II
Exemple dEscenari
Descripci informal, en llenguatge corrent, de situacions ds dun

sistema
Vull trobar un llibre de George Jeffries. No recordo el ttol per s

que va ser publicat abans de 1995. Entro al catleg i hi
accedeixo amb el meu password. No entenc perqu he de fer
aquest pas, si quan vaig a la biblioteca puc entrar sense haver
densenyar cap identificaci. Quan el meu password ha estat
confirmat tinc lopci de cercar per autor o data, per no per
una combinaci de les dues. Tendeixo a utilitzar la cerca per
autor, donat que per data em troba massa entrades. Desprs de
30 segons no troba entrades de George Jeffries i mostra les
entrades ms semblants. Quan dona la llista, madono que el
nom lestava escrivint malament y que s en realitat Gregory, i
no George. Escullo el nom i vull que el sistema em digui on puc
localitzar el llibre.
Ha de ser llegit per totes las parts interessades
Sn una poderosa forma de descripci, anlisi i exploraci
Existeixen diverses tcniques per escriure escenaris

exemple: Casos ds (que veure ms en davant)
1r Curs, 1r Trim
Prototipat
associat a
lescenari
1r Curs, 1r Trim
Exercici: Escriviu un Escenari

Activitat: escriviu un escenari en el que hgiu de pensar qu fareu
per escollir un cotxe nou. Penseu en les tasques, prioritats y
preferncies. Pot ser un escenari ideal (futurista) pel que fa les
tasques de selecci del cotxe.
Podreu incloure idees del tipus:
-El concessionari t un simulador que permet
experimentar diferents interiors de cotxes
- A ms hi ha opcions de cerca dinformaci i models
ordenats per caracterstiques, anys, preu
-Puc veure els comentaris dusuaris que ja tenen aquells vehicles
-Trio un cotxe i puc fer la simulaci de com es condueix (simulant velocitat,
sons, etc)
1r Curs, 1r Trim
1r Curs, 1r Trim
63
Per qu utilitzar escenaris?

Wireframe
Enfocar necessitats dels usuaris
Permet al dissenyador veure el problema des del punt de vista de diferents

persones
Facilita feedback i opinions
Pot ser fora futurista y creatiu
Pot ser compartit amb audincies diferents
Permet explorar errors i malentesos
Sovint utilitzats amb storyboards
Ms centrats en estructura, en com sorganitzen els elements del

producte
Revelar perspectives diferents
Tenir visions alternatives (comparar), explorar errades
1r Curs, 1r Trim
Mock-up
Prototipus
Ms centrats en acabats: quin aspecte tindr el

producte
1r Curs, 1r Trim
1r Curs, 1r Trim
Ja s
(parcialment)
funcional
ms
focalitzats en
funcionalitat
1r Curs, 1r Trim
64
Paper Prototyping
Story Board
Utilitzant paper retallat, dibuixat, enganxat, etc.

Es pot veure estructura i funcionalitat.
Es tracta de fer vinyetes per a explicar passos,

processos, etc.
Serveix per explicar ms el com fer una cosa.
1r Curs, 1r Trim
Wizard of Oz
Baixa / Alta Fidelitat
Permet interaccionar amb un prototipus que

encara no t motor interactiu al darrere
Hi ha un operador hum al darrere
simula el comportament del sistema
Prototipusde Baixa Fidelitat
1r Curs, 1r Trim
1r Curs, 1r Trim
Rpids de realitzar
Wireframe, Paper prototype, Storyboard
Alta Fidelitat: ms lents de realitzar donat que

sn ms propers a producte final (cert risc)
Exemple 1
1r Curs, 1r Trim
65
Fases
Eines de Prototipat
Baixa fidelitat
Mitja fidelitat
Sketches, mock-ups
Alta fidelitat
Slide shows
Simulacions: scriptedslide show

Semblants a un storyboard on es dissenyen transicions (animades) entre
les vinyetes
Prototipus
funcionals
Pot presentar a lusuari un script (gui) ben especfic a seguir

PowerPoint, Just in Mind, Balsamiq
Scenarios
Storyboards
Simulacions
1r Curs, 1r Trim
Eines de Prototipat
HTML
Eines per a posicionar finestres, controls, etc.

Disposen de modes de construcci i de prova que sn bons per mostrar
look and feel
1r Curs, 1r Trim
Interface Builders
Generen codi de la funcionalitat back end

mitjanant programaci
es poden incrementar
Consorci W3C
Especificacions vs Estandards
HTML & CSS
Enllaos a cursos:
DreamWeaver, Visual Basic, Delphi,
http://www.w3schools.com/
http://www.dense13.com/wec/curscss/curscss.php?seccio=0&ca
pitol=0
Mobile Web - HTML5

Algunes eines per fer prototips: Dreamweaver,
Flash, PowerPoint
1r Curs, 1r Trim
1r Curs, 1r Trim
66
Regles de Disseny
Conclusions
Les 8 regles de Shneiderman (1998):
El prototipat pot ser de baixa fidelitat (com el paper-based) o dalta fidelitat

(com el basat en software)
Oferir als usuaris habituals/experimentats tenir vies rpides
Els de baixa-fid.: usats en etapes inicials, baix cost, fcils de fer
Oferir feedback informatiu
Disseny conceptual (captura all que el sistema hauria de poder fer) i disseny fsic
( inclou detalls de disseny i interacci)
Els escenaris i prototipus serveixen per explorar idees
Es poden utilitzar diferents eines per a: dissenyar aspectes grfics, permetre

navegabilitat, implementaci de dissenys que es connectaran amb la caixa negra
Mantenir la consistncia (en tota la interfcie)
Dissenyar dilegs per a remarcar que una acci sha acabat

Avanar-se als errors
Permetre revertir les accions
Fer que lusuari senti que t el control del sistema (i no a linrevs)
Reduir, en la mesura del possible, la crrega de memria utilitzada
per lusuari
1r Curs, 1r Trim
1r Curs, 1r Trim
Descripci de les Eines de Prototipatge que podreu

utilitzar
Disseny i Implementaci del Prototipus de la vostra

interfcie
S3 EINES DE PROTOTIPATGE
S4 - DISSENY PROTOTIPUS
1r Curs, 1r Trim
1r Curs, 1r Trim
67

interfcie

interfcie
P5 DISSENYS PROTOTIPUS
S5 - DISSENY PROTOTIPUS
1r Curs, 1r Trim
1r Curs, 1r Trim
Avaluaci
Perqu hem d'avaluar?
Comprendre el mn dels usuaris: perfils,
problemes, context, etc.
Guiar el procs de disseny: treballar per
aconseguir unes fites permet establir objectius i
prendre decisions
Avaluaci dUsabilitat
Avaluaci: per qu? qu? i com?
Prova dUsabilitat
TS9 - USABILITAT
Verificar el disseny: (recordeu que els usuaris son

la mesura de l'xit o fracs del nostre disseny)
1r Curs, 1r Trim
1r Curs, 1r Trim
68
Avaluaci
Avaluaci
Qu avaluem?
Com avaluem?
En general, task performance model

model de rendiment de tasques
Els mtodes els podem classificar en:
Per la tecnologia cada vegada est ms fra d'entorns de

treball
Sistemes invisibles en entorns quotidians exemple: smart
houses Inhaus, Fraunhofer
Tecnologies per donar suport a interaccions socials exemple:
comunitats virtuals SecondLife
Tecnologies per l'oci exemple: jocs per ordinador Kinect
Inspection-based methods
Sense usuaris mtodes rpids

Bons resultats "cost - benefici
Calen experts
Per exemple:
Avaluaci heurstica
(Nielsen and Molich, 1990)
Aix requereix recerca en mtodes d'avaluaci

exemple: Living Laboratories
ambient intelligence & experience and application
1r Curs, 1r Trim
Avaluaci
Avaluaci
Com avaluem?
Com avaluem?
Model-based methods
User-based methods
Estimaci execuci usuaris

Per exemple: GOMS (i variants)
Keystroke Level Model
1r Curs, 1r Trim
Usuaris complexos indispensables (!)

Per exemple: Prova d'usabilitat
1r Curs, 1r Trim
1r Curs, 1r Trim
69
Prova dUsabilitat
Prova dUsabilitat
Qu s?
Avaluar la usabilitat amb usuaris reals en un context d's el ms
real possible
Nielsen, fa una guia de disseny per usabilitat:
Dileg senzill i natural

Parlar el llenguatge de l'usuari
Minimitzar la crrega de memria de l'usuari
Consistncia
Re-alimentaci (feedback)
Sortides clarament marcades
Dreceres (pels usuaris experimentats)
Missatges d'errors bons
Prevenci d'errors
Ajuda i documentaci
Sis etapes, segons Rubin (1994)
1r Curs, 1r Trim
Desenvolupar el pla de la prova

Seleccionar i adquirir participants
Preparar els materials de la prova
Realitzar la prova
Desprs de la prova
Transformar les dades en informaci
Prova dUsabilitat
Prova dUsabilitat
Desenvolupar Pla de Prova
Demografia: Seleccionar i Adquirir

Participants
Qu? Com? Perqu? Quan?

Pla vehicle de comunicaci amb l'equip
com sorganitza lequip
Selecci basada en el perfil
Establim requeriments i fites
Ens pot interessar dividir els nostres

usuaris (segons diferents variables)
Tpicament definim:
els objectius,
el perfil dels usuaris,
una llista de tasques,
l'equip,
el rol del monitor i
el lloc i data
1r Curs, 1r Trim
On sn els nostres usuaris?

Contacte per: telfon o e-mail; a
organitzacions, empreses, ...
1r Curs, 1r Trim
1r Curs, 1r Trim
70
Prova dUsabilitat
Prova dUsabilitat
Preparar Materials
(s la tasca ms exigent)
Preparar Materials (cont)

Tpicament es preparen i s'utilitzen els segents materials
(cont)
Quina informaci recollim?

Com recollim aquesta informaci?
Com tractem als usuaris (ex.; aspectes tics)?
Qestionari pre-test:
Tpicament es preparen i s'utilitzen els segents materials

Guia d'orientaci: Qu passar a la prova? Quin s el paper dels usuaris?
I el nostre?
Qestionari de background:
Ens interessa informaci histrica dels usuaris (ex; experincia)
Abans de la prova
Consentiment de gravaci i privacitat:

Qu es far amb la gravaci? Podem parlar els usuaris del nostre sistema?
1r Curs, 1r Trim
Ens interessen les primeres impressions

dels usuaris
Abans de la prova
Qestionari post-test:
Desprs de la prova
Es compara amb el pre-test
Sn les primeres impressions iguals als resultats?
I tamb amb les dades recollides del pensar en veu alta
Desprs de la prova
Prova dUsabilitat
Prova dUsabilitat
Execuci de la Prova
Entrevistant als usuaris

desprs de la prova
Haurem de ser imparcials

Els monitors no haurem d'esbiaixar les dades
Arribem a entendre tot

durant la prova?
Tot el que nosaltres fem t un impacte a la

prova
Vocabulari; llenguatge corporal
Posici a la prova (a prop de l'usuari o lluny?)
Doncs, com ho fem?

Entrevistes individuals
Per podem fer grups de
discussi i
"pensar en veu alta
retrospectiu"
Cada usuari s diferent

Parlar amb gent gran i joves (lligueu aix amb lo
anterior)
Demanar a l'usuari que pensi en veu alta (Think

Aloud)
Durant o desprs la prova
1r Curs, 1r Trim
1r Curs, 1r Trim
1r Curs, 1r Trim
71
Exemple Prova
dUsabilitat - 1
Prova dUsabilitat
Informe
La prova pot haver estat un xit,
per si no analitzem i comuniquem
b els resultats...
Alguns consells:
Identificar les font d'errors: perqu han
passat?
Classificar i prioritzar errors: com sn
els errors?
Fer recomanacions per solucionar-los
1r Curs, 1r Trim
Exemple Prova
dUsabilitat - 2
1r Curs, 1r Trim
Exemple Prova
dUsabilitat - 3
x dia
substituci
?!
?!
1r Curs, 1r Trim
1r Curs, 1r Trim
72
Exemple Prova
dUsabilitat - 4
Exemple Prova
dUsabilitat - 5
1r Curs, 1r Trim
Exemple Prova
dUsabilitat - 5
1r Curs, 1r Trim
Exemple Prova
dUsabilitat - 6
1r Curs, 1r Trim
1r Curs, 1r Trim
73
Exemple Prova
dUsabilitat - 7
Exemple Prova
dUsabilitat - 8
1r Curs, 1r Trim
Exemple Prova
dUsabilitat - 9
1r Curs, 1r Trim
Prova dUsabilitat
Comenceu la vostra prova d'usabilitat
Usuaris individuals o en grups
Dissenyeu un ndex desenvolupat de la prova
d'usabilitat per la vostra prctica
Comentarem les vostres planificacions a

clase (de forma aleatoria)
1r Curs, 1r Trim
1r Curs, 1r Trim
74
Preparaci de la prctica dAvaluaci en Usabilitat
Avaluaci en Usabilitat de la vostra interfcie
S6 AVALUACI EN USABILITAT
P6 AVALUACI EN USABILITAT
1r Curs, 1r Trim
Preparaci del compendi de prctiques que

conformaran la Prctica 7 de Memria Final i
Presentaci Oral
Segon Control Parcial
S7 PREPARACI MEMRIA FINAL
TS10 CONTROL PARCIAL
1r Curs, 1r Trim
1r Curs, 1r Trim
1r Curs, 1r Trim
75

EnginyeriaInteraccio SR

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

EnginyeriaInteraccio SR

Uploaded by

Copyright:

Available Formats

Enginyeria dInteracci

Graus en Enginyeria Informtica &

Enfocament del curs

PRESENTACI DEL CURS

Enginyeria dInteracci ESUP DTIC - UPF

Estructura Curs a Teoria

Enfocament del Curs

TS1 - Introducci a les Interfcies

Enginyeria dInteracci ESUP DTIC - UPF

Qu s una interfcie? Bones i Males interfcies

TS4 - Disseny Centrat en ls

TS5 Control Parcial

TS6 Cognici i Tipus Interfcies

Qu vol dir prototipatge?

Model de Continguts i de Navegaci

Disseny Centrat en l's i Disseny Centrat en l'Usuari

TS7 Tipus Interfcies

TS3 - Disseny Centrat en ls

Variabilitat dInterfcies i Interaccions

Qu s la interacci? Tipus d'interacci

TS2 - Disseny Contextual

Aspectes segons Norman

Enginyeria dInteracci ESUP DTIC - UPF

Avaluaci: per qu? qu? i com?

TS10 Control Parcial

Els dos parcials

Fan mitja entre

Per tal de poder obtenir la nota mitja final,

NF = MCP*0,33 + MSem + Mprac*0.66

NF: Nota Final

MCP: Mitja Control Parcials

Introducci a les Interfcies

MPrac: Mitja Prctiques

TS1 - INTRODUCCI A LES INTERFCIES

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Targes perforades & impressora

Enginyeria dInteracci ESUP DTIC - UPF

1951 Whirlwind Computer MIT

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Interacci no s una sola cosa

Enginyeria dInteracci ESUP DTIC - UPF

All que se situa entre el sistema i la persona.

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Bones i males Interfcies

Quines sn bones i quines dolentes?

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Enginyeria dInteracci ESUP DTIC - UPF

Qu s una Interfcie en informtica?

En un sistema amb ordinador

Tamb cal tenir en compte la vessant digital de les

Enginyeria dInteracci ESUP DTIC - UPF

Per qu s tan important una Interfcie?

NF = MCP0,33 + MSem + Mprac0.66