Usabile.it

usabilità, accessibilità e interaction-design per il web

home » Articoli » L'usabilità dei link

28/07/2001

L'usabilità dei link

[di Maurizio Boscarol]

Sebbene l'intero sistema-web si basi sull'ipertesto, e quindi sul link, non è tuttavia scontato usare i link appropriatamente. Forniremo qui una rassegna di base, proveniente da una varietà di fonti, di linee guida su come migliorare la qualità dei vostri link, senza alcuna pretesa di esaurire l'argomento. Alcuni indirizzi utili per approfondirlo sono disponibili in fondo all'articolo.
Altre considerazioni sui link intesi come strumenti di navigazione primari (barre di navigazione, menu) le rimandiamo invece ad un prossimo articolo.

Riassumiamo brevemente i requisiti principali dei link: sono soprattutto legati alla loro riconoscibilità e alla loro capacità di far anticipare all'utente in maniera corretta dove porteranno.
Vi sono poi dettagli tecnici che attengono alla buona manutenzione del sito: è necessario che non vi siano link interrotti o errati.
Le soluzioni purtroppo non sono buone per tutte le esigenze. Tuttavia, come sempre, capire il principio che sottende ad una linea guida aiuta a scegliere se questa fa al proprio caso, perché, e perché eventualmente no.

Linee guida per i link

1.
I link migliori sono quelli testuali. In alcune ricerche è stata segnalata una preferenza degli utenti per i link di testo. Solo dopo averli esplorati, vengono prese in considerazione le immagini. Ricordate che le immagini spesso non sono esplicite nel comunicare il link, e sarebbe preferibile accompagnarle comunque con una definizione testuale, come nella citatissima barra di menu di Yahoo.

2.
E' bene usare sempre la sottolineatura per i link testuali. Si tratta di una convenzione che si è imposta e che elicita automaticamente le aspettative e il comportamento dell'utente.
Ora con i CSS (fogli di stile) è possibile eliminare le sottolineature. Le nuove possibilità sono sempre stimolanti, ma comportano anche una maggior responsabilità e, spesso, un maggior carico cognitivo per l'utente, che deve capire e verificare se le parole colorate ma non sottolineate siano dei link.
L'importante comunque è che non vi siano ambiguità: nel caso di una barra di menu, ad esempio, l'organizzazione spaziale dei link rimanda altrettanto direttamente alla funzione. In quei casi è probabile che la sottolineatura non sia necessaria. La cosa migliore per questa e ogni altra scelta che non sia del tutto convenzionale, però, è testare le reazioni degli utenti.

3.
Per non creare confusione, non usate la sottolineatura in nessun altro caso (per evidenziare il testo potete usare il grassetto). Altrimenti l'utente potrebbe credere che la parola sottolineata, a dispetto magari del colore, sia un link.

4.
Sul colore dei link vi sono posizioni integraliste come quelle di Nielsen, secondo il quale il blu è la soluzione corretta perché convenzionale. Altre evidenze confermano che né il colore né l'assenza di sottolineatura impediscono in casi specifici l'identificazione del link. Rimane da stabilire quale sia il costo in termini di carico cognitivo per l'utente, soprattutto quello inesperto, dell'uso di un colore non convenzionale. Noi di Usabile abbiamo fatto una scelta precisa, che ci ha attirato anche qualche critica. La cosa migliore è comunque testare direttamente con gli utenti. In ogni caso, i link devono differenziarsi in maniera netta dal testo.

5.
Usate due colori differenti per i link e i link visitati ('link' e 'vlink'). Una buona scelta è quella di usare, per i link visitati, un colore simile a quello dei link, ma meno brillante. In questa maniera avranno maggior rilevanza visiva i link non visitati. Segnalare con un diverso colore i link già visitati è considerato un forte aiuto alla navigazione.

6.
Non disponete il link testuale su due righe: l'utente potrebbe pensare che si tratta di due link diversi.
Es. (i link non sono funzionanti):

Errato:
In questo sito potrai leggere il quarto canto della
Divina Commedia di Dante Alighieri, gratis!

Nel caso qui sopra vi possono essere interpretazioni ambigue: c'è un unico link al quarto canto, oppure nella prima riga linkiamo al quarto canto, e nella seconda permettiamo di accedere all'intera Divina Commedia? L'esempio seguente è invece univoco:

Corretto:
In questo sito potrai leggere il quarto canto della Divina Commedia di Dante Alighieri, gratis!

7.
Linkate poche parole ma significative. Evitare sia il "clicca qui", perché non dà indicazioni sulla destinazione, sia il link con frasi lunghe.
Es. (i link non sono funzionanti):

Errati:
- Per leggere il quarto canto della Divina Commedia clicca qui.
- Leggi il quarto canto della Divina Commedia di Dante.

Corretto:
- Leggi il quarto canto della Divina Commedia di Dante.

Il minimo indispensabile per essere chiari e non invasivi!

8.
In generale, usate per i vostri link un sistema di denominazioni verbali coerente e significativo per l'utente. Le parole che scegliete devono avere senso per l'utente finale e suggerire un modello di organizzazione del sito univoco.

9.
Se potete, fornite contesto ai vostri link usando del testo di spiegazione nelle vicinanze del link. Tale soluzione è preferibile alla scelta di linkare tutta la frase.

10.
Potete usare l'attributo TITLE del tag A per far comparire una breve descrizione relativa al link, che contenga informazioni essenziali: nome del sito/pagina di destinazione, e breve descrizione. Fornite solo le informazioni importanti. Ricordate comunque di essere sintetici: una frase troppo lunga non verrà letta.

11.
Se il link rimanda ad una pagina molto pesante, dal conseguente caricamento lento, è bene anticiparlo all'utente.

Corretto:
Se hai il plugin guarda l'intro in Flash di Usabile.it! (824 KB)
(Specifichiamo che non esiste alcuna intro in Flash di Usabile.it!)

12.
Se il link rimanda ad un documento di tipo diverso dall'html (.pdf, .zip, ecc.), è bene specificarlo, in maniera che l'utente non si trovi disorientato dall'apertura improvvisa di un reader (ovvero di un programma diverso dal browser, come Acrobat Reader o lo stesso Word, che si apre all'interno della finestra del browser, con grosso dispendio di risorse per il computer).
Questa accortezza andrebbe seguita da tutti i siti di pubbliche amministrazioni, che spesso linkano la modulistica da scaricare in un formato particolare (.doc, .rtf, .pdf), senza specificarlo o senza far partire un download automatico.

Es. corretto:
Scarica il bando di concorso (formato .pdf, 167 KB)

13.
Non usare link interni alla stessa pagina (attraverso l'utilizzo di ancore...): l'utente ne rimane disorientato, perché la regola è quella che i link rimandino ad altre pagine. L'utente potrebbe non rendersi conto di essere rimasto nella stessa pagina, e tentare di tornarvi premendo (inutilmente) il tasto back del browser. Se volete inserire una "tabella dei contenuti" della pagina, è bene dichiararla e accertarvi che si presenti in maniera distinta dagli altri link, evitando confusioni.

14.
Non aprire il link in nuove finestre. In caso contrario, è bene specificarlo in anticipo all'utente.

15.
Non fornite lunghi elenchi di link, ma selezionate solo quelli più rilevanti. Siate, insomma, sintetici anche nella scelta dei link...

16.
Tentate di controllare spesso che i link alle vostre pagine siano attivi (non vi siano link interrotti, o 'broken link'). Nel caso di link a pagine esterne, può essere difficile verificarlo, perché andrebbe fatto di continuo (i siti cui linkate possono cambiare di continuo). Ogni tanto comunque è bene prendersi la briga di verificare la destinazione dei vostri link.

17.
Ovviamente accertatevi anche che i link portino alla pagina corretta! Sbagliare destinazione è più frequente di quanto non si creda.

18.
Il link ha anche una rilevanza visiva che lo distingue dal testo e dagli altri elementi della pagina: tenetene conto nell'organizzare gli equilibri grafici, evitando accatastamenti casuali di link mal allineati, di grandezza difforme e di posizionamento dubbio.
Questo suggerimento ha a che fare naturalmente con la competenza grafica del designer e con le regole di impaginazione che non possiamo qui riassumere.

19.
Chiudiamo infine ricordando uno dei problemi dei link in Flash: non consentono di anticipare l'url di destinazione attraverso la scritta che compare nella barra di stato del browser, in basso a sinistra. A maggior ragione, essi devono essere ancora più chiari ed indicativi dei link in html.


Queste indicazioni non sono quasi mai seguite per intero e univocamente dai siti, nemmeno da quelli che si occupano di usabilità. Conoscerle comunque è d'obbligo, e seguirne almeno una buona percentuale consente senza dubbio di migliorare la qualità dell'esperienza dei vostri utenti.

Nota: In queste linee guida non sono presenti considerazioni problematiche o dal valore non condiviso. Una delle linee guida omesse, ad esempio, consiglia di limitare o eliminare del tutto i link che portano all'esterno del proprio sito. Si tratta di un suggerimento che ha una sua logica, ma che è largamente impraticabile e, tutto sommato, contrario alla filosofia dell'ipertesto. Più sensato e praticabile appare il suggerimento di limitarsi ai soli link importanti: si è scelto dunque di omettere il primo suggerimento in favore del secondo (n.15). Per approfondire: http://webword.com/moving/linkout.htm

Articoli correlati:

torna su Torna su