it-swarm-eu.dev

Bottoni da colorare

Ho un'applicazione che presenta all'utente alcune informazioni su un appuntamento e consente loro di eseguire una qualsiasi delle varie azioni che l'utente deciderà in base alle informazioni presentate.

Ad esempio, le azioni sono:

  • Annulla l'appuntamento
  • Ricorda ai visitatori di portare oggetti
  • Riprogrammare l'appt in un'altra posizione
  • Modifica le informazioni del visitatore
  • Ricorda ai visitatori di portare informazioni
  • Contatta referrer
  • Pianifica l'app con altri provider
  • Falso allarme
  • OK come specificato

L'azione (specificata da un pulsante) invia un messaggio di posta elettronica (con piastra di caldaia e parametri forniti per ognuno). Attualmente consentiamo il maggior numero possibile di questi, ma solo uno di ciascuno, quindi disabilitiamo dopo l'uso (questo non è il punto principale di questa domanda, ma sicuramente potrebbe essere messo in discussione e commentato).

Il problema dell'usabilità che vedo è come distinguere tra tante azioni possibili. Le opzioni (non necessariamente reciprocamente esclusive) che vedo sono:

  • colorare ogni pulsante in modo diverso
  • colorare la maggior parte dei pulsanti in un modo, ma "OK" "Falso allarme" e "Annulla" in modo diverso
  • colorare ogni pulsante allo stesso modo
  • ordinare gli articoli (più importanti all'inizio e alla fine)
  • ordinatore

Quale di questi è il migliore? Cosa c'è di meglio di questi (se non altro)?

buttonscolor
2
Mitch

Il modo migliore per presentare un gran numero di azioni è raggrupparle e posizionarle in modo diverso. Non limitarti a metterli tutti in fila.

Ad esempio, potresti:

  • inserire le azioni principali (OK, annulla/falso allarme) nell'angolo in basso a destra
  • inserire azioni secondarie (ricordare al visitatore, riprogrammare, modificare informazioni, falso allarme, ecc.) in un altro raggruppamento in basso a sinistra
  • contestualizzare altre azioni, ad esempio
    • se il referrer è elencato, metti il ​​pulsante per contattarlo accanto al suo nome (o rendilo un link)
    • invece di un pulsante "modifica", consenti la modifica in linea/live delle informazioni
    • metti "falso allarme"/"annulla" nell'angolo in alto a destra come "X"
    • è sufficiente fare riprogrammare per un'altra posizione l'atto di fare clic sulla posizione e cambiarla

Puoi anche fare ciò che fanno molti client di webmail e nascondere le azioni meno utilizzate in un menu a discesa o in un elenco a discesa.

In definitiva, il colore non è troppo importante (e non dovrebbe essere per il motivo menzionato da ChrisF). Non vuoi un arcobaleno di colori nella tua interfaccia utente. Usa il colore con parsimonia come segno distintivo (ovvero la tua seconda opzione, oppure usa il colore per raggruppare le azioni principali).

6
Lèse majesté

Esistono molte azioni e alcune azioni sono fortemente correlate alle informazioni fornite nell'appuntamento. Ad esempio: la riprogrammazione è correlata alla data/ora corrente dell'appuntamento, l '"aggiustamento delle informazioni del visitatore" sembra fortemente correlato alle informazioni attualmente presenti, ecc. Posizionerei i pulsanti per queste azioni vicino a dove si trovano le informazioni.

Quindi redigendo un po 'lungo:

 Date: Jan 1st 2011 [reschedule]
 Customer: John and Jane Doe [adjust information]
 ------- 
 Items to be brought:
 * item 1
 * item 2
 * [remind customer to bring items]
 ------ 
 [OK as specified] [X Cancel appointment]

... eccetera

Per riassumere: fai in modo che le azioni correlate a parti specifiche dell'appuntamento siano vicine a dove si trovano le informazioni su quella parte. Le azioni principali che hanno l'intero appuntamento vanno in fondo o, se l'elenco è molto lungo, il più utilizzato potrebbe anche andare in alto, appena sotto o accanto alle informazioni identificative. (Una X rossa per l'annullamento potrebbe non essere la scelta più ovvia, le croci rosse sono anche percepite come "portami fuori di qui": annullare la modifica dell'appuntamento è qualcosa di completamente diverso dall'annullare l'appuntamento stesso. Assicurarsi che gli utenti non possano confondere il Due.

Non farei molto affidamento sul colore per fornire informazioni (e certamente non come unico modo per fornirle), ma è un suggerimento utile. Mantieni i toni attenuati (il verde lime e il rosso acceso affollano l'interfaccia così facilmente) e un set limitato di colori.

Sembra anche un caso eccellente per alcuni test di corridoio di alcune varianti.

3
Inca