1
ÍNDEX
INTRODUCCIÓ
3
AVALUACIÓ HEURÍSTICA – LLISTA DE COMPROVACIÓ DEL SISTEMA
4
1- Visibilitat de l’estat del sistema
5
2- Adequació entre el sistema i el món real
9
3- Llibertat i control per part de l’usuari
13
4- Consistència i estàndards
16
5- Ajuda els usuaris a reconèixer i diagnosticar els errors i recuperar-se’n
22
6- Prevenció d’errors
24
7- Reconeixement en lloc de record
27
8- Flexibilitat i eficiència en l’ús
33
9- Disseny estètic i minimalista
35
10- Ajuda i documentació
37
11- Habilitats
39
12- Interacció plaent i respectuosa amb l’usuari
42
13- Intimitat i privacitat
44
INFORME HEURÍSTIC 1- Menús, títols encapçalaments i icones
45 46
a. En línies generals
46
b. Punts millorables
46 2
c. Bones pràctiques 2- Mantenir informat a l’usuari de on es troba
52 53
a. En línies generals
53
b. Punts millorables
54
c. Bones pràctiques
56
3- Disseny estilístic i estàndards
57
a. En línies generals
57
b. Punts millorables
58
c. Bones pràctiques
61
4- Missatges d’error i alertes
63
a. En línies generals
63
b. Punts millorables
63
c. Bones pràctiques
64
5- Entrada de dades
64
a. En línies generals
64
b. Punts millorables
65
c. Bones pràctiques
69
6- Ajuda i descàrregues
70
a. En línies generals
70
b. Punts millorables
70
BIBLIOGRAFIA
72
3
INTRODUCCIÓ
En aquesta pràctica es realitzarà una anàlisi heurístic del parc d’atraccions de DisneyLand Paris. Primerament es realitzarà una comprovació del sistema amb el checklist de Deniesse Pierotti que es bassa en els 10 principis d’usabilitat de Jacob Nielsen. Un cop fet això es redactarà un informa que inclou la llista de problemes d’usabilitat detectats, el principi heurístic que incompleixen i les recomanacions per a millorar el sistema.
4
AVALUACIÓ HEURÍSTICA LLISTA DE COMPROVACIÓ DEL SISTEMA
5
AVALUACIÓ HEURÍSTICA · LLISTA DE COMPROVACIÓ DEL SISTEMA A continuació avaluarem el lloc web de DisneyLand Paris amb el Checklist de Deniesse Pierotti, en el qual es van afegir tres heurístics més als deu elaborats per Nielsen i una llista de subheurístics per a cada principi.
1 . Visibilitat de l'estat del sistema El sistema ha de tenir sempre usuari informat sobre el que està passant , a través d'informació adequada en un termini raonable SI NO N/A
1.1
Comença cada pantalla amb un títol o encapçalament que descriu el contingut de la pantalla?
X
1.2
Existeix un pla de disseny d'icones coherent i tractament estilístic en tot el sistema ?
X
1.3
La icona seleccionada és clarament visible quan està envoltat per icones no seleccionades?
X
1.4
Les instruccions del menú, ordres i missatges d'error apareixen en el mateix lloc a cada menú?
X
6
SI NO N/A 1.5
En les pantalles múltiples per a l’entrada de dades, cada pàgina està etiquetada per a mostrar la seva relació amb les altres?
1.6
Si sobreescriure i inserir es troben disponibles en el sistema , hi ha una indicació visible que indiqui quin dels dos està activat?
X
1.7
Si s’utilitzen finestres pop-up per a mostrar missatges d'error, permeten aquestes mostrar l’error a l’usuari quan es despleguen?
X
1.8 1.9
Hi ha alguna forma de sistema de retroalimentació (feedback) per a cada acció de l'operador ? Després que l'usuari porta a terme una acció ( o grup d'accions ), la retroalimentació (feedback) indica el que següent grup d’accions es pot iniciar?
X
X X
1.10
Hi ha informació visual en els menús i quadres de diàleg sobre quines opcions es poden seleccionar?
X
1.11
Hi ha informació visual en els menús i quadres de diàleg sobre quina opció es troba el cursor ?
X
7
SI NO N/A Si hi ha diverses opcions que es poden seleccionar en un menú o 1.12 quadre de diàleg , hi ha informació visual sobre les opcions que ja estan seleccionats ?
X
Hi ha informació visual quan els objectes són seleccionats o moguts?
X
1.13
1.14 Està indicat de manera clara l’estat actual d’una icona?
X
1.15 Existeix feedback quan una tecla de funció és pressionada?
X
Si hi ha retards observables (major de quinze segons) en el temps 1.16 de resposta del sistema, l’usuari és informat del progrés en la concreció de la resposta?
X
1.17 Els temps de resposta són adequats a cada tasca ?
X
1.18
Teclejar , moviment del cursor, selecció del ratolí : 0,5 i 1,5 mil·lisegons
X
1.19
Temps de resposta a tasques simples i freqüents : menys d'1 segon
X
1.20 Tasques comunes : 2-4 segons
X
1.21 Tasques complexes : 8-12 segons
X 8
SI NO N/A 1.22
Els temps de resposta són adequats als processos cognitius de l'usuari?
1.23
Es requereix continuïtat de pensament. La informació s’ha de recordar al llarg de diverses respostes: menys de dos segons.
X
1.24
No són necessaris alts nivells de concentració. No es requereix recordar informació: 2 a 15 segons
X
1.25
La terminologia utilitzada en el menú és coherent amb el domini de coneixement de l’usuari en relació a la tasca a realitzar?
X
1.26
El sistema proveu visibilitat? L’usuari pot determinar l’estat del sistema i les alternatives per a l’acció?
X
1.27
Els menús de la interfície gràfica de l’usuari fan obvi quin element ha estat seleccionat?
X
Els menús de la interfície gràfica de l’usuari fan obvi les opcions que poden ser deseleccionades? Si els usuaris han de navegar entre múltiples pantalles, el 1.29 sistema utilitza etiquetes contextuals, mapes de menú i marcadors com ajudes a la navegació? 1.28
X
X X
9
2 . Adequació entre el sistema i el món real El sistema ha de parlar l’idioma de l'usuari, amb paraules, frases i conceptes familiars per a l'usuari, en lloc de termes orientats sistema . Segueix les convencions del món real, fent que la informació aparegui en un ordre natural i lògic. SI NO 2.1 2.2
Les icones són concretes i familiars per l’usuari? Les opcions dels menús (els noms dels elements) estan ordenats en la manera més lògica per al usuari, atès un determinat usuari, una determinada llista d’ítem i variables per a realitzar les tasques?
N/A
X X
2.3
Si hi ha una seqüència natural a les opcions del menú , està implementada aquesta seqüència?
2.4
Els camps relacionats i interdependents apareixen a la mateixa pantalla?
2.5
Si les formes dels objectes de la interfície s’utilitzen com a pistes visuals, concorden amb les convencions culturals dels usuaris?
X
2.6
Els colors seleccionats corresponen a les expectatives comunes sobre els codis de color?
X
2.7
Quan una tecla o botó virtual per a pressionar en la pantalla (prompt) implica una acció necessària , inclou un missatge amb paraules consistents amb l'acció?
X
X X
10
SI 2.8
Las referencies indicades en las tecles o botons virtuals de la interfície para pressionar en la pantalla (prompts), són consistents amb noms de tecles reals?
2.9
Quan s’ingressen dades en la pantalla, la terminologia utilitzada per a descriure la tasca és familiar per als usuaris ?
El sistema prové de tecles o botons virtuals d’accés per nivells 2.10 en les pantalles d'entrada de dades?
NO
N/A
X
X
X
11
SI
2.11
Quan la pantalla inclou preguntes que han de ser respostes, són preguntes expressades en un llenguatge simple i clar ?
2.12
Les opcions en els menús, es corresponen lògicament amb categories que tinguin un significat unívoc
El llenguatge d’ordres emprat utilitza l’argot de l’usuari i evita l’argot específic de la informàtica?
X
X
X
2.15 Són els noms dels comandaments específics i no generals ? 2.16
2.18
X
El llenguatge emprat en les ordres, permet utilitzar tant paraules completes com abreviatures?
2.17 S’entenen els codis per a l’ingrés de dades? S’eviten sempre que sigui possible, les combinacions o les seqüències de lletres no comuns?
N/A
X
2.13 Els títols de menú segueixen un mateix estil gramatical ?
2.14
NO
X X X
12
SI 2.19
El sistema ingressa/elimina automàticament espais en blanc (o zeros) amb la fi d’alinear les xifres respecte al punt decimal?
NO
N/A
X
2.20 El sistema ingressa automàticament el signe del dòlar i decimal quan s’insereixen valors monetaris?
X
2.21 El sistema entra automàticament les comes en els valors numèrics superiors a 9999 ?
X
2.22 Els menús de la interfície gràfica d'usuari ofereixen activació , és a dir , és obvia la manera en què el sistema indica "ara faci això " ?
X
2.23 El sistema s'ha dissenyat de manera que les claus amb noms similars no facin accions oposades (i/o potencialment perilloses)? 2.24 Les tecles de funció estan clarament etiquetades i es distingeixen amb facilitat, encara quan això implica rompre amb les regles de la consistència?
X
X
13
3 . Llibertat i control per part de l’usuari Els usuaris han de tenir la llibertat d'escollir i la seqüència de tasques (si escau ), en lloc que el sistema ho faci per ells . Els usuaris sovint trien funcions del sistema per error i necessitaran una "sortida d'emergència" per sortir de l'estat no desitjat sense haver de passar per un diàleg estès . Els usuaris hauran de poder prendre les seves pròpies decisions (amb informació clara ) respecte als costos de la sortida de treball actual . El sistema ha de suportar desfer i refer. SI 3.1
Si configurar una pantalla és una tasca poc freqüent, es aquesta tasca particularment fàcil de recordar?
3.2
En els sistemes que utilitzen finestres superposades, és fàcil per als usuaris reorganitzar i reubicar les finestres a la pantalla?
3.3
En els sistemes que utilitzen finestres superposades, és fàcil per als usuaris canviar d’una finestra a una altra?
X
3.4
Quan una tasca efectuada per l’usuari es completa, el sistema espera alguna senyal de l’usuari abans de processar la tasca?
X
3.5
3.6
3.7
Poden els usuaris d'escriptura anticipada en un sistema amb molts menús niats?
X X
X
El sistema demana a l’usuari que confirmi les comandes que tenen conseqüències destructives, negatives o dràstiques? Hi ha una funció de "desfer" el nivell d'una sola acció, una entrada de dades i un grup complet de les accions ?
NO N/A
X
X
14
SI
NO N/A
3.8
Els usuaris poden anul·lar les operacions en curs?
3.9
L’edició de caràcters està permesa en les ordres?
X
3.10
Els usuaris poden reduir el temps d'entrada de dades mitjançant la còpia i modificació de les dades existents ?
X
3.11
L’edició de caràcters està permesa en els camps d’entrada de dades?
X
Si les llistes de menú són llargues ( més de set elements ) , els 3.12 usuaris poden seleccionar una opció d’una llista d’elements, movent el cursor o escrivint un codi mnemotècnic ?
X
Si els sistema utilitza dispositiu de tipus punter, els usuaris tenen 3.13 l’opció tant de fer clic en una llista d’elements com de utilitzar drecera de teclat?
X
X
15
SI 3.14
Els menús són amplis (molts elements) abans que profunds (molts nivells de menú)?
3.15
Si el sistema té diversos nivells de menú , hi ha un mecanisme que permet als usuaris tornar als menús anteriors?
3.16
Si els usuaris poden tornar a un menú anterior, poden canviar la seva opció de menú anterior?
3.17
Els usuaris poden desplaçar-se cap endavant i cap enrere entre els camps o opcions de quadres de diàleg?
X
Si el sistema té múltiples pantalles d'entrada de dades, els usuaris 3.18 poden desplaçar-se cap enrere i cap endavant entre totes les pantalles del conjunt?
X
Si el sistema utilitza una interfície de preguntes i respostes, els 3.19 usuaris poden tornar a les preguntes anteriors o saltar cap endavant a les preguntes posteriors?
X
3.20
NO N/A X
X X
Feu tecles de funció que poden causar greus conseqüències tenen una funció de desfer?
3.21 Els usuaris poden revertir fàcilment a les seves accions?
X X
Si el sistema permet als usuaris per revertir les seves accions, hi 3.22 ha un mecanisme que permeti desfer vàries accions de manera simultània?
X
Els usuaris poden configurar l’aparença del seu propi sistema, sessió, arxiu, i valors per defecte de la pantalla?
X
3.23
16
4 . Consistència i estàndards Els usuaris no haurien d'haver de preguntar-se si diferents paraules , situacions o accions signifiquen el mateix . Seguiu les convencions de la plataforma. SI NO N/A Els formats de la companyia han estat respectats de manera 4.1 X consistent en totes les pantalles del sistema? 4.2 S'ha evitat un ús intensiu de lletres majúscules en la pantalla? X 4.3
Els abreviatures no inclouen punt?
4.4
Els nombres sencers estan justificats a la dreta i els números reals decimals alineats respecte al punt decimal?
4.5
Estan etiquetades les icones ?
X
4.6
Hi ha un màxim de 12 a 20 tipus d'icones ?
X
4.7 4.8
Existeix algun element visual que identifiqui la finestra activa?
Cada finestra té un títol ?
X
X
X X 17
SI 4.9
El pot utilitzar el desplaçament vertical i horitzontal en cada finestra ?
NO N/A
X
4.10 Coincideix l'estructura dels menú amb l'estructura de les tasca ?
X
S'han establert estàndards de l'empresa en el disseny del menú? 4.11 s’han aplicat de manera consistent en totes les pantalles de menú al sistema ?
X
4.12 Els menús estan representats de manera vertical?
X
4.13
Si una opció de un menú és la de “sortir”, aquesta apareix com l’últim ítem del menú?
4.14 Els títols dels menús estan centrats o justificats a l’esquerra? 4.15
Els ítem dels menús estan justificats a l’esquerra, amb un número o un element mnemotècnic precedint el text de l’ítem?
4.16
Els avisos (prompts) embeguts dintre d’un ítem d’un menú múltiple, es desplegant cap a la dreta de l’etiqueta de l’ítem?
4.17
Les instruccions en línia apareixen en una ubicació semblant en les diferents pantalles?
4.18
Les etiquetes de camps tipogràficament entre sí?
i
els
camps
es
distingeixen
X X X X
X
X
18
SI
NO N/A
4.19
Les etiquetes de camps mantenen una forma consistent entre una pantalla i una altra?
X
4.20
Els camps i les etiquetes estan justificades a l’esquerra per a llistes alfabètiques i a la dreta per a llistes numèriques?
X
4.21
Les etiquetes de camps apareixen a l’esquerra dels camps senzills i a dalt de les llistes de camps?
X
4.22
Les tècniques per a atraure l’atenció de l’usuari s’utilitzen amb cura?
X
4.23 Intensitat: només dos nivells
X
4.24 Mida : fins a quatre vegades
X
4.25 Fonts : fins a tres tipus
X
4.26 Parpelleig (blink): 2-4 hertz 4.27
Color: fins a quatre colors diferents (colors addicionals només per a ús ocasional )
X X 19
SI
NO N/A
So : tons suaus per a la retroalimentació positiva regulars, tons bruscos en condicions crítiques rares
X
Les tècniques per a atraure l’atenció de l’usuari s'utilitzen només 4.29 per a condicions excepcionals o per a tasques que depenen dels temps?
X
4.30
Hi ha entre 4 i 7 colors com a màxim, i pertanyen aquest colors a l'espectre visible?
X
4.31
Existeix una llegenda si els codis de color són nombrosos o no és evident en el seu significat ?
X
4.32
S’eviten les parelles de colors espectralment extrems i altament cromàtics?
X
4.33
Els blaus saturats no s’utilitzen per a text o altres elements petits?
X
4.34
La informació més rellevant esta posicionada al principi de l’apuntador (promp)?
X
4.35
Les accions de l'usuari s’anomenen constantment a través de tots els missatges en el sistema?
X
4.36
Els objectes del sistema s’anomenen constantment a través de tots els missatges en el sistema?
X
4.37
Els avisos de nivell de camp proporcionen més informació que una reafirmació del nom del camp?
X
4.38
Per a les interfícies de preguntes i respostes, les entrades vàlides per a una pregunta estan llistades?
X
4.28
Els noms de les opcions en els menús són consistents en relació a 4.39 la resta de noms d’elements dels menús del sistema, en l’estil gramatical i la terminologia?
X 20
SI L'estructura dels noms opció de menú coincideixen als seus títols de menú corresponents? Els comandaments s’utilitzen de forma similar i tenen el mateix 4.41 significat en totes les parts del sistema? El llenguatge de comandaments tenen una sintaxi coherent, 4.42 natural i fàcil de memoritzar? Els abreviatures segueixen una norma primària simple? En cas necessari, pot duplicar-se una regla secundària simple per a 4.43 abreviar una paraula l’abreviatura de la qual coincideix amb alguna abreviatura prèviament utilitzada? 4.40
4.44
NO N/A X X X X
S’utilitza la norma secundària de l’ítem anterior només quan és estrictament necessari?
X
4.45 Totes les abreviatures tenen la mateixa longitud ?
X
L’estructura d’entrada de valors (dades) és consistent entre les diferents pantalles? 4.46
X
21
SI 4.47
El mètode per a moure el cursor cap el camp anterior o posterior és consistent al llarg dels sistema?
4.48
Si el sistema té pantalles múltiples d'entrada de dades, tenen totes les pàgines el mateix títol?
4.49
Si el sistema té pantalles múltiples d'entrada de dades, les corresponents pantalles estan numerades de manera seqüencial?
4.50
El sistema respecta les convencions de l'empresa per a assignar funcions a les tecles?
4.51
Els colors d'alt valor cromàtic s'utilitzen per a atreure l' atenció de l’usuari?
NO N/A X
X X X X
22
5 . Ajuda els usuaris a reconèixer i diagnosticar els errors i recuperar-se’n Els missatges d'error han de ser expressades en un llenguatge senzill (sense codis). SI 5.1
S’utilitza so per assenyalar un error ?
5.2
Els avisos es presenten de manera constructiva, sense la crítica oberta o implícita de l'usuari?
X
5.3
Els avisos impliquen que l'usuari té en control?
X
5.4
Els avisos son breus i sense ambigüitats.
X
5.5
Els missatges d’error estan redactats de manera que és el sistema, i no l’usuari, el que té la culpa?
X
Si s’utilitzen missatges d’error amb humor, són apropiats i respectuosos per a la comunitat d’usuaris?
5.7
Els missatges d'error són gramaticalment correctes?
X
5.8
Els missatges d'error eviten l'ús dels signes d'exclamació?
X
5.9
Els missatges d'error eviten l'ús de paraules violentes o hostils?
X
X
5.10 Els missatges d'error eviten un to antropomòrfic? Tots els missatges d'error en el sistema utilitzen un estil gramatical, terminologia i abreviatures coherents?
N/A
X
5.6
5.11
NO
X X 23
SI 5.12 Els missatges col·loquen al sistema baix el control de l’usuari?
X
5.13 El llenguatge d’ordres utilitza la sintaxi habitual acció-objecte? El llenguatge d’ordres evita les arbitrarietats i l´ús no-anglès de 5.14 signes de puntuació, amb excepció dels símbols coneguts per l’usuari?
X
X
5.16 Els missatges d'error informen l'usuari de la gravetat de l'error ?
X
5.17 Els missatges d'error indiquen la causa del problema ?
X
Els missatges d'error proporcionen informació semàntica apropiada? Els missatges d'error proporcionen informació sintàctica 5.19 adequada ? 5.20
Els missatges d'error indiquen l'acció que l'usuari ha de prendre per corregir l'error ?
Si el sistema és compatible tant amb els usuaris principiants com 5.21 els usuaris, existeixen diferents nivells de complexitat en els missatges d'error disponibles ?
N/A
X
Si es detecta una errada en un camp d'entrada de dades, el 5.15 sistema posiciona el cursor en aquest camp o el ressalta d’alguna manera?
5.18
NO
X X X X
24
6 . Prevenció d’errors Un disseny acurat que evita que un problema es produeixi, és fins i tot, millor que bons missatges. SI
NO N/A
6.1
Si la base de dades inclou grups de dades, els usuaris poden introduir més d'un grup en una mateixa pantalla ?
6.2
S’utilitzen punts o guionets baixos (underscores) per a indicar la longitud dels camps?
6.3
El nom de l’elecció del menú en un menú de nivell superior s’usa com a títol de menú del menú de nivell inferior?
X
6.4
Les eleccions disponibles en el menú són lògiques, distintives i mútuament excloents?
X
X
X
25
SI
NO N/A
6.5
Les entrades de dades no són sensibles a majúscules sempre que sigui possible?
X
6.6
Si el sistema mostra diverses finestres, la navegació entre elles és simple i visible?
X
6.7
Les tecles de funció que poden causar les pitjors conseqüències es troben ubicades en posicions de teclat difícils d’aconseguir?
X
6.8
Les tecles de funció que poden causar les pitjors conseqüències es troben allunyades de les tecles amb ús intensiu i que no tenen majors conseqüències?
X
6.9
Se ha minimitzat l’ús de tecles qualificadores (qualifier keys)?
X
6.10
Si els sistema utilitza tecles qualificadores, s’usen les mateixes consistentment en tot el sistema?
X
6.11
El sistema evita que els usuaris cometin errors sempre que sigui possible ?
X
26
SI
NO N/A
6.12
El sistema adverteix als usuaris si estan a punt de cometre un error potencialment greu ?
6.13
El sistema interpreta de manera intel·ligent les possibles variacions en els ordres d'usuari?
6.14
Les pantalles d'entrada de dades i quadres de diàleg indiquen el nombre d'espais de caràcters disponibles en un camp?
X
Els camps en les pantalles d’entrada de dades i les caixes de 6.15 diàleg indiquen el nombre d’espais en caràcters que estan disponibles per a un camp?
X
X X
27
7 . Reconeixement en lloc de record Fer els objectes, accions i opcions visibles . L'usuari no hauria d’haver de recordar informació d'una part del diàleg a una altra. El manual d'usuari del sistema ha de ser visible o fàcilment recuperable quan sigui apropiat . SI NO N/A
Existeixen pistes visuals i espais en blanc per a distingir preguntes, sol·licituds, punts d’inserció de respostes i instruccions en les interfícies de preguntes i respostes?
X
7.2
S’inicia la visualització de dades a la cantonada superior esquerra de la pantalla?
X
7.3
Les etiquetes de més d’una paraula estan disposades horitzontalment (no apilades verticalment)?
7.4
Totes les dades que necessita un usuari es mostres en cada seqüència d’una transacció?
7.1
7.5 7.6
Els avisos, pistes visuals i missatges estan posicionats en llocs de la pantalla on és probable que l’usuari fixi la seva mirada? Els avisos presenten un format que utilitzi espais en blanc, justificacions i elements o guies visuals per un fàcil reconeixement?
X X X X 28
SI
7.7
Les àrees de text tenen "espai per a respirar" al seu voltant?
7.8
Hi ha una diferència visual òbvia entre els menús on tan sols és possible seleccionar una opció i els menús on és possible seleccionar múltiples opcions?
7.9
S’han preservat les relacions espacials entre tecles de funció “toves” (mostrades com elements en pantalla) i tecles de funció de teclat?
El sistema mostra en gris o borra les etiquetes d’aquelles 7.10 tecles de funció “toves” que es troben actualment inactives? S’usa l’espai en blanc per a crear simetria i guiar la vista 7.11 de l’usuari en la direcció apropiada?
7.12
S’han agrupat els elements en zones lògiques, utilitzant encapçalaments per a distingir entre aquestes zones?
NO
N/A
X
X
X
X X
X
29
SI 7.13
Les zones tenen com a màxim entre 12 i 14 caràcters d’ample, i entre 6 i 7 línies d’alt?
NO
N/A
X
Les zones han estat separades per espais, línies, color, 7.14 lletres, títols ressaltats, línies de separació o zones d’ombra?
X
7.15
Les etiquetes de camp es situen a prop dels camps, però separats per almenys un espai ?
X
7.16
Els camps en columna que són llargs es descomponen en grups de cinc, separats per una línia en blanc?
7.17
Els camps d'entrada de dades que són opcionals figuren clarament marcats?
7.18
Els símbols s'utilitzen per a trencar les cadenes d'entrada llargs en "blocs"?
7.19
S’utilitza un vídeo gravat anteriorment o es realcen els colors per a cridar l' atenció de l'usuari?
X X X
X
30
SI 7.20
S’utilitza un vídeo gravat anteriorment per a indicar que un ítem ha estat escollit?
N/A
X
S’utilitza la mida de lletra, negreta, subratllat, color, 7.21 ombrejat o tipografia especial per a mostrar la quantitat o importància dels diferents elements de la pantalla?
X
7.22
S’utilitzen vores realçades per a identificar grups significatius?
X
7.23
S'ha utilitzat el mateix color per a identificar elements relacionats?
X
7.24 La codificació de color és coherent en tot el sistema?
X
7.25
El color s’utilitza en conjunció amb alguna altra senyal redundant?
X
7.26
Hi ha bon color i contrast de lluminositat entre les imatges i els colors de fons?
X
Els colors suaus, brillants i saturats s’han utilitzat per a 7.27 emfatitzar dades, mentre que els colors foscos, opacs i no saturats s’han utilitzat per a des-emfatitzar dades?
X
La primera paraula de cada menú a triar és la més important?
X
Els sistema proveeix d’un mapa que fa que l’usuari 7.29 percebi que existeixen relacions entre els controls i les accions associades?
X
7.30 Els codis de dades d'entrada són distintius?
X
7.28
NO
31
SI 7.31
S'han eliminat els parells de dades que amb freqüència confonen, sempre que sigui possible?
7.32
Les seqüències de números o lletres que tenen gran longitud se han descompost en “blocs” (chunks)?
7.33
Els elements inactius en un menú apareixen en gris o estan omesos?
7.34 Existeixen eleccions per defecte dins del menú?
NO
N/A X
X X
X
32
SI Si el sistema té molts nivells de menú o nivells de menú 7.35 complexos, els usuaris tenen accés a un mapa de menús espacial en línia dels menús existents?
X
Els menús de la interfície gràfica de l’usuari tenen 7.36 “affordance”, és a dir, es fa evident que és possible la selecció?
X
Existeixen elements visuals per a identificar la finestra activa ?
X
7.37
7.38 Les tecles de funció estan disposades en grups lògics? 7.39
Fes pantalles d'entrada de dades i quadres de diàleg indiquen quan els camps són opcionals?
7.40
A les pantalles d'entrada de dades i quadres de diàleg, els camps dependents apareixen només quan sigui necessari?
NO
N/A
X X X
33
8 . Flexibilitat i eficiència en l’ús El sistema pot accelerar la freqüència de la interacció per a un usuari expert, sense ser vist per l’usuari novell, de tal manera que el sistema pot ser utilitzat per usuaris experimentats o sense experiència. Permet als usuaris adaptar les accions freqüents. Proporciona mitjans alternatius d’accés per als usuaris segons la capacitat física o cognitiva, la cultura, l’idioma, etc. SI NO N/A 8.1
El sistema és compatible amb el principiant i els usuaris experts. Estan disponibles nivells de missatges d’error?
X
8.2
El sistema permet que els nouvinguts utilitzin una gramàtica de paraules clau i els experts una gramàtica posicional?
X
8.3
Poden els usuaris definir els seus propis sinònims d'ordres?
X
8.4
El sistema permet als usuaris novells entrar en la forma més simple i comú de cada comanda, i als usuaris experts afegir paràmetres?
X
8.5
Els usuaris experts tenen l'opció d'introduir múltiples ordres en una sola cadena?
X
8.6
El sistema proveeix tecles de funció per als comandaments d'alta freqüència ?
X
8.7
Per a les pantalles d'entrada de dades amb molts camps o en els quals els documents d'origen poden estar incomplets, els usuaris poden guardar una pantalla parcialment completa?
X
8.8
El sistema ingressa automàticament zeros a l'esquerra per a l’alineació de valors?
X
8.9
Si les llistes de menú són curtes (7 o menys elements), poden els usuaris seleccionen un element movent el cursor?
X
8.10
Si el sistema utilitza una estratègia d'escriptura anticipada (type-ahead), els elements del menú tenen codis mnemotècnics?
X 34
SI
8.11
Si els sistema usa un dispositiu d’avisos, els usuaris tenen l’opció de fer clic directament sobre els camps o utilitzar una drecera de teclat?
8.12
Els sistema ofereix dreceres per a “cercar el següent” i “anterior” en cerques de bases de dades?
8.13
En les pantalles d’entrades de dates els usuaris tenen l’opció de fer clic directament sobre un camp o utilitzar una drecera de teclat?
X
8.14
En els menús, els usuaris tenen l’opció o bé de fer clic directament en un element del menú o bé utilitzar una drecera de teclat?
X
8.15
En les caixes de diàleg, els usuaris tenen l’opció de fer clic directament en la caixa de diàleg o d’utilitzar una drecera de teclat?
X
8.16
Els usuaris experts poden eludir les caixes de diàleg niades amb qualsevol tipus d’escriptura anticipada, macros definides per l’usuari o dreceres de teclat?
NO
N/A
X
X
X
35
9 . Disseny estètic i minimalista Els diàlegs no han de contenir informació irrellevant o innecessària. Cada unitat addicional d'informació en un diàleg competeix amb les unitats rellevants d'informació i disminueix la seva visibilitat relativa . SI NO N/A 9.1
Es mostra en la pantalla la informació essencial per a prendre decisions?
9.2
Les icones són visualment distingibles d’acord amb el seu significat conceptual?
X X
9.3
Els objectes grans, les línies ressaltades i les àrees simples de la pantalla es distingeixen de les icones?
X
9.4
Cada icona està ressaltada respecte del seu fons?
X
9.5
Si el sistema utilitza una interfície gràfica d’usuari estàndard en la qual la seqüència dels menús ja s’ha especificat, els menús estan dissenyats respectant aquesta especificació sempre que sigui possible?
9.6
Els grups d’elements amb significat semblant estan separats per espais en blanc?
X
X 36
SI
NO
9.7
Cada pantalla d'entrada de dades té un títol curt, clar, simple i diferent?
9.8
Les etiquetes de camp són breus, familiars i descriptives?
X
9.9
Els avisos estan expressats en sentit positiu i redactats utilitzant l’estil de veu activa?
X
9.10
Cada opció de menú que es troba en un nivell inferior esta associada amb només una opció del nivell superior?
X
9.11
Els títols dels menús són breus però suficientment llargs per a comunicar el seu contingut?
X
Els menús emergents (pop-up o pull-down menus) amb camps per 9.12 a entrada de dades, tenen diferents opcions definides de manera correcta per a entrar aquestes dades?
N/A
X
X
37
10 . Ajuda i Documentació Tot i que és millor si el sistema pot ser utilitzat sense la documentació, pot ser necessari per proporcionar ajuda i documentació. Aquesta informació ha de ser fàcil de buscar, es va centrar en la tasca de l'usuari, llista de mesures concretes que s'han de dur a terme, i no ser massa gran. SI 10.1
Si els usuaris treballen des del disc rígid, les parts del disc rígid que es troben connectes en línia (online) estan marcades?
10.2
Les instruccions en línia apareixen de manera visual clara?
X
10.3
Les instruccions segueixen la seqüència d'accions de l’usuari?
X
10.4
10.5
Si les opcions del menú són ambigües, el sistema proporciona informació explicativa addicional quan es selecciona un element?
NO
N/A X
X
La caixa d‘entrada de dades i els quadres de diàleg poden ser utilitzades en línia per a completar accions?
X
Hi ha ajudes de memòria per a les ordres, ja sigui a través de referències ràpides o avisos?
X
10.6
10.7
38
SI 10.8
La funció d'ajuda és visible, per exemple, una tecla etiquetada “ajuda” o un menú especial?
X
10.9
La interfície d’ajuda del sistema (navegació, presentació i conversa) és consistent amb les interfícies de navegació, conversació i presentació de l’aplicació que suporta?
X
10.10 Navegació : La informació és fàcil de trobar?
NO
X
10.11 Presentació: El disseny visual esta ben dissenyat?
X
10.12 Conversa: La informació és precisa, completa i comprensible?
X
10.13 La informació és rellevant?
X
10.14 Orientat als objectius: Què puc fer amb aquest programa ?
X
10.15 Descriptiu: Què és aquesta cosa?
X
10.16 Procediment: Com puc fer aquesta tasca? 10.17 Interpretació: Per què va passar això?
X X
10.18 Navegació: On sóc? 10.19 Hi ha ajuda sensible al context? 10.20 Pot l’usuari canviar el nivell de detall disponible? 10.21
Després d’haver accedit a l’ajuda, poden els usuaris continuar amb la tasca des d’on la van interrompre?
N/A
X X X X
39
10.22 És fàcil accedir i tornar des del sistema d'ajuda? 10.23
X
Poden els usuaris reprendre el treball on ho van deixar després d'accedir a l'ajuda ?
X
11 . Habilitats El sistema ha de recolzar, ampliar, complementar o millorar les habilitats dels usuaris, coneixements i experiència. Suplementa les habilitats, no les reemplaça. SI NO N/A 11.1
Poden els usuaris triar entre la presentació de la informació en forma de text o icones?
11.2
Les operacions de finestra són fàcils d’aprendre i d’utilitzar?
11.3
Si els usuaris són experts, el sistema té un baix temps de resposta? existeixen e aquests casos menys pantalles i més informació en cada pantalla?
X
11.4
Si els usuaris novells, el sistema té un temps de resposta ràpid , hi ha més pantalles i menys informació per pantalla?
X
11.5
El sistema codifica automàticament els elements amb color, amb cap o poc esforç per part de l’usuari?
11.6
Si el sistema és compatible amb principiants i amb usuaris experts? Existeixen múltiples nivells de detall disponibles?
11.7
Són els usuaris els iniciadors de les accions en lloc de ser el que han de respondre davant elles?
X X
X X X 40
SI 11.8
El sistema realitza traduccions de dades per als usuaris ?
11.9
Els valors dels camps s’eviten barrejar caràcters alfabètics i numèrics sempre que sigui possible?
X
11.10
Si el sistema té menús profunds (multinivell ), els usuaris tenen l'opció d'escriure per endavant?
X
NO
N/A X
11.11 Quan l’usuari accedeix a una pantalla o a una caixa de diàleg, 11.12 el cursor està posicionat en el camp que més probablement vagi a necessitar l’usuari?
X
11.13
Poden els usuaris desplaçar-se cap endavant i cam enrere dins d’un camp?
X
11.14
El mètode per a moure el cursos al camp següent o previ és simple i a la vegada visible?
X
11.15
S’ha evitat la tabulació automàtica excepte quan els camps tenen longituds fixes o els usuaris són experimentats?
X
11.16
Els dispositius d’entrada escollits coincideixen amb les capacitats del usuari?
X
Les tecles de cursor estan disposades en forma de T invertida 11.17 (millor per als experts) o en forma de creu (millor per als principiants)?
41
11.18
Les tecles importants, com per exemple ENTER o TAB són més grans que les altres tecles?
X
Hi ha prou tecles de funció per a donar suport a la 11.19 funcionalitat, però no tantes que sigui difícil la seva detecció i diferenciació? 11.20
Les tecles de funció estan reservades per a funcions genèriques, d’alta freqüència i importants?
11.21
Les assignacions de tecles de funció, són consistents a través de les pantalles i productes relacionats?
11.22
El sistema anticipa i avisa l’usuari correctament sobre la pròxima activitat que sigui més probable?
X
X X X
42
12 . Interacció plaent i respectuosa amb l'usuari Les interaccions de l'usuari amb el sistema han de millorar la qualitat del seu treball o de la seva vida. L'usuari ha de ser tractat amb respecte. El disseny ha de ser estèticament agradable, artístic , així com el valor funcional. SI NO N/A 12.1
Cada icona individual és harmoniosa dintre d’una família d’icones?
X
12.2
S’ha evitat el detall excessiu en el disseny de les icones?
X
12.3
S'ha utilitzat el color amb discreció?
X
12.4
La quantitat d’administració de finestres requerida s’ha mantingut a un mínim?
12.5
Si els usuaris estan treballant a partir d’una còpia impresa, el disseny de la pantalla coincideix amb el formulari en paper?
12.6
S’ha utilitzat el color específicament per a cridar l’atenció, comunicar l’organització, indicar canvis de status i establir relacions?
12.7
Els usuaris poden desactivar codificació automàtica en colors si és necessari?
X
12.8
Els requeriments de tecleig són mínim per a les interfícies de preguntes i respostes?
X
12.9
El dispositiu d'entrada limitacions ambientals?
seleccionat
concorda
amb
les
X X
X
X
12.10 12.11 43
SI
NO
N/A
12.12 Si els sistema utilitza dispositius d’entrada múltiple, s’ha 12.13 minimitzat el moviment de la ma i els ulls entre els dispositius d’entrada?
X
12.14
Si el sistema és compatible amb tasques gràfiques, se proporciona d’un dispositiu de senyalització alternativa?
X
12.15
El teclat numèric es troba situat a la dreta de l’àrea de tecles alfabètiques?
X
12.16
Les tecles de funció usades més freqüentment es troben en les posicions més accessibles?
X
12.17
El sistema completa entrades parcials inequívoques en un camp d’entrada de dates?
X
44
13 . Intimitat i privacitat El sistema ha d'ajudar l'usuari a protegir la informació personal o privada que pertany a l'usuari o als seus clients. SI 13.1 Les àrees protegides són completament inaccessibles?
13.2
Es pot accedir amb certes paraules clau a les àrees confidencials o protegides?
13.3 És la característica del punt anterior efectiva i exitosa?
NO
N/A
X
X
X
45
INFORME HEURÍSTIC
46
INFORME HEURÍSTIC Menús, títols, encapçalaments i icones EN LÍNIES GENERALS: Cada pàgina comença amb un encapçalament que descriu el contingut de la pantalla. Els menús seleccionats són clarament visibles i distingibles quan s’envolten de menús no seleccionats, ja que canvien de color quan es seleccionen o quan el cursor passa sobre ells. Les tecles de funció també es distingeixen amb facilitat. Els menús poden desplaçar-se pel lloc amb les pestanyes del menú de navegació principal i clicant sobre els breadcrumbs. Les icones es troben ressaltades respecte del seu fons; són concretes i representen el món real: Per exemple, unes claus daurades representen les estrelles dels hotels, una icona d’un nadador i unes peses representen que l’establiment disposa de piscina i gimnàs, etc. La quantitat d’icones no supera les vint en tot el lloc web i són visualment distingibles dels objectes grans, al igual que les línies ressaltades i les àrees simples de la pantalla. La terminologia utilitzada tant en els menús, títols, icones i textos no és ni tècnica ni complicada. Això fa que sigui coherent amb el domini de coneixement de qualsevol usuari. PUNTS MILLORABLES:
Els menús no estan organitzats d’una manera lògica. Existeix una barreja de conceptes i menús que no porten on toca. Les etiquetes dels menús poden portar a error, ja que no defineixen amb precisió el que es trobarà l’usuari quan hi accedeix. Per exemple, que pot significar “Y mucho más” ?
Incompleix el principi 2 de Nielsen, que parla sobre l’adequació entre el sistema i el món real.
47
Els enllaços que porten cap a altres pantalles
no sempre es mostren de manera clara. En l’exemple de la dreta, l’enllaç “Lo que debes saber antes de ir” és blau i negreta i té el mateix aspecte que “Prepara tu visita” que, en aquest cas no és un enllaç. En la següent imatge, www.turismo.es, és un altre enllaç, però en aquest cas es representa en gris, sense negreta i subratllat, és a dir, d’una manera totalment diferent. Incompleix el principi 1 de Nielsen que parla sobre la visibilitat de l’estat del sistema. El lloc web ha de mantenir sempre informat l’usuari del que està ocorrent.
48
Els noms de les opcions en els menús no són consistents
entre sí. Tampoc s’utilitzen de forma similar en totes les parts del sistema. Uns menús són impersonals, com “Parques Disney” i uns altres són imperatius “Elige tu experiència”. Uns són molt curts “Búsqueda” i altres són molt llargs “Lo que debes hacer antes de ir”. Si el menú comença d’esquerra a dreta per “Parques Disney”, “Hoteles Disney”, caldria posar “Ofertas” o “Tu oferta ideal”, en lloc de “Encuentra tu oferta ideal”. O també, en lloc de “Elige tu experiència”, “Experiencias Disney” seria més correcte.
Alguns menús no són fàcils de memoritzar perquè molts
d’ells no representen l’acció que indica el menú. Per exemple, si un usuari clica en l’opció “Cómo llegar”, espera trobar un mapa, unes rutes de bus o de trens, etc. Però el que es troba és una pàgina amb l’enunciat “Lo que debes saber antes de ir” que no té res a veure amb l’enunciat de l’opció que l’ha portat fins aquí. Els dos exemples anteriors incompleixen el principi 4 de Nielsen sobre la consistència i estàndards. 49
No
totes
les
eleccions
dels
menús
són
mútuament excloents. Hi ha diferents enllaços que fan la mateixa cosa. Per exemple, "My disneyland" i “Entra o regístrate” estan separats pocs mil·límetres l’un de l’altre i tenen diferent aspecte, però tot i això porten l’usuari al mateix lloc, que és la pàgina de registre.
Tenim l’opció “Prepara tu visita>Cómo llegar”
que sembla igual que el botó del menú superior “Cómo llegar”, explicat a l’exemple anterior. Però en aquest cas sí que porta a una pàgina que explica l’usuari com arribar al parc.
“Disney Village>Restaurantes y Bares” porta a
una pantalla on figuren la llista de restaurants per a poder fer una reserva prèvia. La cosa curiosa és que una vegada seleccionada la pantalla, queda marcada la pestanya de “Mucho más”. Això és perquè des de “Y mucho más>Restaurantes y Bares” s’accedeix a la mateixa pantalla. Aquest fet confon l’usuari que perd completament la ruta.
50
Des de “Prepara tu visita>Restaurantes y bares” porta a una pantalla on hi figuren diferents serveis de restaurant. La
pantalla es diu igual que la de l’exemple anterior, però no és la mateix.
El quatre exemples anteriors incompleixen el principi 6 de Nielsen. Les opcions han de poder estar tant ben organitzades que l’usuari pugui recordar perfectament on es troben. Si hi ha repeticions de pantalles, menús que no porten on toca, l’internauta tindrà dificultats per a memoritzar fàcilment les rutes. Per altra banda, també incompleixen el principi 5 de Nielsen sobre la prevenció d’errors. Si les pantalles no estan ben etiquetades, l’usuari pot cometre errors en les seves accions.
51
A continuació se figuren dos exemples més que també incompleixen aquests dos principis:
Tenim un altre exemple de dos rutes que porten
a la mateixa pantalla. Per una banda, des de un apartat de “Prepara tu visita” es pot accedir al punt “Descubre la región” però des del menú “Y mucho más>Descubre la región” es va a la mateixa pantalla.
L’enllaç “Disney Village>Diversiones” i “I mucho
más>Diversiones” semblen el mateix tipus d’ellaç, ja que apunten cap el mateix nom de pantalla, però això no és així. El primer en dirigeix a: http://disney-village.disneylandparis.es/index.xhtml El segon a: http://entretenimiento.disneylandparis.es/index.xhtml Es pot comprovar que no enllacen amb la mateixa pantalla.
52
BONES PRÀCTIQUES Els enllaços han s’han de distingir completament de la resta del text i dels títols. Tenim un bon exemple en la web de PortAventura on els enllaços es mostren sobre un fons de diferent color i amb una fletxa que indica acció.
En la pàgina de BioPark, els enllaços es mostren quan es passa amb el ratolí per sobre. També pot ser una bona pràctica que ajuda l’usuari a saber on pot clicar.
Pel que respecta als menús, la pàgina de Terra Mítica o la de PortAventura disposen d’un clar exemple de menús breus, concisos, clars, diferents entre ells i etiquetats de forma impersonal.
53
En els menús de Terra Mítica, a més, la informació es troba molt ben distribuïda, amb fons clars i de fàcil lectura.
2 - Mantenir informat a l’usuari de on es troba EN LÍNIES GENERALS: El lloc té un sistema de feedback per a cada acció de l’usuari. En el menú principal, el sistema indica a l’usuari sobre quina opció es troba ja que reacciona quan passa amb el cursor. Una vegada ha fet clic en una pantalla, la pestanya del menú principal passa de blanc a blau indicant en quina pantalla es troba. També disposa d’un mapa web que indica al internauta l’estructura del lloc. En general, els temps de resposta són adequats. Si hi ha un retard en la càrrega de la pantalla, el lloc mostra un dibuix en moviment. Com per exemple el personatge Campanita movent-se per la pantalla amb la llegenda “Estamos consultando tu petición, gracias por la espera”. Això indica a l’usuari que el sistema està responent a la seva acció.
54
PUNTS MILLORABLES:
Amb la intenció de mantenir informat a l’usuari d’on es troba dintre del lloc, s’han integrat breadcrumbs en les
pantalles. El problema és que els breadcrumbs no coincideixen sempre amb la ruta que segueix l’usuari per a arribar a la pantalla en la que es troba. Per exemple, si accedim des del menú “Prepara tu visita>Descubre la región” ens trobem amb el següent breadcrumbs:
Si accedim des del menú “Y mucho más>Diversión” ens trobem amb el següent breadcrumbs:
Si accedim des del menú “Disney Village>Restaurantes y bares” ens trobem amb el següent breadcrumbs:
Aquests exemples incompleixen el principi 1 de Nielsen sobre la visibilitat de l’estat del sistema, ja que no manté informat correctament a l’usuari d’on es troba dintre del lloc.
55
En la web analitzada, quan hi ha diverses pantalles obertes, si només ens fixem en la informació que apareix en la
pestanya superior no es pot saber de ninguna manera de quines pantalles del lloc es tracten. Encara que la icona de tipus favicon és diferent en alguna de les pantalles, la etiqueta és la mateixa. En l’exemple següent es mostren les pestanyes de la pàgina d’ofertes i la de reserves online:
Quan es selecciona un enllaç que porta a un document pdf, aquest seria preferible que s’obrís en una pestanya diferent,
però ho fa en la mateixa pestanya i es perd la navegació del lloc completament. No és possible sortir del document amb les fletxes de tornar enrere del navegador. Aquests dos exemples incompleixen el principi 3 de Nielsen sobre la llibertat i control per part de l’usuari, ja que no és fàcil reorganitzar o reubicar les pantalles, l’usuari es perd i per tant perd també el control.
Les pantalles correlatives i relacionades no estan numerades de manera seqüencial. Els menú tenen una lleugera
forma de fletxa però no estan numerades:
Incompleix el principi 4 de Nielsen sobre consistència i estàndards.
56
BONES PRÀCTIQUES Si ens referim als breadcrumbs, en la web de Isla Mágica en tenim una bona aplicació, ja que la ruta marcada i els noms de les etiquetes coincideixen amb la ruta real de l’usuari per accedir a la pantalla.
També en Isla Mágica, si accedim a “Prensa” i descarreguem un arxiu en pdf, aquest es desplega en una pantalla diferent. De manera que l’usuari pot tornar a pantalla de “Prensa” sense tancar el document descarregat. Les dues pestanyes estan perfectament etiquetades. En l’exemple següent, només visualitzant les pestanyes ja sabem quina correspon a la pantalla de “Prensa” i quina al document.
57
Un exemple de pantalles correlatives perfectament numerades, el trobem a la pàgina de iStock. La numeració indica al usuari en quin procés es troba a l’hora de realitzar una acció com pot ser una compra.
3 – Disseny estilístic i estàndards EN LÍNIES GENERALS: Existeix una mateixa línia de disseny estilístic en tot el lloc: colors molt saturats i imatges recarregades per atraure l’atenció dels més petits. S’accedeix a la pantalla de “Home” des del logotip. També existeixen pistes visuals i espais en blanc per a distingir preguntes, sol·licituds, camps d’inserció, etc. Les àrees de text tenen “espai per a respirar” al seu voltant. Utilitza la mida de lletra, la negreta, el subratllat, el color, l’ombrejat o la tipografia especial per a mostrar la importància dels diferents elements de la pantalla; així com vores realçades per a identificar grups significatius. Si els elements estan relacionats la web utilitza el mateix color entre ells.
58
PUNTS MILLORABLES:
Amb un primer cop de vista, es fa difícil trobar l’opció per a canviar l’idioma del lloc. En DisneyLand Paris es troba al
peu de les pantalles, però apart de quedar fora del cap de visió, no sempre s’etiqueta de la mateixa manera, ni amb la mateixa tipografia:
Aquest punt Incompleix el principi 3 de Nielsen sobre la llibertat i el control per part de l’usuari.
El botons que impliquen una acció específica no segueixen la mateixa línia estilística. La varietat de dissenys és
excessiva, en color, models i tipografies.
59
El logotip, encara que fa d’enllaç a la pàgina d’inici, no figura en totes les pantalles. Quan l’usuari accedeix a la pàgina
de registre o quan es vol descarregar un fulletó des de l’enllaç de “Folletos”, per exemple, el logotip de DisneyLand desapareix.
Els números decimals que apareixen en el lloc, no estan alineats respecte al seu punt
decimal, sinó respecte al punt central del bloc. Això fa que costi llegir correctament les xifres.
En general, en les pantalles es mostra més coses que la informació essencial per a prendre
decisions. El disseny és molt recarregat. Existeixen més de tres tipus de fonts, més de set colors diferents i no s’eviten les parelles de colors espectralment extrems. El lloc està saturat de tècniques per a atreure l’atenció de l’usuari (*exemples en la següent pàgina) Els quatre punts anteriors incompleixen el principi 4 de Nielsen sobre la consistència i estàndards, i el últim també incompleix el principi 9 de Nielsen que parla sobre la necessitat de crear dissenys estètics i minimalistes. 60
*Exemples de la varietat de fons, colors i dissenys de la web de DisneyLand Paris.
61
BONES PRÀCTIQUES Amb referència del canvi d’idioma, algunes de les webs homòlogues a DisneyLand Paris sí tenen el canvi d’idioma a ma de l’usuari, sigui en forma de banderes o de text. Exemple de PortAventura:
Exemple de BioParc:
Exemple de Isla Mágica:
Exemple de Tibidabo:
62
Amb referència al botons, els de Tierra Mítica són un bon exemple de botons senzills, amb la mateixa línia de color i estil:
La pàgina de Tibidabo mai perd l’encapçalament superior, de manera que l’usuari sempre pot tornar a l’inici des del logotip o dirigir-se sense dificultat a qualsevol secció del web
63
4 – Missatges d’error i alertes EN LÍNIES GENERALS: Els avisos i les alertes de tipus pop-up es posicionen en el centre de la pantalla on és possible que l’usuari fixi la seva mirada i sempre apareixen en el mateix lloc. Són breus, sense ambigüitats i gramaticalment correctes. Les finestres pop-up mostren l’error a l’usuari de manera constructiva, sense criticar-lo i evitant signes d’exclamació i paraules hostils; a la vegada que indiquen l’acció que ha de prendre per a corregir l’error. L’usuari pot fer clic sobre la mateixa finestra d’alerta per a corregir l’acció. Els menús emergents amb camp per a entrada de dades, tenen diferents opcions definides de manera correcta per a entrar aquestes dades. Si es produeix un error en un camp d’entrada de dades, el sistema remarca en vermell el camp on s’ha produït l’error. PUNTS MILLORABLES:
Els missatges d’error no segueixen una mateixa línia estilística
64
Aquest punt incompleix el principi 7 de Nielsen sobre el reconeixement en lloc de record. Al no seguir la mateixa línia estilística, l’usuari triga més a reconèixer que es troba amb un avís d’error. BONES PRÀCTIQUES En aquest cas, la bona pràctica seria redissenyar de nou les finestres pop-up d’avisos de manera que totes tinguessin el mateix aspecte i fossin del mateix color.
5 – Entrada de dades EN LÍNIES GENERALS: La terminologia utilitzada per als formularis i altres blocs d’entrada de dades, és familiar per als usuaris. Les preguntes i les respostes s’expressen en un llenguatge simple i clar. Les etiquetes de camp es situen a prop dels camps però separades per almenys un espai, això fa que les etiquetes dels camps i els camps es distingeixen gràficament entre sí. Existeixen menús o llistes de selecció amb opcions per defecte o pre-definides que faciliten a l’usuari la tasca de reomplir dades. Només cal recórrer la llista amb el cursor i seleccionar l’opció desitjada. També, el sistema indica clarament quan els camps són opcionals i quan obligatoris. Les caixes d’entrada de dades poden ser utilitzades en línia per a completar accions. Quan l’usuari insereix dades en un camp, el sistema indica clarament quan s’està escrivint i quan es sobreescriu. També disposa d’opcions de desfer que porten enrere l’acció efectuada per l’usuari o de botons que permeten anular operacions en curs. Les entrades de dades no són sensibles a les majúscules.
65
PUNTS MILLORABLES:
Els sistema no contempla utilitzar dreceres de teclat. Només és vàlid el tabulador per a moure’s entre els camps dels
formularis.
Aquest fet incompleix el principi 3 de Nielsen, sobre la llibertat i control per part de l’usuari.
Els formularis no mantenen una forma consistent, ni tenen el mateix disseny estilístic d’una pantalla a una altra. Uns
estan alineats a la dreta, uns altres a l’esquerra i uns altres justificats; uns tenen el fons groc i els camps a reomplir són quadrats i altres tenen el fons blanc i els camps tenen els cantons rodons. També són diferents les fletxes que indiquen les llistes desplegables.
Aquest exemple incompleix el principi 4 de Nielsen sobre consistència i estàndards. És convenient sempre seguir les convencions.
66
Els camps no indiquen el nombre d’espais en caràcters que
estan disponibles en un camps. Incompleix el principi 6 de Nielsen que diu que s’han de fer visibles objectes, accions i opcions per a facilitar-li la tasca a l’usuari.
No hi ha una diferència visual òbvia entre els menús on tan
sols és possible seleccionar una opció i els menús on és possible seleccionar múltiples opcions.
Els camps llargs de columna no se descomponen en grups
de cinc ni utilitzen símbols per a trencar les cadenes d’entrada. Tampoc es descomponen en en blocs les seqüències de números llargs Els dos exemples anteriors incompleixen el principi 7 de NIelsen de reconeixement en lloc de record.
El sistema no fa distinció entre usuari novell i usuari expert. Tampoc no té l’estratègia d’escriptura anticipada ni ingressa
zeros automàticament a l’esquerra per a alinear els valors.
67
Per a les pantalles d’entrada de dades, l’usuari no pot
guardar una pantalla parcialment completa per a reomplir-la més tard. Per a poder fer això s’ha de registrar. Els tres exemples anteriors incompleixen el principi 8 de Nielsen, que parla sobre la flexibilitat del disseny.
Des de la 3ª pestanya de reserva online “Sus opciones”
apareix un botó que permet revisar la selecció.
Des de la finestra que s’obre, es pot modificar el hotel i
afegir el transport, però dintre de la primera opció triada per l’usuari i les dos recomanades pel sistema. Però una vegada arribat a la quarta pestanya, “Resumen de la reserva” ja no es pot canviar el hotel; s’ha de tornar enrere amb el menú superior, encara que si es fa així la pantalla caduca i ja no es pot passar a la següent pantalla des del menú superior, perquè les pestanyes es queden inoperatives (mirar imatge de la següent pàgina) 68
En la quinta pantalla torna a
aparèixer
el
botó
“Revisar
mi
selección”, però en aquest cas ja no deixa modificar ni el hotel, ni la data;
només
l’assegurança especials.
les i
S’ha
les de
dades
de
peticions tornar
a
retrocedir des del menú superior. Els
tres
incompleixen el
punts
anteriors
principi
3 de
Nielsen que parla sobre la llibertat i control per part de l’usuari.
69
BONES PRÀCTIQUES Un formulari usable és aquell que es reompli amb mínim esforç i amb poc temps. És recomanable, doncs que tingui només els cam ps necessaris, així evitem la pèrdua de temps de l’usuari. A més, ha de facilitar la tasca a l’internauta i guiar-lo. Exemples de bones pràctiques en formularis: -
Agrupar de forma lògica els camps i assignar-li títols que indiquin a l’usuari el que necessita per a interaccionar.
-
Si no es poden fer d’una sola pàgina, indicar les pàgines correlatives amb una numeració, de manera que l’usuari pugui conèixer la seva ubicació dintre del formulari.
-
Marcar els camps obligatoris per a evitar missatges d’error. Es pot fer amb un asterisc, remarcant el perímetre del camp a reomplir amb un color diferent, o posant “obligatori” al costat de cada camp.
-
És recomanable avançar també un exemple dintre del camp que serveixi a l’usuari per a saber que ha d’escriure.
-
Si al reomplir el formulari surt una pantalla d’error, aquesta ha de tenir l’error perfectament detallat i donar una solució a l’usuari amb paraules clares i senzilles.
-
L’usuari ha de poder canviar les opcions abans d’arribar a la pantalla final
-
L’acció d’enviar el formulari ha de ser ràpida i ha de generar un missatge que confirmi a l’usuari que el formulari s’ha lliurat correctament. D’aquesta manera s’evita que l’usuari premi vàries vegades el botó “Enviar”.
70
6 – Ajuda i descàrregues EN LÍNIES GENERALS: Existeixen ajudes de memòria per a les ordres, a través de referències ràpides i avisos. La funció d’ajuda es troba en el peu de la pàgina. És una tecla que es diu “Preguntes frecuentes”. És fàcil accedir-hi i tornar des d’aquest sistema d’ajuda. PUNTS MILLORABLES:
El botó “Cómo llegar” que hauria de ser una
ajuda que permeti arribar a l’usuari al part, resulta no ser tal cosa, ja que el porta a la pàgina “Lo que debes saber antes de ir”. Per tant, la pantalla està etiquetada malament i no és una ajuda real per l’usuari. Aquest punt incompleix el principi 4 de Nielsen sobre la consistència i estàndards.
El menú d’ajuda que està situat al peu, s’obre
en la mateixa pantalla, per la qual cosa cal tornar amb el menú superior i no es pot reprendre la tasca que s’estava realitzant, ja que ha caducat. 71
L’enllaç “Folleto” que es troba en la capçalera,
porta l’usuari a una pantalla on pot consultar els fulletons en línia. El problema és que el fulletó no es carrega i es veu un requadre en blanc. Tampoc surt cap avís d’error.
Molts
dels
fulletons
informatius
per
a
descarregar o el vídeos estan en llengües estrangeres, com per exemple, el programa de Walt Disney Studios Park, que està en francès; o el vídeo publicitari que es troba en “Disney Village>Últimas novedades” que està en anglès. Aquests exemples incompleixen el principi 10 de Nielsen sobre ajuda i documentació. La ajuda ha de ser fàcil de localitzar, ha d’aclarir els dubtes més comuns dels usuaris i, naturalment, ha d’estar en el seu idioma.
72
BIBLIOGRAFIA CALVO-FERNÁNDEZ A. ORTEGA SANTAMARÍA S. VALLS SAEZ A. ZAPATA LLUCH M. (2011) Avaluació de la usabilitat. Barcelona: UOC SOCIETY FOR TECHNICAL COMMUNICATION (2013). Usability Techniques [en línia] www.stcsig.org/usability/topics/articles/hechecklist.html [Novembre/2013] MAESTROS DEL WEB (2013). Usabilidad al diseñar formularios de contacto [en línia] http://www.maestrosdelweb.com/editorial/usabilidad-al-disenar-formularios-de-contacto/ [Novembre/2013] WEB TALLER.COM (2013). Formularios usables i accessibles [en línia] http://www.webtaller.com/maletin/articulos/formularios-usablesaccesibles.php [Novembre/2013]
PAQUITA RIBAS TUR, 2013 Pràctica 2, USABILITAT, UOC
Llicència: Creative Commons: Reconeixement – No comercial – Sense obra derivada http://creativecommons.org/licenses/by-nc-nd/3.0/es/ 73