2010-05-14 15 views
13

Windows e OS X hanno sempre battuto teste su questo, ma qual è il consenso generale sul fatto che un pulsante Salva o Annulla vada per primo in un'applicazione web?Usabilità Web: salva e annulla ... oppure ... annulla e salva?

[Salva] [Annulla]

o

[Annulla] [Salva]

Nota: ho questi pulsanti nella parte superiore del modulo a filo a destra.

+3

Questo è molto individuale e polemico –

+0

Vedere anche http://stackoverflow.com/questions/50335/ok-cancel-or-cancel-ok –

+0

State supportando i dispositivi touch-screen? Se è così, la maggior parte delle persone è destrorsa, quindi metti il ​​pulsante più spesso premuto in basso a destra, soprattutto se è sicuro di "Salva", ma perde il tuo lavoro su "Annulla". – JBRWilkinson

risposta

17

Seguire la principle of least astonishment: farlo nel modo in cui Windows ([Salva] [Annulla]) se non si ha ragione di credere che gli utenti Mac compongono una porzione maggiore della tua base di utenti.

+0

Questo sembra piuttosto insolito. Ci sono molti moduli di Windows che hanno il pulsante Annulla in alto a destra? –

2

probabilmente non è una grande differenza in entrambi i casi, a patto che sia chiaro ciò che i pulsanti fanno. Il mio voto personale sarebbe di avere un salvataggio a sinistra, poiché è quello che le persone fanno più spesso, e le persone leggono da sinistra a destra.

Inoltre, vorrei anche mettere un po 'di spazio tra i tasti, per assicurarsi che gli utenti non accidentalmente fare clic su una quando si sta cercando di fare clic all'altro.

1

Io generalmente messo il pulsante che farà sì che il maggior numero di azioni che si verifichi più lontano dal centro. Se i pulsanti sono in alto a destra, il mio ordine sarebbe [Cancellare] [Salva]

6

Istintivamente inserisco sempre il pulsante Salva come l'elemento più a destra.

Penso che ci siano altre cose da considerare. Principalmente se un pulsante Annulla è effettivamente necessario o se un altro elemento (come una traccia di breadcrumb che punta alla pagina precedente) potrebbe essere più appropriato.

Modifica: http://www.lukew.com/resources/articles/web_forms.html - La sezione "Azioni primarie e secondarie" mostra in che modo la ponderazione visiva può essere utilizzata con buoni risultati.

1

La familiarità è spesso più importante che essere oggettivamente corrette, dal momento che le cose che non hanno familiarità sono spesso, per impostazione predefinita, meno utilizzabile.

Le persone utilizzano il proprio PC Windows o il proprio Mac in più rispetto all'app o al sito Web. Quindi, se fossi nei tuoi panni, sceglierei l'ordine che pensi sia familiare agli utenti a cui tieni di più. Se è un pubblico per lo più mac, fallo in modo mac. Se per lo più pubblico di PC, farlo al modo PC.

+0

Immagino che una cosa che posso fare sia rilevare User Agent e che gli utenti di Safari lo spingano in un modo usando CSS e un altro per utenti non Safari, anche se potrebbe essere volatile. –

+1

@Nissan, non renderlo diverso nei vari browser. Sarebbe molto confuso per gli utenti che cambiano i browser. – tster

2

Perché è necessario un pulsante Annulla?

Su un modulo web, l'utente può annullare quasi sempre attraverso qualche altra azione. Mettere "Annulla" vicino a "Salva" crea una situazione in cui l'utente ha buone probabilità di firing the ejection seat quando tutto ciò che vogliono è salvare.

+2

Non sono d'accordo con la prima parte, ma la seconda parte è azzeccata. Ho pensato di usare pulsanti più grandi per i commit di Cancels, ma sembra davvero brutto. –

2

Per tutti gli argomenti riscaldati questo problema può generare, non sembra fare molta differenza in termini di prestazioni umano reale. Il advantages and disadvantages of each work out to a wash. Gli utenti appaiono equally likely to expect Cancel on either the left or right nei moduli Web. Sembra esserci un pregiudizio per favorire Annulla a sinistra se i pulsanti sono ampiamente separati, ma non si vuole farlo dal putting the Execute button the far right is associated with slow responses and high error rates sui moduli web.

Direi che la cosa più importante è essere coerenti internamente nell'app e accertarsi che Annulla sia sempre contrassegnato come "Annulla" (non, ad esempio, "Ritorno" come ho visto in un'app Web).Altrimenti, metti i pulsanti uno accanto all'altro e vicino all'ultimo campo che l'utente guarderà (che probabilmente non si trova nella parte superiore destra del modulo).

E non preoccuparti troppo.

1

Su un modulo normale, Salva dovrebbe essere sotto i campi del modulo. Annulla dovrebbe essere a sinistra oa destra di Salva, ma non troppo vicino per evitare errori tragici. Web Application Form Design page di Luke W ha alcuni diagrammi illuminanti.

Il modulo è insolito in quanto si desidera che i pulsanti siano in alto. In questo caso ho bisogno di sapere come appare la pagina e come sarà usata. Ma dal momento che stai già interrompendo qualsiasi flusso tra i campi modulo e Salva, sospetto che lo Salva dovrebbe essere sulla destra per supportare il percorso naturale da sinistra a destra.

(Windows e Mac hanno standard differenti per il posizionamento pulsante nelle finestre di dialogo, ed entrambi hanno i pulsanti in basso. Questi principi non si applicano a pagine web.)

5

La chiave qui è che noi stanno parlando "web" usabilità. A questo punto, penso che sia abbastanza chiaro che il principal of least astonishment a cui si fa riferimento nella risposta accettata suggerisca che il diritto è l'azione diretta (salva) e sinistra è l'azione all'indietro (annulla), e non ciò che la risposta accettata suggerisce.

Il browser Web è l'interfaccia utente a cui gli utenti sono più abituati e oltre 15 anni di navigazione Web ha reso abbastanza chiaro che il pulsante Indietro è a sinistra del pulsante Avanti. Presenta anche linguaggi basati su da sinistra a destra per i quali il web è stato inizialmente sviluppato. Il diritto è dove stai andando, la sinistra è dove sei stato.

Anche in generale volgare informatico, una barra in avanti, /, si piega a destra mentre una barra posteriore, \, si inclina verso sinistra.

L'interfaccia utente di Windows è l'outlier qui, e penso che sia una decisione sbagliata basare la progettazione dell'interfaccia utente sulla precedenza di Microsoft.

Potrei sottolineare che il posizionamento in alto a destra dei due pulsanti non è standard, ma non penso che sopporti l'ordinamento dei pulsanti stessi.

Problemi correlati