Aquest document fa una concreció dels principis bàsics necessaris per a que les aplicacions interactives, i en concret la www, siguin el més clares, intuïtives i transparents possible per a qualsevol usuari. El fet que aquests principis no s'allunyin molt del "sentit comú" no treu que siguin, en l'actualitat, freqüentment ignorats i que en molts casos el criteri de disseny estètic precedeixi l'ergonòmic.
De totes les innovacions que ofereix el llenguatge interactiu en relació als sistemes "passius", el que afecta més a l'ergonomia és la capacitat de lectura o "navegació" no lineal. Sense entrar en un anàlisi o judici de valor de les repercussions que això comporta, és clar que les seves principals virtuts estan relacionades amb la llibertat de decisió i l'estalvi de temps. Una adequada ergonomia estructural ha d'aconseguir que l'explotació de les grans possibilitats d'aquest nou llenguatge no sigui utilitzat de forma contraproduent per acabar obtenint l'efecte contrari: una desorientació, i la consegüent pèrdua de temps.
Doncs sense perdre més temps, repassem sistematitzats aquells aspectes que permeten la millor ergonomia estructural.
1. Transparència
La navegació ha de ser transparent. Dit d'un altra manera: han de passar desapercebudes la recerca d'opcions i la sol·licitud de clics de ratolí. Per navegar no hem de necessitar cap llibre d'instruccions o informació addicional. No hauríem de percebre l'esforç de la navegació que estorba la focalització en els continguts.
1.1 Les zones sensibles han de ser visibles a la primera
Estem cansats de moure el ratolí fins al punt de tenir torticoli al canell. Tants milers de jocs que hi ha en el món i des de fa un temps, a Internet, no parem de jugar sempre al mateix: moure el ratolí per tota la pantalla buscant en quin lloc passarà alguna cosa si fem clic a sobre. El disseny de les zones sensibles, sigui quin sigui, ha d'informar de forma inequívoca i a primera vista que ho són. I d'altra banda, les que no ho són, no semblar-ho.
A la pàgina d'exemple, no es pot endevinar, sense passar el ratolí per sobre, quines zones són sensibles i quines no. Ho és la pestanya "CINE", no ho és "Actualidad" ni el mateix "Cine" a la segona columna, encara que si és sensible el "+" inferior esquerra.
Els recursos clàssics per destacar zones sensibles en la curta història de les aplicacions interactives han estat el baix relleu, el subratllat o els colors vius. Sense dubte el disseny pot explorar infinites solucions, però aquestes ja han demostrat la seva eficiència.
1.2 Per a interacció no s'ha d'exigir una habilitat excessiva
Una aplicació interactiva no ha de ser un joc de punteria, (a no ser que sigui aquest el joc); la preocupació per encertar és un estorb per a la navegació. En aquest sentit cal:
a) Delimitar clarament les zones sensibles.
b) Vigilar que les zones sensibles no siguin minúscules.
c) El canvi d'aspecte de la zona sensible al pas del ratolí ("roll-over"), a més del canvi de forma del cursor del propi ratolí, és útil per confirmar els límits de la zona.
En l'exemple següent cal fer punteria per estar convençut d'encertar l'opció desitjada. No hi ha confirmació de zona sensible, el que deixa la inquietud latent d'haver encertat fins que veiem el resultat del clic.
En l'exemple següent la zona sensible no està delimitada a priori, de forma que és de poca utilitat que la zona s'estengui cap a la dreta com ho fa.
En l'exemple següent, hi ha una zona associada a cada opció del menú clarament delimitada, però no obstant, no és utilitzada com zona sensible en tota la seva extensió i cal encertar el text de l'opció. El menú de la dreta compleix tots els requisits, encara que li farem alguna altra crítica a l'apartat següent.
Dos exemples més que demanen punteria, en els quals la resposta al pas del ratolí ajudarien a confirmar la nostra opció.
1.3 La resposta de les zones sensibles al pas del ratolí (roll-over) no ha de donar ensurts
Quan el ratolí passa per sobre d'una zona sensible, els navegadors del www ho indiquen canviant la forma del cursor a una mà que assenyala. Això confirma que la zona és sensible i que previsiblement succeirà l'acció desitjada al fer clic. Moltes aplicacions han optat per reforçar aquest comportament i modificar en aquest moment la zona sensible d'alguna manera, efecte, color, tipus de lletra o subratllat, ja sigui un botó, icona o enllaç textual, tot això amb el mateix objectiu: confirmar que aquell és un enllaç actiu.
En el punt anterior s'ha afirmat que aquest és un comportament útil per confirmar que estem sobre l'opció desitjada, però per un altre costat això també pot ser entorpidor. Referint-nos al punt 1.1, quan es té la intenció de fer clic en un enllaç, un ja hauria d'estar absolutament segur de que ho és. Tot canvi fort obliga inevitablement als mecanismes de percepció humans a la relectura instantània del text de l'enllaç. Si l'efecte "confirmació" és massa espectacular, l'únic que s'aconsegueix és entorpir el mecanisme cerebral que ja està saborejant les possibilitats que se li poden obrir darrera la porta de l'enllaç i l'últim que l'importa és veure com un botó es transforma en mil colors.
En definitiva, en el pas del ratolí sobre un botó, enllaç textual o icona actius, aquests no haurien de canviar en més d'un 20% la seva lluminositat, forma o mida. Descartem per exemple l'efecte "vídeo invers", lletres clares sobre fons fosc o a la inversa, que amb el pas del ratolí inverteixen la seva relació de lluminositat. És el cas de l'exemple:
També pot ser excessiu subratllar el text com a confirmació d'enllaç. El subratllat s'ha utilitzat històricament (en la breu història del www) per indicar un enllaç. Això no vol dir que hagi de ser un bon element de confirmació i no representa cap avantatge ja sigui per a l'usuari experimentat o novell del www.
Un bon exemple de discreció en la resposta d'una zona activa al pas del ratolí és el següent menú o els botons d'una barra d'eines:
|
|
1.4 No ocultar informació
És de sentit comú que si es desitja una navegació transparent, el darrer que cal fer és amagar informació, almenys tota aquella que s'ha previst posar a la disponibilitat de l'usuari. Obligar a l'usuari a realitzar un acció per mostrar informació és una forma d'ocultar-la a primera vista, i si la informació es refereix a més a la pròpia navegació aquesta es veu clarament deficitada.
En l'exemple següent només s'indica l'opció actual. Si volem anar a un altre lloc, cal moure el ratolí per descobrir les altres opcions possibles.
 |
 |
 |
Per descomptat és lícit entretenir l'usuari, però en tot cas cal ser-ne conscient si és realment el que es desitjava o és un efecte involuntari per un excessiu virtuosisme en el disseny.
Les icones gràfiques i l'ús de codis de colors està demostrat que ajuden a la visualització ràpida i a la retentiva de possibles opcions i camins en la navegació. El perill en aquest cas és l'ús de dissenys críptics que donen com a resultat una ocultació involuntària d'informació. Vegem l'exemple del menú següent: pocs usuaris sabran dir a priori la diferència entre la icona 1 i la 3, i entre la 5 i la 6.
2.gif){kind=small}
D'altra banda, per informar d'una funcionalitat també s'ha demostrat que el text és gairebé insuperable. La solució és complementar la capacitat informativa del text amb la capacitat retentiva de la imatge, tal com es veu en els dos exemples següents.
.gif)
.gif)
Insistim en que el text és guanyador per deixar clara la acció interactiva. Hem ordenat aquests cercadors per ordre de menys a més claredat en la acció:
Com hem vist, la precisió de les icones i en conseqüència, la divisió en opcions inconfusibles les unes amb les altres és un element bàsic per a la navegació sense dubtes. El cas de les banderes per indicar idiomes és un cas particular d'això, però el destaquem per les seves connotacions sociològiques. Qualsevol lingüista pot afirmar sense cap dubte la imprecisió d'usar banderes de països o estats diferents com a referents a idiomes. En aquest cas el més precís és evitar aquesta associació equívoca. El parlament europeu, sensible a la diversitat lingüística deixa clara la seva postura emprant un simple codi neutre de colors.
(Imatge presa de www.europarl.eu.int)
Com a darrer punt parem atenció als indicadors que s'utilitzen per navegar interactivament en un document distribuït en més d'una "pàgina". Es reitera el que s'ha dit anteriorment: el text mai està de menys i ocultar la informació sempre està de més. Vegem els exemples, per ordre de claredat, de menys a més.
1.5 No canviar coses de lloc
Tot el que es refereix a la navegació hauria d'estar sempre en el mateix lloc. Si no es respecta, en alguns casos es nota de seguida: toca perseguir amb el ratolí la opció desitjada. En d'altres però, pot no ser evident.
El següent exemple és del programa Microsoft Word. Les files primera i segona es commuten entre elles segons la pestanya activa. Això porta a la desorientació quan s'està buscant una opció entre totes elles, cosa que ha fet perdre milers de minuts als usuaris d'aquest programa arreu el món.
Quina podria ser la solució? a www.amazon.com ho han resolt tal com es mostra a continuació, menys inconsistent amb la realitat física de la analogia amb les fitxes, però definitivament més clar i transparent per a la navegació:
Un altre cas és eliminar d'una llista d'opcions l'opció actual, amb el resultat de que les opcions restants canvien de lloc i que per seguir navegant calgui rellegir-la. Això es mostra en el següent exemple.
2. Orientació
2.1 Evitar que l'usuari perdi l'orientació
Perdre's en la navegació dins d'una aplicació interactiva que consta de diverses pàgines o vistes entrellaçades es deu usualment a dues causes: no hi ha informació que indiqui en quin lloc estem i no hi ha percepció de l'estructura.
La bona orientació ha de permetre:
-Saber on estic a cada moment.
-Saber tornar a un lloc on he estat anteriorment.
-Conèixer l'existència de llocs del meu interès i poder arribar-hi sense haver-hi estat anteriorment.
-Poder estar segur de que ho he vist tot o de les coses que voluntàriament he deixat de veure.
Per aconseguir-ho cal treballar en dos sentits. El primer és reflexionar àmpliament sobre l'estructura de la aplicació: els seus nivells, jerarquies i enllaços. El cas de Yahoo és significatiu ja que tenen un equip de persones dedicat exclusivament a considerar constantment la millor estructura jeràrquica per agrupar tot el coneixement dispers per Internet de la forma més coherent i intuïtiva possible. En segon lloc hi ha indubtablement la informació de cada pàgina. Cal titular, batejar, fer única cada pàgina o vista de l'aplicació de forma que puguem tornar a ella. A la vegada expressar la pertinença del nivell jeràrquic o ubicació que la situï unívocament dins el mapa de la aplicació.
En el següent exemple hi ha una total impercepció de l'estructura de l'aplicació en existir tres "menús", un superior, un lateral, i un altre inferior-central, sense establir de cap manera quina és la seva interrelació. D'altra banda les fletxes de la cantonada inferior dreta se suposa que es refereixen a un "pas de pàgines" però no sabem si es correspon també amb les opcions del menú central.
En el següent exemple s'informa de tots els subnivells superiors, equivalent a la indicació de capítols i subcapítols d'un llibre, podent anar a qualssevol d'aquests nivells de forma directa. És una de les millors solucions. N'hi ha d'altres com els menús desplegables jeràrquicament que ja han demostrat la seva eficiència en la història del software "de finestres".
En un document de més d'una pàgina, cada pàgina pot estar identificada, si no amb un títol, amb un número de pàgina que en qualsevol cas també és identificatiu. Si anem passant pàgines com en el següent exemple, amb l'enllaç "Next", no sabem ni quantes n'hi ha, ni podem tornar a la que ens havia interessat de forma ràpida i precisa. En el segon exemple això esta totalment resolt: sabem exactament la nostra situació dins d'un document múltiple, així com el seu tamany total.
En el www, més que enlloc, no està de menys incloure una pàgina amb el mapa de la web, que fa les funcions d'índex més complet i fiable de tots els continguts, a més de plasmar gràficament l'estructura de la web.
2.2 No repetir camins
Un altre perill per a l'orientació és repetir camins. La interrelació ha de potenciar precisament la facilitat d'esquematitzar grans temes gràcies a les seves interrelacions més simples.
Ens fixem de nou en l'exemple mostrat anteriorment per remarcar ara com és de innecessari repetir el menú central a la part inferior, cosa que només afegeix confusió i pèrdua de temps. Hi ha a més un altre detall en aquesta pàgina: al pas del ratolí per sobre els menús apareix un ròtul groc d'ajuda amb exactament el mateix text que el menú. Això també es repetir informació innecessàriament. No és tan greu com repetir camins però és igualment un factor d'entorpiment i desconcentració en la navegació.
Heus aquí un altre exemple de duplicitat amb l'agravant de desviar l'atenció de la navegació en punts divergents.
3. Consistència
L'estructura d'un sistema interactiu ha de ser consistent i conseqüent amb els principis que ell mateix estableix, ja sigui de navegació o de disseny. Si s'estableixen unes normes del joc, no s'han de trair, si més no, dins el mateix lloc Internet o aplicació. En l'exemple següent es va mostrant com en una mateixa pàgina es produeixen fins a 8 comportaments diferents al pas del ratolí per les zones o punts sensibles:
1. En el menú superior la zona sensible no està delimitada i no hi ha resposta al pas del ratolí.
2. En el menú lateral, hi ha resposta al pas del ratolí: el text canvia de color:
3. En el segon menú lateral començant per l'esquerra torna a no haver-hi resposta. És com la situació 1 però la zona sensible s'exten en tota la longitud horitzontal (en l'opció 2 no ho fa):
4. En l'apartat "noticias", la zona sensible és la doble fletxa. Ara el text no ho és:
5. En l'apartat "Especial", el text en color sí que és sensible. No hi ha canvi de color ni resposta de cap tipus:
6. Més avall, a la mateixa pàgina, els textos dels titulars de la segona columna sí que són sensibles i hi ha resposta (canvi de color). Seria el mateix cas que el 2, però entra en contradicció amb el mode 3 segons el qual els titulars no serien sensibles:
7. Al capdavall de la pàgina, la zona sensible està indicada amb un subratllat i canvia de color:
8. La zona sensible torna a no estar subratllada, però respon al pas del ratolí amb subratllat i canvi de color, color diferent al cas anterior:
En el www, la consistència es torna nebulosa si tenim en compte que els salts d'una direcció o "site" Internet a una altra es fa de forma totalment entrellaçada. Això a més de no ser excusa per tenir un web inconsistent, obliga a estar atents a les tendències de l'ergonomia multimèdia i, perquè no, imitar els encerts en relació a la navegació en tota la xarxa.
4. Consideracions finals
A l'estratègia visual i de disseny per aconseguir tots els objectius expressats en aquest text li segueix un llarg recorregut: estudi i eficiència de colors, zones de la pantalla que exerceixen més persuasió visual, densitat imatge-text, però en qualsevol cas els objectius a aconseguir per a la bona comunicació d'una aplicació interactiva es resumeixen en Transparència, Orientació i Consistència. No per casualitat s'ha fet el joc que les seves inicials coincideixin amb TOC, inicials que en anglès es refereixen usualment a "Table of Contents", taula de continguts o índex, expressió d'allà on podem recórrer per no anar mai perduts.
En relació a la navegació s'han de considerar dos objectius més que no s'han contemplat en aquest article: Persuasió i Diversió. El primer és sens dubte de gran importància en l'economia de mercat i el segon és un objectiu molt lícit si és desitjat. Més enllà de tots els estudis vigents de disseny interactiu centrats en aquests dos objectius, cal remarcar que subjacen de la mateixa manera els objectius de Transparència, Orientació i Consistència, i no oblidar-los, ja sigui complint-los o contradient-los, ajudarà en qualsevol cas a l'objectiu del tipus d'interactivitat desitjada.
A continuació es mostra un exemple d'ocultació d'informació en la navegació (cal passar per sobre dels rectangles per veure la opció), i dificultat en encertar l'opció (els rectangles es mouen), impediments que sens dubte poden ser desitjats amb l'objectiu de la seducció i en definitiva la persuasió per promoure un producte.
En Resum, a un sistema interactiu se li demana que sigui honest, noble, que no amagui res, que inspiri confiança i que faci oblidar que ens veiem obligats a fer clic de tant en tant. A partir d'aquí, si vol, que ens sorprengui.
És més, la millor navegació seria com el millor àrbitre de futbol: que deixi jugar, que sempre xiuli amb el mateix criteri, que aconsegueixi que el partit no se li'n vagi de les mans, i que al final ningú parli d'ell.
© Bernat Romaní Cornet. Octubre 2002
5. Més informació
www.ac4d.org
American Center for Design
www.bcs-hci.org.uk
British HCI Group
home.earthlink.net/~cesarmartin/think
www.ida.liu.se/labs/aslab/groups/um/hci
ASLAB
www.interface-analysis.com/ergoworld/hci.htm
Ergoworld
www.lap.umd.edu/POMSFolder/pomsHome.html
The Psychology of Menu Selection: Designing Cognitive Control at the Human/Computer
Interface
www.techreview.com/articles/may00/dertouzos.htm
"Speech
and Vision" Michael Dertouzos, director of MIT’s Laboratory for Computer
Science
www.upassoc.org
www-3.ibm.com/ibm/easy/eou_ext.nsf/publish/558
IBM
