10 principi UX per i link

Quali sono le regole da rispettare quando decidi di formattare i link del tuo sito web? Come renderli leggibili e curare ogni aspetto per accogliere l'utente? Ecco cosa devi sapere.

L’usabilità dei link è l’insieme di regole che permette a un collegamento ipertestuale di essere riconoscibile e leggibile. In questo modo si inserisce nei contenuti ottimizzando al meglio la sua funzione: farsi notare e cliccare dal lettore.

usabilità dei link
Cura l’accessibilità dei tuoi hyperlink.

Sia per i link interni che per quelli in uscita si dovrebbero rispettare diverse regole di formattazione e ottimizzazione del font. Spesso questi elementi vengono decisi a monte dal template per creare un sito web. E tu devi essere in grado di decidere.

Cosa valutare per l’usabilità dei link? Cosa prendere in esame per avere un sito web accessibile? Ecco una serie di regole che abbracciano web design, UX e SEO.

Usa un colore diverso per i link

Già usando il giusto colore del carattere puoi fare qualcosa per migliorare l’usabilità dei link. Il primo passo è quello di renderli perfettamente riconoscibili e distinguerli dalle altre parole del testo.

Di che colore devono essere i link? Blu. Questa è la regola di base che viene indicata come ideale per indicare la presenza di hyperlink. Motivo? Secondo l’inventore del web, Tim Berson Lee, non c’è una ragione.

Ecco perché puoi usare soluzioni differenti anche se è buona norma usare colori differenti per i link non visitati e già cliccati. La regola prevede una scelta di sfumature vivaci per i primi e smunte per l’ultima soluzione, ma appartenenti comunque allo stesso colore. Due variabili:

  • Normale: #0000FF (blu).
  • Visitato: #800080 (viola).

Quale consiglio? È da evitare l’utilizzo di due colori completamente differenti (arancione e verde) per i link visitati e da visitare, così come è da evitare l’utilizzo di un colore simile a quello dei collegamenti ipertestuali per il testo normale.

Sfrutta l’attributo title quando serve

Ricorda che i link possono essere arricchiti da un testo che appare quando il mouse passa sopra all’anchor text. Serve a spiegare, dà maggiori informazioni.

L’attributo title nei link non è obbligatorio ma in alcune circostanze può aiutare a definire la natura del collegamento. Ecco come creare un link in questi casi:

<a href="http://example.com/" 
   title="Questo è il mio sito web">
   example.com
</a>

Metti più info per link a documenti

Se per caso il link è rivolto a documenti differenti dalla pagina web inserisci tipo, formato e peso del file che si andrà a scaricare con quell’azione. In questo modo l’utente non rimane spiazzato, è informato rispetto all’azione che va a compiere.

Evita target=”_blank” quando possibile

Una delle regole fondamentali dell’usabilità per i link: non usare il target=”_blank”, vale a dire il comando HTML per far aprire i link in una finestra differente.

Questa è una regola di user experience che si prende cura dell’utente: non è informato rispetto a cosa stai per fare, ovvero aprire il link in una finestra differente. Al limite puoi mettere il target=”_blank” solo per i link in uscita.

Differenziare link interni e in uscita

C’è bisogno di farlo? Di base per gli outbound link è prevista un’icona con la freccia verso destra che indica, appunto, la presenza di un collegamento che va fuori al sito.

Simboli per i link in uscita.
Simboli per i link in uscita.

Però si tratta di una regola in disuso, non è obbligatorio seguire questo principio. Meglio usare le parole, il contesto, per spiegare dove è diretto quel link ed evitare un elemento di disturbo. In ogni caso, come sottolinea ux.stackexchange.com, puoi usare anche icone differenti per suggerire la fonte linkata all’utente.

Devi attivare i link con più metodi

Per link attivati s’intende il momento in cui passi cursore sull’anchor text e clicchi. In questa situazione il collegamento dovrebbe cambiare colore (di solito diventa rosso) e sottolinearsi se già non lo è, prevedere il passaggio del cursore dalla freccia alla mano. In questo modo capisco che sto per avviare un collegamento ipertestuale.

I link devono essere sottolineati

La regola base dell’usabilità per i link: devi differenziarli. Questo solitamente avviene con un colore diverso e la sottolineatura del font, particolarmente utile per aiutare le persone affette da disturbi visivi (ad esempio il daltonismo) a riconoscere i link.

Ma i collegamenti ipertestuali, comprese le ancore interne HTML, devono essere sempre sottolineati? No, puoi attivare questa funzione nel momento in cui il mouse passa sopra al link e trasforma il cursore in mano. In questo modo è chiara la presenza di un collegamento ipertestuale nel contenuto che hai pubblicato.

Attenzione al font ordinario del blog

Per scongiurare confusione devi evitare che il carattere del contenuto abbia gli stessi colori del link (ad esempio il blu o il viola) e che ci sia la sottolineatura. Questa è una funzione rivolta ai link, a prescindere dal fatto che la usi solo quando sono attivati.

Usa un anchor text del link chiaro

Questa immagine di Moz mostra come il codice html di un link sia semplice. Non serve altro che un tag <a> completo di attributo href, un indirizzo di atterraggio e un anchor text possibilmente ottimizzato secondo le principali regole SEO.

codice link

Per dare un ulteriore contributo all’usabilità dei tuoi link ti consiglio di riflettere proprio sull’anchor text, una vera e propria perla di chiarezza.

Deve comunicare il contenuto che si trova nella pagina di atterraggio: non deve essere generico ma specifico, leggendo l’anchor text io devo capire perfettamente cosa mi proponi. Ricorda che questo elemento non deve prevedere tante parole.

Da leggere: come ottenere backlink di qualità con i contenuti

Scegli dimensione del testo adeguata

Come creare un link? Un elemento da considerare con attenzione è la dimensione del font che, ovviamente, non deve essere differente da quella del testo normale. Basta il colore per differenziare un collegamento ipertestuale da tutto il resto.

Una dimensione inferiore del font può essere utilizzata per i link alle pagine informative (privacy) a patto che siano inseriti nel footer o in un’area secondaria.

TL;DR: pillole di usabilità per i link

Qual è il colore ideale per i link?

Usa il blu per quelli da visitare, viola per i visitati. Quando si attiva un link puoi utilizzare il rosso. In questo modo ogni link è ben visibile e molto facile da cliccare.

I link devono essere sottolineati?

Non sempre è necessario aggiungere questa formattazione sui link, se sono ben visibili nel testo puoi usare il sottolineato solo quando passi il cursore del mouse.

Quale anchor text utilizzare per i link?

Una combinazione di parole semplice, non troppo lunga e non divisa su più righe. Usa l’anchor text per fare in modo che gli individui raggiungano il permalink.

Il font dei link è uguale a quello del testo?

Come dimensione sì, a parte casi del footer o del menu. Deve essere diverso per colore. Fa’ in modo che il font del link sia sempre diverso da quello del testo.

Posso mettere il target=”_blank” nei link?

Meglio di no, il target=”_blank” inserito nel codice HTML dei collegamenti rappresenta una forzatura. Puoi pensare a questa soluzione solo per i link in uscita.

Devo inserire icona per i link in uscita?

Non per forza, l’importante è usare un buon anchor text che spieghi all’utente dove è diretto quel collegamento ipertestuale. Però è sempre utile aggiungere la freccia.

RISPONDI AL COMMENTO

Please enter your comment!
Please enter your name here