Si estàs començant en disseny d’interfícies, una de les coses que més et trobaràs són botons. Sí, aquells rectangles que fem clic per enviar formularis, comprar coses o fer qualsevol acció en una app o web. Sembla fàcil, però hi ha trucos perquè els usuaris no es perdin i sàpiguen què fer. T’ho explico clar.
Tipus de botons: primari, secundari i terciari
No tots els botons són iguals, i no tots tenen la mateixa importància. Aquí va la clau:
- Primari: És el protagonista. L’acció que realment volem que facin els usuaris. Exemple: “Comprar ara”, “Enviar”. S’ha de veure, cridar l’atenció i tenir un color fort que sobresurti del fons.
- Secundari: És una opció alternativa o menys important. Exemple: “Cancel·lar” o “Més opcions”. Normalment és més neutre, menys cridaner, però encara visible.
- Terciari: Accions petites o menys rellevants. Exemple: “Aprèn més” o “Veure tot”. Normalment és només text o outline, més discret.
Tip: pensa sempre: l’usuari ha de saber de seguida quin botó és el que importa més.
Estats del botó: què passa quan passes el ratolí
Els botons no són estàtics, i això és clau en UX: els estats donen feedback a l’usuari. Els principals són:
- Normal / Default: Com es veu abans de tocar res.
- Hover: Quan passes el ratolí per sobre. Aquí podem canviar color, ombra o subratllat. És com dir: “Ei, pots clicar aquí!”.
- Active / Pressed: Quan l’usuari fa clic. Sembla que el botó s’enfonsa o canvia lleugerament de color.
- Focus: Quan està seleccionat amb el teclat (tab). Important per accessibilitat. S’afegeix un contorn visible.
- Disabled / Inactiu: Quan no es pot clicar. Color gris, opacitat baixa, sense efecte hover.
Explicació dels estats:
- Normal: fons blau (#007bff) i text blanc.
- Hover: quan passes el ratolí, el fons es torna més fosc (#0056b3).
- Active: quan cliques, el botó s’encongeix lleugerament (
scale(0.95)) simulant que es prem. - Focus: quan navegues amb teclat (Tab), apareix un contorn clar (#80bdff).
- Disabled: botó gris separat, sense interacció (
cursor: not-allowed).
I bé, després d’aquest repàs, segur que quan vegis un formulari o un botó, ja no el miraràs igual. Qui ho havia de dir, oi? La propera vegada que facis clic a un “Enviar” o un “Comprar”, recorda: darrere d’aquell botó hi ha tot un món de UX pensat perquè no et perdis.
Si mai no t’ho havies plantejat, o ja ho aplicaves bé, segur que ara, quan cliquis un botó, no el veuràs igual. 😊