Una guida per la corretta formattazione dei link di testo, evitando soluzioni poco usabili.
I collegamenti testuali di una pagina sono un elemento basilare; capita spesso però che vengano sottovalutati dagli sviluppatori, dando per scontato la loro riconoscibilità.
Per avere dei link usabili in realtà basta seguire alcune semplici convenzioni: implementarle non richiede molto tempo, ma i vantaggi per i vostri utenti saranno evidenti.
Le convenzioni da seguire
In certi casi il rischio di confondere chi visita la pagina è alto: quante volte vi è capitato di provare a cliccare su un testo che in realtà non era un collegamento? Per evitare questi problemi, bisogna tenere presenti alcuni parametri:
- Colore – Uno dei fattori principali per distinguere un link dal resto della pagina è il suo colore, differente da quello del contenuto. Attenzione però, perchè il colore da solo non è sufficiente: pensate ai problemi che potrebbe incontrare un utente daltonico.
- Stile – Ci sono numerosi stili a disposizione, dalla sottolineatura al grassetto, passando per il tipo di font utilizzato. L’importante è che venga usato uno stile differente dal resto della pagina: la pratica comune vede i link sottolineati, ed è bene seguire questa convenzione.
- Contrasto – Un link deve essere in evidenza, e non deve essere difficile da identificare. Cambiare il colore non basta, il contrasto deve essere elevato.
- Comportamento – Tra le convenzioni più diffuse c’è quella del cambio di cursore al mouseover. Vedere il puntatore trasformarsi in una mano è indispensabile.
Tenendo presenti questi fattori, è possibile ottenere molteplici combinazioni usabili. Sperimentare è lecito, ma ricordate che innervosire i vostri utenti con dei link non riconoscibili, o ancora peggio dei testi normali che sembrano collegamenti, potrebbe causare la loro fuga. Non aspettatevi di ricevere segnalazioni nel caso ci siano problemi di questo tipo, il visitatore medio lascerà il vostro sito innervosito senza concedervi altre possibilità.
Qual è la pratica migliore?
Di default i collegamenti hanno la sottolineatura con text-decoration: underline, ed un colore blu facilmente riconoscibile.
Personalizzando questa impostazione, tenete presente che la sottolineatura è tuttora la pratica migliore e più diffusa. Se però non vi piace il risultato finale, potreste considerare di utilizzare un border-bottom al suo posto, come viene fatto su A List Apart. Il risultato può essere ulteriormente migliorato con 1 pixel di padding-bottom:
Un’altra pratica piuttosto diffusa, che utilizzavo su questo sito qualche tempo fa, sono i link in grassetto, senza sottolineatura. Il problema è che la distinguibilità dei collegamenti in questo caso dipende molto dal colore. Un esempio chiaro si ha su TechCrunch: guardando la pagina in bianco e nero grazie a GrayBit, i link non sono così evidenti come quelli sottolineati:
Ovviamente le varianti possibili sono infinite, l’importante è essere sempre consapevoli di quello che si sta facendo.
Ricordate comunque che in certi casi l’originalità può essere messa da parte e riservata ad altri dettagli: dei link usabili e facilmente riconoscibili sono indispensabili per garantire ai vostri utenti la migliore esperienza di navigazione possibile.
Pur condividendo queste osservazioni, almeno in linea generale, su uno dei miei siti ho adottato la diversa scelta – deliberata – di non porre in grande evidenza i link testuali. Non sono né sottolineati né grassetti; vi è sola una lieve differenza cromatica, (che mi pare più evidente in internet explorer che con gli altri browser).
Le ragioni sono almeno due ragioni.
In primo luogo si tratta di un sito che ospita articoli mediamente di grande lunghezza, e focalizzati sull’aspetto testuale (niente video, poche immagini). Il visitatore cerca e trova dei testi; mi è quindi parso poco sensato “servirglieli” pieni di cambi di colore, cosa che distrae l’attenzione dalla lettura e, anche, infastidisce.
In secondo luogo buona parte dei links – alcuni dei quali automatizzati – riconducono alle principali sezioni del sito (categorie di wordpress); oltre che la funzione loro propria, quindi, di ricondurre il lettore a una destinazione presumibilmente di interesse, svolgono una seconda funzione in chiave SEO.
Ti pare che la soluzione adottata sia accettabile?
@Alberto: secondo me è sempre meglio fare in modo che i collegamenti siano ben evidenti. E’ necessario lasciare all’utente la scelta se seguire i link o continuare a leggere la pagina, nascondendoli non lo aiuti.
Capisco anche il tuo punto di vista in ottica SEO, ma se un collegamento è utile esclusivamente per i motori di ricerca, sei sicuro che sia giusto averlo?
Aggiungendo ai link un border-bottom sorge un problema con le immagini che linkano! è orrendo il bordo sotto le immagini…come posso risolvere il problema?
@Davide: potresti usare una classe .imglink sul link quando c’è un’immagine, e poi sul CSS nascondere il border-bottom in corrispondenza di a.imglink. In alternativa potresti provare con un margine negativo su a img, per nascondere il bordo dietro l’immagine stessa, ma molto probabilmente ci saranno problemi su Internet Explorer.
@Tom: grazie per l’aiuto!
Difatti usando il margin-bottom negativo su IE 6 non funzia….e l’idea di assegnare una classe a ciascun link quando c’è un’immagine non è il max!
noto inoltre che se l’img è trasparente il bordo ovviamente si vede cmq…
Quella della sottolineatura è la cosa migliore, devo iniziare a metterla pure io.
Ottimo articolo :D! Sicuramente la sottolineatura dei link è molto importante e aiuta l’utente a navigare in un sito internet.
Grande post, grazie mille, a volte sottovalutiamo determinati dettagli, anche perchè ci sono browser differenti che visualizzano le rispettive pagine dei siti in forma diversa, dunque bisognerebbe attuare degli accorgimenti come quelli esposti nel tuo post per evitare equivoci. Ciao.
@Davide e Tom
Scusate ma mettere nei fogli di stile in alto a tutto img a{border-bottom: none} non va bene? ^^
@Dady: no, perchè nel codice l’immagine è dentro il tag a, non viceversa.
ciao Tom…
scusa se mi riallaccio ad un post un po’ vecchiotto (ma gli archivi servono a questo, no?! :p )
tra le (importantissime) banalità nella progettazione/realizzazione di pagine web, ai primi posti ci sono sicuramente i link… troppo trascurati quando vengono personalizzati (e pensare che di default sono impostati ottimamente…)
insomma lo trovo un post utilissimo… in questi dettagli a volte si annida la differenza tra una pagina ben progettata/realizzata e una paginaccia… :p
A questo proposito, posso discutere con te il tuo modo di gestire i link?
mi chiedevo a che pro l’utilizzo dei tooltip…
oltre a disturbare al loro apparire (ma questo può essere soggettivo), non trovi che siano quasi sempre e quasi del tutto ridondanti?
nel testo: il link “A List Apart” ha un tooltip che dice “A List Apart http://www.alistapart.com/“, ovvero testo del link ripetuto e url di destinazione…
A che pro? Quale utilità? Cosa aggiunge?
nel main menu il discorso è un po’ differente: ad es. il link “Fotografie” ha un tooltip che dice “Le mie migliori fotografie” mentre nel link “Musica” compare “Le recensioni dei miei album musicali preferiti”, insomma vengo informato sul contenuto che vado ad esplorare… ottimo… meno utile (forse per niente) è l’url che compare sotto questi testi…
Intendiamoci Tom, non sono qui a farti le pulci (che non ne hai affatto bisogno né sarei in grado di farlo io)… è solo per cogliere l’occasione di sentire il parere di uno sviluppatore che stimo a proposito di un espediente che, secondo me, viene quasi sempre usata a sproposito anche se potrebbe avere tanta utilità…
buona giornata
:)
@EsseZeta: non è un problema parlarne, anzi queste discussioni credo siano sempre utili. Per quanto riguarda il testo dei tooltip ti do ragione: hanno senso solo quando il title aggiunge delle informazioni. A questo proposito infatti sto cambiando gradualmente la logica di utilizzo degli stessi, ma capirai che sui post vecchi ormai tutto resterà com’è :)