it-swarm.it

"Sì, eliminalo" dovrebbe essere rosso o verde?

Progettando un'interfaccia per un CMS (Content Management System), mi sono imbattuto in un paradosso e sono un po 'confuso su cosa da fare e perché per farlo ..

Contesto

Prima di eliminare un album, all'utente viene chiesto di confermare l'azione.

Verde "Sì"

First option

Rosso "Sì"

Second option

Quale opzione è più intuitiva per l'utente?

787
Diéssica

Entrambi i modi sembrano porre un paradigma falso positivo. Questo può essere più semplice e non obbligare l'utente a trascorrere del tempo a dare un senso all'associazione colore-etichetta.

Basta rendere più evidente il pulsante "Elimina". Rendi il pulsante "Annulla" meno prominente. Per quanto riguarda l'etichettatura all'interno dei pulsanti, non è necessario inserire molto contesto in quelle che sono essenzialmente semplici azioni (no/sì? O annulla/elimina) poiché ciò richiede una maggiore elaborazione da parte degli utenti.

enter image description here

Gli utenti generalmente assoceranno un'azione come "Rimuovi" o "Elimina" al rosso. E, come sempre, fornire un modo per "annullare" l'azione.

1358
jnmnrd

Non sono così sicuro che dovresti pensare solo in termini di rosso e verde. Il rosso è stato in genere associato al pericolo , potenzialmente risalente al Medioevo (citazione necessaria). Una rapida ricerca di immagini di Google per "elimina" produce immagini quasi interamente rosse.

Per me (e per bootstrap ) il verde indica il successo, il rosso indica il pericolo.

Bootstrap buttons

Poiché l'eliminazione è un'azione pericolosa, consiglierei di tenere rosso il pulsante Elimina. Sei limitato all'utilizzo di verde/rosso? In tal caso, consiglierei di utilizzare la tua seconda immagine. I semafori degli Stati Uniti indicano che il verde significa "continua". Usando questa logica potresti dire un pulsante verde "No, tienilo" significa "No, tienilo e continua" e un rosso "Sì, cancellalo" significa "Sì, cancellalo anche se è pericoloso". In ogni caso, prenderei in considerazione la possibilità di rendere blu il pulsante "No, mantienilo" perché è un colore di azione piuttosto standard (ad esempio è il colore predefinito dei collegamenti non stilati).

Modifica : Penso che @ JNMNRD abbia la migliore risposta su questo. Ecco l'immagine di @ JNMNRD senza parole. Puoi dire quale pulsante significa cancellare?

Delete

321
circuitry

Guardandolo da un'angolazione leggermente diversa, dove possibile potresti considerare di rimuovere completamente la conferma e passare invece a un processo "Do/Annulla".

Questo metodo viene spesso utilizzato nei servizi di Google:

enter image description here

Ha i vantaggi di essere culturalmente neutro e più efficiente per l'utente (un clic anziché due da eliminare).

Lo svantaggio è che si tratta di un collegamento temporaneo e viene ignorato quando viene intrapresa un'altra azione, ad esempio quando si segnala un'altra e-mail come spam. Viene inoltre scartato dopo aver effettuato il logout, la perdita di focus o l'aggiornamento.

Per evitare questi svantaggi, è possibile prendere in considerazione l'inclusione di un qualche tipo di funzionalità del cestino sul sito, proprio come fa SharePoint.

221
Graham Wager

Con tutto il rispetto, penso che finora ogni risposta abbia in qualche modo mancato il segno.

Prima di tutto, in base alla sezione Contesto della tua domanda ...

Context

Prima di eliminare un album, all'utente viene chiesto di confermare l'azione.

... possiamo dedurre che questo non è un errore successo o modale, ma piuttosto è una conferma modale, che implica un avviso o attenzione colore come giallo , non verde o rosso , come successo e errore i colori implicano rispettivamente. E poiché è una conferma modale, la formulazione dovrebbe probabilmente cambiare in qualcosa del tipo:

Conferma l'eliminazione di questo album:

Per favorire l'usabilità della conferma modale, puoi incoraggiare il pulsante Conferma per farlo risaltare ancora un po '. E per quelli che hanno daltonismo o problemi di lettura , in genere inserisco un'icona corrispondente a ciò che viene confermato. In questo caso, una pattumiera sembra adattarsi.

Quando aggiungi tutto ciò insieme, ecco un esempio di ciò che ottieni:

confirmation modal


Aggiornamento basato sui commenti sulla formulazione dei pulsanti ...

Sto pensando alla formulazione di questo da qualche tempo. I commenti tendono a usare Elimina invece di Conferma , ma penso che ci sia qualcosa di meglio. Poiché l'icona è un cestino e stiamo parlando di sbarazzarsi di un album , penso che la formulazione dovrebbe corrispondere a che anziché.

Quindi, ci ho pensato e ho pensato a Keep e Cestino invece. Entrambi coincidono con la domanda se si debba cancellare l'album o annullare l'azione, per non parlare dei colori che funzionano ancora per gli utenti daltonici, Keep accentuato chiarisce qual è l'azione predefinita e, insieme, le parole lo rendono 100 % chiaro su quale azione si sta confermando.

updated confirmation modal

132
Code Maverick

Gli utenti hanno maggiori probabilità di pensarci due volte prima di fare clic su qualcosa di rosso. Per quale delle due opzioni vuoi che pensino due volte prima di fare clic?
Quale delle due scelte scatenerà potenzialmente eventi più irreversibili?

Fonte: http://en.wikipedia.org/wiki/Red#Warning_and_danger

43
Rolf

Ho fatto un po 'di ricerche dopo aver letto le tue domande e le risposte attuali e ho scoperto che ci sono alcune prove che suggeriscono che la preferenza per il colore rosso negli umani, come in altri primati non umani, dipende dal fatto che il contesto sia amichevole o ostile ( Maier et al., 2009 e studi di follow-up).

Come riassunto in astratto (enfasi mia):

Sono stati condotti tre esperimenti sulla preferenza del colore usando un paradigma di selezione spontanea con partecipanti infantili.

L'esperimento 1 ha dimostrato che i partecipanti preferiscono il rosso al verde in un ambiente di laboratorio amichevole.

L'esperimento 2 ha dimostrato che la preferenza dei partecipanti per il rosso varia a seconda del contesto in cui viene presentato il colore: Il rosso è preferito in un contesto ospitale (seguendo una faccia felice), ma non in un contesto ostile ( seguendo una faccia arrabbiata). È stato trovato il motivo opposto per il colore di controllo verde.

L'esperimento 3 ha usato la stessa manipolazione del contesto, ma è stato aggiunto un secondo colore di controllo, il grigio, per esaminare chiaramente se il contesto influenza la preferenza solo per il rosso. Come previsto, data una seconda scelta alternativa, è stata trovata la preferenza dipendente dal contesto per il rosso, ma non il verde o il grigio. Questi risultati rappresentano la prima prova della moderazione del contesto nella letteratura sulle preferenze del colore.

(PsycINFO Database Record (c) APA 2012, tutti i diritti riservati)

Ci si chiede se il contesto di questa azione - l'eliminazione di qualcosa - sarebbe sufficiente a spingerlo in un territorio "ostile". La mia intuizione è che sarebbe se la cancellazione fosse accidentale (l'utente preme "elimina", si rende conto che non intendeva farlo, e gli viene presentata un'ultima possibilità per salvare il proprio lavoro), e probabilmente lo è anche se erano intenzionali (l'utente frustrato nel dover eliminare un altro ostacolo nella direzione dell'obiettivo?).

28
Jessica Yang

Qual è lo standard esistente nel resto dell'applicazione? Usi i pulsanti rossi per indicare "Voglio completare questa azione" e quelli verdi per "annullare questa azione"? O è il contrario?

Se è qualcosa di simile, beh, praticamente ogni pezzo di software che abbia mai visto, allora i miei soldi sono in verde per "vai avanti e fallo" e in rosso per "abort! Abort!".

Mentre "rosso" per "avviso" è un punto giusto, il suo posto è prima che raggiunge questa fase - rende rosso il pulsante originale "elimina". Ma stai chiedendo qui la fase di conferma, che dovrebbe sempre trattare "continua" e "annullare" in modo coerente, indipendentemente da quale operazione potrebbe essere continuata o annullata. Se il rosso di solito è "annulla", ma a volte "continua", allora stai solo invitando la confusione dell'utente.

18
Dave Sherohman

Puoi scegliere di impostare un'azione primaria e secondaria.

Esempio da LinkedIn:

example

Ciò fornisce un'azione di conferma unica e ovvia che l'utente può intraprendere senza l'interessante preoccupazione per l'accessibilità, il pregiudizio culturale e la confusione decisionale che possono derivare dalla divisione delle opzioni per solo colore.

Inoltre, come è scritto nell'esempio sopra è molto chiaro. Come è possibile riformulare la domanda non lascia alcuna ambiguità:

Sei sicuro di voler eliminare questo album? SÌ/Annulla

Pensa anche al flusso di utenti per questo. Non è buona prassi fornire un'azione assoluta senza errori.

fornire un annullamento

Fonte: Quali sono alcune alternative alla frase "Sei sicuro di voler XYZ" nelle finestre di dialogo di conferma?

Ecco anche un'altra versione che fornisce la possibilità di eliminare:

example

Gli utenti possono fare errori nelle finestre di conferma. Se l'utente sta per eliminare qualcosa di importante che non potrà mai recuperare, è importante assicurarsi che gli utenti siano assolutamente certi prima di continuare. Invece di dare agli utenti un pulsante di conferma che potrebbero premere per errore, dare loro un campo di testo e chiedere loro di digitare la parola "elimina" per confermare. Quando l'utente digita "elimina" nel campo di testo, non c'è dubbio che desidera eliminare. Non è possibile premere accidentalmente il pulsante Elimina. Non vi è alcun rimpianto quando l'utente elimina, perché il campo di testo di conferma li rende certi di ciò che stanno per fare prima di farlo.

Fonte: http://uxmovement.com/buttons/how-to-make-sure-users-dont-accidentally-delete/

17
Pdxd

La mia soluzione per eliminare le cose è un pulsante con un'icona cestino che apre un po 'di popover. Penso che questa sia una buona soluzione perché:

  • nessuna finestra di dialogo inquietante, tutti odiano le finestre di dialogo di conferma!
  • è richiesta la conferma nessun clic accidentale
  • l'utente deve solo leggere due parole, nessuna domanda fastidiosa
  • il colore rosso indica che è veramente cancellato, è possibile enfatizzarlo aggiungendo "irreversibile" per eliminare
  • minimo movimento del mouse e degli occhi
  • minimo spazio sprecato
  • nessun cambio di contesto

screenshot## Heading ##

13
daniel

Il verde viene solitamente utilizzato nelle interfacce e nei luoghi per indicare "go", "continue" o "yes". Nel tuo caso, questo è esattamente ciò che l'utente sta cercando di fare. Stanno continuando con le loro azioni passate (che era di premere il pulsante Elimina). Il rosso è visto come uno stop, come "stop, ho cambiato idea!"

Nel tuo caso, andrei con ciò a cui gli utenti sono abituati: verde per continuare e rosso per annullare.

10
Mike

Perché devono essere di due colori diversi? Sembra che questo stia rendendo le cose più complicate a causa delle differenze culturali e di altri problemi che sono stati sollevati (anche se non sono sicuro di ciò che il pubblico è per questa applicazione o sito Web. Quindi forse le differenze culturali, per la maggior parte, sono irrilevanti se si tratta di una base di utenti molto specifica per un'applicazione).

Come ha detto qualcun altro, perché non rendere il pulsante di azione principale più prominente e il pulsante Annulla meno prominente? In iTunes, ad esempio, quando elimini un file musicale, la finestra del Prompt presenta un pulsante grigio per il pulsante Annulla e il pulsante di azione principale è blu. Oltre ad essere blu, il colore pulsa per richiamare l'attenzione su di esso.

Inoltre, nel tuo esempio iniziale, le etichette dei pulsanti sembrano formose. Stai già chiedendo loro "Vuoi veramente cancellare questo album?" Perché non etichettare i pulsanti semplicemente "No" e "Sì" o "Annulla" e "Elimina"?

9
Dmacatude

Il verde dovrebbe essere sempre positivo, in relazione all'opzione "Sì, vai avanti", quindi dovrebbe essere verde. Il fatto che stai eliminando qualcosa anziché crearlo è irrilevante.

Il rosso è abituato a "No, ho cambiato idea" o "No, non voglio che tu lo faccia", qualunque sia "quello".

7
Dave Murray

I pulsanti vengono utilizzati per inviare/inviare informazioni o agire, non per richiedere l'inazione. L'unico pulsante dovrebbe essere quello che procede attraverso il flusso. Ogni altra azione dovrebbe essere rappresentata da un collegamento. In questo contesto, raccomanderei l'uso di un colore per i pulsanti che non viene utilizzato in nessun'altra parte del sito o che è riservato solo alle azioni più serie. Presumo che questo sarebbe rosso. Il punto è costringere l'utente a uscire da uno stato mentale passivo di fare clic sui pulsanti di colore X in posizione Y (verde, in basso a destra) e indurli a chiedere esplicitamente "cosa farà?"

7
Matt Langan

Non usare alcun colore per tale azione. Entrambe le azioni hanno uguale importanza. Forse l'utente ha accidentalmente fatto clic su "Elimina" o l'utente desidera davvero "Elimina" l'album.

Il colore è una distrazione non necessaria in un tale scenario e non aiuta con il contesto.

Consenti al testo sulle etichette dei pulsanti di confermare le azioni: "Annulla" e "Elimina album"

4
Sumi

@JNMNRD ha la soluzione migliore.

Normalmente, l'azione che si desidera venga eseguita dagli utenti deve essere posizionata a destra e, poiché si tratta di un messaggio di conferma, l'azione di eliminazione deve essere posizionata a destra.

Inoltre, dando due colori alle diverse azioni, stai in qualche modo dando loro la stessa gerarchia. Considerando che se gli utenti hanno già fatto un'azione per eliminare, e questa è solo una conferma, le azioni non dovrebbero competere. Questo dovrebbe funzionare solo a scopo di validazione.

Ecco perché lasciare l'opzione di annullamento neutra è la cosa più utilizzabile in quanto l'utente leggerà le istruzioni concentrandosi immediatamente sul pulsante Elimina, ma comunque, se si pentiranno, avranno la possibilità di annullare.

1
Miguel Fernandez

In realtà sono molto affezionato all'esperienza utente di Github durante l'eliminazione di un progetto, il colore della tipografia insieme al bordo viene cambiato in rosso, il che indica chiaramente che sta accadendo qualcosa di pericoloso.

enter image description here

Github mostra il popup per assicurarsi che l'utente desideri veramente eliminare il progetto o il repository.

enter image description here

0
Pir Abdul