10 regole di buona progettazione dell'interfaccia utente da seguire in ogni progetto di web design

Sono finiti i giorni dei siti Geocities con il loro codice HTML fisso e immutabile. I siti e le app oggi sono dinamici e interattivi. Il nostro compito come designer è fare in modo che l'interfaccia attraverso la quale interagiscono con il nostro design dell'interfaccia utente web sia il più vicino possibile all'ideale. Fortunatamente, ci sono alcune regole quasi universali che possono aiutare. Abbiamo messo insieme quelli che pensiamo siano i migliori principi di design in modo che tu possa migliorare tutti i tuoi futuri progetti di web design.

10 regole di buona progettazione dell'interfaccia utente da seguire in ogni progetto di web design

Iscriviti al nostro canale Youtube

1. Rendi facilmente accessibile tutto ciò di cui l'utente ha bisogno

Che si tratti di una serie di strumenti di progettazione per app di web design, dell'inventario di un personaggio in un videogioco, di un foglio di calcolo o di qualsiasi altra cosa, se l'utente non riesce a trovare ciò che desidera, rimbalza sul tuo software. Le schede rendono le cose accessibili. Anche scorciatoie e suggerimenti al passaggio del mouse.

Ad esempio, abbiamo scelto di utilizzare le schede per organizzare Divi. Tutti gli strumenti di cui hai bisogno sono proprio lì nel builder, separati per categoria. Le barre degli strumenti sono accessibili in modo simile. Se utilizzi WordPress, la barra degli strumenti di amministrazione ti dà la possibilità di accedere rapidamente all'editor dei post, al personalizzatore del tema, alle impostazioni del plug-in e così via. Le opzioni sono chiaramente etichettate e non è necessario cercarle.

Un altro esempio sono le opzioni Guida/Supporto/Contatto. Quando si progetta un'interfaccia utente, che si tratti di un'app mobile, app Web, siti Web WordPress o qualsiasi altra cosa, i tuoi utenti dovranno sempre trovare il pulsante Guida (o il pulsante Contatta l'assistenza). Dovranno assolutamente contattarti prima o poi . Ecco perché devi sempre assicurarti di mettere i pulsanti di aiuto in primo piano e al centro. Guarda Divi. In ogni modulo, abbiamo il pulsante di supporto pronto per te, a portata di mano, ogni volta che ne hai bisogno.

Inoltre, viene visualizzata la finestra della guida con un tutorial video su qualsiasi funzionalità con cui stai lavorando. Includendo questo modulo, Divi diventa molto più accessibile e meno frustrante. Inoltre, come parte dell'interfaccia utente, la posizione per l'assistenza è coerente in tutto il prodotto. Il che ci porta al punto successivo...

2. Sii coerente

Come abbiamo detto poco fa, è importante essere coerenti nel posizionamento delle funzionalità all'interno dell'interfaccia utente. Ma dovresti anche preoccuparti che la tua interfaccia utente funzioni e appaia coerente anche per l'intero prodotto. Non avere il menu in cima a una pagina e in fondo a un'altra. Non riorganizzare le voci di menu ogni volta che viene caricato. Assicurati che i tuoi utenti sappiano dove si trovano le cose sul tuo sito. Se tieni un modulo di contatto sotto i post del tuo blog, non decidere di lasciarlo fuori. Gli utenti se ne accorgeranno e saranno sconcertati.

La coerenza include anche i tuoi caratteri e il design dovrebbe funzionare da una pagina all'altra. Non scambiare i caratteri di intestazione/corpo da una pagina all'altra.

C'è un'idea interessante chiamata il principio della minima sorpresa che dice che se rendi il tuo utente sorpreso da come funziona qualcosa ... rielaboralo in modo che sia più intuitivo.

Inoltre, dovresti assicurarti che la tua interfaccia utente sia adatta alla tua piattaforma: le app iOS funzionano in modo diverso in alcuni casi rispetto ad Android. I siti desktop hanno esigenze diverse rispetto ai siti mobili per menu, gallerie e persino checkout dei prodotti. Coerenza significa non frustrare i tuoi utenti costringendoli a capire cosa fare sul tuo sito.

3. Sii chiaro

Può sembrare una ripetizione di quanto sopra, ma la chiarezza e la coerenza sono diverse. Chiarezza significa che vuoi che i tuoi utenti sappiano cosa fare in ogni momento. In un certo senso, questo sanguina anche nel design UX perché riduce la frustrazione degli utenti e aumenta la fidelizzazione e riduce la frequenza di rimbalzo.

La chiarezza è la ragione per cui il web design minimalista (e in una certa misura brutalista) è stato così popolare. Le persone non sono confuse sullo scopo di alcun sito o pagina perché non c'è (o c'è poco) disordine. Vuoi fornire l'esperienza opposta a quella di Ling's Cars.

Un modo per ottenere chiarezza è passare da un passaggio all'altro su pagine diverse. Invece di avere una procedura di checkout, scorrere la pagina verso il basso o essere contenuti in una singola sezione o casella: chiedi ai tuoi utenti di navigare da una pagina del prodotto a una pagina del carrello degli acquisti a una pagina di pagamento a una pagina di scelta del pagamento a una pagina di ordine per una pagina di conferma. (Amazon fa questo, come puoi vedere nell'immagine qui sotto).

Sapranno esattamente a che punto si trovano nel processo, eliminando qualsiasi ambiguità. Ciò è particolarmente importante per gli utenti di dispositivi mobili, poiché lo spazio sullo schermo è limitato .

4. Dai un feedback

L'ultima cosa che gli utenti vogliono è non capire cosa sta succedendo. Se premono un pulsante, fornire un'indicazione che il pulsante è stato premuto. Puoi farlo in più modi. Puoi animare il pulsante, facendolo sembrare affondare nella pagina. Le icone di caricamento (come la ruota arcobaleno di MacOS) forniscono un feedback, "Stiamo lavorando alla tua richiesta", senza doverlo dire.

Se consenti agli utenti di caricare file (ad esempio con Dropbox o Google Drive), fornisci un'indicazione del tempo rimanente. Fornire un pop-up o un modale che dica loro che la loro azione è stata un successo riduce la frustrazione e la confusione.

Davvero, ogni volta che l'utente intraprende un'azione all'interno della tua interfaccia, solo un piccolo riconoscimento può fare la differenza tra una buona esperienza e una poco brillante.

5. Usa il riconoscimento, non il richiamo

L'opposto di una buona capacità di sostenere i test, vuoi che i tuoi utenti riconoscano tutto sul tuo sito quando lo vedono. Non dovrebbero pensarci e ricordare le informazioni. Più di ogni altra cosa, stai ottimizzando la tua interfaccia in modo che ogni parte sia intuitiva e si sposti da un punto all'altro. Questo può essere fatto utilizzando icone riconoscibili come accennato in precedenza. Le persone riconoscono determinate icone per determinate cose.

Può anche essere fatto utilizzando tour virtuali per guidare un utente attraverso un processo, anche quando non è la prima volta. Riconosceranno il processo una volta che appare il primo modale e non dovranno spendere l'energia per ricordare esattamente come eseguire quelle azioni.

Potresti anche essere in grado di farlo attraverso messaggi ben posizionati che ricordino ai tuoi utenti cosa fa cosa sul tuo sito. Lo realizziamo in Divi con semplici suggerimenti al passaggio del mouse: anche se qualcuno non ricorda cosa fa l'icona, lo guidiamo alla sua funzione. Dopodiché, dovrebbero riconoscere l'icona. O almeno il tooltip se passano di nuovo con il mouse. O anche il processo di hovering per ottenere le informazioni.

6. Scegli come le persone interagiranno prima

credito fotografico John Picklap, per gentile concessione di MarieClaire.com

Sai qual è la cosa peggiore? Spingere su una porta a tirare. Soprattutto quando hai appena spinto su un precedente per arrivare a quello. Il progettista di quell'edificio ha reso l'interfaccia utente incoerente, quindi non avevi idea di come fare ciò che dovevi fare. Che ne dici di premere qualcosa che sembra un pulsante che non lo è, ma in attesa di una risposta comunque? Bene, questo perché quei designer non hanno preso in considerazione il modo in cui i loro utenti avrebbero interagito con il loro prodotto. Quindi, quando stai progettando la tua interfaccia utente, scegli un movimento (forse due) e seguilo.

Sui dispositivi mobili, tende a scorrere. Guarda Snapchat. Praticamente ogni singola azione viene eseguita scorrendo , incluso il raggiungimento delle impostazioni e del profilo. Puoi scorrere verso il basso su Snapchat per vedere te stesso, scorrere verso sinistra per accedere alle conversazioni, direttamente alle storie e verso l'alto per arrivare ai tuoi ricordi (o come vengono chiamati questa settimana). Hanno scelto il modo in cui volevano che i loro utenti interagissero con il loro prodotto e hanno progettato la loro interfaccia utente per adattarlo. Non il contrario.

Quando stai progettando la tua interfaccia utente, scegli se utilizzerai menu e tocchi, iconografia, scorrimenti e gesti o qualcos'altro. Alexa e Siri utilizzano l'input vocale come interazione principale con l'interfaccia utente. Il modo in cui forniscono informazioni ed eseguono i loro compiti è progettato attorno a quel particolare input. E come utente, sai cosa fare intuitivamente perché quelle informazioni sono state stabilite per te all'inizio. I designer ti hanno detto cosa fare e tu l'hai fatto . I tuoi utenti apprezzeranno che tu faccia lo stesso per loro.

7. Segui gli standard di progettazione

Il vecchio detto se non è rotto, non aggiustarlo si applica qui. Non c'è davvero bisogno di provare a rivitalizzare qualcosa se lo standard funziona. Ciò va dall'utilizzo delle icone al posizionamento standard degli elementi. Non vuoi andare contro ciò che i tuoi utenti si aspettano che le cose facciano. Le persone sanno che i punti interrogativi (?) indicano aiuto. Quindi non usare un punto esclamativo (!) . Se vuoi che gli utenti trovino il tuo menu mobile, usa l'icona dell'hamburger (le tre linee impilate), non una griglia.

Pensa alle barre di ricerca. Tendono a trovarsi in posti simili sulla maggior parte dei siti: la parte superiore della barra laterale o la fine del menu dell'intestazione. In caso contrario, al centro della sezione superiore della pagina. Se decidi di includere l'unico campo di ricerca nella parte inferiore della barra laterale, nei piè di pagina o sotto il testo dei post del tuo blog, le persone non sapranno dove cercare. Anche se lo identifichi con l'icona della lente di ingrandimento standard.

Non c'è niente di sbagliato nel pensare fuori dagli schemi e cercare un design nuovo e innovativo, ma ciò non dovrebbe significare che il design sia difficile da usare.

8. Questioni di Gerarchia Elementale

No, non intendiamo che Terra, Vento, Acqua o Fuoco siano il capo degli altri. Intendiamo che gli elementi sulla tua pagina devono avere una chiara gerarchia sia per l'utilità che per il modo in cui l'utente vede la pagina. Fondamentalmente, vuoi assicurarti che le funzioni più importanti siano nella parte superiore delle rispettive pagine. Inoltre, questo tipo di gerarchia può condurre l'utente in modo organico lungo la pagina, guidando l'utente attraverso il tuo servizio.

Elementi di grandi dimensioni che diminuiscono di dimensioni man mano che ci si sposta nel processo sono indicativi di importanza e ordine. Così fa il colore e il contrasto. Anche l'uso degli spazi bianchi è importante, poiché il disordine può bloccare i progressi dell'utente e distogliere l'attenzione dallo scopo della pagina. Linee pulite, molto spazio ed elementi ben definiti possono indicare visivamente ai tuoi utenti come spostarsi nell'interfaccia utente senza alcuna documentazione o annotazione.

Una buona regola pratica è che vuoi che le cose scorrano da sinistra a destra, dall'alto verso il basso.

9. Mantieni le cose semplici

Guarda questo modulo di contatto:

Ora guarda questo:

Entrambi sono moduli di contatto per effettuare una richiesta. Uno di questi non è un problema da compilare, mentre l'altro è un po' più un mal di testa. Oltre ad essere un modulo governativo, il design del modulo inferiore non è fatto per l' utente ma per l'amministratore. Non è il tuo lavoro. Il tuo compito è rendere le cose il più semplici possibili per l'utente . E uno dei modi migliori per farlo è eliminare tutto ciò che non è assolutamente necessario.

10. Mantieni i tuoi utenti liberi e sotto controllo

L'ultima cosa che vogliamo toccare, e l'ultima cosa che vuoi fare con la tua interfaccia utente, è prendere il controllo dall'utente. O per farli sentire confinati o limitati dal tuo design. Vuoi potenziarli e la tua interfaccia utente dovrebbe consentire loro di eseguire le azioni che desiderano. Ci sono due parti in questa regola: contesto e permesso .

Innanzitutto, qualsiasi azione che l'utente deve intraprendere dovrebbe trovarsi vicino a ciò su cui vuole agire. Se hanno bisogno di modificare un post, il pulsante di modifica dovrebbe essere vicino ai pulsanti di salvataggio , pubblicazione/invio e anteprima . In effetti, l'opzione migliore è per i menu contestuali per tutte le azioni che l'utente può intraprendere su un particolare elemento (o pagina). Se sei coerente nella tua interfaccia utente, come abbiamo detto sopra, i tuoi utenti capiranno che questi menu di scelta rapida o barre degli strumenti avranno sempre l'intero elenco di azioni per un determinato elemento.

Inoltre, l'interfaccia utente dovrebbe sempre far sentire l'utente come se potesse uscire o annullare qualsiasi azione intrapresa. Durante la progettazione dell'interfaccia utente, la utilizzeranno . Quindi hanno bisogno del permesso (o forse anche della libertà) per fare ciò di cui hanno bisogno per portare a termine il lavoro. Farlo può essere semplice come aggiungere un pulsante di annullamento a ogni pagina del checkout e-commerce (perché premendo il pulsante Indietro del browser le cose potrebbero andare in tilt). Forse è una funzione di annullamento in modo che sentano che la sperimentazione va bene. O una cronologia delle revisioni per progetti su larga scala (come in Google Drive o WordPress o Git).

Quando i tuoi utenti si sentono liberi e non vincolati, hai ovviamente seguito alcuni buoni principi di progettazione dell'interfaccia utente.

L'interfaccia utente è pronta?

Pessimo gioco di parole. Lo so, mi dispiace. Ma con queste regole dell'interfaccia utente, sarai assolutamente pronto a buttare fuori dal parco il tuo prossimo progetto di web design. Sebbene alcuni di questi possano applicarsi più ad alcuni progetti rispetto ad altri, una buona interfaccia utente è una buona interfaccia utente e una buona interfaccia utente porta a una buona UX. Ma questo è un argomento per un post completamente diverso.

Hai delle regole per una buona progettazione dell'interfaccia utente che segui sempre?

Immagine in primo piano dell'articolo di emojoez / shutterstock.com