risposta-alla-domanda-sullo-sviluppo-web-bd.com

Di che colore sono i messaggi di errore per un modulo con uno sfondo rosso?

Ho un grande sito Web con alcune forme. Esistono quattro colori di sfondo per i componenti form. Uno di questi è rosa/rosso.

Ecco l'immagine e il messaggio di errore:

Enter image description here

Non riesco a cambiare il colore di sfondo del modulo, ma sono libero di cambiare lo stile del messaggio (colore di sfondo, colore del testo, ecc.).

Cosa ne pensi? Non mi piace il rosso con il testo bianco. Il messaggio di errore non è molto visibile, poiché lo sfondo è rosso . Ho provato per alcuni giorni con altri stili rosso e alcuni arance, ma sembra strano.

Gli sfondi blu o verdi sono realmente visibili, ma potrebbero creare confusione. (successo = verde, errore = rosso)

Come posso migliorare questo modulo?

Voglio dire, dovrei cambiare il messaggio di errore e non toccare i componenti select.

Alcune opzioni, ispirate alle tue risposte:

form-errors

  • 1 è attuale.
  • 2 sembra carino
  • 3 strano
  • 4 (più scuro) e 5 (più chiaro), simili, ma l'ombra è diversa

Grazie a tutti per il feedback !!

56
Baumannzone

Andrei con un colore che manterrà sempre un netto contrasto. Eviterei anche di avventurarmi troppo al di fuori degli stili che gli utenti hanno generalmente familiarità. Poiché stai lavorando in uno stile atipico, se divergi e usi elementi non familiari potresti rischiare di confondere una percentuale dei tuoi utenti. Ecco cosa penso che consiglierei. enter image description here

78
ke11en

Vorrei andare con qualcosa all'ombra dello sfondo, ma ho un testo più rosso nell'avviso. Puoi aggiungere un bordo all'ombra del testo per renderlo più evidente anche come errore.

Picking a lighter shade of the background

68
Connor Wilson

Uno sfondo giallo brillante con testo nero avrebbe funzionato bene.

Si adatta alla combinazione di colori di un segnale di avvertimento.

yellow/black warning image

43
danjmorris_

Il colore standard per i messaggi di errore è rosso, vedi questa domanda :

Un punto importante da capire è che l'uso di colori convenzionali per errori è importante perché rendono gli errori più evidenti. L'utente che è infastidito dal colore del messaggio di errore è molto meno un problema di quanto l'utente non sia in grado di compilare il modulo perché non ha notato l'errore. Almeno nella maggior parte dei casi.

Dal momento che il rosso andrà perso sullo sfondo, la cosa migliore da fare è usare il giallo con un simbolo di errore rosso.

Il giallo attira l'attenzione e ha anche un ottimo contrasto con lo sfondo. Il simbolo di errore rosso indica all'utente che si tratta di un messaggio di errore, poiché si tratta di un simbolo standard ben accettato.

enter image description here

23
DesignerAnalyst

Potresti provare ad aggiungere un bordo bianco, quindi giocare con il colore di sfondo.

L'unico colore che comunica " qualcosa non va " più forte del rosso è il colore della morte, il nero.

Dark red with white border, black with white border

21
enthdegree

È un incubo per l'accessibilità!

Prova a invertire gli stili dei messaggi di errore: testo rosso su sfondo bianco.

enter image description here

17
Andrew Martin

Sulla base di molte altre risposte: enter image description here

Non fare mai affidamento solo sul colore. L'aggiunta di un'icona o di un testo o di una trama non solo aiuta le persone daltoniche, ma rende anche le cose un po 'più facili per le persone che vedono regolarmente.

L'uso di una barra grigia o nera scura crea un forte contrasto con lo sfondo. È anche a colori neutri, quindi puoi inserire altri tipi/colori di notifiche in quelle caselle.

L'uso di un'arancia o di un giallo anziché di un rosso evita di guardare troppo vicino allo sfondo. E ha ancora una connotazione utile da segnali di avvertimento .

9
PixelSnader

La domanda in realtà ha fornito molte delle opzioni alternative disponibili, ma per chiarezza ho pensato che sarebbe stato utile riassumere alcune delle risposte fornite:

  • Trova un colore complementare da usare che si distingua - ci sono molti strumenti per questo, e puoi anche consultare le linee guida del marchio come controllo secondario; questo potrebbe essere per l'interfaccia utente, il colore del carattere o una combinazione di entrambi.
  • Crea un livello diverso per mettere a fuoco l'utente - il miglior esempio è l'uso delle ombre per rendere il componente del messaggio 'pop' fuori dal resto dell'interfaccia, creando così un effetto 3d in un spazio design piatto
  • Personalizza il componente messaggio in modo da creare focus in modo diverso rispetto al resto dell'interfaccia; l'esempio dato nella risposta con lo striping minimo sul lato sinistro con sfondo nero è una bella implementazione dell'idea
  • Applica un modello di interazione o comportamentale - questo è diverso dal resto in quanto non si tratta di stile visivo ma design comportamentale o di modello, quindi un esempio potrebbe essere un'animazione per il componente del messaggio che dura un po ' più a lungo, quindi è più facile notare o creare un componente persistente che l'utente deve chiudere, ecc.
3
Michael Lai