L’importanza di distinguere i link nel testo

aggiornato il
Distinguere i link nel testo degli articoli su internet facilita la navigazione
Distinguere i link nel testo (Photo by Jess Bailey on Unsplash)

Distinguere i link nel testo fa comprendere facilmente quali sono i collegamenti ad altre pagine: pochi colori e semplici da interpretare.


Facilitare la navigazione

L'importanza di distinguere i link nel testo di un articolo migliora l'usabilità del sito facilitando la navigazione.
I link hanno un'importanza rilevante in un articolo, o meglio nell'anchor text: l'anchor text è quel testo che contiene il collegamento ipertestuale, hyperlink in inglese, ovvero, abbreviato, link.

Quando si inserisce un link in un testo è, o dovrebbe essere, perché il link inserito sia attinente al testo in cui viene inserito, e vada ad approfondire meglio un concetto trattato.

Proprio perché i link sono importanti, è altrettanto importante che si distinguano in modo inequivocabile; innanzitutto è bene che chi legge si accorga quando un link è presente, si accorga che si tratta di un collegamento ad un'altra pagina.

Se il collegamento ipertestuale risulta occultato, uguale, anzi identico, al testo, è difficile distinguerlo, quindi comprendere che c'è.

Se un link è presente deve essere evidenziato, altrimenti perché viene inserito? Il link deve servire a chi legge.

Il colore del link

Il link è logico sia di colore diverso rispetto al testo, o comunque ben evidenziato.

Il blue risulta il colore dei link per definizione, forse perché così è nato, quando è stato creato il protocollo HTML:

link

hover

visited

Nota: nel motore di ricerca interno al sito, Google utilizza il colore verde per i link, il blu per i titoli, ed il purple per le pagine visitate.

Gli stati dei link sono 4, guarda su W3CSchools.

Non trovo sia utile lasciarsi confondere o influenzare da più o meno sofisticate prerogative stilistiche, dove i links risultano quasi indistinguibili dal testo.

Trovo molto meglio che il layout sia semplice da interpretare, ed un link si deve vedere subito, subito si deve capire che è un link.

Hover

a:hover stabilisce il colore di un collegamento ipertestuale, quando il cursore del mouse ci passa sopra, di conseguenza il link viene ulteriormente evidenziato.

Per confermare a chi usa il sito, il fatto che la stringa di testo che ha presupposto si tratti di un link, lo è davvero, è bene che al passaggio del mouse sopra il testo (mouse over), o il dito nel caso del touch screen dei dispositivi mobili, questo assuma un colore differente che, senza necessariamente essere sgargiante, faccia comprendere di essere ciò che effettivamente è.

Tre esempi autorevoli

1) Google: nei risultati delle SERP, ad esempio con la parola di ricerca af1.it, i link sono blu, compare la sottolineatura all'over, e quando visitati sono viola.

2) Nielsen Norman Group, la pagina degli articoli:

✔ link blu;

✔ over, compare la sottolineatura;

✔ al click si colora di rosso;

✔ quando visitato viola.

3) Wikipedia, una pagina a caso.

I link sono blu;

all'over compare la sottolineatura;

quando è stato visitato il colore diventa viola.

a:visited imposta il colore di un link quando è stato visitato, in modo che l'utente non abbia problemi nell'identificare le pagine che ha già visto.

Come scritto in questo articolo del 2004: Change the Color of Visited Links (take a look) sull'autorevole sito NNGroup, viene indicato come sia importante distinguere i link già visitati, per facilitare l'utente nella navigazione.

Ho riportato la data, in quanto fa comprendere quanto questo concetto è sempre stato alla base della navigazione sul web.

Personalmente, il colore viola standard usato per indicare i link visitati, non mi è mai piaciuto.

Potrei usare un altro colore, ma trovo che sia troppo, e forse sbaglio, ma l'idea di avere altri colori nelle pagine, e ci ho anche provato, non mi ha mai soddisfatto.

Dato che mi piace il sito in stile minimale, cerco di non pasticciare con i colori.

Il sito di Salvatore Aranzulla, tra i più visitati in Italia, quindi anch'esso autorevole, utilizza link blue, dove compare la sottolineatura all'over, e quando visitati restano dello stesso colore, a differenza di Google, Wikipedia e di NNGroup, che ho citato come esempio tangibile.

Altro sito che reputo interessante, è quello di Gianfranco Viasetti, che usa i link di colore blu, si accendono di rosso quando cliccati, ed anche in questo caso quando visitati restano blu, come sul sito di Salvatore Aranzulla.

Ci sono tantissimi siti che mantengono lo stesso colore del link anche quando è stato visitato, e penso che l'esperienza dell'utente su internet sia cresciuta negli ultimi anni, dato il notevole uso che viene fatto del web.

Quella di cambiare il colore dei link visitati, è una domanda che mi faccio spesso, proprio anche in questo momento in cui sto aggiornando questo articolo.

Da una parte mi dispiace toccare il layout di default del tema di WordPress che utilizzo, dall'altra mi chiedo se per chi legge, sarebbe meglio.

Proprio ora, ho deciso di riprovare, ed ho impostato il colore standard purple, ovvero il classico colore dei link visitati in HTML, per le pagine già visitate.

Dato che sempre di link si tratta, faccio questa breve disgressione: ho deciso di togliere l'attributo target="_blank" da tutti gli url esterni al sito, ed ho aggiunto questa icona per indicarli, ho utilizzato questo semplice plugin che trovo utile.
Nonostante il plugin non sia aggiornato da tempo, il suo dovere lo svolge bene.

Ma ho trovato su questo sito un bellissimo codice in CSS che senza nemmeno aggiungere una classe ai link esterni (come ad esempio: <a href="https://www.example.com" class="external">example.com</a>), applica comunque l'icona.

Lo stato active

a:active imposta il colore del link nel preciso momento in cui viene fatto clic.

Sebbene nessuno di questi comandi sia obbligatorio, sono molto utili se si intende aiutare l'utente nella navigazione del sito, mentre l'istruzione a:active è facoltativa, potrebbe cambiare colore del link quando si fa clic, personalmente la trovo inutile, dato che si è già compreso, quando ci si accinge a fare click, che si tratta di un collegamento ad un'altra pagina.

Le altre tre istruzioni sono più che sufficienti (a:link a:hover a:visited), se ben utilizzate, per evidenziare in modo chiaro e semplice i collegamenti ipertestuali.

Utilizzare colori diversi per distinguere tra quelli non visitati e visitati, è importante per facilitare la navigazione del sito, quindi migliorare l'usabilità.

La sottolineatura

Su diversi siti web, i link sono sottolineati; personalmente la sottolineatura non mi piace, tanto nel testo quanto nei link, anche perché spesso risulta troppo appiccicata all'anchor text.

Per evitare questo, è possibile agire sul CSS in questo modo:

a:link {text-decoration: none; border-bottom: 1px solid blue;}

Il bordo applicato risulta leggermente distanziato dall'anchor text, e la sottolineatura si è comunque ottenuta, se preferisci questa opzione.

In una semplice pagina HTML senza formattazione CSS alcuna, il link assume il colore blu ed è sottolineato, si colora di rosso quando cliccato, e quando è stato visitato di colore viola.

Semplice, si comprende facilmente quando e dove è presente un link, che non ha mai lo stesso colore del testo, e il colore viola indica chiaramente che quel link è già stato visitato, quindi si evita di ritornare, magari non volendo, alla stessa pagina gi&agrave visitata in precedenza.

Evidenziare il testo

Quando invece si intende solo evidenziare del testo si può ricorrere al grassetto (<strong>) o al corsivo (<em>); la sottolineatura potrebbe far pensare che si tratti di un link quando invece non è presente.

Molto spesso, un utente giudica un sito molto rapidamente, pochissimi secondi, anche meno, quando impiega tanto, e illudere, seppur in buona fede, un utente, potrebbe essere controproducente, quantomeno lo si confonde e non lo si aiuta durante la navigazione, che dovrebbe essere il più semplificata possibile.

Cosa non fare

A questo punto è chiaro cosa non fare se si intende offrire una navigazione semplice ed intuitiva, una buona user experience, come dicono quelli veri.

Avere link dello stesso colore del testo; questa è la prima cosa da non fare.

Soprattutto se il sito contiene molto testo, è importante che i links siano ben visibili, e non occorre utilizzare effetti speciali, nemmeno al mouse over; segnalare il link sì; risultare invadenti no.

Diversi siti utilizzano, quasi certamente per mantenere con una certa rigidità di un preciso stile grafico, link identici al testo: l'unico modo per scoprire che si tratta di link è quando si esegue sulla stringa di testo il passaggio del cursore del mouse, e nemmeno in quel caso accade nulla, a parte il fatto che il cursore diventa la classica manina che indica un collegamento ipertestuale.

Non assegnare un colore diverso ai link visitati.

Come ho scritto, ho qualche dubbio a riguardo, tuttavia, assegnare un colore diverso, non è affatto sbagliato.

Un link può anche essere segnalato utilizzando il grassetto, (a me non piace questa soluzione), purché non venga utilizzato nel mouse over, in quanto andrebbe a falsare la corretta formattazione del paragrafo, allargando il layout.