Le 3 C di interfacce utente: colore, contrasto e contenuto

C'è un vecchio modello di business in cui vivono molti strateghi aziendali: le 3 C. È un promemoria per concentrarsi su società, clienti e concorrenti . Anche molte piccole aziende e siti Web utilizzano questo modello. Ma per i designer, le tre C sono leggermente diverse.

Quando si creano interfacce utente, è necessario concentrarsi su colore, contrasto e contenuto. Questi tre elementi sono alla base di un buon design. Ma ognuno è un po 'più complesso di quanto possa sembrare dalla superficie. Ecco come pensare e incorporare le tre C di interfacce utente nei tuoi progetti di design.

Esplora risorse di progettazione

Colore

Il colore è uno degli elementi visivi più ovvi per la maggior parte degli utenti. Designer e non designer possono parlare del colore e se una certa tonalità o tavolozza li attira.

Il colore può creare connessioni emotive distinte completamente da solo, senza altri effetti. Puoi consegnare un campione di colore o un chip a quasi tutti e ottenere una reazione su qualsiasi colore sia visibile. È anche un elemento di design divertente in quanto le preferenze personali e di design tendono a spostarsi nel tempo quasi universalmente.

Il colore può creare o distruggere un disegno per molte ragioni, ma principalmente fa così tante cose e fornisce così tanti segnali visivi all'utente contemporaneamente che non puoi ignorarlo.

Impatti del colore:

• Usabilità e leggibilità
• Riconoscimento e consapevolezza del marchio
• Dove gli utenti guardano e interagiscono
• Organizzazione e flusso di utenti
• Successo globale del design

Usa il colore per creare:

• Navigazione chiara e comprensibile
• Interazioni intuitive
• Un umore per il progetto
• Crea forti inviti all'azione o elementi utilizzabili
• Stabilire un senso di ciò che riguarda il design, come la realtà contro la fantasia

Tutto ciò potrebbe sembrare un ordine elevato per qualcosa di semplice come un mix di rosso, verde e blu.

Quindi, da dove inizi? Probabilmente le variabili più importanti quando si tratta di colore è la creazione di una tavolozza che è coinvolgente per gli utenti e parla di ciò che riguarda il design (come il marchio e l'umore). Ad esempio, un sito Web per la Coca-Cola che utilizzava il blu come colore dominante anziché il rosso sarebbe sconcertante per gli utenti.

Una tavolozza di colori solidi è radicata nei principi della teoria dei colori.

Una tavolozza di colori solidi è radicata nei principi della teoria dei colori. Non hai bisogno di più di un paio di colori per farlo funzionare. Sono sufficienti due o tre colori e una buona libreria di variazioni più chiare e più scure. Mockplus consiglia la regola 6: 3: 1: scegli tre colori per una tavolozza, incluso un colore dominante che viene utilizzato il 60 percento delle volte, un colore secondario che viene utilizzato il 30 percento delle volte e un colore accento che può essere nel restante 10 percento del design. La regola è radicata nella sezione aurea, un pilastro della teoria del design e può essere un ottimo punto di partenza.

Ecco un'altra regola per creare tavolozze di colori nelle interfacce utente: iniziare con il bianco e nero. Se il disegno è utilizzabile senza colore, probabilmente funzionerà una volta aggiunto il colore. Il contorno bianco e nero ti dà anche una buona idea di come scegliere i colori con un contrasto sufficiente (la seconda C) per migliorare l'usabilità.

Contrasto

Il contrasto crea una distinzione tra elementi. Aiuta a creare gerarchia visiva, scansionabilità e contribuisce alla facilità di comprensione rapida di qualcosa. Gli elementi con un forte contrasto rendono facile per l'utente guardare da una cosa all'altra, creando un modello visivo e un flusso utente naturali.

Il motivo per cui il contrasto è così importante per la progettazione dell'interfaccia utente è che fa parte di tutto ciò che fai. La modalità di creazione del contrasto varia in base al tipo di elemento dell'effetto visivo coinvolto.

È possibile stabilire il contrasto con:

• Colore
• Taglia
• Direzione
• Spazio
• Forma

Un elemento chiave delle linee guida sull'accessibilità è il contrasto perché garantisce che gli utenti possano discernere un elemento da un altro nella progettazione. Il progetto A11Y, che ha l'obiettivo di rendere più facile l'accessibilità del web, ha questa raccomandazione: iniziare con il contrasto del colore usando i colori di diversi segmenti della ruota dei colori o colori contrastanti. Ricorda che i colori complementari - opposti sulla ruota dei colori - offrono il massimo contrasto.

Lo stesso concetto si applica anche alla creazione di contrasto tra altri elementi. Scegli caratteri tipografici di famiglie diverse o usa dimensioni notevolmente diverse per aiutare gli utenti a leggere rapidamente le parole.

In breve, l'idea alla base del contrasto è che gli opposti si attraggono.

Usa i segnali direzionali, le frecce o le immagini con movimento per aiutare l'utente a guardare in una determinata direzione, quindi capovolgi l'indicazione direzionale per un contrasto ancora maggiore.

La differenza tra spazio stretto e spazio aperto crea molto contrasto. Se vuoi assicurarti che il tuo testo sia facile da vedere e leggere, dagli un po 'più di spazio per attirare l'attenzione su di esso.

In breve, l'idea alla base del contrasto è che gli opposti si attraggono. Elementi apparentemente diversi possono effettivamente lavorare insieme in modo che entrambi siano facilmente visibili a colpo d'occhio.

Per sapere se il contrasto funziona nel modo desiderato, pensa a un paio di fattori quando guardi gli elementi sullo schermo:

• Leggibilità: tutte le parole e le immagini sono facili da vedere e leggere?
• Chiarezza: è facile distinguere un elemento da un altro?
• Accessibilità: funziona per quante più persone possibile?
• Ambiente: gli utenti possono vedere e comprendere il design nei luoghi in cui verrà utilizzato?

Soddisfare

L'ultima delle tre C è contenta. Il design dell'interfaccia utente può essere valido solo come le informazioni in esso contenute. Il contenuto include di tutto, dalle immagini al testo, alle illustrazioni e alle icone, ai loghi e ai marchi. Il contenuto include anche video e ogni bit di copia dalla messaggistica completa o dalla narrativa ai post del blog fino a piccoli frammenti di micro-copia.

Basta avere dei contenuti non è abbastanza. Devi avere un contenuto stellare.

Tutti questi elementi si uniscono per raccontare la storia di ciò che rende speciale il design e l'interfaccia utente. Perché gli utenti dovrebbero darti il ​​loro tempo piuttosto che fare qualcos'altro?

E solo avere contenuti non è abbastanza. Devi avere un contenuto stellare. Contenuto ad alta risoluzione. Contenuti di alto valore. I tuoi contenuti devono essere migliori / più grandi / più speciali di contenuti simili in competizione per l'attenzione degli utenti.

Questo può essere un ordine elevato, ma la maggior parte dei designer può creare questo contenuto rimanendo fedele a se stesso, al proprio marchio e alla propria messaggistica. Attieniti a ciò che sei e a ciò che sai. Gli utenti vedranno questa autenticità e, si spera, la apprezzeranno trascorrendo del tempo con il tuo design.

Conclusione

Ora che sei armato con le vecchie tre C di business - azienda, clienti e concorrenti - e tre C di design dell'interfaccia utente - colore, contrasto e contenuto - hai gli strumenti e le conoscenze per creare un progetto di design che è fuori dal mondo bene. (O almeno altamente utilizzabile.)

Lavorando entrambe le strategie in progetti di design, sei costretto a pensare a come creare qualcosa a beneficio del proprietario del sito Web e dell'utente. Stai creando non solo per rendere bello il design, ma anche per renderlo funzionale.

Nota: tutti gli esempi in questo articolo provengono dalla Galleria Design Shack. Assicurati di dare un'occhiata in giro; è pieno di grande lavoro e ispirazione.