10 tecniche per migliorare l’interfaccia utente

Articolo originale di Dmitry Fadeyev tradotto e tratto da: Smashing magazine.
Il Web design ha come punto cruciale la progettazione dell’interfaccia utente.
Non mancano di certo manuali e consigli per migliorare il rapporto utente-interfaccia e quindi la user experience ma non sono mai troppi i suggerimenti in questi senso dato che nonostante la vastità del materiale, l’usabilità dei siti web è per molti versi ancora una semi-sconosciuta.
Da smashingmagazine.com vi riporto un breve ma utilissimo decalogo di 10 tecniche che ogni bravo web designer dovrebbe tenera a mente in fase di progettazione.

1. Link attivi come blocco

I links sono elementi normalmente “in linea” il che significa che la loro area cliccabile è compresa tra l’altezza e la larghezza del testo.
L’ area cliccabile può essere ingrandita aumentando di conseguenza l’usabilità del link.
Questo è possibile aggiungendo “padding” al link e in alcuni casi convertendo il link in un elemento blocco (block).
Grazie a questa seconda tecnica l’area cliccabile del link sarà pari alla larghezza del suo contenitore (se non diversamente specificata). L’impiego ideale sono in genere i links posizionati all’ingerno di una sidecar.
Di seguito il codice di esempio:

a {
	display: block;
	padding: 6px;
}

Assicurarsi anche di aggiungere un certo pudding ai link, perché la conversione in blocco ha effetti esclusivamente sulla larghezza. Aggiungendo il pudding ci si assicura un certo “respiro” intorno al link.

2. Composizione dei bottoni

L’attenzione ad ogni dettaglio è ciò che distingue un ottimo prodotto da un mediocre. Elementi dell’interfaccia come i bottoni e i tabs sono tra i più cliccati quotidianamente dagli utenti è quindi importante comporli correttamente e per comporre intendiamo il posizionamento del testo all’interno del bottone. Ecco alcuni esempi di bottoni mal composti che spesso si vedono:

A prima occhiata entrambi appaiono buoni, ma andando nel dettaglio notate che il testo è posizionato troppo in alto questo perché le lettere minuscole sono state utilizzate come guida per allineare verticalmente il testo al centro, come in questo caso:

Allo stesso modo, se noi usiamo le lettere maiuscole così come le lettere minuscole ascendenti (t, d, f, h, k, l) il bilanciamento slitterebbe verso l’alto, facendo apparire il testo troppo alto sul bottone.
In questi casi, noi dovremmo posizionare il testo usando le lettere maiuscole come guida o incrementare la loro altezza nel caso in cui la maggioranza delle lettere sono minuscole. Ecco un esempio:

Questo da all’intero bottone un’apparenza più bilanciata. Piccoli ritocchi come questo vanno nella direzione della progettazione di un’interfaccia pulita e soddisfacente da usare.

3. Uso del contrasto per gestire il fuoco

E’ possibile gestire il fuoco di attenzione dei vostri visitatori utilizzanto il contrasto tra gli elementi.
Di seguito un esempio di un titolo e alcune informazioni sotto circa l’autore e la data di pubblicazione.

L’intero testo è impostato su nero. Proviamo a cambiare il contrasto delle informazioni sotto il titolo (autore e data), impostiamo il testo in grigio chiaro:

Come vedete l’elemento con alto contrasto risulta il titolo che letteralmente ci salta agli occhi mentre gli altri elementi sono sfumati sullo sfondo.
In questo caso è stato scelto l’autore come secondo elemento più importante mentre la data è l’ultimo in ordine di contrasto.
Anche il carattere fa la sua parte, tramite la grandezza del corpo e lo stile.
Da questo esempio si evince l’efficacia che ha la differenza di contrasto sulla percezione visiva e sul fuoco d’attenzione dell’utente.

4.Usare il colore per gestire l’attenzione

Il colore può essere anche usato per indirizzare l’attenzione dei visitatori su gli elementi importanti di una pagina.
Per esempio, durante le elezioni presidenziali in America, la maggiorparte dei siti web dei candidati aveva il botton “Donazione” colorato in rosso.
Il rosso è un colore molto luminoso e potente e quindi tende ad attirare lo sguardo.
Un’altra tecnica utilizzate è quella di opporre colori caldi a colori freddi come il blu e il verde.
Nell’esempio sotto riportato il bottone arancione sullo sfondo blu sembra che venga fuori risaltando come se fosse in prima linea.
Al contrario , un bottone blu su uno sfondo arancione contrare verso l’interno spingendo lo sguardo verso lo sfondo.

Di seguito alcuni esempi di siti web che usano colori in modo efficace per dirottare l’attenzione degli utenti sugli elementi importanti:
In questo caso la scritta “We’re Hiring” in alto a sinistra  è stata evidenziata dal designer impostando la
scritta in bianco su un box rosso che salta fuori dalla sfondo scuro e cattura l’attenzione.

In questo altro sito web l’uso dei colori è molto efficace.
Quattro elementi saltano all’occhio grazie ad un viola luminoso: il logo, il link “feedback”, il bottone “donate” e il messaggio di descrizione del sito.

5. Lo spazio bianco indica le relazioni

Uno dei più cruciali elementi in un’interfaccia è lo spazio bianco tra gli elementi.
Se non avete familiarità con il termine “spazio bianco”, questo significa in parole semplici: lo  spazio tra un elemento dell’interfaccia ed un altro, sia esso un bottona, un menu di navigazione,  un’intestazione e così via. Manipolando lo spazio bianco, possiamo indicare relazioni tra certi elementi o gruppi di elementi.

Quindi, per esempio, mettendo l’intestazione vicino un articolo noi indichiamo che questa è legata a
quel testo. Ecco un esempio di come il spazio bianco può essere migliorato:

Il testo risulta certamente leggibile, ma gli spazi sopra e sotto ogni intestazione sono uguali, essi non
separano ogni pezzo chiaramente. Possiamo migliorare la leggibilità incrementando lo spazio bianco tra ogni sezione a anche restringendo un pò l’interlinea dei paragrafi.

Il risultato sono blocchi definiti molto più chiaramente; adesso è facile dire quale intestazione va con quale porzione di testo e si possono distinguere chiaramente le sezioni.

6. Spazio tra lettere

Se utilizzato moderatamente e con gusto, questa proprietà può essere efficace nel miglioramento dello stile dei titoli.
In genere è sconsigliato utilizzare lo spazio tra le lettere nel corpo del testo in quanto quello utilizzato normalmente fornisce una leggibilità ottimale specie nei font più piccoli.

Di seguito un esempio di spazio tra lettere:

Ed ecco il relativo codice CSS per gli esempio di sopra:

h1 {
       font-family: Helvetica;
       font-size: 27px;
 }  

 h2 {
         font-family: Helvetica;
         font-size: 27px;
         letter-spacing: -1px;
 }  

 h3 {
         font-family: Georgia;
         font-size: 24px;
         letter-spacing: 3px;
         font-variant: small-caps;
         font-weight: normal;
}

L’effetto può essere utile quando si vuole realizzare un’intestazione esteticamente eleborata o originale.

7. Auto-focus sui moduli input

Molte applicazioni web e siti web utilizzano i moduli (forms) spesos si tratta di moduli di ricerca o di testo che richiedono l’inserimento di dati.
Se il form rappresenta il cuore dell’applicazione o del sito web sarebbe interessante considerare il “fuoco” automatico del modulo quando la pagina carica un pò come accade su siti come Google o Wikipedia.
Questa tecnica permette di velocizzare il funzionamento del sito consentendo agli utente di digitare subito ciò che vogliono cercare senza il bisogno di cliccare sul modulo.

Affinchè i campi di testo siano automaticamente attivi avremo bisogno di un pò di Javascript.
Ci sono diverse soluzioni, e scieglierne una o l’altra dipende dalla funzionalità che vogliamo ottenere.
Il modo più semplice per avere il nostro risultato è aggiungendo il seguente codice al tag body:

 <body onLoad="document.forms.form_name.form_field.focus()">

In questo caso il codice del form potrebbe essere questo:

    <form method="get" name="form_name" action="#">
       <input type="text" name="form_field" size="20" />
      <input type="submit" value="Go" />
    </form>

Ogni volta che la pagina carica, il campo di testo chiamato “form_field” sarà automaticamente selezionato e pronto per l’inserimento.

L’unico problema di questa tecnica è che se gli utenti vogliono tornare alla pagina precedente usando il tasto “Backspace” avranno qualche difficoltà perchè in realtà staranno cancellando caratteri nel campo di testo.

Un’altra soluzione Javascript che elimina questo problema è quella di Harmen Janssen che aggiunge un controllo allo script che consente di utilizzare normalmente il tasto “Backspace” quando nessun carattere è presente nel modulo di testo. Potete trovare lo script in questa pagina.

8. Personalizzazione dei moduli

Mentre il look standard dei moduli è sufficiente per molte funzioni, a volte vogliamo qualcosa di più particolare o che sia visualizzato in modo simile nei vari browser.
Possiamo fornire uno stile ai campi di testo semplicemente utilizzando “id”, “class”, o gestendo il tag “input” da CSS come di seguito:

    input {
        border: 2px solid #888;
        padding: 4px;
        font-size: 1em;
        background-color: #F8F8F8;
    }  

Ciò che è più interessante è la possibilità di personalizzare il campo di testo quando esso è attivo.
Per fare questo, abbiamo bisogno di aggiungere “:focus” dopo la proprietà “input”:

 input:focus {
     border-color: #000;
     background-color: #FFFE9D;
 }

Se si utilizzano sfondi personalizzati per un campo di testo, questi potrebbero “scontarsi” con le impostaszioni di default di alcuni browser e sistemi operativi. In questo esempio uno screenshot di un modulo personalizzato che entra inconflitto con il classico effetto illuminazione blue dei sistemi OS X:

In tali casi, è possibile utilizzare la proprietà “input:focus” per rimuovere lo stile di default come in questo codice in cui l’effetto illuminazione blue è stato rimosso disabilitando la proprietà “outline”:

Ovviamente l’azione di rimuovere il contorno avviene se questa deve essere sostituita da un proprio stile, in questo modo non si ha un impatto negativo sull’accessibilità e usabilità dei moduli.

9. Controlli mouse hover

Alcune applicazioni web contengono delle utilità costituite da bottoni di controllo, ad esempio di modifica o rimozione, che non necessariamente devono essere mostrati. Questi infatti vengono spesso nascosti per semplificare l’interfaccia e non disperdere l’attenzione dei visitatori dai contenuti principali.
Di seguito un esempio di controlli hover utilizzati nella barra dei messaggi in Twitter :

Questi controlli hover possono essere realizzati con un semplice codice CSS, senza l’utilizzo di Javascript.
Semplicemente intervenendo sullo stile del <div> quando questo è nello stato di hover cioè quando il mouse è posizionato su di esso.
Ecco il codice per nascondere e mostrare i controlli (usando un <div> con la classe “controls” all’interno di un <div> con la classe “messagge”:

    .message .controls { display: none; }
    .message:hover .controls { display: block; }

Quando il mouse si posizionare sopra il <div>con classe “message”, il <div> con classe “controls” al suo interno apparirà insieme al suo contenuto come appare dalla screenshot di Twitter sopra.
Potrebbero esserci problemi di accessibilità con i lettori di schermo per non vedenti che potrebbero non essere in grado di leggere i <div> nascosti. Ci sono tanti altri modi per nascondere un <div>, come ad esempio spostarlo oltre il margine della pagina associando un margine negativo (es. left-margin:-9999px) o colorare ol testo dello stesso colore dello sfondo o sovrapponendo un altro <div> sopra etc…
Tutte queste tecniche ovviamente devono essere utilizzate limitatamente allo scopo di nascondere o mostrare alcuni controlli al fine di aumentare la pulizia della propria interfaccia.

10. Utilizzo dei verbi nelle fineste di dialogo

E’ possibile creare finestre di dialogo più usabili pensando bene al testo da utlizzare nei bottoni e nei link delle finestre stesse.
All’interno di un classico popup che ci mostra un messaggio di errore le opzioni disponibili sono “Si” , “No” o “Cancella”, per rispondere al quesito e sapere su quale bottone cliccare saremo costretti a leggere l’intero messaggio. Sembra normale, no?

Esiste un modo per velocizzare questa scelta utilizzando i verbi all’interno dei bottoni. Quindi in questo caso al posto di “Si”, “No” e “Cancella”, utilizzeremo “Salvare”, “Non Salvare” e “Cancella” che sono talmente autoesplicativi da non rendere necessaria la lettura del messaggio d’errore. Tutte le informazioni sono contenute già all’interno dei bottoni e grazie a queste siamo in grado di prendere velocemente una decisione.

Conclusione

Spero che abbiate trovato qualche nuova tecnica che può risultavi utile per il vostro lavoro di design.
Come sempre, l’utilizzo di queste tecniche deve essere “tarato” rispetto alle reali esigenze della vostra interfaccia.
Ogni tecnica ha dei pro e dei contro, se da una parte possono aumentare le opzioni di scelta dall’altra possono aumentare la “curva” di apprendimento da parte degli utenti.
Il consiglio migliore è quello di utilizzarli nel modo adeguato e con equilibrio e soprattutto se esse hanno un senso e danno un valore aggiunto al contesto.

Condividi questo articolo: