Disseny de botons web
Actualitzat: 29 / 01 / 2022

9 consells per al disseny de botons web

expert SEO Barcelona
Gerard Osan
Expert SEO
SectorParlem de

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. És a dir, és important que s'estableixi una jerarquia de botons en la pàgina.

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.

A l'hora de dissenyar botons, és important que tinguem en compte:
  • Principi d'Alineació: els elements han d'estar situats seguint un sentit lògic en la pàgina, no podem col·locar els elements a l'atzar i desordenados.al observar els botons, hem de poder establir una alineació visual.
  • Principi de proximitat: Quan parlem de la proximitat entre els diferents elements, ja siguin text o botons, hem de tenir en compte el principi de proximitat. És a dir, contra més pròxims siguin els elements, major serà la relació que tinguin entre ells.
Els espais en blanc, també són importants per a poder evitar un excés d'informació o elements.


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ó.

D'altra banda, és important que l'usuari rebi una resposta a mesura que va navegant, ja sigui a manera de missatge o notificació. Aquests missatges, ajuden l'usuari a navegar d'una forma més còmode per la pàgina web, sobretot en el cas de les passarel·les de pagament o compra.

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.

Podem acompanyar d'icones que ens ajudin a comprendre l'acció que realitzarem, com és el cas de posar una creu quan sigui un botó per a tancar una pestanya.

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.

La grandària del botó ha d'estar correctament adaptat per a cadascun dels dispositius, ja que si és massa petit, dificultarà el seu clicat.

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.

expert SEO Barcelona
Sobre l'autor/a
Gerard Osan — Expert SEO
Dins del màrqueting online he enfocat la meva carrera professional cap al SEO tècnic i l'analítica web. També dedico una mica de temps a la programació, buscant que el desenvolupament web aporti recursos optimitzats al màrqueting.

Notícies relacionades

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