La coerenza nella progettazione dell'interfaccia utente è un principio della vecchia scuola e un po 'dimenticato in alcuni dei moderni progetti web e applicativi. Sembra che i progettisti stiano scegliendo di omettere la coerenza dalle loro interfacce.
Nel caso della progettazione di applicazioni mobili, alcuni progettisti scelgono di re-inventare, ricreare o addirittura interrompere completamente le interazioni standard dell'hardware con i propri modelli di interfaccia unici. Rompere la coerenza tra le regole dell'interfaccia utente hardware e la tua esperienza con le app potrebbe non essere una cattiva idea, rompendo la coerenza delle tue app può essere.
Tre passaggi per la progettazione dell'interfaccia utente coerente
Esistono fondamentalmente tre tipi di coerenza a cui dovresti pensare quando progetti i tuoi design per web e dispositivi mobili:
- 1. Resta coerente con le linee guida e i comportamenti dell'interfaccia utente del dispositivo
- 2. Rimanere coerenti con altri siti o applicazioni simili
- 3. Resta coerente con il tuo design
Ai fini di questo articolo vorrei concentrarmi maggiormente sul terzo: mantenere 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 passi dalla tua home page a una sottopagina e veda stili diversi o interazioni dell'utente molto diverse. Questo tipo 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 e interazioni coerenti
Questa è la chiave per creare un'interfaccia utente coerente. A volte, quando sviluppiamo, ci dimentichiamo di come la struttura e l'interazione influenzeranno l'esperienza utente complessiva. Ma proprio come la creazione di progetti e la creazione di piani è importante per la costruzione di una casa o di 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 in modo coerente gli elementi nel tuo sito o nella tua app.
- 2. Pensa a quali modelli di UI utilizzerai.
- 3. Pianifica gli elementi di input che ti serviranno.
- 4. Scopri quali icone avrai bisogno e scegli o progetta un buon set di icone che le copra tutte.
Il posizionamento degli elementi è un modo enorme per ridurre la sorpresa dell'utente e creare aspettative coerenti e affidabili. Mantieni le tue navigazioni nello stesso luogo, nulla può irritare un utente più rapidamente che spostarsi o sparire elementi di navigazione. Conserva inoltre loghi e altri elementi di branding negli stessi luoghi attraverso il sito.
? Nulla irrita un utente più rapidamente rispetto allo spostamento o alla scomparsa di elementi di navigazione?Se si utilizza una barra laterale, non scuotere troppo la barra laterale cambiando ciò che è presente in esse da una pagina all'altra. Alcuni di questi possono essere rilevanti per il contenuto della pagina, ma evitare di rimuovere o anche spostare elementi globali di importazione come i moduli di ricerca. Una cosa importante da tenere sempre presente è il link o i pulsanti di impostazione login e utente.
Considera i pattern dell'interfaccia utente
Pianifica in anticipo e pensa a quali schemi dell'interfaccia utente ti serviranno. Avrai bisogno di una galleria? Modals? Fisarmoniche? Sidebars? Pianificare in anticipo gli schemi di progettazione non solo ti aiuterà a sviluppare e progettare la tua app in modo più rapido, ma anche a pensare a quali schemi di progettazione ti serviranno per capire il tuo contenuto in anticipo, il che può farti risparmiare molto tempo.
Ciò risolverà anche i problemi e risponderà alle domande in anticipo, in questo modo quando arriverete a una sezione o a una pagina del vostro sito che richiede una decisione sull'interfaccia utente, l'avete già realizzata e non sarete scoperti a creare un miscuglio di schemi di progettazione in tutto il tuo sito.
Pensa anche alle tue forme in anticipo. Pianifica gli elementi del modulo di cui avrai bisogno e individua gli elementi che non ti serviranno o che potresti sostituire. Gli elementi del modulo possono essere spaventosi o anche complicati per gli utenti di navigare comunque, quindi se riesci ad eliminare o scambiare alcuni input che possono essere inciampi, fallo.
? Se è possibile eliminare o scambiare alcuni input che possono essere inciampare blocchi, farlo.?Questo è anche un ottimo modo per rimuovere il processo decisionale dal processo di sviluppo. Mantenere forme coerenti sia nello stile che nella struttura e nell'interazione può a volte fare o rompere un tasso di conversione.
Di nuovo, piano piano. Pianifica le icone di cui avrai bisogno in anticipo. Un modo super veloce 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 puoi ricordare dove hai le tue icone o anche se puoi trova un'icona di stampa che corrisponda al resto delle icone.
Questo non è nemmeno un problema di stile, ma interattivo. Gli utenti si abitueranno all'aspetto con icone particolari e saranno in grado di riconoscerli rapidamente. Ma se usi un set di icone patchwork confonderai il tuo utente o renderà difficile per loro dire quali icone rappresentano.
Stile coerente
Lo stile e il design di ciascun elemento dell'interfaccia utente sono importanti e il mantenimento della coerenza tra di essi è importante per l'utente. Così come è importante avere un set di icone coerenti, è importante che la tua app abbia una consistenza di design complessiva. Potresti pensare che alcuni pulsanti siano belli anche se non si avvicinano al design o al colore del sito, ma questo confonderà semplicemente il tuo 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. frontiere
- 4. Tipo e caratteri
- 5. Taglia
- 6. Immagini di sfondo
- 7. effetti
Colori
Come ho detto prima, mantieni il colore dell'interfaccia utente coerente con la combinazione di colori più ampia del tuo sito. Anche quando si progettano le chiamate alle azioni in cui si desidera che i pulsanti si distinguano e vengano notati, fare attenzione a non rendere la chiamata all'azione un brutto complimento per la propria combinazione di colori.Per aiutarti, usa strumenti come Kuler o ColorSchemer per aiutare a selezionare i colori che vanno bene insieme.
Quando parlo di mantenere il tuo stile coerente, sto parlando di non usare un pulsante sfumato con sfumature di ombre e smussature se il resto del design del sito è piatto e non ha ombra o sfumatura su di esso. Oltre a rimanere coerente con il design generale del sito, mantieni la coerenza con lo stile dei tuoi elementi dell'interfaccia utente. Se si sta utilizzando un particolare colore o stile di carattere sulle etichette di input, attenersi ad esso e utilizzarlo su tutte le etichette.
frontiere
Ah, confini. Troppo spesso vedo siti che usano tre o quattro spessori o raggi diversi per i bordi dei pulsanti e questo può davvero essere fonte di confusione. Mantieni tutti i tuoi confini 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 di confine, puoi mescolarlo con alcuni valori o persino usare uno stile in modo coerente su ciascun elemento.
Tipo e caratteri
Usare lo stesso tipo e font nei tuoi elementi è una cosa piuttosto importante, specialmente quando si ha a che fare con gli elementi del form. Mantieni le intestazioni coerenti e non utilizzare molti tipi di carattere, anche se potrebbero piacerti tutti - puoi salvarli per altri progetti. Gli input e i pulsanti devono avere stili di font che si adattino o si completino 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 da aree di contenuto, collegamenti, elementi di navigazione o barre laterali. Evita di alterare drasticamente le dimensioni di queste ultime tra le visualizzazioni di pagina in modo che l'utente possa riconoscerle immediatamente al caricamento della pagina.
Immagini di sfondo
Cerca di non modificare troppo le tue immagini di sfondo. Questo non succede molto in questi giorni come un tempo, 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 relativamente riconoscibile l'un l'altro in modo tale che le pagine non perdano consistenza. Cambiare l'immagine di sfondo, soprattutto quelle di grandi dimensioni, può far sentire il sito sconnesso e far sentire l'utente come se avesse addirittura lasciato il sito completamente, quindi cerca davvero di evitare questa tentazione.
effetti
Gli effetti, in particolare gli effetti di luce, possono rendere l'idea di ciò che sembra un grande design del sito non ha alcun senso per l'utente. Ad esempio, se si sta utilizzando un'evidenziazione sul pulsante, sembra che una luce risplenda sopra di essa, utilizzare lo stesso effetto di illuminazione sul testo smussato nei pulsanti o negli input di testo smussati.
Onestamente, questo non è davvero un grosso problema, né rompe l'affare con l'utente, ma al visigatore può 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 si può semplicemente voler buttare qualcosa nel tuo progetto per sorprendere l'utente, ed è davvero grandioso.
E 'bello tenere gli utenti sulle spine, ma non scuotere le cose così tanto che diventano così scoraggiati o confusi da andarsene e andare da qualche altra parte. Un po 'di coerenza può fare molto.