1. Introducció

Benvinguts al meu Folio de la UOC. En aquesta entrada realitzaré una immersió profunda en l’experiència d’usuari (UX) d’una web real: Airconfort Vallès (airconfortvalles.com).

L’elecció d’aquest lloc no és casual ni purament acadèmica. Com a professional del sector, actualment estic treballant amb aquest client per dur a terme el redisseny total de la seva plataforma. La web actual ha quedat ancorada en un disseny de fa més d’una dècada, i aquesta anàlisi heurística servirà com a full de ruta professional per detectar quines barreres estan impedint que els usuaris contactin amb l’empresa. L’objectiu és clar: transformar una interfície obsoleta en una eina de venda eficient i moderna.

2. Metodologia

Per a aquesta auditoria, he utilitzat el mètode d’Avaluació Heurística, una tècnica d’inspecció de la usabilitat que es basa en l’experiència d’un expert que contrasta la interfície amb els 10 principis de Jakob Nielsen.

A més, per dotar l’anàlisi de dades quantitatives, he complementat l’avaluació amb dues eines de diagnòstic:

• WAVE (Web Accessibility Evaluation Tool): Per auditar l’accessibilitat i el contrast.

• SEMRUSH: Per analitzar la salut tècnica general i el rendiment.

---

3. Els 10 Principis de Nielsen: Anàlisi de Contrast

1. Visibilitat de l’estat del sistema

• ✅ Bon exemple: La navegació entre seccions. En clicar un element del menú, el sistema respon immediatament canviant el títol de la pàgina, confirmant que la petició s’ha processat correctament.

• ❌ Mal exemple: El processament d’errors al formulari. Quan l’usuari comet un error, el sistema genera un avís visual amb un contrast vermell sobre blau gairebé il·legible i una font de mida molt reduïda.

• 💡 Justificació: El sistema ha d’informar sempre de què està passant. En el formulari, la falta de claredat visual deixa l’usuari en un estat de confusió, trencant la comunicació.

2. Adequació entre el sistema i el món real

• ✅ Bon exemple: Ús d’iconografia universal (un sol per a fotovoltaica o un floc de neu per a climatització). Són metàfores visuals que l’usuari reconeix del món físic.

• ❌ Mal exemple: Ús de terminologia d’enginyeria en certs títols de projectes (sigles industrials sense explicar) que un client particular pot no entendre.

• 💡 Justificació: La interfície ha de parlar el llenguatge de l’usuari. El llenguatge massa tècnic crea una barrera cognitiva per al no expert.

3. Llibertat i control per part de la persona usuària

• ✅ Bon exemple: Menú superior “sticky” (fix). Permet que l’usuari tingui sempre a l’abast les vies de navegació sense haver de fer scroll manualment.

• ❌ Mal exemple: Absència de botó “tornar a dalt” en pàgines de serveis molt llargues, obligant a un desplaçament manual tediós.

• 💡 Justificació: L’usuari ha de sentir que té el control. La falta de dreceres de navegació vertical limita la seva llibertat de moviment.

4. Consistència i estàndards

• ✅ Bon exemple: El logotip de l’empresa a la part superior esquerra redirigeix sempre a la pàgina d’inici, respectant la convenció universal web.

• ❌ Mal exemple: Icones de fletxa al costat de text que no són desplegables. Això enganya l’expectativa de l’usuari, que espera una interacció que no existeix.

• 💡 Justificació: Seguir els estàndards redueix la corba d’aprenentatge. Incomplir la funció esperada d’una icona genera frustració.

5. Prevenció d’errors

• ✅ Bon exemple: Validació sintàctica del camp d’email, que detecta si falta el caràcter “@” abans de permetre l’enviament final.

• ❌ Mal exemple: No hi ha indicacions visuals de quins camps són obligatoris abans de prémer el botó d’enviar.

• 💡 Justificació: Un disseny preventiu és millor que un bon missatge d’error. No marcar els camps obligatoris és “posar una trampa” a l’usuari.

6. Reconeixement abans que record

• ✅ Bon exemple: El menú desplegable de filtres a la secció de projectes. L’usuari només ha de reconèixer el servei que busca entre una llista d’opcions visibles.

• ❌ Mal exemple: Manca d’enllaços interns relacionats dins dels blocs de text extensos, obligant l’usuari a recordar on ha vist una informació anteriorment.

• 💡 Justificació: L’ésser humà és millor reconeixent que recordant. La falta d’enllaços de context augmenta l’esforç mental innecessari.

7. Flexibilitat i eficiència en l’ús

• ✅ Bon exemple: Telèfon clicable al header, una drecera excel·lent per a usuaris de dispositius mòbils amb necessitats urgents.

• ❌ Mal exemple: Falta de dades de contacte ràpides integrades al peu de pàgina (footer) de forma textual, obligant a navegar sempre a la pàgina de contacte.

• 💡 Justificació: Les interfícies han de permetre dreceres. El telèfon al header és eficient, però la seva absència al footer penalitza l’usuari.

8. Disseny estètic i minimalista

• ✅ Bon exemple: La pàgina d’inici utilitza imatges de gran format i espais en blanc que transmeten professionalitat i ordre visual.

• ❌ Mal exemple: Subpàgines de serveis amb blocs de text densos (“murs de text”) i imatges de fons que dificulten enormement la llegibilitat.

• 💡 Justificació: Cada unitat extra d’informació competeix amb les rellevants, disminuint la visibilitat de la proposta de valor real.

9. Ajuda les persones usuàries a reconèixer i diagnosticar els errors

• ✅ Bon exemple: Quan un camp del formulari falla, el sistema ressalta el marc del camp afectat per identificar ràpidament el problema.

• ❌ Mal exemple: Missatges de cerca buida genèrics que no ofereixen alternatives ni termes suggerits.

• 💡 Justificació: Els missatges d’error han de ser constructius. No oferir una via de sortida deixa l’usuari en un punt mort.

10. Ajuda i documentació

• ✅ Bon exemple: La presència d’un mapa interactiu a la secció de contacte ajuda l’usuari a localitzar l’empresa sense sortir de la interfície.

• ❌ Mal exemple: L’ajuda es limita exclusivament a la política de cookies. No existeix cap secció de FAQs ni manuals de suport tècnic.

• 💡 Justificació: L’ajuda ha de ser operativa. La falta de suport funcional obliga l’usuari a dependre sempre d’un tercer (trucada o correu).

  4. Llistat prioritzat segons gravetat

  Gravetat	Troballa	Heurística	Proposta de Solució
  4/4 (Catàstrofe)	Contrast cromàtic insuficient	#1 Visibilitat	Redissenyar la paleta segons WCAG 2.1 (ràtio 4.5:1).
  3/4 (Major)	Salut tècnica i rendiment (42/100)	#7 Eficiència	Optimitzar pes d’imatges i simplificar codi CSS/JS.
  3/4 (Major)	Inconsistència d’icones (fletxes)	#4 Consistència	Eliminar icones que simulin interactivitat inexistent.
  3/4 (Major)	Manca de contacte al footer	#7 Eficiència	Afegir telèfon i horari de forma fixa al peu.
  2/4 (Menor)	Murs de text densos	#8 Estètica	Fragmentar el contingut amb bullet points i icones.
  2/4 (Menor)	Absència de secció de FAQs	#10 Ajuda	Crear un repositori de preguntes freqüents operatiu.
  2/4 (Menor)	Falta de camps marcats	#5 Prevenció	Indicar visualment els camps requerits abans de l’enviament.

  ---

  5. Justificació de les prioritats

  Accessibilitat: És la prioritat absoluta; actua com una barrera d’exclusió. Si un usuari amb dificultats visuals no pot llegir el contingut, la web deixa de ser funcional. Des d’un punt de vista de negoci, estem perdent clients potencials per una decisió de disseny errònia.

  Rendiment Tècnic: Segons els estàndards actuals, el temps de càrrega és un factor crític de retenció. Una web lenta no només empitjora el posicionament SEO, sinó que augmenta la taxa de rebot, invalidant qualsevol esforç de disseny posterior.

  Consistència i Confiança: Les inconsistències visuals generen fricció cognitiva. En el moment de la conversió, l’usuari necessita seguretat; si el sistema sembla “trencat”, la desconfiança impedeix que es completi l’objectiu de la web.