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:
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.
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.
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.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.
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:
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.
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.
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.
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.
Tens un projecte en ment? En volem saber més!
Un botó ha de sembla un botó