Mantenimento della coerenza nella progettazione dell'interfaccia utente

La coerenza nella progettazione dell'interfaccia utente è un principio della vecchia scuola e un po 'dimenticata in alcuni dei progetti Web e delle applicazioni di oggi. Sembra che i designer stiano scegliendo di omettere la coerenza dalle loro interfacce.

Nel caso della progettazione di applicazioni mobili, alcuni progettisti scelgono di reinventare, ricreare o addirittura interrompere completamente le interazioni standard hardware con i propri schemi di interfaccia unici. Mentre rompere la coerenza tra le regole dell'interfaccia utente hardware e l'esperienza delle tue app potrebbe non essere una cattiva idea, può essere rompere la coerenza delle tue app.

Tre passaggi per una progettazione coerente dell'interfaccia utente

Esistono fondamentalmente tre tipi di coerenza da considerare quando si progettano i progetti di app Web e mobili:

• 1. Resta coerente con le linee guida e i comportamenti dell'interfaccia utente del dispositivo
• 2. Resta coerente con altri siti o applicazioni simili
• 3. Resta coerente con il tuo design

Ai fini di questo articolo, vorrei concentrarmi maggiormente sul terzo, mantenendo la coerenza nell'interfaccia utente. Questo è un grosso problema soprattutto perché non vuoi confondere o sorprendere i tuoi utenti all'interno della tua app.

Non vuoi che un utente vada dalla tua home page a una sottopagina e veda stili diversi o interazioni utente molto diverse. Questo genere di cose può sorprendere gli utenti o in alcuni casi persino spaventarli. La coerenza non è solo un grosso problema per l'usabilità complessiva del sito, ma può anche aumentare notevolmente la conversione.

Struttura coerente e interazioni

Questa è la chiave per creare un'interfaccia utente coerente. A volte, quando ci sviluppiamo, ci dimentichiamo di come la struttura e l'interazione influiranno sull'esperienza complessiva dell'utente. Ma proprio come il progetto e la creazione di piani sono importanti quando si costruisce una casa o un edificio, è anche importante per creare un'interfaccia utente coerente e utilizzabile. Ci sono alcune cose a cui pensare e pianificare in anticipo prima di iniziare a scrivere codice.

• 1. Considera come posizionare costantemente gli elementi in tutto il tuo sito o app.
• 2. Pensa a quali schemi di interfaccia utente utilizzerai.
• 3. Pianifica quali elementi di input ti serviranno.
• 4. Scopri quali icone ti occorrono e scegli o progetta un buon set di icone che le copra tutte.

Il posizionamento degli elementi è un modo eccezionale per ridurre la sorpresa dell'utente e creare aspettative coerenti e affidabili. Mantieni le tue navigazioni nello stesso posto, nulla irrita l'utente più rapidamente dello spostamento o della scomparsa degli elementi di navigazione. Conserva anche loghi e altri elementi di branding nelle stesse posizioni attraverso il sito.

"Nulla irrita l'utente più rapidamente dello spostamento o della scomparsa di elementi di navigazione"

Se stai usando una barra laterale, non scuotere troppo la barra laterale cambiando ciò che è presente da una pagina all'altra. Alcuni di questi potrebbero essere rilevanti per il contenuto della pagina, ma evitare di rimuovere o addirittura spostare elementi globali di importazione come i moduli di ricerca. Una cosa importante da tenere costantemente posizionati sono i link o i pulsanti di accesso e impostazione dell'utente.

Considera i pattern dell'interfaccia utente

Pianifica in anticipo e pensa a quali schemi di interfaccia utente avrai bisogno. Avrai bisogno di una galleria? Modals? Fisarmoniche? Sidebars? Pianificare i modelli di progettazione in anticipo non solo ti aiuterà a sviluppare e progettare la tua app più velocemente, ma anche pensare a quali modelli di progettazione ti serviranno aiuta a capire i tuoi contenuti in anticipo, il che può farti risparmiare un sacco di tempo.

Questo risolverà anche i problemi e risponderà alle domande in anticipo, in questo modo quando arrivi a una sezione o una pagina del tuo sito che richiede una decisione sull'interfaccia utente, l'hai già fatto e non rimarrai sorpreso a creare un miscuglio di modelli di progettazione in tutto il tuo sito.

Pensa anche ai tuoi moduli prima d'ora. Pianifica quali elementi del modulo ti serviranno e scopri gli elementi che non ti serviranno o che potresti sostituire. Gli elementi del modulo possono essere spaventosi o persino complicati per gli utenti di navigare comunque, quindi se puoi eliminare o scambiare alcuni input che potrebbero essere ostacoli, fallo.

"Se riesci a eliminare o scambiare alcuni input che potrebbero essere blocchi inciampanti, fallo."

Anche questo è un ottimo modo per rimuovere il processo decisionale dal processo di sviluppo. Mantenere le forme coerenti sia nello stile, sia nella struttura e nell'interazione a volte può creare o interrompere un tasso di conversione.

Ancora una volta, piano testa. Pianifica in anticipo quali icone ti serviranno. Un modo super rapido per rovinare la tua coerenza è quello di essere a metà dello sviluppo della tua app quando scopri che avrai bisogno di icone di stampa, quindi renditi conto che non riesci a ricordare dove hai le tue icone o anche se puoi trova un'icona di stampa che corrisponda al resto delle tue icone.

Questo non è nemmeno un problema di stile, ma interattivo. Gli utenti si abitueranno all'aspetto di determinate icone e saranno in grado di riconoscerle rapidamente. Ma se stai usando un set di icone patchwork confonderai il tuo utente o renderai difficile per loro dire cosa rappresentano determinate icone.

Stile coerente

Lo stile e il design di ciascun elemento dell'interfaccia utente sono importanti e anche la coerenza tra di essi è importante per l'utente. Proprio come è importante avere un set di icone coerente, è importante che la tua app abbia una coerenza progettuale su di essa. Potresti pensare che alcuni pulsanti siano interessanti anche se non si avvicinano al design generale o alla combinazione di colori del sito, ma questo confonderà l'utente e sembrerà brutto.

Quando si progetta un kit UI, ci sono alcune cose da tenere a mente per creare coerenza:

• 1. Combinazione di colori
• 2. Stile
• 3. Confini
• 4. Tipo e caratteri
• 5. Dimensioni
• 6. Immagini di sfondo
• 7. Effetti

Colori

Come ho detto prima, mantieni il colore dell'interfaccia utente coerente con la combinazione di colori generale del tuo sito. Anche quando si progetta un invito ad azioni in cui si desidera che i pulsanti si distinguano e si notino, fare attenzione a non rendere il proprio invito all'azione un brutto complimento per la propria combinazione di colori. Per aiutarti, usa strumenti come Kuler o ColorSchemer per aiutarti a selezionare i colori che vanno bene insieme.

Quando parlo di mantenere coerente il tuo stile, sto parlando di non usare un pulsante di sfumatura folle con ombre e smussi se il resto del design del sito è piatto e non ha un'ombra o una sfumatura. Oltre a rimanere coerente con il design generale del sito, rimanere coerente con lo stile degli elementi dell'interfaccia utente. Se stai utilizzando un colore o uno stile di carattere particolare sulle etichette di input, mantienilo e utilizzalo su tutte le etichette.

frontiere

Ahh, i confini. Troppo spesso vedo siti che utilizzano tre o quattro spessori o raggi di bordi dei pulsanti diversi e questo può davvero creare confusione. Mantieni tutti i tuoi bordi su pulsanti, input, selezioni, gallerie, immagini e tutti gli altri elementi dell'interfaccia utente coerenti tra loro. Questo non significa che devi usare il raggio del bordo, puoi mescolarlo avendo alcuni valori o persino usare uno stile in modo coerente su ciascun elemento.

Tipo e caratteri

L'uso dello stesso tipo e dei caratteri nei tuoi elementi è una cosa abbastanza importante, specialmente quando si tratta di elementi di un modulo. Mantieni le intestazioni coerenti e non utilizzale per molti tipi di carattere anche se potrebbero piacerti tutti: puoi salvarli per altri progetti. Gli input e i pulsanti dovrebbero avere stili di carattere che si abbinano o si completano a vicenda in modo che i moduli siano facilmente leggibili e prevedibili.

Taglia

Le dimensioni dei caratteri e di altri elementi devono essere coerenti o complementari tra loro. Le intestazioni e il titolo delle pagine dovrebbero rimanere coerenti in modo che l'utente sappia che quelle righe di testo corrispondono effettivamente a intestazioni e titoli. Le dimensioni coerenti si applicano anche a qualsiasi elemento dell'interfaccia utente proveniente da aree di contenuto, collegamenti, elementi di navigazione o barre laterali. Evita di alterare le dimensioni di questi elementi in modo drastico tra le visualizzazioni di pagina in modo che l'utente possa riconoscerle immediatamente quando la pagina viene caricata.

Immagini di sfondo

Cerca di non modificare troppo le tue immagini di sfondo. Al giorno d'oggi questo non succede molto, ma è comunque una buona idea evitare di cambiare le immagini di sfondo dalla visualizzazione della pagina alla visualizzazione della pagina. Se lo fai, prova a rendere l'immagine in qualche modo correlabile tra loro in modo che le pagine non perdano consistenza. La modifica dell'immagine di sfondo, in particolare di quelle di grandi dimensioni, può far sembrare il sito disunito e far sentire l'utente come se avesse lasciato completamente il tuo sito, quindi cerca davvero di evitare questa tentazione.

effetti

Gli effetti, soprattutto gli effetti di illuminazione, possono rendere ciò che sembra un ottimo design del sito non ha alcun senso per l'utente. Ad esempio, se si utilizza un punto culminante sul pulsante che sembra che una luce brilli sopra di esso, utilizzare lo stesso effetto di illuminazione sul testo smussato nei pulsanti o negli input di testo smussati.

Onestamente, questo non è davvero un grande successo o romperlo con l'utente, ma per lo spettatore esigente possono notare l'incoerenza dei tuoi effetti e distrarsi dal fare ciò che dovrebbero fare con la tua app o il tuo sito.

Non essere noioso

Progettare per coerenza può sembrare banale o addirittura noioso a volte e potresti voler semplicemente lanciare qualcosa nel tuo design per dare all'utente una sorpresa, ed è davvero fantastico.

È bene tenere gli utenti in guardia, non scuotere le cose così tanto che si scoraggiano o si confondono così tanto da andarsene e andare altrove. Un po 'di coerenza può fare molto.