it-swarm.it

Quale colore scegliere come "pericolo" se il colore principale della mia app è rosso

Sto avendo questa domanda avvolta intorno alla mia testa per un po 'di tempo. Il fatto è che la mia applicazione principale ha un tema di colore rosso. E solo per i pulsanti Annulla usavo solo i colori grigi ma ora che ho bisogno di un colore "pericoloso" ... Cosa dovrei usare? Viola? Arancia? Usare di nuovo il rosso è imbarazzante, forse un rosso più scuro?

PD: Non posso usare il blu perché è il colore dei nostri concorrenti.

enter image description here

56
caravana_942

Penso che tu abbia bisogno di giocare. Se i tuoi schermi sono rossi e stai per utilizzare un avviso o un pericolo. Ho i seguenti suggerimenti:

1- Puoi ancora usare il rosso ma in diversi gradi per distinguere tra il colore dell'app e la tua azione di pericolo.

2- Puoi utilizzare un popup bianco puro e, applicare icone rosse , punto esclamativo o segni all'interno di questo popup.

3- Un altro suggerimento è di usare il colore nero e usare segni bianchi sopra il popup nero . Questo potrebbe essere un cambiamento.

Se puoi fornirci una schermata del tuo sistema rosso, posso darti una soluzione semplice.

enter image description here

101
Khalil Hanna

Piuttosto che concentrarsi solo sul colore del pulsante, è meglio concentrarsi sull'esperienza nel suo insieme per quel particolare compito. Non è necessario necessariamente un colore di pericolo separato per un pulsante Elimina. È possibile utilizzare il pulsante rosso standard, ma supportarlo con altri messaggi di pericolo. Come questo:

enter image description here

Se il tuo utente sta per fare qualcosa di pericoloso, è meglio usare un avviso e un messaggio per evidenziare il pericolo, piuttosto che fare affidamento sul colore del pulsante.

Vale anche la pena dire che non c'è nulla di intrinsecamente pericoloso o spaventoso in un'app rossa. Ho progettato per Coca-Cola per un po ', e il loro colore del marchio principale è il rosso. Sono un ottimo esempio di come applicare il marchio rosso a siti Web e app, se ne stai cercando uno. Usano principalmente nero, grigio e bianco come colori di accento.

52
Michael

Una cosa assolutamente chiave da notare qui:

Non fare affidamento esclusivamente sul colore per trasmettere significato.

I colori sono utili per trasmettere un messaggio visivo, ma è necessario considerare l'accessibilità quando si prendono questi tipi di decisioni UX. Se l'utente ha una qualche forma di daltonismo o altri disturbi visivi, è necessario un altro tipo di indicatore (icone o testo) per comunicare il significato. Il fatto che il pulsante sia intitolato Delete è grandioso, ma se sei preoccupato che si tratti di informazioni "critiche per il sistema", allora questo deve essere trasmesso oltre il semplice utilizzo del colore come indicatore.

Questo articolo copre l'uso del colore per quanto riguarda l'accessibilità e ha un paragrafo specifico su questo:

"... assicurati l'accessibilità assicurandoti di non fare affidamento sul colore per trasmettere informazioni cruciali sul sistema. Quindi, per cose come stati di errore, stati di successo o avvisi di sistema, assicurati di incorporare messaggistica o iconografia che chiari chiaramente ciò che sta succedendo su."

Inoltre, considerando che il rosso è il colore chiave della tua app: assicurati di utilizzare un contrasto di almeno 4.5:1 aderire a WCAG 2 livello AA come minimo. Questo è uno strumento davvero utile per verificare che: https://webaim.org/resources/contrastchecker/

35
indextwo

Man mano che aumenta il numero di opzioni praticabili, può essere più difficile prendere una decisione finale. Dopo averlo ridotto a pochi, puoi prendere in considerazione la possibilità di consentire agli utenti di selezionare lo schema che preferiscono .

Alcune combinazioni di colori da considerare:

  • Rosso = pericolo = l'app è pericolosa. Cambia il colore principale della tua app.

  • Blu = colore della concorrenza. Concorrente = pericoloso. Usa il blu per pericolo. Mentre un blu più chiaro può essere scambiato per un avviso positivo (come successo), un blu scuro non può.

  • Usa il bianco e nero. Gli esempi in la risposta di Khalil Hanna sono sorprendenti. Il problema è che il bianco e nero potrebbe essere confuso con il testo normale. Nero + arancione/giallo potrebbero non avere lo stesso problema.

  • Usa i colori standard indipendentemente dal colore principale del tuo tema. Verde = successo. Giallo/Arancione = Attenzione. Rosso = pericolo/avviso. Eccetera.

    Tuttavia, come sottolinea Aline , Google Material Design Color Usage indica: "Poiché il rosso è un colore di marca, non usalo per comunicare uno stato di errore . Scegli colori di avviso alternativi che non usano la colorazione del marchio. " Il loro esempio usa l'arancia. Ma anche il viola sembra un'opzione praticabile.

    Material Design Example

10
習約塔

Il "colore di pericolo" dovrebbe distinguersi dalla combinazione di colori della tua app. È anche utile considerare il significato. Rosso/arancione/giallo, nella maggior parte delle culture, indica pericolo, allerta, attenzione. Di solito, se vedo un messaggio blu o verde, penso automaticamente che sia un feedback positivo. Penso che dovresti usare l'arancione o il giallo, per distinguerti dai colori principali.

In Google Material Design, usano l'arancione con temi rossi: https://material.io/design/color/color-usage.html#meaning

5
Aline

Il primo schema di colori che viene in mente per indicare il pericolo è una combinazione di giallo e nero, in particolare se il nero è a strisce diagonali. Sospetto che l'associazione con il pericolo provenga dalle api in natura.

Digitando semplicemente yellow black sign in Google comporterà molti segni che indicano un pericolo di qualche tipo. Canta del veleno, del pericolo di cadere, del nastro usato attorno alle scene del crimine, ecc.

Ho visto personalmente finestre di messaggio con un bordo spesso, giallo e nero a strisce diagonali, e mi fanno sempre pensare che ci sia qualcosa di potenzialmente pericoloso, probabilmente una decisione potenzialmente pericolosa da prendere. Vedere un pulsante con un triangolo arrotondato con lo stesso modello mi direbbe che dovrei essere molto cauto se premo quel pulsante.

Per me, il rosso semplice non è in realtà così forte e avrebbe bisogno di bianco e nero per superare completamente lo stesso livello di pericolo.

5
trlkly

Se stai già utilizzando il colore rosso, usa il giallo e il nero. È un segnale di avvertimento naturale della natura e attirerà sicuramente l'attenzione. È utilizzato anche su molti segnali di pericolo per i cantieri.

enter image description here

Nei paesi occidentali, non c'è nulla di culturalmente più pericoloso del nero sul rosso:

enter image description here

2
Danielillo

ATTENZIONE

SIGNIFICATO COLORE MANCATO

Il colore da solo non trasmette significato e come tale di per sé non dovrebbe essere invocato per alcuna espressione di "pericolo" o "avvertimento". Inoltre, i disturbi visivi come la deuteranomalia (6% dei maschi colpiti) rendono invisibili alcuni contrasti cromatici, per non parlare delle differenze culturali come molti hanno già detto.

CONTRASTO, SIMBOLI e TESTO

Colori come il rosso, il giallo e l'arancione non sono stati scelti perché il colore ha un significato specifico, ma perché il colore fornisce un certo contrasto di colore, contrasto di luminanza e "richiamo visivo" e quindi si distingue sullo sfondo.

È più importante avere un contrasto di luminanza adeguato e usare simboli orientati all'attenzione/attrazione che siano chiari nel loro intento.

Il contrasto di luminanza non si basa sul contrasto di colore che può essere frainteso a causa di menomazioni o differenze culturali e aiuta a far risaltare il simbolo. L'uso di un contrasto di luminanza più elevato rispetto agli stimoli circostanti (testo, pulsanti, ecc.) È ciò che aiuterà ad attirare l'attenzione e l'attenzione dell'utente.

Il contrasto di colore può aiutare ad aumentare la consapevolezza in termini di riconoscimento cognitivo di un avviso, ma deve essere una considerazione di progettazione secondaria. Ad esempio, se il mercato è il Nord America, il verde è probabilmente una cattiva scelta per un avvertimento - Ma il verde in combinazione con il suo avversario di colore rosso (compresi i viola ) crea un rilevamento Edge molto forte nella normale percezione visiva umana.

Simboli comprensibili acan può essere molto utile per trasmettere significato in un modo che (idealmente) non richiede traduzione. Anche se le differenze culturali possono avere una forte influenza.

A Las Vegas, l'MGM Grand Hotel è stato originariamente progettato dove l'ingresso principale era attraverso una bocca di leone gigante color smeraldo. Poco dopo aver aperto il pensiero, lo hanno demolito e ricostruito l'ingresso per rimuovere la bocca del leone perché hanno scoperto che la bocca di un leone aveva un simbolismo particolarmente negativo in alcune culture asiatiche.

Nel regno dei computer, tuttavia, ci sono icone comuni che hanno raggiunto un'accettazione internazionale di determinati significati: la ben compresa è in genere la scelta migliore, specialmente per trasmettere un avvertimento.

Text is king, nonostante le differenze di lingua . Un testo chiaro e semplice è il modo migliore per trasmettere un significato specifico. Una sola parola con una descrizione a comparsa di informazioni aggiuntive è la mia preferenza personale per l'usabilità.

Animazione e movimento influenzeranno l'attenzione se questo è l'obiettivo. Ad esempio, un singolo LED rosso lampeggiante su una parete di 1000 LED rossi attirerà sicuramente la tua attenzione.

TL; DR

In breve, è più importante avere un buon/alto contrasto di luminanza e testo e simboli descrittivi rispetto a qualsiasi combinazione di colori specifica.

Ecco un esempio dell'uso del contrasto di luminanza, una modifica del tuo pulsante di eliminazione di esempio rispetto al pulsante di salvataggio:

SAVE DELETE MODIFIED

1
Myndex

Qualcosa da considerare sulla creazione di interfacce utente è che il colore non dovrebbe mai trasmettere significato. Tuttavia, puoi evidenziare i pulsanti distruttivi rendendoli diversi dagli altri pulsanti o dal resto della tua interfaccia. Invece di pensare ai colori che potresti usare, prova a pensare a come rendere il pulsante diverso .

Cambia il design

  • Bordi - Se il tuo disegno attuale ha pulsanti senza bordo, prova ad aggiungere un bordo nero o bianco molto distinto (spesso?). Questo rende il pulsante "pop" dal resto dell'interfaccia.
  • Dimensione - Prova a giocare con l'altezza o la larghezza del pulsante. Le dimensioni possono aiutare a differenziare i pulsanti distruttivi dai pulsanti normali. Ma non deve sempre essere circa la dimensione del pulsante, forse potresti cambiare la dimensione del carattere dell'etichetta?
  • Stile carattere - Parlando di caratteri, che ne dici di aggiungere una sottolineatura, corsivo o grassetto all'etichetta per farlo risaltare?
  • Stile - Forse aggiungi un'ombra o ha solo bordi e nessun colore di riempimento. Gioca con il design e falla apparire diverso .

Colori

Il lato creativo di ognuno varia, quindi se vuoi mantenere il tuo stile attuale ma cambiare i colori, ti consiglio di guardare una ruota dei colori per i colori opposti ai tuoi rossi. Ciò contribuirà a far risaltare il pulsante. Puoi anche enfatizzare il pulsante scegliendo colori distruttivi come giallo, rosso (ovviamente più scuro o più chiaro), nero o bianco (se si adatta al tuo design).

Il design è una parte molto impegnativa del processo di sviluppo, quindi giocare sicuramente aiuterà. Ottieni le opinioni delle persone: fagli scegliere un design. Crea alcuni modelli di mockup. Spero che questo abbia aiutato.

0
Aaron