INTRODUCCIÓ

L’avaluació heurística s’ha realitzat sobre tota la interfície web del Cercle de Cultura Tradicional i Popular Marboleny. L’avaluació s’ha realitzat de la versió d’escriptori. S’ha volgut realitzar un anàlisi general, ja que al ser la primera avaluació que es fa del lloc, interessa tenir una visió global dels principals problemes d’usabilitat i en una següent fase d’avaluació, es vol observar en detall.

La web ja existeix, així que no s’analitzarà un prototip sinó una interfície web que està en actiu des de fa més de dos anys. Es creu necessària una avaluació heurística perquè es tracta d’una entitat que està al servei de les persones i, per aquest motiu, és vital que compti amb un lloc web que les persones puguin usar fàcilment per a conèixer el projecte i si ho desitgen, apuntar-s’hi.

També s’ha escollit aquesta plataforma perquè hi estic familiaritzat, ja que és la web de l’entitat on treballo i la conec bastant bé. El motiu pel qual l’he escollit és perquè vull millorar la usabilitat de la web. Recentment es va decidir fer un canvi a nivell gràfic del lloc, però si es vol proporcionar una bona experiència d’usuari és essencial que la interfície sigui usable.

METODOLOGIA

L’avaluació heurística del lloc web s’ha realitzat per un sol avaluador. S’han intentat detectar els problemes més greus, ja que són aquests els que ens interessa incidir amb més rapidesa. En pròximes avaluacions s’analitzarà amb més detall per tal de detectar males pràctiques que no siguin tan importants a nivell d’usabilitat.

Per a l’avaluació heurística ens hem basat amb els 10 principis heurístics de Jakob Nielsen. De cada principi, s’ha buscat un bon i mal exemple. Dins dels mals exemples s’indica el grau de severitat d’aquest. Com que interessa fer incís en els problemes greus de la interfície, només s’ha indicat el grau de severitat dels mals exemples. Aquest mals exemples s’analitzaran a través de tres preguntes proposades per Nielsen:

1) La freqüència amb què el problema ocorre, és comú o poc freqüent?
2) L’impacte del problema quan succeeix, és fàcil o difícil de superar per als usuaris?
3) La persistència del problema, el problema es resol la primera vegada que s’usa el lloc web o apareix repetidament?

Per avaluar-ne la gravetat dels problemes d’usabilitat es basar en l’escala de qualificació també de Nielsen:

0 = no és un problema d’usabilitat
1 = problema sense importància: no és necessari solucionar-lo llevat que es disposi de temps en el projecte.
2 = problema d’usabilitat menor: problema de baixa prioritat
3 = problema d’usabilitat greu: problema d’alta prioritat.
4= catàstrofe: imprescindible solucionar-lo.

ELS 10 PRINCIPIS HEURÍSTICS DE JAKOB NIELSEN

1. VISIBILITAT DEL SISTEMA

Bon exemple ✓
En la passarel·la de compra quan s’està fent el procés de pagament, a l’esquerra, apareixen els 3 grans apartats que guien l’usuari durant el procés: Detalls de facturació, Informació adicional i Comproveu el pagament. D’aquesta manera l’usuari sap en tot moment on és, on està i a on pot anar.

Mal exemple ✗
Quan l’usuari es troba en una secció concreta de la web, en el menú, es pot observar com es remarca de color blau l’apartat on es troba. Està ben pensat però està mal executat, ja que si l’usuari es troba dins del subapartat Esbart Marboleny, que es troba dins de l’apartat Cercle, només veurà que en el menú està marcat Cercle. I per veure el subapartat on es troba haurà de desplegar el menú i observar que es troba a dins de la secció en concret.

Freqüència amb el que ocorre el problema: Sovint.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat del problema d’usabilitat (de 0 a 4): 2. Problema d’usabilitat menor.

2. ADEQUACIÓ ENTRE EL SISTEMA I EL MÓN REAL

Bon exemple ✓
L’ús de les icones del carro de la compra i la lupa són molt bons exemples d’aquests principis. Els usuaris tenen interioritzats que el carro de la compra és una secció on es guardaran els productes que han comprat a la web, i per la seva banda, la lupa permet cercar informació arreu de la interfície.

Mal exemple ✗
Un mal exemple el trobaríem a la secció «Botiga» on a sota de cada producte hi ha l’opció «Afegeix a la cistella» (acompanyat d’una icona d’un carro de la compra) i l’opció «Detalls» on al costat té la icona del menú hamburguesa. Tot i les diferents opinions respecte a l’ús de la icona «menú hamburguesa» és un recurs molt il·lustratiu que l’usuari interpreta que si clica a sobre es desplegarà un menú. Però en aquest cas, no té sentit utilitzar aquesta icona perquè en primer lloc, no es desplegarà cap menú (s’obre una pàgina amb informació detallada del producte). I en segon, perquè no és un llenguatge que segueix les convencions del món real.

Freqüència amb el que ocorre el problema: Poc freqüent.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 1. Problema sense importància: no és necessari solucionar-lo llevat que es disposi de temps en el projecte.

3. LLIBERTAT I CONTROL PER PART DE L’USUARI

Bon exemple ✓
Si l’usuari compra un producte de la «Botiga», automàticament s’obre la cistella on apareix una unitat del producte. En aquest apartat, l’usuari pot incrementar el nombre d’unitats del producte, disminuir o fins i tot eliminar el producte de la cistella. També té la opció de seguir comprant i pot afegir altres productes de la botiga.

Mal exemple ✗
Quan l’usuari ha comprat diversos productes de la Botiga, si es troba navegant per alguna altra secció de la web que no sigui la cistella, quan passa el cursor per sobre de la cistella de la compra es desplega un resum dels productes que té guardats a la cistella. El problema és que no hi ha l’opció de treure els productes de la cistella des d’aquest desplegable. L’usuari està obligat a entrar dins de la cistella, i eliminar els productes des d’allà.

Freqüència amb el que ocorre el problema: Poc freqüent.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 3. És un problema d’usabilitat greu.

4. CONSISTÈNCIA I ESTÀNDARDS

Bon exemple ✓
L’ús de la lupa al costat del menú es considera una bona pràctica d’aquest principi. Els usuaris tenen interioritzat que aquesta icona permet cercar informació i a més, si es col·loca al costat del menú facilita la seva identificació i accés. També un bon ús d’aquest principi es pot observar amb la utilització de la «X» per tancar el cercador i tornar al menú original.

Mal exemple ✗
En aquest cas, trobem un mal exemple de consistència i estàndards al menú de la web. Si l’usuari desplega l’apartat «Cercle», la primera secció que apareix és «L’entitat», i és el mateix el Cercle que l’Entitat. Per tant, són diferents paraules que signifiquen el mateix, i això l’usuari no ho ha de saber segons aquest principi, el que pot portar a confusió.

Freqüència amb el que ocorre el problema: Poc freqüent.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 2. És un problema d’usabilitat menor.

5. PREVENCIÓ D’ERRORS

Bon exemple ✓
Quan una persona es vol fer soci/sòcia de l’entitat ha d’emplenar un formulari. En aquest formulari es fa un bon ús del principi de prevenció d’errors, ja que, en tot moment s’informa l’usuari de l’obligatorietat dels camps (amb un asterisc vermell). A més, si l’usuari no fa cas d’aquestes indicacions i intenta passar a la següent pàgina del formulari apareix un text amb un signe d’exclamació a sota del camp requerint informant que «aquesta pregunta és obligatòria».

Mal exemple ✗
En la pàgina del Cercle, on hi ha informació de les diferents seccions de l’Entitat, es mostren un seguit d’imatges que van passant en format carrusel. El problema és que quan es passa amb el cursor s’obre d’una imatge, aquesta li apareix un ombrejat i l’usuari pot entendre que la imatge es pot ampliar. El problema és que si clica no passa absolutament res.

Freqüència amb el que ocorre el problema: Poc freqüent.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 2. Problema d’usabilitat menor.

6. RECONEIXEMENT ABANS QUE RECORDAR

Bon exemple ✓
Perquè l’usuari reconegui un element és recomanable fer-ho a través de l’ús d’imatges. En aquest cas, l’ús de la cistella de la compra com a imatge per il·lustrar la secció on l’usuari va afegint productes que ha comprat és un bon exemple. A més, l’usuari quan afegeix productes a la cistella aquesta automàticament canvia el seu color de negre a blau (el color corporatiu de l’entitat). Això facilita la tasca de l’usuari si entra uns dies més tard i no ha finalitzat la compra, a que reconegui que té algun producte pendent de compra a dins de la cistella.

Mal exemple ✗
Tot i que aquest exemple que s’ha comentat, es considera un bon exemple, s’ha de millorar. La cistella apareix d’un color blau que costa diferenciar del negre (hi ha poc contrast). A més, l’usuari està obligat a passar el cursor per sobre la icona per tal de veure els elements que hi ha dins. I, a sobre, s’obliga l’usuari a entrar dins la cistella per tal de poder editar o finalitzar la compra.

Freqüència amb el que ocorre el problema: Poc freqüent.
Dificultat per superar el problema: Fàcil
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 2. És un problema d’usabilitat menor.

7. FLEXIBILITAT I EFICIÈNCIA EN L’ÚS

Bon exemple ✓
Un bon exemple d’aquest principi és que, en la secció contacte, on apareixen les dades de contacte (telèfon i mail) un usuari expert pot passar el cursor per sobre i observarà que és enllaçable. Si hi clica, en el cas del correu electrònic se li obrirà el gestor de correu electrònic per defecte i podrà escriure un correu automàticament. En el cas del telèfon, també s’obrirà l’aplicació per defecte per realitzar trucades (per exemple FaceTime). És cert que en aquesta pàgina també surt un mapa i l’adreça. Seria interessant aplicar aquesta mateixa «drecera» i quan l’usuari clica a sobre de l’adreça se li obre el Google Maps (I després aquest ja li permet com arribar, etc.).

Mal exemple ✗
Aquest principi es basa que els usuaris experts han de poder interactuar més ràpidament amb la plataforma, sense que els usuaris sense tanta experiència els afecti. Doncs bé, en aquest cas el cercador és un mal exemple d’aquest principi. Els usuaris han de seleccionar la lupa i a continuació escriure el que volen buscar a la web. El problema és que no apareix un desplegable, a mesura que va escrivint, amb els resultats de cerca, millorant així l’eficiència en l’ús del cercador. El que significa que els resultats poden ser molt dispersos i l’usuari ha de perdre temps buscant, que és el que passa en aquest cas.

Freqüència amb el que ocorre el problema: Poc freqüent.
Dificultat per superar el problema: Difícil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 3. Problema d’usabilitat greu.

8. DISSENY ESTÈTIC I MINIMALISTA

Bon exemple ✓
La pàgina d’inici de Marboleny compleix amb l’heurística de disseny estètic i minimalista. Ja que només d’entrar, l’usuari pot observar com la informació està ordenada i permet a l’usuari accedir a la majoria de les seccions de la web, independentment de les seves necessitats (buscar informació de l’entitat, veure els espectacles disponibles de l’Esbart, fer-se soci/sòcia, voluntari/ària, contactar…

Mal exemple ✗
A la secció Notícies no es destaca cap notícia i es dona la mateixa importància a tot el contingut. D’aquesta manera l’usuari no sap quina és la última notícia que s’ha publicat ni quines notícies són més antigues.

Freqüència amb el que ocorre el problema: Poc sovint.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 3. És un problema d’usabilitat greu.

9. AJUDA ELS USUARIS A RECONÈIXER, DIAGNOSTICAR ELS ERRORS, I RECUPERAR-SE’N

Bon exemple ✓
Un bon exemple d’aquest principi l’hem trobat quan l’usuari intenta realitzar el procés de compra. En la part on s’han d’afegir les dades de facturació, l’usuari està obligat a escriure el seu correu electrònic. Doncs bé, si l’usuari no l’escriu correctament (acabat en @gmail.com, @yahoo.es, etc.) no el deixa prosseguir en el procés de compra i l’informa que «si us plau, introduïu correctament els detalls en aquest camp obligatori.».

Mal exemple ✗
Un mal exemple d’aquesta pàgina el trobem, per exemple, a la secció de Transparència/Pressupostos. Si l’usuari desitja veure els pressupostos de l’any anterior, I selecciona a sobre del document, en lloc d’obrir-se el pressupost s’obre una pàgina amb el típic error 404 acompanyat del text «ups, aquesta pàgina no s’ha trobat». L’usuari observa que la pàgina no s’ha trobat, però no sap com ho pot solucionar i si realment aquest error és per culpa seva.

Freqüència amb el que ocorre el problema: Sovint.
Dificultat per superar el problema: Difícil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 2. És un problema d’usabilitat menor.

10. AJUDA I DOCUMENTACIÓ

Bon exemple ✓
No s’ha detectat cap bon exemple d’aquest principi.

Mal exemple ✗
En la web del Cercle de Cultura Tradicional i Popular Marboleny no s’ha detectat el principi d’ajuda i documentació en cap moment. Per tant no es pot aportar un bon o mal exemple. De totes maneres, com a avaluador vull pensar que des de l’entitat s’ha cregut suficient que, en cas que l’usuari necessiti ajuda, en tot moment està present les dades de contacte (tant al menú com al footer) per tal que si es presenta algun problema l’usuari es pugui posar en contacte ràpidament amb el personal de l’entitat. Per tant, aquesta pràctica es catalogarà com un mal exemple perquè tot i que la web es pot utilitzar sense ajuda, és recomanable fer-ho.

Freqüència amb el que ocorre el problema: Sovint.
Dificultat per superar el problema: Fàcil.
El problema es resol la primera vegada que s’usa la web o apareix repetidament: Apareix repetidament.

Gravetat de problema d’usabilitat (de 0 a 4): 1. És un problema sense importància.

LLISTAT PRIORITZAT SEGONS GRAVETAT

A continuació es detallen les troballes més greus i es fa una proposta de solució:

1. LLIBERTAT I CONTROL PER PART DE L’USUARI

Es tracta d’un problema d’usabilitat greu perquè és essencial que l’usuari tingui llibertat per modificar la cistella de la compra independentment de la secció de la web que es trobi. Ja que d’aquesta manera, s’obliga a l’usuari a sortir d’una pàgina en concret per entrar a dins la cistella per modificar-ne el contingut.

Proposta de millora
Afegir els corresponents botons per modificar la quantitat de productes de la cistella des del desplegable i a més, una creu per permetre la possibilitat d’eliminar productes.

2. FLEXIBILITAT I EFICIÈNCIA EN L’ÚS

Trobar el contingut en una interfície web és essencial. I en aquesta és una tasca realment difícil, ja que no només no es guia a l’usuari per a buscar un concepte específic, sinó que a sobre se li ofereixen desenes de resultats que no tenen res a veure amb la cerca inicial.

Proposta de millora
Facilitar la cerca als usuaris mitjançant menús desplegables a mida que va escrivint el concepte que vol buscar.

3. DISSENY ESTÈTIC I MINIMALISTA

La secció notícies oblida completament aquest principi i és greu. Els usuaris que es volen informar de l’actualitat de l’Entitat accedeixen a la secció però no saben quina és la última notícia que s’ha publicat. No s’ordena la informació i tot té la mateixa importància.

Proposta de millora
Crear un slide a la part superior on aparegui la última notícia destacada i també seria interessant ordenar les altres notícies per ordre de publicació.

4. VISIBILITAT DEL SISTEMA

És un problema d’usabilitat menor perquè es tracta d’un menú amb pocs nivells, és a dir, l’usuari com a molt s’endinsarà en 1 subapartat (Per exemple: Cercle/Esbart Marboleny, i dins de l’Esbart Marboleny no es dirigeix a l’usuari a una altra pàgina en un nivell inferior. Tot i que seria interessant solucionar-ho, ja que a la llarga es pot reestructurar el contingut de la interfície i pot esdevenir un problema d’usabilitat major.

Proposta de millora
Per solucionar-ho es podria afegir la ruta que ha seguit l’usuari a la part superior esquerra de la pàgina perquè l’usuari sàpiga en tot moment on és, d’on ve i a on pot anar (breadcrumbs). A més, la ruta podria ser enllaçable, amb la qual cosa per tirar enrera només hauria de fer clic sobre de la secció desitjada.

5. RECONEIXEMENT ABANS QUE RECORDAR

És un problema menor, però s’ha de solucionar. Quan l’usuari està en una secció del menú, aquest, canvia de color destacant la secció on es troba. Això ho fa canviant de color (fons blau i lletres blanques), però en el cas de la cistella només canvia el color de la icona, i no el color del fons, d’aquesta manera dificulta la seva identificació.

Proposta de millora
La solució és simple, aplicar el mateix efecte que en les altres seccions. A més també es recomana habilitar les opcions d’incrementar o reduir quantitat i eliminar producte, al quadre de diàleg de la botiga.

6. AJUDA ELS USUARIS A RECONÈIXER, DIAGNOSTICAR ELS ERRORS, I RECUPERAR-SE’N

Es considera un problema d’usabilitat menor perquè l’usuari observa que és un error, però no sap com solucionar-lo. A més, no només surt l’error sinó que al costat hi ha «enllaços útils» que són les diferents seccions del menú i un cercador, on, si l’usuari escriu pressupostos li dona com a resultat la mateixa pàgina on prèviament ha anat l’usuari, ha seleccionat el pressupost desitjat i li ha portat a l’error.

Proposta de millora
Informar que l’enllaç està malament i que és un problema de Marboleny (no només que la pàgina no s’ha trobat), i permetre l’opció de posar-se en contacte amb l’entitat. Eliminar el cercador, ja que no aporta res, i habilitar un botó per tornar enrera.

7. PREVENCIÓ D’ERRORS

Es considera un problema d’usabilitat menor perquè els usuaris que naveguen per la interfície els interessa veure quines persones formen part de l’Entitat i quins balls fan. Per aquest motiu, necessiten ampliar les imatges. I a més, si a les imatges se li apliquen filtres que poden portar a confusió per part dels usuaris, el problema es complica.

Proposta de millora
La solució seria permetre ampliar les imatges o bé eliminar l’efecte quan el cursor passa per sobre d’una imatge, així s’evitaria la confusió.

8. CONSISTÈNCIA I ESTÀNDARDS

L’usuari pot navegar sense problema per la plataforma però és interessant no confondre’l amb diferents conceptes que es refereixen al mateix.

Proposta de millora
La solució proposada seria substituir el concepte de «Entitat» per «Nosaltres». D’aquesta manera no s’afegeix un nou concepte i per una banda trobem el Cercle (que vindria a ser el diminutiu de Cercle de Cultura Tradicional i Popular Marboleny) i per altra el Nosaltres (que és el pronom personal per referir-se al Cercle).

9. AJUDA I DOCUMENTACIÓ

Es considera un problema sense importància perquè es tracta d’una web senzilla i el contingut està a l’abast. De totes maneres, no deixa de ser un problema i es recomana solucionar-lo.

Proposta de millora
Tot i que la web és una interfície fàcil d’usar, es pot ajudar a l’usuari incorporant una secció de FAQs o afegint una icona d’interrogant a la secció de Botiga per permetre a l’usuari clicar-hi i poder-li oferir ajuda.

10. ADEQUACIÓ ENTRE EL SISTEMA I EL MÓN REAL

És un problema sense importància perquè ja hi ha el text que reforça el missatge, però seria interessant canviar la icona per tal de facilitar la identificació per part de l’usuari.

Proposta de millora
Hauria estat més encertat afegir la icona d’un document i el text, enlloc de «Detalls», que fos «Llegeix més» o «Més informació». O simplement obviar aquest botó i afegir algun efecte a la casella del producte quan es passa per sobre per tal de mostrar que és clicable. Per exemple afegir un efecte hover quan es passa per sobre el producte que tot el «bloc» li aparegui un sombrejat o algun altre efecte.

BIBLIOGRAFIA

PÀGINES WEB

Nielsen Norman Group. (2023). 10 Usability Heuristics for User Interface Design. https://www.nngroup.com/articles/ten-usability-heuristics/

RECURSOS D’APRENENTATGE UOC

Design Toolkit: Avaluació heurística. [recurs d’aprenentatge textual]. Fundació Universitat Oberta de Catalunya (FUOC).

Membrives, J. [Judith]. (2019). Quadern d’avaluació de la usabilitat. [recurs d’aprenentatge textual]. Fundació Universitat Oberta de Catalunya (FUOC).

Zapata, M. [Mònica]. Mètodes d’avaluació sense usuaris. [recurs d’aprenentatge textual]. Fundació Universitat Oberta de Catalunya (FUOC).