Introducció a la usabilitat web

La usabilitat, segons el Termcat, és la qualitat d’una pàgina web o d’un programa informàtic de ser fàcil d’usar i de tenir en compte aspectes com ara la llegibilitat dels textos, la rapidesa de la baixada d’informació, la manejabilitat i la capacitat de satisfer les necessitats de l’usuari.

A l’hora de navegar per Internet, les nostres expectatives solen tenir a veure amb el fet de trobar la informació de manera senzilla i accedir a pàgines web amb una interfície agradable i que permeti una navegació àgil i eficaç. De vegades hi ha pàgines que tenen defectes de disseny o de funcionament que poden suposar barreres per a tothom o per a alguns usuaris, i que fins i tot poden fer que alguns ja no tornin a visitar la pàgina mai més.

Algunes d’aquestes barreres poden ser:

• Problemes d’accessibilitat
• Problemes de lentitud de càrrega de la pàgina
• Problemes de visualització en dispositius mòbils. Per exemple, un element flotant que ocupa tota la pantalla del mòbil i que no es pot tancar o un element tan petit que no permeti interactuar amb els dits.

Cal fer desaparèixer aquestes barreres i, per fer-ho, és important fer un seguiment de la usabilitat web, tant a través de tests d’usuari manuals com d’eines de seguiment automàtiques, a fi de detectar possibles anomalies que n’afectin la usabilitat.

Un web és “amigable” quan la seva interfície resulta comprensible i fàcil d’utilitzar. Dit així, pot semblar fàcil, però perquè un web resulti amigable (user-friendly) s’ha de tenir cura de tots els elements que formen part de l’experiència d’usuari:

• Disseny web. Cal utilitzar tipografies llegibles, colors adequats, tractament fotogràfic, disposició dels elements…
• Continguts web. Han de ser clars, directes, senzills i adequats als objectius del web i al tipus d’usuari a qui va dirigida la pàgina. Els continguts no són només el text, sinó també imatges, animacions, àudios i vídeos.
• Navegació. La interacció més bàsica que fa l’usuari al web ha de ser intuïtiva, transparent i consistent. Totes les pàgines d’un lloc web han de mostrar un menú fàcilment accessible que permeti a l’usuari moure’s per totes les seves pàgines.

• Disseny de la interfície web. En especial, és important tenir en compte l’aspecte de la pàgina principal i el de de les pàgines d’aterratge (landing pages), ja que és la primera impressió que l’usuari té del web i el primer pas per captar la seva atenció. A més, totes les pàgines del lloc han de tenir un disseny coherent. El disseny ha de tenir en compte els objectius del web i el tipus d’usuari.
• Disseny de la interacció. Que la pàgina sigui interactiva i que els elements que ofereix permetin als usuaris comunicar-se amb la pàgina web és un element fonamental per a l’èxit del web i per millorar l’experiència d’usuari.

La interfície d’un lloc web és la imatge d’allò que representa i, per tant, ha d’oferir uns mínims de qualitat per fer que sigui amigable i d’utilitat per a l’usuari. A més, cal que s’actualitzi en el temps, tant en disseny com en continguts, per no donar una imatge d’obsolescència. Una part important del treball d’usabilitat recau sobre el dissenyador web. Alguns cops només s’ocupa pròpiament del disseny gràfic, però en funció del seu perfil pot ocupar-se també del disseny de la interacció i de l’experiència d’usuari.

Per evitar els problemes d’usabilitat és important que el treball sobre la usabilitat web comenci en el moment de definir el web. Cal conèixer alguns punts clau, fonamentals per prendre decisions tant de disseny com d’arquitectura dels continguts, navegació i llenguatge. Per exemple:

• Quins són els objectius del web?
• Quin tipus d’usuari el farà servir?
• Quines tasques haurà de completar l’usuari?
• Quines dificultats o barreres pot trobar-hi?
• Com es pot presentar la informació de manera atractiva i accessible?

Prendre en consideració tots aquests aspectes en el disseny de la interfície farà que el web sigui útil, agradable i fàcil d’utilitzar. En definitiva, usable. Però aquests punts no només s’han de tenir en compte durant la fase de disseny, sinó també durant el desenvolupament i el seu posterior manteniment.

Qualsevol lloc web es dirigeix a uns determinats perfils d’usuari i té un o diversos objectius. Els primers anys del WWW les pàgines web se centraven únicament a aconseguir visites, però avui dia els responsables de pàgines web tenen cada cop més clara la importància del web en la seva estratègia global. I en molts webs és essencial, dins d’aquesta estratègia, saber convertir les visites en beneficis econòmics. El disseny i, per tant, l’èxit del lloc està estretament lligat a la consecució d’uns objectius i saber identificar-los és molt important.

Podem distingir diversos tipus de llocs web segons els seus objectius:

• Informatius o de continguts. El seu objectiu és oferir i difondre informació sobre un o diversos temes. Poden tenir una finalitat econòmica (guanyar diners amb la publicitat) o simplement divulgativa. La interfície de navegació i la llegibilitat són molt importants en el disseny d’aquest tipus de llocs web, ja que la facilitat d’accés i la satisfacció a l’hora de trobar la informació millora l’experiència i el retorn dels usuaris. Un exemple pot ser qualsevol lloc web d’un diari o revista, però també un web divulgatiu d’un tema concret.
• Corporatius i institucionals. Tenen com a objectiu oferir informació específica sobre una organització (ja sigui una empresa privada o una administració pública). Per exemple, el lloc web de la Diputació de Barcelona (vegeu figura) és de tipus institucional. Els menús clars i senzills, així com qualsevol element que faciliti la tasca de trobar informació són molt importants en aquest tipus de webs.

• Orientats al servei. En el cas de les empreses, poden ser webs amb un objectiu promocional destinats a fer publicitat sobre determinats productes. No disposen de botiga en línia incorporada, ja que es pretén donar informació i promoure determinats productes dels mateixos creadors del lloc web per incentivar la compra als canals de distribució habituals. Un aspecte important en aquest tipus de web és la necessitat de minimitzar el nombre de clics perquè l’usuari arribi al seu objectiu. Un exemple pot ser una consultoria com Indra.
• De creació d’una marca. L’objectiu de creació d’una marca es pot confondre amb l’objectiu dels webs orientats al servei. Els de creació d’una marca són webs que cerquen promocionar un determinat producte o una determinada marca. La utilització d’elements multimèdia cridaners, l’ús de poc text i la localització de la informació de manera fàcil són característiques que poden millorar la usabilitat d’aquests llocs web. Podeu veure’n un exemple a figura

• Personals. Els responsables d’aquests llocs web volen expressar i compartir les seves experiències i inquietuds. Són vies de promoció personal on l’usuari pot penjar treballs, estudis, creacions, reflexions pròpies o qualsevol altre tipus de contingut amb l’objectiu d’arribar al major nombre de persones possible. Avui dia qualsevol jugador professional de qualsevol esport amb un mínim de ressò té un lloc web personal, però també en tenen els investigadors o divulgadors.
• Artístics. Són webs semblants a les que tenen com a objectiu la promoció personal, però en aquest cas el disseny del web també forma part de l’expressió artística de cada creador. Poden ser webs artístics personals o de qualsevol grup o associació que es dediqui a un determinat àmbit cultural. Un exemple pot ser el web oficial de l'artista Banksy.
• D’entreteniment i oci. Ofereixen tot tipus de materials multimèdia als seus usuaris. La finalitat sol ser obtenir ingressos a través de la publicitat i els dissenys solen trencar amb molts dels principis establerts. Pel que fa a la usabilitat, la satisfacció i l’atractiu per a l’usuari són molt importants. Un exemple seria el web de Netflix (vegeu figura).

• Acadèmics. Cal diferenciar els webs amb un objectiu acadèmic dels que ofereixen un campus virtual. Centres d’estudis, universitats, grups de treball o d’investigació o qualsevol altre tipus d’associació que crea un web, tenen com a objectiu la divulgació científica i arribar al major nombre de persones possible, oferint-los la possibilitat d’accedir als seus estudis. La informació ha de ser fàcilment accessible i localitzable i s’ha d’oferir una navegació senzilla per tal que usuaris i alumnes puguin recordar fàcilment com arribar als llocs clau. Un exemple és el web de la Universitat de Vic.
• Comercials, transaccionals o de comerç electrònic (e-commerce). Són llocs web que permeten les transaccions econòmiques entre usuari final i empresa, o bé entre empreses. Un segon objectiu d’aquests tipus de lloc web és oferir informacions i referències d’altres compradors sobre els productes que venen. La facilitat per dur a terme les compres en el menor nombre de passos és un aspecte a tenir en compte (vegeu figura).

• Cercadors. Aquests llocs web ajuden a la cerca d’informació a Internet. Poden ser cercadors d’una determinada tipologia d’informació (acadèmica, de notícies o altres) o genèrics. Un clar exemple és Google.
• Col·laboratius, fòrums o xarxes socials. Són webs on la responsabilitat de penjar continguts no recau només en els propietaris, sinó que estan oberts al fet que tots els usuaris puguin penjar les seves opinions o inquietuds o, directament, part dels seus continguts. La Viquipèdia és un exemple de web col·laboratiu (vegeu figura. En aquest cas és important que la interfície sigui intuïtiva per tal que els usuaris que vulguin modificar o afegir continguts facin servir les eines que tenen disponibles sense necessitat de tenir grans coneixements informàtics.

Font: https://ca.wikipedia.org/wiki/Portada

Òbviament, aquests tipus de lloc web no sempre es troben en estat pur. Per exemple, moltes empreses tenen webs orientats a la venda d’un producte però, alhora, orientats a oferir serveis en el seu sector. Els webs de les universitats, a més de tenir una finalitat acadèmica, cada cop s’orienten més a la venda de cursos i màsters, alhora que serveixen per crear una imatge de marca que els permeti diferenciar-se d’altres universitats.

Saber atraure els usuaris adequats i conduir-los fins a la conversió d’uns determinats objectius és la feina de l’expert en màrqueting digital.

L’experiència de l’usuari un cop al web sol ser un treball conjunt entre l’expert en màrqueting, que defineix els objectius, l’expert en usabilitat, el responsable dels continguts i el dissenyador.

La usabilitat està vinculada a la senzillesa, la facilitat, la comoditat i la practicitat de les interfícies web. Totes aquestes característiques semblen força subjectives, i és per això que entren en joc les dimensions de la usabilitat, una sèrie d’atributs que ajuden a avaluar de manera més objectiva el grau d’usabilitat d’una aplicació o d’una pàgina web. Aquestes dimensions són: eficiència, eficàcia, satisfacció, atractiu, facilitat d’aprenentatge i tolerància de l’error.

Segons diversos autors, hi ha diferències en les dimensions de la usabilitat, ja que alguns només defineixen la usabilitat en tres dimensions: eficiència, eficàcia i satisfacció. El que sí que és clar és que algunes de les dimensions són més objectivables, ja que es poden observar i mesurar (eficàcia, eficiència, facilitat d’aprenentatge i tolerància de l’error), mentre que la satisfacció és una dimensió subjectiva i depèn en part de les dimensions anteriors i en part d’altres factors.

Vegeu a taula una descripció de cadascuna de les dimensions de la usabilitat:

Hi ha molts mites sobre la usabilitat i sobre l’experiència d’usuari. A més, és una disciplina en què la subjectivitat dels experts en usabilitat pot arribar a condicionar massa. Per tant, és important fer una recerca prèvia a l’hora d’abordar cada projecte, amb un enfocament doble: fent servir els principis heurístics com a base teórica i les proves d’usuari com a base pràctica. Aquests són alguns mites sobre la usabilitat web:

• No cal que hi hagi el contingut per dissenyar un web.
• La pàgina principal és la pàgina més important.
• Les icones milloren la usabilitat.
• Els usuaris no fan scroll.
• La gent llegeix al web.
• Si ets un expert, no cal que facis tests d’usuari.
• El nombre de tries s’hauria de limitar sempre a 7.

Una altra qüestió que cal tenir en compte és que el disseny web està molt fonamentat en convencions, i que aquestes convencions evolucionen amb el temps. No només això, també les tendències i les modes afecten la percepció d’un disseny web. Tot i que els principis d’usabilitat són universals, la concreció en el disseny gràfic i el disseny de la interacció té components culturals i evoluciona amb el temps.

Per orientar els responsables del disseny i l’organització dels continguts web, des dels orígens de la usabilitat (cap als anys 90 del segle XX) s’han proposat una sèrie de teories i regles nascudes de l’observació i dels estudis internacionals. Algunes d’aquestes teories, les més conegudes, encara s’utilitzen.

Veurem les lleis de la usabilitat d’Steve Krug, les heurístiques de Jakob Nielsen i els principis de disseny d’interacció de Bruce Tognazzini.

Les aportacions d’Steve Krug a la usabilitat poden resumir-se en les seves tres lleis:

1. No em feu pensar.
2. No importa quants clics hagi de fer, sempre que cada clic sigui una elecció inconscient i inequívoca.
3. Desfeu-vos de la meitat de les paraules de cada pàgina; a continuació, desfeu-vos de la meitat de les que queden.

I una sèrie de consells:

1. L’usuari no llegeix, sinó que salta pel contingut.
2. Creeu jerarquies visuals.
3. Feu servir mètodes convencionals.
4. Feu servir signes visibles de navegació.
5. Creeu àrees ben definides.
6. Feu obvi allò que és “clicable”.
7. Minimitzeu el soroll (elements distractors).
8. Escriviu només allò just i necessari.

L’any 1995 Jakob Nielsen va formular els deu principis generals de la usabilitat, coneguts com les heurístiques per al disseny d’interfícies d’usuari de Jakob Nielsen. S’anomenen “heurístiques” perquè són regles generals i no pautes d’usabilitat específiques.

Vegeu l’explicació en detall de les 10 heurístiques i, per a cadascuna, trobareu un vídeo elaborat per Nielsen and Norman Group, on es donen exemples del món real que permeten entendre la importància de cada heurística.

1. Visibilitat de l’estat del sistema. El disseny sempre ha de mantenir els usuaris informats sobre què està passant. Quan els usuaris coneixen l’estat actual del sistema, aprenen el resultat de les seves interaccions anteriors i determinen els passos següents.

• Comuniqueu clarament a l’usuari l’estat del sistema; no s’hauria de dur a terme cap acció amb conseqüències per a l’usuari sense informar-lo.
• Presenteu comentaris a l’usuari el més ràpidament possible (idealment, de manera immediata).

2. Coincidència entre el sistema i el món real. El disseny ha de parlar l’idioma dels usuaris.

• Utilitzeu paraules, frases i conceptes familiars per a l’usuari en lloc d’argot intern. Els tests amb usuaris reals us ajudaran a descobrir la seva terminologia familiar, així com els seus models mentals al voltant de conceptes importants.
• Seguiu les convencions del món real, fent que la informació aparegui en un ordre natural i lògic. La forma en què heu de dissenyar depèn molt dels vostres usuaris específics. Els termes, els conceptes, les icones i les imatges que semblen perfectament clars per a vosaltres i els vostres col·legues poden ser desconeguts o confusos per als vostres usuaris.
• Quan els controls d’un disseny segueixen les convencions del món real i corresponen als resultats desitjats, és més fàcil per a l’usuari aprendre i recordar el funcionament de la interfície. Això ajuda a construir una experiència que es percep com a intuïtiva.

3. Control i llibertat de l’usuari. Els usuaris solen realitzar accions per error.

• Proporcioneu una “sortida d’emergència” clarament marcada per deixar l’acció no desitjada sense haver de passar per un procés complicat i feixuc. Quan és fàcil per a l’usuari sortir d’un procés o desfer una acció, es fomenta la sensació de llibertat i confiança. Les sortides permeten mantenir el control del sistema i evitar quedar atrapat i sentir-se frustrat.
• Proporcioneu diverses maneres d’arribar al mateix objectiu.

4. Coherència i estàndards. Els usuaris no s’haurien de preguntar si paraules, situacions o accions diferents signifiquen el mateix. Seguiu les convencions de plataformes i indústries. Els usuaris passen la major part del temps utilitzant productes digitals diferents del vostre. Les experiències d’usuari amb aquests altres productes marquen les seves expectatives. No mantenir la coherència pot augmentar la càrrega cognitiva d’obligar-lo a aprendre alguna cosa nova. Així, és important que:

• Seguiu les convencions establertes de la indústria (coherència externa).
• Mantingueu la coherència dins del mateix producte o família de productes (consistència interna).

5. Prevenció d’errors. Els bons missatges d’error són importants, però els millors dissenys impedeixen que es produeixin problemes. Per això és important que reduïu o elimineu les condicions susceptibles d’error i presenteu a l’usuari una opció de confirmació abans de seguir endavant amb certes accions. Hi ha dos tipus d’errors: els descuits (causats per la falta d’atenció) i els errors conscients, basats en un desajustament entre el model mental de l’usuari i el disseny.

• Prioritzeu el vostre esforç: eviteu primer els errors d’alt cost i després les frustracions.
• Eviteu els descuits proporcionant restriccions útils i bons valors predeterminats.
• Eviteu els errors eliminant les càrregues de memòria, donant suport a desfer i advertint l’usuari.

6. Reconeixement en lloc de record. La informació necessària per utilitzar el disseny (etiquetes de camp, elements de menú…) hauria de ser visible o fàcilment recuperable. Els humans tenim records limitats a curt termini, i les interfícies que promouen el reconeixement redueixen la quantitat d’esforç cognitiu que requereixen els usuaris. Per això, minimitzeu la càrrega de memòria de l’usuari fent visibles elements, accions i opcions.

7. Flexibilitat i eficiència d’ús. Les dreceres (ocultes per als usuaris novells) poden accelerar la interacció de l’usuari expert, de manera que el disseny pugui atendre tant usuaris inexperts com usuaris experimentats. Per això:

• Proporcioneu acceleradors, com ara dreceres de teclat i gestos tàctils.
• Proporcioneu personalització adaptant el contingut i la funcionalitat per a usuaris individuals.
• Permeteu la personalització perquè l’usuari pugui fer seleccions sobre com vol que funcioni el producte.

8. Disseny estètic i minimalista. Les interfícies no han de contenir informació que sigui irrellevant o que rarament sigui necessària. Cada unitat d’informació addicional en una interfície competeix amb les unitats d’informació rellevants i disminueix la seva visibilitat relativa. Aquesta heurística no significa que s’hagi d’utilitzar un disseny pla: es tracta d’assegurar-vos que manteniu el contingut i el disseny visual centrats en l’essencial. Així, és recomanable que:

• Mantingueu el contingut i el disseny visual de la interfície d’usuari centrats en l’essencial.
• No deixeu que elements innecessaris distreguin l’usuari de la informació que realment necessita.
• Prioritzeu el contingut i les funcions per donar suport als objectius principals.

9. Recuperació dels errors. Ajudeu els usuaris a reconèixer, diagnosticar i recuperar-se dels errors.

• Els missatges d’error s’han d’expressar en llenguatge senzill i han d’indicar amb precisió el problema i suggerir constructivament una solució.
• Aquests missatges d’error també s’han de presentar amb tractaments visuals que ajudin l’usuaris a reconèixer-los.

10. Ajuda i documentació. És millor si el sistema no necessita cap explicació addicional. Tot i això, pot ser que sigui necessari proporcionar documentació que ajudi a entendre com completar les tasques.

• Proporcioneu contingut d’ajuda i documentació fàcil de cercar i centrada en la tasca de l’usuari.
• Mantingueu el contingut concís i enumereu els passos concrets que cal dur a terme.

A figura podeu veure un resum de les heurístiques de Nielsen:

Els principis de disseny d’interacció de Bruce Tognazzini són uns principis fonamentals per al disseny i la implementació d’interfícies gràfiques eficients.

Actualitzats el 2014 amb alguns de nous, els principis de disseny d’interacció que proposa Tognazzini són:

1. Estètica. El disseny estètic cal deixar-lo en mans dels experts, els dissenyadors gràfics. La moda no ha de triomfar mai sobre la usabilitat i l’usuari ha de posar a prova tant el disseny visual com el disseny de comportament.
2. Anticipació. Mostreu tota la informació i les eines que cregueu que l’usuari pot necessitar.
3. Autonomia. Cal donar via lliure a l’usuari perquè se senti còmode i lliure, però també cal posar-li certes restriccions. Per a això és bàsic mantenir-lo informat de l’estat del sistema. Es tracta de donar-li una llibertat controlada, un entorn on sapiguem totes les variables d’acció que pot executar mentre l’usuari té informació d’on és i què pot fer en cada moment.
4. Color. Cal tenir en compte els daltònics i altres persones amb problemes de visió. El color no pot ser l’única manera de transmetre certa informació. Hi ha pistes secundàries com ara etiquetes, grafismes complementaris, textures, diferents gradacions de gris…
5. Consistència. “La consistència més important és aquella que espera l’usuari” (i per això és important fer proves amb els usuaris). És tan important ser visualment inconsistent amb els objectes que es comporten de forma diferent com ser consistent amb els que es comporten de la mateixa manera. Cal evitar la uniformitat: els objectes que es comporten diferent han de semblar diferents.
6. Valors per defecte. Els valors han de poder ser corregits amb rapidesa (per exemple, les àrees de text han d’aparèixer ja seleccionades perquè l’usuari només hagi d’escriure-hi a sobre per corregir el valor).
7. Eficàcia de l’usuari. S’ha de cercar l’eficàcia de l’usuari abans que la de l’ordinador: com menys hagi de pensar l’humà i com menys se’l faci esperar, millor. S’ha de buscar l’eficàcia de tothom, no només de certs grups. Els missatges d’ajuda concisos i els menús i etiquetes de botons clars contribueixen a l’eficàcia.
8. Interfícies explorables. És important oferir elements visuals estables per facilitar la navegació ràpida, habilitar botons per desfer, mostrar sortides clares per cancel·lar un procés…
9. Llei de Fitt. El temps necessari per arribar a un objectiu està relacionat amb la seva distància i mida. Per aquesta raó, els botons per a funcions grans han de ser importants, i si estan ubicats de manera fixa a les cantonades de la pantalla seran més fàcilment accessibles.
10. Objectes humans. Els objectes humans de la interfície han de ser comprensibles, consistents i estables.
11. Reducció de latència. La latència és la sensació que alguna cosa està trigant a succeir. Es redueix fent servir animacions de càrrega o barres d’estat, alleugerint el sistema, reduint el nombre de clics, fent servir sistemes de càrrega asíncrons amb AJAX.
12. Aprenentatge. Encara que l’ideal seria que l’usuari sabés com utilitzar el sistema des de la primera vegada, això no passa gairebé mai. Cal aconseguir que la interfície sigui fàcil d’utilitzar sense perjudicar la facilitat d’aprenentatge.
13. Ús de metàfores. Les metàfores poden servir per ajudar l’usuari a comprendre els detalls del model de manera conceptual.
14. Protecció del treball de l’usuari. Un exemple d’això pot ser el desament automàtic amb què compten gran part d’eines d’edició en línia, com ara Google Docs.
15. Llegibilitat. Per garantir-la (és, a més, un criteri d’accessibilitat) cal emprar colors de text amb un contrast suficient respecte el fons. Una combinació que no falla mai és el negre sobre blanc. A més, cal acompanyar aquest contrast suficient amb mides de lletra llegibles.
16. Simplicitat. Cal trobar l’equilibri entre la facilitat d’instal·lació i la facilitat d’ús. Cal evitar la “il·lusió de la simplicitat” i no simplificar eliminant elements necessaris. Es pot utilitzar la revelació progressiva per aplanar la corba d’aprenentatge.
17. Desament de l’estat. La informació d’estat de l’usuari s’hauria de poder desar de manera que aquest pugui desconnectar-se i tornar a connectar-se des de qualsevol altre lloc i seguir amb la feina tal com la va deixar.
18. Navegació visible. S’ha d’evitar la navegació invisible, cal que l’usuari sempre sàpiga on és.