Menu

af1.it

Scrivo sul mio blog

 

L’importanza di distinguere i link nel testo

7 minuti
aggiornato il
L'importanza di distinguere i link nel testo, anche se in modo molto semplice è importante distinguere il diverso stato dei link nel testo dell'articolo per evitare confusione a chi legge

Link nel testo

L'importanza di distinguere i link nel testo di un articolo migliora l'usabilità del sito facilitando la navigazione dell'utente.
I link hanno un'importanza rilevante nel testo di 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 l'utente si accorga che un link è presente.

Se questo risulta occultato, uguale, anzi identico, al testo che non contiene link alcuno, allora è già difficile distinguerlo, quindi comprendere che c'è. Se un link è presente deve essere evidenziato, altrimenti perché viene inserito ?! Il link deve servire all'utente, poi, dopo, anche ai motori di ricerca.

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

Non trovo sia utile lasciarsi confondere o influenzare da più o meno sofisticate prerogative stilistiche, è molto meglio che il layout sia semplice da interpretare, ed un link si deve vedere subito, subito si deve capire che è un link.

Per confermare all'utente il fatto che la stringa di testo che ha presupposto si tratti di un link, è davvero un link, è bene che al passaggio del mouse sopra il testo del link (mouse over), questo assuma un colore differente che, senza necessariamente essere sgargiante faccia comprendere di essere ciò che effettivamente è.

I CSS del resto offrono una soluzione facile e veloce per personalizzare i links e renderli facilmente comprensibili e ben identificabili:

a:link {color:#0000ff;} /* Link non ancora visitato */
a:hover {color:#ff0000;} /* Link con il mouse over */
a:active {color:#006e24;} /* Link selezionato */
a:visited {color:#800020;} /* Link visitato */

a:link – Stabilisce quale colore assegnare al link non ancora visitato, che però dev'essere ben distinto dal testo senza link;

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

a:active – Questo invece 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 se vogliamo l'istruzione a:active è facoltativa, potrebbe cambiare colore del link quando si fa clic, comunque le altre 3 istruzioni sono più che sufficienti, se ben utilizzate, per evidenziare in modo chiaro e semplice i link (nuova pagina, pagina già visitata).

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;

Utilizzare colori diversi per distinguere i link, non visitati e visitati, è importante per facilitare la navigazione del sito, quindi migliorare l'usabilità. Quando non diversamente specificato nei CSS i link sono sottolineati, ed è un bene che lo siano e non è certo un caso che lo siano di default.

Già dalla sottolineatura di una parola o di una stringa di testo si comprende che, con tutta probabilità, si ha a che fare con un link, quando si passa sopra il cursore del mouse il teso cambia colore e quindi si ha la conferma che sia un collegamento ipertestuale.

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, 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.

In una semplice pagina HTML senza formattazione CSS alcuna, il link assume il colore blu ed è sottolineato, e quando è stato visitato un colore viola: semplice, si comprende facilmente quando e dove è presente un link, che non ha mai lo stesso colore del testo dove non sono presenti collegamenti ipertestuali, e il colore viola indica chiaramente che quel link è già stato visitato.

Cosa fare per distinguere i link dal resto del testo

● Il colore del testo di un articolo, a maggior ragione se presente molto testo, trova nel nero il suo colore ideale, testo nero su sfondo bianco, o comunque chiaro; perché si vede e risalta bene, senza essere stressante ed affaticare la vista, che viene messa a dura prova leggendo su internet.

● Il link è bene sia sottolineato e di colore diverso dal testo, per non creare inutile confusione; un colore che risalti ma senza essere inutilmente sgargiante e fastidioso. Il link si deve distinguere, ma non deve a tutti i costi dire: fai clic, fai clic !!!

Importante è far sapere all'utente che quella specifica stringa di testo è un link, poi se vuole seguirlo ci pensa da se.

● A meno che il link non sia presente nel menù, quindi ben comprensibile che si tratta dell'elenco dei link per navigare nel sito, la sottolineatura di un link nell'articolo è importante, facilita ulteriormente la comprensione all'utente, che come sappiamo, impiega pochissimo tempo a valutare il sito e decidere se rimanere o andarsene.

Se il link è comunque facilmente visibile, la sottolineatura può comparire al passaggio del mouse.

● Viceversa, come già citato ma è bene ricordare, meglio evitare di sottolineare una parola o stringa di testo che non contiene link; occorre segnalare un link per far sì che l'utente comprenda che si tratti di un collegamento ipertestuale, e che il testo sia solo testo; i link non devono assomigliare al testo senza link, ed il testo non deve assomigliare ai link.

● Quando il link è stato visitato, bene sia di un colore diverso, di modo che non sia possibile per l'utente confondersi e visitare una pagina già visitata.

● Un link ben visibile risulta facilmente leggibile ed assume maggiore importanza per l'utente e maggiore probabilità di clic.

Quando i link sono segnalati in modo semplice e chiaro dal testo che non ne contiene, la navigazione diventa subito intuitiva.

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 che ne contiene; 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.

Ancora molti siti utilizzano, quasi certamente per mantenere con una certa rigidità 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.

Quando in una home page sono presenti paragrafi degli ultimi articoli inseriti, con titolo, è piuttosto semplice intuire che, con tutta probabilità il titolo sarà il link che porta alla pagina dell'articolo, anche se non ha particolari effetti grafici al mouse over; oltretutto un paragrafo con titolo mostra sovente, in basso a destra, il link che porta alla pagina del paragrafo in oggetto, scritte tipo: Read more, Leggi “titolo dell'articolo”, Leggi tutto, etc. Mentre i link presenti nel testo sono da evidenziare.

● Non assegnare un colore diverso ai link visitati. Incomprensibile. L'utente deve ricordare facilmente che quella specifica pagina l'ha già visitata.

● Un link può anche essere segnalato utilizzando il grassetto, purché non venga utilizzato nel mouse over, in quanto andrebbe a falsare la corretta formattazione del paragrafo.

 

                 

 

Felice Amadeo: autore di af1.it

af1.it è mantenuto dalla mia passione.
Se vuoi sostenere af1.it fai una donazione.

Se qualche articolo ti è piaciuto e vuoi fare una donazione, ti ringrazio.

Tanti anni fa, quando c'erano ancora le lire, un bravo artista di strada, terminata la sua esibizione di giocoliere disse alla folla intorno: se il mio spettacolo vi è piaciuto, dimostratemelo, se non vi è piaciuto scrivetelo su “un deca…”

(un deca, le vecchie 10.000 lire…)
So smile & stay in touch !!!

af1.it usa cookie tecnici anche di terzi per le statistiche visite e per annunci pubblicitari.
Per sapere come negare il consenso leggi l'informativa estesa.
Cliccando su Va bene, scorrendo la pagina o continuando la navigazione acconsenti all'uso dei cookie.
Leggi informativa estesa

Questo sito utilizza i cookie per fonire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o clicchi su "Accetta" permetti al loro utilizzo.

Chiudi