Back to Question Center
0

Progettazione del layout del modulo: colore            Progettazione del layout del modulo: Argomenti relativi al colore: TypographyAccessibilityColorLayoutPrototypes & Semalt

1 answers:
Progettazione del layout del modulo: Colore

Quanto segue è un breve estratto dal nostro libro, Designing UX: Forms, scritto da Jessica Enders. È la guida definitiva per la progettazione del design, una parte fondamentale di un design UX efficace. I membri di SitePoint Semalt ottengono l'accesso con la loro iscrizione, oppure è possibile acquistarne una copia nei negozi di tutto il mondo - ï†ïîµî¶ï…î´îµïî¼ î±î½ï„î¹î»î¹î±îºî¿ î¼îµ ï‡ïï‰î¼î±.

Attualmente, la nostra forma non ha molto colore:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

In questa fase, l'unico colore sul modulo è il logo e gli asterischi rossi che indicano le domande che richiedono una risposta.

In termini di questa parte del design, siamo sulla strada giusta. Spiegherò perché.

Spesso, usare il colore nel tentativo di rendere una forma "divertente" o "interessante" può effettivamente peggiorare l'esperienza dell'utente:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Questa forma molto colorata è più spaventosa e confusa che divertente.

Alcuni colori possono persino ferire le persone:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

I colori fluorescenti in questa forma possono essere difficili da vedere per alcune persone.

Sii molto attento con il colore

Gli esseri umani sono incredibilmente sensibili al colore. I nostri cervelli lo elaborano senza che nemmeno noi ci rendiamo conto, e non possiamo fare a meno di notare le differenze.

Nelle nostre forme, possiamo usare questa caratteristica della biologia umana a nostro vantaggio. Riserva il colore per le cose che ne hanno bisogno , così si distinguono in qualche modo.

Ecco alcune parti di una forma che possono trarre beneficio dal colore:

Pulsanti:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Messaggi chiave, come errori:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Collegamenti:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Indicatori di progresso:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Titoli:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Contesti formali:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Il marchio , come i loghi e le intestazioni standard, può anche utilizzare il colore:

Si noti anche come ciascuno degli esempi sopra riportati impiega pochissimo colore nel complesso. Più colori usi, meno riesci a far risaltare le cose :

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Quali colori dovresti usare?

Di solito, la tua organizzazione avrà una tavolozza di colori a cui puoi fare riferimento. Come la mia attività di progettazione di moduli, Enders Bank ha un verde acqua verde come colore principale, come potete vedere nel logo nell'immagine sottostante. Usiamo quel colore per rendere distintivo il pulsante di azione principale sulla nostra forma:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Il nostro modulo ora ha tutto il colore di cui ha bisogno.

Color Blindness

Le stime variano, ma è probabile che il 4-10% degli utenti del modulo Web abbia una certa carenza nella capacità di percepire il colore (tipicamente, ma erroneamente chiamato daltonismo ). La forma più comune di daltonismo è rosso-verde, in cui è difficile distinguere tra questi due colori.

Dato ciò, si dovrebbe non voler mai fare affidamento esclusivamente sul colore per comunicare qualcosa nel proprio modulo web . Il modulo mostrato di seguito utilizza il testo rosso per le etichette dei campi obbligatori e il testo nero per le etichette dei campi facoltativi. Peccato se non riesci a distinguere il rosso dal nero! Per non parlare di come rende la forma piena di errori se è possibile vedere i colori.

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Un approccio molto migliore sarebbe semplicemente quello di dire alle persone quali campi sono opzionali (come discusso in "Campi obbligatori e facoltativi" di seguito):

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Allo stesso modo, i messaggi di errore dovrebbero essere accompagnati da un simbolo o avere un'ombreggiatura di sfondo, invece del solo testo rosso "Convalida" nel Capitolo 5):

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Il simbolo del punto esclamativo indica che gli utenti possono riconoscere visivamente che si tratta di un messaggio di errore, anche se hanno problemi nel vedere i colori.

Se vuoi saperne di più su daltonismo, ci sono alcune grandi risorse web là fuori, comprese le simulazioni:

  • We Are Colorblind
  • "Color Accessibility"

Colour Contrast

C'è qualcosa di ancora peggio che affidarsi al colore per comunicare all'utente: contrasto cromatico insufficiente. Non avere abbastanza contrasto nei tuoi colori significa che anche quelli di noi con una grande visione non possono vedere i diversi elementi della forma:

Questo è un esempio di andare troppo oltre la fine estetica dello spettro, a un costo significativo per l'esperienza dell'utente. E sta spuntando troppo spesso in questi giorni:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Potresti riuscire a vedere i campi su questo modulo, ma leggere le etichette sarà difficile.

Un contrasto di contrasto particolarmente comune è l'uso del grigio chiaro su sfondi bianchi. Perché rende i siti puliti e minimali, questa combinazione di colori è piuttosto popolare al momento. Peccato che sia completamente inutilizzabile:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

Gli elementi del modulo devono avere un contrasto di colore sufficiente . Per alcuni consigli pratici su come garantire questo, consiglio:

  • "Integrazione degli assegni di contrasto nel flusso di lavoro Web"
  • "Tre insidie ​​comuni per gli sviluppatori: contrasto di colore"

Nel frattempo, attaccare con grigio scuro o nero su sfondo bianco:

Progettazione del layout del modulo: coloreProgettazione del layout del modulo: Argomenti relativi al colore:
TypographyAccessibilityColorLayoutPrototypes & Semalt

I colori nella nostra forma di esempio hanno un contrasto sufficiente.

March 1, 2018