C'è un vecchio modello di business che vivono molti strateghi di business: i 3 C. È un promemoria per concentrarsi sul azienda, clienti e concorrenti. Anche molte piccole imprese e siti Web utilizzano questo modello. Ma per i designer, le tre C sono un po 'diverse.
Quando crei interfacce utente, devi concentrarti su colore, contrasto e contenuto. Questi tre elementi sono il fondamento del buon design. Ma ognuno è un po 'più complesso di quanto possa sembrare dalla superficie. Ecco come pensare e incorporare le tre C delle interfacce utente nei progetti di design.
Colore
Il colore è uno degli elementi visivi più evidenti per la maggior parte degli utenti. Sia i designer che i non designer possono parlare del colore e se una certa tonalità o tavolozza li attrae.
Il colore può creare connessioni emotive distinte completamente da solo, senza altri effetti. Puoi consegnare un campione di colore o un chip a quasi chiunque e ottenere una reazione su qualunque 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 progetto per molte ragioni, ma principalmente fa così tante cose e fornisce così tante indicazioni visive all'utente che non puoi ignorarlo.
Impatti di colore:
- Usabilità e leggibilità
- Riconoscimento e consapevolezza del marchio
- Dove gli utenti guardano e interagiscono
- Organizzazione e flusso di utenti
- Successo generale del design
Usa il colore per creare:
- Navigazione chiara e comprensibile
- Interazioni intuitive
- Uno stato d'animo per il progetto
- Creare forti inviti all'azione o elementi utilizzabili
- Stabilire un senso di ciò che il progetto riguarda, come la realtà contro la fantasia
Questo potrebbe sembrare un compito arduo per qualcosa di semplice come un mix di rosso, verde e blu.
Quindi, da dove inizi? Probabilmente le variabili più importanti in termini di colore sono la creazione di una tavolozza che è coinvolgente per gli utenti e parla di ciò che riguarda il design (come il branding e l'umore). Ad esempio, un sito Web per Coca-Cola che utilizzava il blu come colore dominante piuttosto che rosso, sarebbe un problema per gli utenti.
Una tavolozza di colori solidi è radicata nei principi della teoria del colore.Una tavolozza di colori solidi è radicata nei principi della teoria del colore. 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% delle volte, un colore secondario che viene utilizzato il 30% delle volte e un colore accento che può essere nel resto 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: inizia con il bianco e nero. Se il disegno è utilizzabile senza colore, funzionerà probabilmente 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 gli elementi. Aiuta a creare una gerarchia visiva, la scansione e contribuisce a capire quanto velocemente sia facile capire. Elementi con un forte contrasto rendono facile per l'utente guardare da una cosa all'altra, creando un modello visivo naturale e il flusso di utenti.
Il motivo per cui il contrasto è così importante per la progettazione dell'interfaccia utente è che fa parte di tutto ciò che fai. Il modo in cui crei il contrasto varia in base al tipo di elemento dell'effetto visivo coinvolto.
Puoi stabilire un contrasto con:
- Colore
- Taglia
- Direzione
- Spazio
- Forma
Un elemento chiave delle linee guida per l'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 semplificare l'accessibilità al web, ha questa raccomandazione: iniziare con il contrasto del colore utilizzando i colori di diversi segmenti della ruota dei colori o i colori a contrasto. Ricorda che i colori complementari - gli opposti sulla ruota dei colori - offrono il massimo contrasto.
Lo stesso concetto si applica anche alla creazione del contrasto tra altri elementi. Scegli i 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 segni direzionali, le frecce o le immagini con il movimento per forzare l'utente a guardare in una certa direzione, quindi capovolgere la stecca 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 in cui intendi, 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 verranno utilizzati?
Soddisfare
L'ultimo dei tre C è contenuto. Il design dell'interfaccia utente può essere valido solo come le informazioni in esso contenute. Il contenuto include tutto, dalle immagini al testo, alle illustrazioni e icone, ai logo e ai marchi. Il contenuto include anche video e ogni bit di copia dalla messaggistica completa o narrativa per post di blog a piccoli pezzi di micro-copia.
Il solo fatto di avere contenuti non è abbastanza. Devi avere un contenuto stellare.Tutti questi elementi si uniscono per raccontare la storia di ciò che rende speciale il tuo design e la tua interfaccia utente. Perché gli utenti dovrebbero darti il loro tempo invece di fare qualcos'altro?
E il solo fatto di avere contenuti non è abbastanza. Devi avere un contenuto stellare. Contenuto ad alta risoluzione. Contenuto di alto valore. Il tuo contenuto deve essere migliore / più grande / più speciale di contenuti simili in competizione per l'attenzione degli utenti.
Può essere un compito arduo, ma la maggior parte dei designer può creare questo contenuto rimanendo fedele a se stesso, al proprio marchio e alla propria messaggistica. Attenersi a ciò che sei e ciò che sai. Gli utenti vedranno questa autenticità e speriamo di apprezzarla 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 contenuti - hai gli strumenti e le conoscenze per creare un progetto di design fuori dal mondo. bene. (O almeno altamente utilizzabile).
Lavorando entrambe le strategie in progetti di design, sei costretto a pensare a come creare qualcosa che andrà a vantaggio del proprietario del sito web e dell'utente. Stai creando non solo perché il design sia bello, ma anche 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.