Come creare un collegamento ipertestuale o link con HTML

Fare un collegamento ipertestuale - non e cosi facile come si pensa!

Collegamenti ipertestuali è una parte indispensabile di qualsiasi sito web. Senza di loro, tutto sarebbe stato diverso, o non sarebbe stato affatto. Utilizzando un semplice elemento HTML è possibile

collegare pagine e siti uno con l'altro. Collegamenti ipertestuali - E 'qualcosa di magico.

Collegamenti ipertestuali - questa e una parte fondamentale del web. Ci sono dappertutto. Forse questo e il motivo per cui molti proprietari di siti web non attribuiscono molta importanza a loro.
Il design del <a> di HTML e cruciale per lettura dell'utente, dobbiamo prendere il tempo necessario per progettarlo bene.

Sto per condividere con voi alcuni suggerimenti per la progettazione di collegamenti ipertestuali che darano una maggiore accessibilita del web, e forse anche porterano a miglioramento del posizionamento nei motori di ricerca.

I collegamenti dovrebbero apparire come collegamenti

Tutti i collegamenti ipertestuali devono portare ai tuoi lettori un messaggio chiaro: "ho parlato di questo. Clicca su di me."

Secondo alcuni studi, un  utente prende per il link, il testo blu sottolineato.

Penso che molte persone sono diventati cosi abituati a questo standard che non dovremmo allontanarsii molto da questa abbitudine.
Esempi di collegamenti ipertestuali.

Qui di seguito troverete tre diversi esempi di collegamenti ipertestuali. Essi sono tratti da una serie di portali popolari di notizie .

0357-02 hyperlink design bad theguardian0357-03 hyperlink design better bbc

0357-04 hyperlink design good nytimes

A prima vista, ognuno di questi esempi sono buoni. Sono tutte di colore blu e ben separate dal testo principale.

Allora perche i link dal sito del New York Times sembrano migliori rispetto agli altri?

Permetetemi che vi spiego.

Un modo semplice per testare il collegamento ipertestuale del tuo design

Lascia che ti mostri un metodo semplice per verificare se i collegamenti ipertestuali si distinguono chiaramente fuori dal suo ambiente.

Se rendere il testo e le immagini in bianco e nero e aggiungere una sfocatura, si avra la possibilita di sentirsi come una persona con disabilita, che si tratti di una visione o l'incapacita di distinguere i colori.

Come e possibile effettuare questa operazione:

Prendere uno screenshot e modificarlo in Photoshop

     Immagine> Regolazioni> Togli saturazione
     E poi Filtro> Sfocatura> Controllo sfocatura

Ora, diamo uno sguardo al nostro riferimento sperimentale.

Ecco The Guardian e, si puo vedere che il collegamento ipertestuale e difficile da individuare:

0357-05 hyperlink blurred desaturated theguardian

BBC usa il testo in grassetto, quindi se si tenta, e possibile distinguerlo tra il resto del testo.

0357-06 hyperlink blurred desaturated bbc

Nel New York Times trovare link e il piu semplice.

0357-07 hyperlink blurred desaturated nytimes

Sottolineare i link

Ecco dove si trova un piccolo problemma.

Alcuni studi dimostrano che la sottolineatura riduce la leggibilita del testo. Si dice che "si riduce in modo significativo l'usabilita delle pagine web." Cosi i ricercatori dicono che "anche le alternative dovrebbero essere attentamente valutate." Sperano che la nostra attuale percezione dei legami nel tempo cambiera.

Il motivo principale , e quello che certi caratteri - come p, g, j, q. che escono al di sotto della riga  vengono copriti dalla sottolineatura, che riduce la loro leggibilita. Queste lettere sono particolarmente influenzati dal tale effetto, se applichiamo al text-decoration: underline.

Ecco un esempio di un link standard in Google Chrome (versione 28):

0357-08 default hyperlink

Quale soluzione ci puo essere?

Possiamo da soli diminuire questo effeto. Non dobbiamo aspettare fino a quando i creatori del browser cambiano lo stile di default dei link.

Come e possibile? Siamo in grado di utilizzare la proprieta CSS border-bottom, invece del text-decoration CSS, evidenziando cosi i collegamenti.

Utilizzando la proprieta border-bottom, siamo in grado di spostare sottoliamento di alcuni pixel verso il basso, migliorando in tal modo la leggibilita.

0357-09 default hyperlink borderbottom

Ecco un esempio di codice CSS:

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

A parte la distanza,  siamo anche in grado di controllare lo stile di visualizzazione di sottolineatura migliorando cosi nello stesso tempo diversi indicatori.

Per esempio, si puo ridurre lo spessore della linea e lavorare sul colore per rendere il collegamento piu piacevole.

Nel mio esempio, ho appena cambiato il colore della sottolineatura. Lo fatto piu leggero:0357-10 default hyperlink different color

CSS:

a {
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 1px solid #8d8df3;
}

Fate il testo del link lungo.

Il prossimo argomento di cui voglio parlare riguarda soprattutto le strategie.

Come base di questo approccio, prendiamo la legge di Fitts.

0357-12 fittss law equation

Il trucco di questa legge e semplice. Piu grande e l'oggetto, piu e facile da vedere e fare clic.

Questa affermazione ha un senso quando si tratta di schermi touchscreen.

Puo essere difficile centrare con un dito il link, e spesso si deve aumentare la scala della pagina per farlo.

0357-13 small hyperlink

Per fortuna, siamo in grado di risolvere questo problema modificando stili.

Possiamo fare collegamenti in grassetto, sottolineato, modificare il colore.

Cosa diresti se cambiare le loro dimensioni?

Se vogliamo cambiare la dimensione degli oggetti <a>, poi influenzare il resto del testo. La linea di base viene spostata, causando cosi nuovi problemi.

0357-14 big hyperlink

Quindi l'unica cosa che possiamo fare espandere riferimenti orizzontalmente.

0357-15 longer hyperlink

Collegamenti ipertestuali dovrebbero essere blu?

Secondo una ricerca di Google, sui link blu fanno piu clic che su qualsiasi altro.

Se l'utente vede il testo sottolineato blu, lo accetta subito come riferimento.

Anche se, a mio parere, non tutti i link devono essere di colore blu.

Ci sono esempi in cui i link in blu sono inutili.

Ad esempio, se il colore di sfondo rende i link illeggibile, e proprio il caso quando e necessario sostituire il colore.

0357-11 hyperlink hard to read when blue

Fate il vostro meglio per fare che gli utenti si sentono a proprio agio, anche se per questo dovrete uscire dalla norma.

Fonte lezione: http://sixrevisions.com/usability/hyperlink-design/

 

 

Letto 1540 volte