Experiència d'Usuari
UX de dalt a baix

Una guia visual completa per entendre el disseny centrat en la persona

01 — Definició

Què és l'experiència d'usuari?

L'UX (User Experience) és la percepció global que té una persona en interactuar amb un producte digital. No és només com es veu, sinó com es sent: si és intuïtiu, útil i satisfactori.

Centrat en la persona
Les decisions de disseny parteixen sempre de les necessitats, motivacions i contextos reals dels usuaris.
Més que estètica
UX abasta arquitectura de la informació, flux de navegació, accessibilitat i rendiment, no sols l'aparença visual.
Basada en evidència
Les decisions s'avalen amb dades: tests d'usabilitat, entrevistes i mètriques de comportament reals.
Procés iteratiu
L'UX no s'acaba amb el llançament: s'evoluciona contínuament a partir del feedback i noves necessitats.

02 — Distinció clau

UX vs UI: quina diferència hi ha?

UX
Investigació d'usuaris
Arquitectura informació
Mapes de viatge
Tests d'usabilitat
Wireframes i prototips
vs
UI
Colors i tipografia
Icones i il·lustracions
Components visuals
Animacions i transicions
Guia d'estil

UX = com funciona · UI = com es veu · Totes dues van de la mà

03 — Metodologia

El procés de disseny UX

1
Investigació (Research)
Entrevistes amb usuaris, enquestes, anàlisi de competidors i estudi del context d'ús. L'objectiu és entendre qui són els usuaris i quins problemes reals tenen.
Eines: entrevistes, surveys, analytics
2
Definició (Define)
Sintetitzar la informació en persones fictícies (personas), mapes d'empatia i declaració del problema. Respon a: quin problema hem de resoldre i per a qui?
Eines: personas, journey map, HMW
3
Ideació (Ideate)
Sessions de brainstorming, diagrames d'afinitat i tècniques de creativitat col·lectiva. Es generen moltes idees sense filtrar, per escollir les més prometedores.
Eines: crazy 8s, how might we, sketching
4
Prototipatge (Prototype)
Crear representacions de baixa o alta fidelitat de la solució: des d'esbossos en paper fins a prototips interactius. L'objectiu és materialitzar la idea el més ràpid possible.
Eines: Figma, Balsamiq, Marvel
5
Validació (Test)
Fer proves amb usuaris reals per detectar problemes d'usabilitat. Els resultats alimenten de nou la fase d'investigació, tancant el cicle iteratiu.
Eines: tests moderats, eye tracking, A/B

04 — Fonaments

10 principis heurístics de Nielsen

1
Visibilitat de l'estat
El sistema sempre ha d'informar l'usuari del que passa.
2
Coincidència amb el món real
Parla el llenguatge de l'usuari, no del sistema.
3
Control i llibertat
Permet desfer i refer accions fàcilment.
4
Consistència i estàndards
Elements iguals han de comportar-se igual sempre.
5
Prevenció d'errors
Millor prevenir que mostrar missatges d'error.
6
Reconèixer > recordar
Mostra opcions; no obliga l'usuari a memoritzar.
7
Flexibilitat i eficiència
Dreceres per a usuaris avançats, senzillesa pels novells.
8
Disseny minimalista
Elimina el que no aporta valor al flux principal.
9
Ajuda a reconèixer errors
Missatges clars que expliquen i proposen solucions.
10
Ajuda i documentació
Quan cal, ofereix documentació fàcil de trobar i usar.

05 — Errors habituals

Què cal evitar en UX?

✗
Dissenyar sense investigar els usuaris
→ Fes almenys 5 entrevistes abans de dissenyar
✗
Prioritzar l'estètica per sobre de la funcionalitat
→ Un botó bonic però invisible és un botó inútil
✗
No testar amb usuaris reals
→ 5 usuaris detecten el 85% dels problemes d'usabilitat
✗
Ignorar l'accessibilitat des del principi
→ Aplica les directrius WCAG 2.1 des de la fase de disseny
✗
No iterar un cop llançat el producte
→ Recull dades, detecta punts de fricció i millora contínuament

06 — Recursos

Eines essencials d'UX

Prototipatge
Figma
Disseny i prototips col·laboratius al núvol
Investigació
Maze
Tests d'usabilitat remots i automatitzats
Analítica
Hotjar
Mapes de calor i gravació de sessions
Enquestes
Typeform
Formularis i enquestes per recollir feedback
Col·laboració
Miro
Pissarres digitals per a workshops i ideació
Flux
Whimsical
Diagrames de flux i wireframes ràpids

"El disseny no és tan sols com es veu o com es toca. El disseny és com funciona."

— Steve Jobs