El disseny d'enllaços en una pàgina web

Un dels elements centrals en el  disseny web són els enllaços. Aquest recurs, essencial per al funcionament de la navegació web i per al posicionament SEO, ha anat veient modificat el seu aspecte al llarg dels anys.

Tot i que les tendències del disseny web reinventen l'apartat visual dels portals any rere any, hi ha una sèrie de requisits que s'han mantingut més o menys estables amb el pas del temps per a que un enllaç sigui reconegut i funcioni com a tal.

Analitzem quins factors són essencials a l'hora de definir el disseny d'enllaços d'una pàgina web.

L'enllaç clàssic: blau i subratllat

Als inicis d'Internet i amb l'aparició de les primeres pàgines web, el disseny d'aquestes últimes no permetia massa floritures per les limitacions tècniques d’aleshores. En aquell moment, es va estandarditzar un format visual per als enllaços que encara en l'actualitat se segueix utilitzant en molts casos.

Dins d'un bloc de text, es va optar per distingir els enllaços de la resta del contingut canviant el color dels mateixos a blau i subratllant el text anchor.

Aquest característic disseny continua present en molts portals i és un recurs fàcil a l'hora de definir l'aspecte d'un enllaç perquè sigui reconegut per gairebé tothom.

Una evolució d'aquest estàndard és utilitzar el subratllat i un color diferent a la resta del text, no necessàriament el blau. D'aquesta manera, podem ser més coherents amb la línia visual del disseny web plantejat.

Ha de ser un element reconeixible com a tal

Perquè un enllaç compleixi la seva funció, facilitar la navegació pels diferents continguts d'un web, el seu disseny ha de permetre reconèixer l'element en qüestió com a enllaç.

Per exemple, de res serveix inserir un enllaç en un bloc de text si l'usuari no podrà distingir-lo de la resta de paraules que conformen el contingut.

Com ja hem vist en el cas de l'enllaç clàssic i com veurem a continuació amb alguns recursos que ens permetran destacar els links, la clau per a una bona experiència d'usuari és que l'enllaç sigui identificat pels usuaris com a tal.

Contrast

Color, tipografia, iconografia ... Hi ha diverses maneres de fer que un enllaç ressalti per sobre del contingut limítrof. D'aquesta manera, l'usuari podrà percebre de forma intuïtiva que està davant d'un element diferent a la resta.

Text de l'enllaç

Tot i que en alguns casos el text de l'enllaç no sigui domini del disseny web, el cas és que també té incidència a l'hora d'identificar-los. I no només les paraules que conformen el link, sinó que la frase que el precedeixi o el segueixi també ajudarà a distingir-lo. Per exemple, amb el text "Podeu consultar més informació al respecte en Wikipedia" estem donant una pista molt clara a l'usuari que l'última paraula conté un enllaç.

Cursor

Malgrat que amb l'aparició i massificació de l'ús dels smartphones aquest indicador no és tan habitual, en navegar per un web amb un ordinador i passar amb el cursor per sobre d'un enllaç, aquest canviarà de icona. La majoria de navegadors web implementen per defecte aquesta funcionalitat, que també podem modificar mitjançant CSS.

Atribut Title

En línia amb el punt anterior, als navegadors web d'escriptori, en fer "hover" per sobre d'un enllaç amb el ratolí, podrem visualitzar el contingut de l'atribut "Title" del mateix.

Micro interaccions i animacions

Podem dotar els enllaços d'una web de petites animacions que ajuden a l'usuari a identificar-los com elements d'interacció, com ara petits moviments, bucles, canvis de color, etc.

Reforç amb botons i iconografia

Tal com comentàvem en el punt "Contrast", podem distingir els enllaços dels altres elements del nostre disseny web per fer-los reconeixibles pels internautes.

Un dels casos més habituals és utilitzar botons o pastilles per embolicar els enllaços. I també podem emprar iconografia, habitualment fletxes i similars, per reforçar el seu pes.

Posició que ocupen

Amb el pas dels anys, s'han estandarditzat molts aspectes del disseny web. Alguns d'ells tenen influència directa en els enllaços. Per exemple, si un text forma part d'un menú de navegació, intuïm que es tracta d'un link, encara que no utilitzem cap dels recursos esmentats abans. O si mostrem un llistat al footer. Depenent de la posició que ocupi un enllaç, l'usuari arribarà a percebre’l com a tal.

Aquests són només alguns dels elements i recursos que ens ajuden a definir l'aspecte visual dels enllaços. A cada projecte que realitzem a La Teva Web revisem al detall el disseny dels enllaços i de tots els elements que conformen el  disseny web per crear portals adaptats als requisits dels nostres clients.