1. Usabilitat al disseny interactiu
Mariona Grané. Laboratori de Mitjans Interactius. @CAVUB

2. principis de disseny interactiu

3. usabilitat en la interacció
La interacció, entre els usuaris i els sistemes, com a finalitat o com a mitjà per a la
interacció amb altres usuaris, és l'objectiu de qualsevol disseny en pantalla.

4. usabilitat en la interacció
El concepte d’USABILITAT correspon al grau en el qual un
producte pot ser utilitzat per un grup d'usuaris específics per
assolir certes fites definides amb efectivitat, eficiència, i
satisfacció, en un context d'ús concret.

5. principis de disseny interactiu
Usabilitat en la interacció
Accessibilitat
Control
Feedback
Indulgència i errors
Llei de Fitts

6. usabilitat en la interacció
Accessibilitat:

7. usabilitat en la interacció
Accessibilitat: Els objectes, els espais i els documents s'han de dissenyar de forma que
puguin ser utilitzats, sense cap modificació pel major nombre possible de persones.
El World Wide Web Consortium
(W3C), és un consorci internacional
dirigit per Tim Berners-Lee que
t re b a l l a p e r a d e s e nvo l u p a r
estàndards web.
Té la comissió de la W3C Web
Accessibility Initiative (WAI)
El treball d'estandardització i publicació de pautes i normes que porta a terme el W3C
se centra específicament en requeriments tecnològics de processos i producció
informàtica.

8. usabilitat en la interacció
El concepte d'accessibilitat quan ens referim a Internet, té el significat d'universalització
de la web, i ha de tenir en compte diferents capacitats.
Teòricament vol assegurar un accés equitatiu i promoure la igualtat d'oportunitats
davant els mitjans de comunicació on-line.

9. usabilitat en la interacció
Els components essencials per a l'accessibilitat web, segons la WAI han de ser
treballats conjuntament i es defineixen en:
· continguts,
· navegadors web,
· tecnologia d'assistència,
· eines d'autor,
· i eines d'avaluació.
· usuaris i desenvolupadors

10. usabilitat en la interacció
Treballar la idea d’accessibilitat des de les pautes de la WAI, implica conèixer a fons
els documents de treball i seguir la normativa, les WCAG.

11. usabilitat en la interacció
Però més enllà de la normativa internacional i l’estandardització de la web, la idea
clau de l'accessibilitat planteja que els dissenys han de ser utilitzables per diferents
persones amb diferents capacitats sense haver de ser adaptats.
En definitiva que qualsevol persona pugui percebre, veure, entendre, navegar,
interactuar amb una web.

12. usabilitat en la interacció
La W3C defineix quatre característiques de l'accessibilitat:
· La perceptibilitat, qualitat d'un disseny que permet que tothom el percebi
independentment de les capacitats de cadascú.
Cal presentar la informació amb
mètodes de codificació redundants
(textuals, alhora icònics i alhora
t à c t i l s ) , p r o p o r c i o n a r
compatibilitat amb les tecnologies
sensorials d'ajuda (per exemple
codis ALT per a les imatges de la
web), i ubicar els controls i la
informació de forma que els
puguin percebre clarament tots els
usuaris.

13. usabilitat en la interacció
· L'operativitat, s'assoleix quan qualsevol persona, independent de les seves
capacitats, pot operar i utilitzar el disseny realitzat.
C a l m i n i m i t z a r l e s a c c i o n s
repetitives i les accions que
requereixen d'un manteniment d'un
acte físic (com prémer el botó del
ratolí durant molta estona o haver
de realitzar accions de drag and
drop de llarga trajectòria per a la
pantalla); facilitar l'ús de controls
mitjançant bones adequacions, i
ubicar els controls i la informació de
forma que els puguin utilitzar tots
els usuaris.

14. usabilitat en la interacció
· La simplicitat s'assoleix quan tothom pot entendre i utilitzar el disseny, amb
independència de la seva experiència, el seu coneixement previ, el seu nivell educatiu,
etc.
Cal eliminar les complexitats innecessàries; codificar i etiquetar de forma clara els
controls i les formes de funcionament; utilitzar la revelació progressiva d'informació de
manera que es presenta cada cop només aquella informació rellevant; proporcionar
incitacions i reaccions clares per a totes les accions; i garantir que els nivells de lectura
arribin a un ample ventall de població amb diferents nivells.

15. usabilitat en la interacció
· La indulgència s'aconsegueix quan els dissenys minimitzen l'aparició d'errors i les
seves conseqüències.
Cal un ús de bones adequacions i limitacions que evitin errors; ús de confirmacions i
avisos per reduir l'aparició d'errors; inclusió d'accions reversibles per evitar les
conseqüències dels errors.

16. usabilitat en la interacció
La situació dels dissenyadors i productors web davant la WAI és altament crítica:
· les normatives i el software no poden controlar totes les discapacitats de tots els
usuaris, cal una revissió humana
· les normes s’han d’establir per persones amb discapacitat i no per “experts” en
accessibilitat”
· l’actualització de les WCAG no s’ha fet fins ara després de 10 anys (1999 v1.0)
· No faciliten l’accés als usuaris el mitjà es converteix en la finalitat: validar

17. usabilitat en la interacció
Henrik Olsen, 2004, a:
"Accessibility humanized. A user centred approach to web accessibility",
demostrava clarament com les normatives de disseny i les anàlisis heurístiques referents
a l'accessibilitat no estan lligades en realitat a les percepcions dels discapacitats.
experiment: mostrar una mateixa web interactiva a un invident i a
un expert en accessibilitat i demanar un anàlisi.
L’expert va trobar 14 errors d’accessibilitat
L’invident va tenir una experiència molt positiva però va detectar
alguns problemes, cap dels quals havia estat percebut per
l’expert.

18. usabilitat en la interacció
albinoblacksheep.com

19. usabilitat en la interacció
Control

20. usabilitat en la interacció
Control: El control que els usuaris poden tenir sobre el sistema ha d'estar dissenyat en
relació amb l'eficàcia del sistema i l'experiència dels usuaris sobre aquest sistema.
Els usuaris poden controlar les accions que realitzen en un sistema?
El disseny determina quin grau de control té el sistema i quin grau de control té l'usuari
sobre ell.

21. usabilitat en la interacció
Card, Moran i Newell (1983) i Raskin (2000): els usuaris principiants es mouen millor
amb una quantitat reduïda de possibilitat de control sobre un sistema, però a mida que
van aprenent també van demandant més opcions i més possibilitats de control sobre
aquestes opcions.

22. usabilitat en la interacció
Feedback

23. usabilitat en la interacció
Feedback: L'acció de l'usuari té unes conseqüències al sistema..., i a la inversa.
El feedback, en interacció és el retorn del sistema vers l'usuari quan aquest realitza
alguna acció, però també es considera la reacció de l'usuari vers un sistema.
Una acció implica una resposta que torna a una nova acció. Es crea un bucle, una
retroalimentació.
N o r m a n ( 2 0 0 2 ) , e l
feedback és la indicació
del sistema perquè l'usuari
sàpiga que s'ha produït
una resposta a la seva
acció, atès que d'altra
manera no sabria si ha
funcionat la seva acció.

24. usabilitat en la interacció
Norman (2002), el feedback és la indicació del sistema perquè l'usuari sàpiga que
s'ha produït una resposta a la seva acció, atès que d'altra manera no sabria si ha
funcionat la seva acció.

25. usabilitat en la interacció
Compte amb l’eficàcia dels sistemes de feedback:
· Nous cascs de futbol americà
· Interactius Horacio Elena
· Alumnes d’infantil del Projecte Grimm
La "corba de feedback", exposa que tota acció crea una reacció equivalent i oposada.

26. usabilitat en la interacció

27. usabilitat en la interacció
En entorns orientats a la formació el feedback pot esdevenir en la seva forma una
motivació i/o una orientació vers el propi aprenentatge. Kemp i Smellie (1989).

28. usabilitat en la interacció
Indulgència i errors

29. usabilitat en la interacció
Indulgència i errors: Els dissenys han d'ajudar a evitar errors i minimitzar les
conseqüències negatives quan aquests succeeixen.

30. usabilitat en la interacció
Si per una acció o per l'omissió d'una acció es provoca un resultat no desitjat en un
sistema interactiu ens trobem davant un problema per a l'usuari. Sovint el que es
considera un error humà ve produït per un problema de disseny del sistema.

31. usabilitat en la interacció
Davant de tots els principis de disseny que hem vist ara podríem descobrir problemes
de disseny que indueixen a errors.

32. usabilitat en la interacció
Tècniques per evitar errors en disseny interactiu i d’usabilitat:
· Bones adequacions físiques, visuals d'un sistema. (= Poka Yoke)
· Accions reversibles. Si una acció es pot desfer no hauria de suposar mai un
temps extra amb un avís que pot induir a l'error per obvietat.
· Confirmació. També s'anomena principi de verificació o funció forçada, s'utilitza
quan cal realitzar accions importants que cal verificar.

33. usabilitat en la interacció
Quan les conseqüències no són importants o quan les accions són reversibles, no calen
els sistemes de confirmació.
Perquè les confirmacions, ralentitzen les tasques i per tant cal reservar-les per accions
molt importants o que siguin irreversibles.

34. usabilitat en la interacció
· Advertències, senyals, missatges que indiquen perills o criden l'atenció de
l'usuari davant possibles accions.
· Ajudes, sistemes de suport, tutorials, instruccions d'ús, documentacions quan
calgui per evitar errors o superar-los, ... en situacions d'interactivitat més
complexes.

35. usabilitat en la interacció
Llei de Fitts

36. usabilitat en la interacció
Llei de Fitts: El temps necessari per desplaçar-se fins a un objectiu ve donat per una
funció entre la mida de l'objectiu i la seva distància.
Té implicacions clau en ergonomia atès que prediu el temps necessari per moure’s des
d'una posició inicial fins una zona de destí final, i s'utilitza per modelar l'acte d'apuntar
i prémer en el món real amb una mà o un dit o en un ordinador amb un ratolí, un
trackpad o un llapis òptic.

37. usabilitat en la interacció
El 1954 Paul M. Fitts, va publicar l'article "The Information Capacity of the Human
Motor System in Controlling Amplitude of Movement" on va provar empíricament
que el temps requerit per arribar a polsar un objectiu depèn d'una relació
logarítmica entre la seva superfície i la distància a la que es troba.

38. usabilitat en la interacció
Alguns exemples evidents de l'aplicació de la llei de Fitts són la mida de les tecles de
les calculadores de les taules de despatx o botigues, o la distància entre els botons de
OK i CANCEL en una pantalla d'ordinador.
«Segons la Llei de Fitts, quan més petit i més allunyat està un objectiu, més
temps es triga a aconseguir adoptar una posició de descans sobre aquest
objectiu. A més, quan més ràpid és el moviment necessari i menor és
l'objectiu, més gran és la probabilitat d'error degut a un equilibri entre
velocitat i precisió». (Butler, Holden & Lidwell, 2005)

39. usabilitat en la interacció
En la dècada dels noranta als EUA es van registrar nombrosos casos d'acceleració involuntària
dels conductors que seien al volant del Jeep Cherokee de la casa Chrisler. Els pedals de fre
acostumen a estar situats a la dreta de la línia central del volant, però la gran mida del sistema
de transmissió del Cherokee va obligar a desplaçar la posició dels pedals una mica més cap a
l'esquerra del que és normal.
Això va provocar un augment
de la distància entre la posició
del peu i el pedal de fre.
D'aquesta manera es va produir
u n f e n o m e n , e n t re m o l t s
c o n d u c t o r s , q u e s o v i n t
trepitjaven l’accelerador quan
en realitat volien trepitjar el fre.

40. usabilitat en la interacció
Els moviments directes que es poden calcular amb la Llei de Fitts consisteixen en una
acció ràpida i prolongada cap a un objectiu (és el que anomenem moviment balístic)
seguida de moviments que permeten l'ajustament fins a una posició de descans sobre
l'objectiu assolit (són els moviments de cerca).
En un disseny de pantalla es pot disminuir el nombre d'errors i per tant millorar la
usabilitat d'un disseny si es té en compte la Llei de Fitts.
Per exemple quan busquem
un element en un llarg menú
o llista.

41. usabilitat en la interacció
La Llei de Fitts va ser aplicada per primer cop a la HCI per Card, English i Burr el
1978, els quals van utilitzar l'índex de rendiment (IP= index of performance), per
comparar quatre dispositius diferents d'entrada en un ordinador alhora de seleccionar
text, quedant el ratolí en primer lloc amb un 80% de variació en el temps de moviment
observat en les equacions de regressió.
Això va portara a la Xerox a decidir-se per
incorporar el ratolí en tots els seus equips, i és
per aquesta raó que tots els ordinadors
personals van tenir un ratolí com a dispositiu
d'entrada i no un joystick.

42. usabilitat en la interacció
Interessant veure la interactivitat de la “Fitts' Law Interactive Demostration” de Wichary
fww.few.vu.nl

43. usabilitat en la interacció
La llei de Fitts pot ser un model, per calcular les accions de point-and-click (apuntar i
prémer), i drag-and-drop (arrossegar i deixar anar) que es realitzen sobre el cursor
d'una pantalla.
Conseqüències clau que es poden aplicar en el disseny d'interfícies:
· Les accions que es fan més sovint necessiten de botons o zones actives grans i
evidents.
· Les accions que es fan més sovint necessiten de botons o zones actives que
estiguin situades més a prop de la zona en la que es mou més comunament el
cursor.
· Els espais límit de la pantalla, dalt, a baix, esquerra, dreta, i les cantonades, han
de ser utilitzats al màxim possible, perquè el seu límit permet un moviment
d'ajustament més ràpid.
· És important que els botons no tinguin mai píxels no clicables al seu voltant, és a
dir, que les zones actives corresponguin a la superfície total dels botons o enllaços
(i no només al text o icona del botó).

44. usabilitat en la interacció
mida dels botons
(depèn de l’objectiu i el context)

45. usabilitat en la interacció
amplitud de zona activa o clicable

46. usabilitat en la interacció

47. usabilitat en la interacció
distancia entre objectius

48. usabilitat en la interacció
distancia entre objectius

49. usabilitat en la interacció
pie menus

50. usabilitat en la interacció
finals i cantonades en la disposició d’elements que necessiten un temps ràpid o una
cerca ràpida

51. usabilitat en la interacció
Des dels seus inicis les
interficies del MAC OS
tenen en compte la llei
de Fitts en la disposició
de menús.

52. usabilitat en la interacció
Ni en la seva darrera
versió, les interficies del
Windows té en compte
la llei de Fitts en la
disposició de menús.
Des dels seus inicis les
interficies del MAC OS
tenen en compte la llei
de Fitts en la disposició
de menús.

53. usabilitat en la interacció
La llei de Fitts és un dels principis que té més implicacions en les accions que realitza
un usuari amb un ratolí, tableta gràfica, trackpad, ... en pantalla i afecta explícitament
a la rapidesa de les accions i a la minimització dels errors.

54. simplicitat en la interacció
thibaud.be

55. simplicitat en la interacció
visuall.be

56. simplicitat en la interacció
sectionseven.com

57. simplicitat en la interacció
exit10.com

58. usabilitat en la interacció
Accessibilitat: Els objectes, els espais i els documents s'han de dissenyar de forma que
puguin ser utilitzats, sense cap modificació pel major nombre possible de persones.
Control: El control que els usuaris poden tenir sobre el sistema ha d'estar dissenyat en
relació amb l'eficàcia del sistema i l'experiència dels usuaris sobre aquest sistema.
Feedback: L'acció de l'usuari té unes conseqüències al sistema..., i a la inversa.
Indulgència i errors: Els dissenys han d'ajudar a evitar errors i minimitzar les
conseqüències negatives quan aquests succeeixen.
Llei de Fitts: El temps necessari per desplaçar-se fins a un objectiu ve donat per una
funció entre la mida de l'objectiu i la seva distància.

59. principis de disseny interactiu
LEER NO MATA
Cañada, J. (2004, 4 de febrer), «Dando “palos de ciego” con la accesibilidad». Des de
http://www.terremoto.net/x/archivos/000076.html
Card, S. & Moran, T. (1988), «User Technology: From Pointing to Pondering», dins Goldberg,
A. (ed.), A History of Personal Workstations. Massachusetts: Addison-Wesley.
Dürsteler, J. C. (2003), «El control de la interacción». Infovis, 145. Des de
http://www.infovis.net
Norman, D. A. (2010), Living with complexity. Cambridge, MA: MIT Press (http://jnd.org/books.html).
Raskin, J. (2000), The Humane Interface: New Directions for Designing Interactive Systems.
Massachusetts: Addison-Wesley.
Tognazzini, B. (2003), «First Principles of Interaction Design». Asktog. Des de
http://www.asktog.com/basics/firstPrinciples.htm

60. Mariona Grané.
Laboratori de Mitjans Interactius www.lmi.ub.es