Distinguere link nel testo sul web

🕐 12 minuti @ Condividi via Email
Aggiornato:
Distinguere link nel testo sul web
(Photo by Jess Bailey on Unsplash)

Distinguere 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 link nel testo sul web, migliora l'usabilità del sito, facilitando la navigazione.

I link hanno un'importanza rilevante in un articolo, e nell'anchor text: il testo contenuto nel 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 all'articolo.

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

active

visited

Lo stato dei link

Gli stati dei link sono questi:

a:link

a:hover

a:active

a:visited

a:focus

Lo stato focus è quando i collegamenti ipertestuali della pagina, vengono evidenziati usando il tasto Tab;

a:link il colore assegnato al collegamento ipertestuale;

a:hover il colore che assume quando si passa sopra con il puntatore del mouse, e delle dita nel touch screen, molto meno visibile, in quanto si attiva subito;

a:active il colore del link quando viene cliccato;

a:visited e il colore del link visitato.

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

In questo caso, puoi personalizzare i colori e l'aspetto secondo il layout del tuo sito, dalla pagina del tuo motore di ricerca.

Link in evidenza

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

Sebbene anche in questi casi sia sufficiente la sottolineatura usata bene, è un indicatore che istintivamente fa comprendere che il testo sottolineato è un link, un chiaro collegamento a un'altra pagina.

Trovo molto meglio che il layout sia semplice da interpretare, e un link si deve vedere subito, e subito si deve capire che si tratta di 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, al passaggio del mouse sopra il testo (mouse over), o il dito nel caso del touch screen dei dispositivi mobili, questo assume un colore differente che, senza necessariamente essere sgargiante, faccia comprendere di essere ciò che effettivamente è.

Tre esempi autorevoli

1) Google: nei risultati delle SERP (Search Engine Results Page), 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 (nngroup.com), la pagina degli articoli:

• link blu (a:link);

• over (a:hover), compare la sottolineatura;

• al click (a:active) si colora di rosso;

• quando visitato viola (a:visited).

3) Wikipedia;

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 sull'autorevole sito NNGroup.com, 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, piuttosto scuro, non mi è mai piaciuto, ma è possibile scegliere una diversa tonalità, come questa.

Il sito di Salvatore Aranzulla, tra i più visitati in Italia, quindi anch'esso autorevole, usa 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 esempi piuttosto quotati.

Ci sono tantissimi siti che mantengono lo stesso colore del link anche quando è stato visitato, e penso che, nonostante l'esperienza dell'utente su internet sia cresciuta negli ultimi anni, dato il notevole uso che viene fatto del web, possa comunque confondere le idee, soprattutto se l'utente sta facendo una ricerca sul sito; è frustante che si ritrovi in pagine già visitate, dopo non avere trovato quello che cerca.

Dato che sempre di link si tratta, faccio questa breve disgressione: ho deciso di aggiungere agli URL esterni al sito, un'icona per indicarli, ho utilizzato questo semplice plugin, SEM Exteral Links che trovo utile.
Nonostante il plugin non sia aggiornato da tempo, il suo dovere lo svolge bene.

Ma; ho trovato su obstance.com questo bellissimo codice in CSS, pochi caratteri, 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.

• Anche questo codice, semplice ed efficace su codepen.io aggiunge un'icona ai link esterni.

Oppure, può essere una soluzione, cambiare colore dei link esterni al sito:

a[rel~=noopener]{color:green}

Quando nel collegamento ipertestuale viene trovato l'attributo noopener il colore viene cambiato come specificato nel codice, nell'esempio sopra, verde.

Ai link che contengono l'attributo rel="noopener" solitamente associato a target="_blank" per i link esterni al sito.

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 intend aiutare l'utente nella navigazione del sito, mentre l'istruzione a:active è ulteriormente facoltativa, potrebbe cambiare colore del link quando si fa clic.

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 (< esempio di link con bordo inferiore), e la sottolineatura si è comunque ottenuta, se preferisci questa opzione.

Tuttavia, ultimamente la sottolineatura l'ho rivalutata, e debbo ammettere che non mi dispiace affatto.
Molto spesso le soluzioni più semplici, sulla lunga distanza risultano le migliori.

Questo bellissimo articolo su css-tricks mostra esempi efficaci di sottolineatura: Styling Underlines on the Web.

Sottolineatura: pro e contro

• La sottolineatura del link, è praticamente nata insieme al web; un'opzione che si usava molto con le macchine da scrivere, dove non era facile come oggi sul PC evidenziare con grassetto, corsivo, e altre soluzioni oggi scontate.

• Tanto testo sottolineato, non facilita la lettura, tende a diventare ridondante, distrae.

Sottolineatura nel corpo del post

Preferisco usare la sottolineatura solo nel contenuto del post.

Anche perché in questo caso, i link sono preceduti da caratteri come questi:
> < » •
che in qualche modo fanno capire, così mi auguro, che si tratti di collegamenti ipertestuali.

User Experience (UX)

Non tutte le persone che usano internet, e dispositivi per collegarsi, sono così sgamate come quelle più giovani, che con internet ci sono cresciute, e per loro è normale comprendere al volo aspetti che non tutti capiscono subito, durante la navigazione sul web.

La sottolineatura aiuta chiunque, giovani e meno giovani, sgamati e meno sgamati, a comprendere che il testo sottolineato è un link.

• Le persone daltoniche, percepiscono i colori in maniera diversa; in queste immagini, si comprende come la sottolineatura del link sia visibile anche senza la presenza del colore.

Guarda sul Corriere.it Ecco come appare il mondo a chi è daltonico.

1) Assegnare ai link un colore diverso dal testo, è una cosa basilare, anche se molti web designer non se ne preoccupano; questo potrebbe creare problemi a persone con particolari esigenze visive, e se la tecnologia serve a qualcosa, sarebbe bene che un sito fosse accessibile al maggior numero di persone.

2) La sottolineatura, non appiccicata ma con l'aiuto del CSS, rende ulteriormente chiaro il link, che si deve capire che si tratta di un collegamento ipertestuale.

Link test

• Ho presto spunto da questo articolo: Designing the Perfect Hyperlink — It's Not as Simple as You Think, presente su webfx.com e più precisamente dal paragrafo A Simple Way to Test Your Hyperlink Design, per comprendere come i link del mio sito possano essere usabili.

In queste immagini, nella prima il testo è tale e quale salvato con uno screenshot.

Immagine testo con link evidenziato
Link evidenziato nel testo

Mentre in questo caso, ho applicato prima la desaturazione all'immagine, e poi un filtro controllo sfocatura:

Testo sfocato
Nonostante il testo sia sfocato, il link lo si vede ancora

In questo caso, ho aggiunto una sfocatura gaussiana all'immagine:

Test link sfocatura gaussiana
Sfocatura gaussiana, i link restano comunque visibili in quanto sottolineati

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 collegamento è già stato visitato, quindi si evita di ritornare, magari non volendo, alla stessa pagina già visitata in precedenza.

Evidenziare il testo

Quando invece intendi solo evidenziare del testo, puoi usare il grassetto (<strong>) o il corsivo (<em>); la sottolineatura in questo caso potrebbe far pensare che si tratti di un link, quando invece non lo è.

Molto spesso, sempre purtroppo, 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 intendi offrire una navigazione semplice e intuitiva, una buona user experience, come dicono quelli veri.

Avere link che non si distinguono dal 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, anche perché sui dispositivi mobili, largamente utilizzati, il mouse hover praticamente non si nota.

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; ma sui dispositivi mobili?

Non assegnare un colore diverso ai link visitati; probabilmente questo aspetto è legato al fatto di voler insistere nel mantenere l'utente sul proprio sito il più a lungo possibile; è una tattica che non mi piace.

Link in grassetto

• Un link può anche essere segnalato utilizzando il grassetto, a me non piace questa soluzione, a meno che voglia dare particolare risalto a determinate categorie, o articoli, purché non venga utilizzato nel mouse over, in quanto andrebbe a falsare la corretta formattazione del paragrafo, aumentando le dimensioni del layout.

Corretta formattazione del testo sul web per leggere bene
Per leggere bene sul web servono diversi paragrafi, intestazione, sottotitoli, indice dei contenuti, spaziatura nel testo e nell'interlinea.

 

Felice Amadeo - af1.it
Dal 2006 lavoro con internet, scrivo i contenuti e provvedo alla gestione del sito. Ho conosciuto WordPress tanti anni fa, e dal 2013 uso questo.
Invecchiando, ho scoperto che mi piace portare il cappello.