diseño web
29 / 04 / 2019

9 consells per al disseny de botons web

SectorParlem de
Disseny de botons web

Un botó ha de sembla un botó

Els botons són un dels elements més comuns en el disseny web. S'han convertit en un recurs pràcticament present en tot tipus de portals. Des de senzilles webs corporatives que ens inciten a contactar amb el seu negoci, fins a botigues en línia que els fan servir durant el procés de compra dels seus productes.

Des del seu ús en les primeres pàgines web, el disseny dels botons ha anat evolucionant amb el temps per modernitzar-se i adaptar-se a les corrents visuals de cada any. Malgrat això, hi ha una sèrie de convencions que s’han de respectar i aplicar per a que aquests elements del disseny compleixin amb la seva funció.

En definitiva, la funció d'un botó dins d'un web és molt simple: ser clicat per un usuari per realitzar una acció. I per aconseguir que compleixin aquesta comesa, us portem una sèrie de consells sobre el disseny de botons web:

1. Els botons han de semblar botons

Encara que sembli molt obvi, quan afegim un botó a un web, aquest ha de semblar un botó. És molt fàcil que durant l'exercici creatiu del disseny del lloc web, aquest recurs evolucioni fins a esdevenir una cosa poc identificable com a tal.

Com a norma general, qualsevol usuari que accedeixi al nostre web ha de poder identificar un botó com a element susceptible de ser clicat. Com ho aconseguim? Seguint una sèrie de convencions visuals habituals per als botons que inclouen el color, la forma o la mida.

2. Tingues en compte el disseny per a mòbils

L'auge i consolidació de l'ús d'Internet a smartphones fa imperatiu que el disseny d'un web es realitzi tenint en compte les característiques d'ús d'aquests dispositius. Evidentment, això inclou els botons.

Per exemple, un recurs tan estès en ordinadors com el hover és pràcticament invisible en smartphones.

3. Ubicació dins de la pàgina

La ubicació dels botons dins d'una pàgina ha de ser coherent. Hem de respectar el flux de lectura i navegació dels usuaris, i conduir-los cap els botons. Un exemple molt obvi: el botó d'enviament d'un formulari mai estarà ubicat a l'inici del mateix, ja que el flux d'ús natural d'un usuari serà omplir els camps del formulari i finalitzar amb el seu enviament.

Un altre punt a tenir en compte vinculat amb la ubicació dels botons en un web és l'ordre.Davant la presència de diversos d'aquests recursos, haurem d'utilitzar una ordenació lògica i intuïtiva. Per exemple, durant el procés de compra d'un e-commerce, el botó per continuar al següent pas del procés estarà ubicat a la dreta, i aquell destinat a retrocedir un pas o cancel·lar l'operació a l'esquerra.

4. Deixa clara la seva acció

Abans de fer clic en un botó, l'usuari ha de tenir clar quina acció es realitzarà a continuació. La incertesa provocada per desconèixer la finalitat d'un botó pot comportar que molts usuaris simplement no facin clic al mateix. Com veurem més endavant, podem utilitzar recursos com el text o la iconografia per indicar als navegants quin serà el resultat de fer clic al botó.

5. Escull bé el color

El color d'un botó en una pàgina web tindrà certa influència en la percepció dels usuaris. Cada projecte web és diferent, però en línies generals podem definir els següents punts clau a l'hora d'escollir el color dels botons d'una web:

  • Contrast: el color ha de ressaltar sobre els elements confrontants.
  • Llegibilitat: el to escollit ha de permetre que el text del botó sigui fàcilment llegible.
  • Convencions habituals: hi preconcepcions sobre alguns colors que, en alguns casos, ens portaran a evitar el seu ús. Per exemple, el verd per a accions positives.

6. Sigues coherent en tot el web

El disseny dels botons a través de tot un portal web ha de seguir el mateix estil i línies visuals. D'aquesta manera, els usuaris aprendran de manera intuïtiva què és un botó i què no al nostre web, i quina acció poden realitzar en fer clic en ells.

En aquest punt s'inclouen aspectes del disseny dels botons, com la forma, tipografia, el color, la seva ubicació o la seva grandària.

7. Utilitza els textos del botó i els confrontants

El text del botó ha de deixar molt clara l'acció que es realitzarà mitjançant el clic del mateix. També podem utilitzar textos complementaris al botó per explicar als usuaris el seu funcionament, o fins i tot com a recurs persuasiu.

8. Empra la mida adequada

De res ens serveix afegir un botó en un web si l'usuari no el veu per ser massa petit. O en el cas dels Smartphone, si no és capaç de fer clic al mateix. L'elecció de la mida dels botons ha de seguir un criteri d'usabilitat i també de priorització visual.

9. Afegeix interacció als botons

En el cas dels ordinadors, podem aplicar canvis d'estil en els botons quan els usuari passen el ratolí per sobre, fins i tot canviar la icona del cursor.

També és recomanable aplicar un recurs d'interacció que serveixi per indicar a l'usuari que el botó ha estat clicat. D'aquesta manera, evitarem que l'usuari desconegui si realment ha fet clic a un botó.

Encara que seguim aquests consells sobre el disseny dels botons d'un web, haurem de tenir en compte les característiques de cada projecte a l'hora de definir el seu aspecte. Si necessiteu ajuda amb aquest o qualsevol altre element del disseny web, no dubteu a contactar amb nosaltres.

T'ha agradat l'article? Subscriu-te al nostre bloc!

Notícies relacionades

Tens un projecte en ment? En volem saber més!

Finalitats de la protecció de dades: Enviament del nostre butlletí comercial i de comunicacions informatives i publicitàries sobre els nostres productes o serveis que siguin del seu interès, fins i tot per mitjans electrònics. Legitimació: Consentiment de l'interessat. Destinataris: No estan previstes cessions de dades. Drets: Pot retirar el seu consentiment en qualsevol moment, així com accedir, rectificar, suprimir les seves dades i altres drets a info@latevaweb.com. Informació addicional: Pot ampliar la informació a l'enllaç de Política de Privadesa.

Utilitzem cookies pròpies i de tercers per oferir-te un millor servei. Més informació

Acceptar