Best practice per 6 elementi comuni dell'interfaccia utente
L' aspetto e l'usabilità di alcuni elementi dell'interfaccia e funzionalità sono cruciali per il successo di qualsiasi sito Web nel mercato di oggi.
Gli studi hanno dimostrato che anche un ritardo di un secondo nel pensare la parte dell'utente indebolirebbe la loro percezione e interesse in un sito web e in definitiva abbasserebbe il tasso di conversione del sito web.
In alcune nicchie e industrie, avere elementi dell'interfaccia utente che non sono evidenti nel loro utilizzo può essere perfettamente accettabile. Il settore dei blog e dello sviluppo web sono esempi perfetti.
Ma quando progettiamo interfacce utente per un pubblico non esperto di tecnologia, che di solito è il caso del lavoro del cliente, dobbiamo assicurarci che alcuni elementi dell'interfaccia utente non si allontanino troppo da ciò a cui gli utenti sono abituati.
Questo articolo discute alcune best practice e caratteristiche di usabilità di sei elementi dell'interfaccia utente e le convenzioni per ciascuno, in modo che gli sviluppatori possano creare esperienze utente che siano allo stesso tempo belle e semplici.
1. Aspetto della casella di ricerca
Su siti web ricchi di informazioni o prodotti pesanti, la ricerca è il re. Gli utenti qui in genere rinunciano alle barre di navigazione convenzionali a favore della casella di ricerca.
Una casella di ricerca che non è immediatamente visibile avrà uno di questi due effetti: 1) l'utente non assumerà alcuna funzionalità di ricerca disponibile, oppure 2) l'utente troverà la funzionalità di ricerca dopo un periodo di ritardo, e forse irritante.
Assicurati che la casella di ricerca sul tuo sito web sia facile da vedere. Sfondi scuri e grafica stravagante possono compromettere l'usabilità , quindi è meglio mantenerlo bianco o grigio chiaro. Inoltre, assicurati che la casella di ricerca sia abbastanza grande rispetto ad altri elementi importanti della pagina, mantenendo così la sua posizione nella gerarchia visiva.
La casella di ricerca su Dominio per IP si adatta bene al tema visivo del sito web, essendo arancione e graficamente coerente con l'ambiente circostante. Ma se una casella di ricerca su un sito web più frequentato avesse ricevuto questo trattamento, sarebbe probabilmente difficile da individuare.
Il design non è un ostacolo al dominio tramite IP perché il sito web ha una funzione: ricerca, che si trova proprio al centro della pagina. Inoltre, essendo in una nicchia tecnologica, i suoi sviluppatori hanno meno di un incentivo ad aderire alla convenzione. Ma questo livello di creatività dovrebbe essere evitato su siti web più grandi , il cui pubblico di riferimento potrebbe non essere tecnicamente esperto.
Adventure Time , nel frattempo, mantiene la sua casella di ricerca bianca, opportunamente dimensionata e facile da trovare nella pagina:
Nonostante sia in una lingua straniera, Adventure Time ha una casella di ricerca molto chiara, anche per gli utenti di lingua inglese. La dimensione e il colore della scatola sono completati dalla grafica della lente d'ingrandimento, che è diventata il simbolo universale per la ricerca online. Un utente che cerca questa funzionalità non avrà problemi qui.
Questo modello dovrebbe essere seguito in tutti i progetti destinati a una base di utenti diversificata.
Ulteriori letture:
2. Contenuto visibile / espandibile chiaramente contrassegnato
I siti Web beneficiano di pannelli pieghevoli e menu a discesa perché consentono di ottenere layout più puliti e meno ingombranti. Il contenuto nascosto in questi elementi dell'interfaccia può, tuttavia, compromettere l'usabilità di un sito Web se la loro presenza non è chiaramente indicata.
Quando un utente fa clic su un link o un pulsante nudo, si aspettano di essere portati a una nuova pagina. Tuttavia, quando un utente fa clic su un link o un pulsante con un indicatore di contenuto nascosto, si aspetta che il nuovo contenuto venga immediatamente visualizzato (tramite JavaScript o AJAX) e abbia la possibilità di nasconderlo successivamente. Pertanto, un sito web dovrebbe distinguere nettamente tra link normali e link che rivelano nuovi contenuti tramite JavaScript .
Il contenuto comprimibile, ad esempio nei pannelli laterali e nelle strutture dei menu, può essere indicato con una freccia, un triangolo o un indicatore più / meno simile a Esplora risorse di Windows. Il pannello che gli utenti loggati vedono Globo CSS indica chiaramente che è pieghevole:
Di seguito è riportata la stessa pagina dopo che il pannello è stato espanso per rivelare un gruppo di funzioni:
Con il contenuto nel pannello ora espanso, la freccia viene ruotata di 90 gradi, suggerendo che lo stesso contenuto può ora essere nascosto o collassato. Questo stesso principio può essere applicato ai menu a discesa o a comparsa, sebbene questi non richiedano una freccia rotante. Sorprendentemente, questa funzionalità viene spesso omessa anche su siti Web progettati professionalmente.
Ulteriori letture:
3. Indicatore di caricamento AJAX
Quando si migliora l'esperienza utente caricando il contenuto tramite richieste asincrone, assicurarsi di informare l'utente che una richiesta AJAX è in fase di elaborazione. Senza questo indicatore, l'utente potrebbe rinunciare ad aspettare o chiedersi perché non sia successo nulla in risposta al proprio clic.
Puoi farlo in molti modi; un modo è quello di evidenziare un "Caricamento" o un messaggio simile in o vicino alla posizione in cui si verificherà l'azione, come fa il lettore RSS di Google:
Nella parte superiore dello screenshot c'è il testo evidenziato in giallo, che appare quando viene cliccato il pulsante "Segna tutto come letto", dicendo all'utente che qualcosa sta accadendo.
Un altro modo per indicare questo è con l'animazione o una clessidra rotante, che sarebbe familiare agli utenti di Windows. Un indicatore animato viene utilizzato su numerosi siti Web, tra cui cinguettio , dove gli utenti fanno clic su un pulsante "Altro" per visualizzare i tweet più vecchi:
Dopo aver fatto clic sul pulsante e in base alla velocità della connessione del client al server, viene visualizzata una familiare grafica animata che informa l'utente che la richiesta è in corso di elaborazione.
La grafica di caricamento AJAX è disponibile gratuitamente da numerosi siti Web diversi, molti dei quali consentono di personalizzare la grafica con dimensioni, colori e altre opzioni.
Questo tipo di indicatore visivo è importante per le richieste asincrone che non forniscono indicazioni sul lato client su quale attività sta caricando.
Un indicatore simile a AJAX potrebbe anche essere usato per migliorare la funzionalità non AJAX che si comporta come AJAX e richiede tempo per essere caricata. Ciò potrebbe includere una galleria fotografica che carica un'immagine più grande quando si fa clic su una miniatura.
La grafica di caricamento AJAX e altri indicatori non accelerano effettivamente la pagina, ma migliorano il tempo di caricamento "percepito" , che spesso è altrettanto prezioso quanto il miglioramento del tempo di caricamento effettivo .
Ulteriori letture:
4. Posizione del carrello acquisti e funzioni di accesso e registrazione
Quando gli utenti scansionano una pagina per il pulsante "Carrello" o "Registrati ora", il primo posto che guardano è l'angolo in alto a destra della pagina. A meno che non si abbia un valido motivo per farlo, mantieni questa funzionalità nella sua posizione familiare, altrimenti rischi di rallentare e interrompere l'esperienza dell'utente.
Le opzioni e le funzioni che rientrano in questa categoria includono "Visualizza carrello", "Estrai", "Accedi", "Esci", "Registra", "Invia collegamento", "Password dimenticata?" E anche "Contattaci. "Quest'ultimo elemento di solito è l'ultimo in una barra di navigazione orizzontale.
TasteBook include quattro collegamenti di questo tipo nell'angolo in alto a destra del layout:
Maui Divers Jewelry è un altro buon esempio e include anche un grafico della shopping bag:
5. Formato data di scadenza sui moduli di carta di credito
Quando un modulo richiede la data di scadenza della carta di credito, il formato è sempre lo stesso: il mese, rappresentato da due cifre, seguito dall'anno, rappresentato da due o quattro cifre (ad esempio 03/11 o 03/2011). Il formato a quattro cifre indica come la data di scadenza viene visualizzata sulla carta di credito stessa.
Il modo migliore, quindi, per raccogliere queste informazioni e rafforzare l'esperienza dell'utente consiste nell'utilizzare due caselle di selezione separate, una per il mese e l'altra per l'anno. Non fare in modo che l'utente inserisca la data di scadenza in una singola casella di testo, anche se fornisci istruzioni.
Ecco un buon esempio del pagina di pagamento di Maui Divers Jewelry:
Ed ecco un esempio di un campo data di scadenza mal progettato:
Inoltre, il selettore del mese non dovrebbe mostrare i nomi dei mesi, ma dovrebbe invece elencare i numeri da 01 a 12. Non c'è motivo di rallentare gli utenti facendo capire che "08" significa "Agosto".
6. Collegamenti facilmente identificabili
Questo non dovrebbe mai essere un problema, ma sfortunatamente alcuni siti web ancora non distinguono chiaramente tra link e testo normale nel corpo principale.
Nella maggior parte dei casi, il modo migliore per indicare questa differenza è creare collegamenti con colori diversi e sottolinearli. In alcuni casi è sufficiente un forte colore a contrasto; ma solo sottolineare o semplicemente cambiare leggermente il colore è abbastanza raro e spesso compromette l'accessibilità.
Cameron.io fa bene questa distinzione:
Questi collegamenti non sarebbero così visibili se fossero semplicemente sottolineati ma non modificati a colori. Non disegneresti un pulsante che non assomigliasse a un pulsante, quindi perché i collegamenti testuali si fondono con il corpo principale? Poiché la maggior parte degli utenti scansiona il testo online, i progettisti devono assicurarsi che tutti i link siano identificabili molto prima che venga passato un mouse su di essi.
Ulteriori letture:
Conclusione
Tutti gli elementi e le funzioni dell'interfaccia utente discussi in questo articolo sono fondamentali per l'usabilità del sito Web e svolgono ruoli importanti nella percezione dell'utente del marchio.
Molti piccoli miglioramenti possono fare una grande differenza nella velocità percepita e possono impedire agli utenti di sentirsi frustrati o a disagio.
Rendi semplici e snelli gli elementi dell'interfaccia utente e segui le convenzioni laddove possibile. Vedrai ridotti tassi di rimbalzo, conversioni migliori e un flusso costante di traffico di ritorno.
Scritto esclusivamente per WDD da Louis Lazaris, scrittore freelance e sviluppatore web. Louis corre Web impressionanti , dove pubblica articoli e tutorial sul web design.
Come potrebbero essere migliorati alcuni di questi o altri elementi dell'interfaccia utente? Si prega di condividere i tuoi pensieri nei commenti qui sotto.