it-swarm.it

OK / Annulla a sinistra / a destra?

Dovrebbero OK il pulsante si trova a sinistra di Cancel pulsante o viceversa?

Ci sono studi che suggeriscono una delle soluzioni?

349
Art

Come per tutto: test utente! Per fortuna, l'eroe dell'usabilità Jakob Nielsen salta in soccorso qui nel suo articolo Alertbox sui pulsanti OK/Annulla :

Il pulsante OK deve essere visualizzato prima o dopo il pulsante Annulla? Seguire le convenzioni sulla piattaforma è più importante della subottimizzazione di una singola finestra di dialogo.

Kostya aveva ragione nel consigliare l'adesione alle linee guida della piattaforma. Ma per quanto riguarda le piattaforme basate sul web?

Se stai progettando un'applicazione basata sul Web, la decisione è più difficile, ma probabilmente dovresti scegliere la piattaforma preferita dalla maggior parte dei tuoi utenti. I registri del server ti mostreranno la percentuale di utenti Windows rispetto a Mac per il tuo sito Web o intranet specifico. Naturalmente, Windows in genere ha molti più utenti, quindi se non si può essere disturbati a controllare i registri, la linea guida che si applica alla maggior parte delle situazioni è OK prima, Annulla per ultimo.

Menziona anche altre due importanti linee guida che potresti prendere in considerazione quando crei i pulsanti OK/Annulla:

  • Spesso è meglio nominare un pulsante per spiegare cosa fa piuttosto che usare un'etichetta generica (come "OK"). Un'etichetta esplicita funge da "aiuto just-in-time", offrendo agli utenti una maggiore sicurezza nella scelta dell'azione corretta.
  • Rendi predefinito il pulsante più comunemente selezionato ed evidenzialo (tranne se la sua azione è particolarmente pericolosa; in quei casi, vuoi che gli utenti selezionino esplicitamente il pulsante piuttosto che attivarlo accidentalmente premendo Invio).
202
Rahul

La risposta è nelle linee guida dell'interfaccia utente per il sistema in uso.

Per Windows

Presenta i pulsanti di commit nel seguente ordine:

  • OK/[Fallo]/Sì
  • [Non farlo]/No
  • Annulla
  • Applica (se presente)
  • Aiuto (se presente)

Quindi Annulla è sempre sulla destra del pulsante OK.

Per MacOS

Un pulsante che avvia un'azione è più a destra. Il pulsante Annulla è a sinistra di questo pulsante.

Quindi, per gli utenti MacOS, Annulla è a sinistra del pulsante OK.

Per Android

L'azione sprezzante di una finestra di dialogo è sempre a sinistra. Le azioni non autorizzate ritornano all'utente allo stato precedente.

Le azioni affermative sono sulla destra. Le azioni positive continuano i progressi verso l'obiettivo dell'utente che ha attivato la finestra di dialogo.

Per Android, Annulla è sulla sinistra del pulsante OK.

Per altri sistemi consultare le linee guida.

142
Kostya

Pensa alla "lettura" della metafora. Gli occidentali leggono da sinistra a destra, i nostri cervelli sono condizionati a fluire da sinistra a destra. CANCEL è fondamentalmente un passo indietro (a sinistra) e OK/INVIA/SÌ/Ecc., Sono un passo avanti (a destra).

64
GoodShovel

Sembra che la convenzione OK/Annulla di Windows abbia fatto molto condizionamento al cervello per gli utenti. Quindi i test di usabilità sarebbero sicuramente usciti con molte persone cercando un pulsante OK a sinistra, Annulla a destra.

Ma ciò non cambia l'istinto più elementare di qualcuno che interagisce con il sistema senza alcun pre-condizionamento. Il mio istinto di base dice che il pulsante OK/Approvazione/Sposta in avanti, indipendentemente dal colore o dalla dimensione applicati, deve trovarsi sul bordo destro della finestra di dialogo.

Considera questa finestra di dialogo, senza etichette o luci colorate:

enter image description here

Dove vorresti fare clic? Farei clic sul pulsante sul bordo destro, se sto cercando di inviare il modulo. Il motivo è che prima di Windows sono stato condizionato dal mio istinto nei seguenti modi:

  • La lingua inglese scorre da sinistra a destra.
  • La navigazione del browser funziona Indietro (sinistra) e Avanti (destra). enter image description here
  • I vecchi giochi 2D come Dangerous Dave spostano il personaggio a destra, quando stanno avanzando ulteriormente.

enter image description here

  • I numeri sulla riga numerica aumentano a destra, diminuiscono a sinistra.

  • I pesi atomici nella tavola periodica aumentano a destra.

  • L'orologio scorre a destra.

  • Il calendario aumenta le date a destra.

Penso che la piattaforma Windows abbia creato un anti-pattern con OK/Annulla, che è ora così diffuso che sta convalidando gli studi di usabilità. Ma se si considerano i fattori sopra, credo che mantenere il pulsante principale sulla destra sia giustificato e una posizione difendibile.

EDIT: un ulteriore fattore da considerare è la coerenza. Se ti aspetti pulsanti aggiuntivi nelle finestre di dialogo, il pulsante principale sul bordo destro contribuirebbe a rimanere coerente con il posizionamento. Un esempio visivo chiarirebbe questo:

enter image description here

39
Adnan Khan

Per gli utenti la cui lingua è letta da sinistra a destra, suggerirei di mettere il pulsante OK a sinistra, poiché quegli utenti attribuiscono maggiore importanza alla prima cosa che vedono.

Ciò consentirebbe a questo sottoinsieme di utenti di completare il proprio compito il più rapidamente possibile.

17
Ryan Shripat

IMHO non importa troppo dove si posizionerà il pulsante "OK": a sinistra oa destra. Non importa che tipo di utenti visitino il tuo sito (con lingue ebraiche o arabe). Non importa quale tipo di software utilizzino. Le statistiche ci dicono che il 55% degli utenti vuole vedere il pulsante "OK" da destra, ma se lo metteremo a destra, l'altro 45% degli utenti sarà insoddisfatto.

La soluzione migliore è enfatizzare il pulsante "OK" (renderlo più evidente di "Annulla") e tutti gli utenti indicheranno facilmente il pulsante "OK" come pulsante più importante e primario.

Google e altre società utilizzano questo approccio nei loro software.

enter image description here

16
webvitaly

Luke Wroblewski ha scritto un libro sui moduli web (Web Form Design: Filling in the Blanks) e ha anche trattato alcuni principi come: "Azioni primarie e secondarie" (http: // www.lukew.com/resources/articles/psactions.asp ), "Etichette dei moduli allineate in alto, a destra o a sinistra" (http: // www.lukew.com/ff/entry.asp?504) o "percorso di completamento", ecc. (Puoi leggere anche http : //www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php )

Quindi, IMO a seconda del posizionamento dell'etichetta che hai (preferibilmente in verticale) e da sinistra a destra + regole dall'alto verso il basso, per avere un buon percorso per il completamento devi posizionare prima l'azione primaria (OK) e poi quelle secondarie (+ + Annulla)

EDIT: Posizionamento dell'etichetta nei moduli, di Caroline Jarrett, 2010 http://www.formsthatwork.com/files/Articles/labels-on-forms-for-uxlx-2010.pdf

15
Ecaterina Moraru

Penso che tutti abbiano dato un buon punto, ma c'è un altro punto chiave da menzionare qui.

Pulsanti come Ok/Invia/Salva ecc. Sono chiamati pulsanti di azione positiva. Allo stesso modo, pulsanti come Annulla/Ripristina ecc. Sono chiamati pulsanti di azione negativa.

Ora per rispondere alla domanda, la maggior parte di essi ha fornito alcuni punti positivi, ma ecco un'altra percezione che è il Test utente di un'applicazione che di solito decide la maggior parte dei problemi. Dopo tutto, tutte le applicazioni create sono solo per utenti.

Ci sono stati alcuni test del momento oculare e test di calore sono stati fatti agli utenti e ancora sono stati fatti a seconda della disponibilità dei laboratori. Lo scenario migliore emerge che la maggior parte degli utenti inizia a guardare l'applicazione Web o qualsiasi altra applicazione da sinistra a destra e dall'angolo superiore e inizia a scorrere verso il basso raccogliendo i punti chiave e generalmente finisce verso il fondo sinistro, quindi è sempre buono per mantenere il pulsante di azione positivo a sinistra e i pulsanti di azione negativa a destra.

Inoltre, non negando il fatto che si tratti di ricerche basate su pochi utenti, non è necessario che ciò si ripercuota sempre bene, ma il più delle volte lo farà.

C'è un altro punto chiave qui è che ci sarà più spazio tra i pulsanti di azione positivi e negativi in ​​modo che gli utenti impiegheranno poco più tempo per raggiungere i pulsanti negativi e quindi daranno loro un sacco di tempo per pensare e reagire.

Ho cercato di spiegare coppie di punti basati sulla mia esperienza e dai documenti di ricerca.

Commenta, così posso anche saperne di più.

Saluti Deepak Bajaj

9
Deepak Bajaj

Molte applicazioni si stanno spostando per utilizzare stili diversi per i pulsanti OK e Annulla. Un'interfaccia utente comune è avere il pulsante OK ma un pulsante tradizionale mentre Annulla è un pulsante di collegamento. Questo dà una chiara distinzione visiva tra i due e anche se porta l'utente a fare clic su OK, la distinzione visiva finisce per evidenziare la differenza e aiuta l'utente a scegliere quello che realmente desidera.

L'ho visto sia in applicazioni Web che desktop.

7
Sam

Giusto per chiarire il ragionamento:

È considerato "più corretto" posizionare il pulsante principale (OK) nell'angolo esatto della finestra di dialogo, poiché è più facile premere (ci sono state molte domande/discussioni passate su questo).

Tuttavia, dipende anche da ciò a cui gli utenti sono abituati: se stai creando un sito o un'applicazione per utenti Windows, dovresti seguire meglio gli standard di Windows.

Assicurati che "Invio" sulla tastiera sia correttamente associato a OK, anche molte persone lo useranno.

5
Dan Barak

Wow! Tante risposte che discutono a sinistra oa destra.

Ho eseguito test su questo me stesso e li ho trovati statisticamente inconcludenti.

La migliore risposta che ho trovato è che non importa in quale ordine vanno fino a quando l'azione primaria è chiaramente contrassegnata: uso sempre un pulsante colorato per [Fallo]/vai/inoltra/etc e solo un testo più piccolo pulsante per [Non farlo]/annulla/cancella/ecc.

Molto simile ai pulsanti "Pubblica risposta" e "elimina" nella parte inferiore di un modulo di risposta proprio qui su UX StackExchange!

4
Andrew Martin

Puoi trovare un'opinione interessante qui ; Anthony T. suggerisce che posizionare il pulsante "OK" a destra di "Annulla" è meglio:

Con il pulsante "Ok" sulla destra, le fissazioni visive sono inferiori e scorrono in una direzione [...]

Confrontalo con l'azione principale posizionata a destra della finestra di dialogo e l'azione secondaria posizionata a sinistra. Gli utenti iniziano con gli occhi sull'azione secondaria e spostano gli occhi sull'azione primaria per fare clic sul pulsante. Questo crea un totale di due fissazioni visive in una direzione, offrendo agli utenti un flusso visivo più veloce. Gli utenti si fissano su ogni pulsante una sola volta e finiscono con il pulsante di azione principale. Mettere l'azione primaria a sinistra potrebbe rendere più facile il raggiungimento da parte degli utenti, ma quando si osserva la velocità in termini di processi mentali e fissazioni visive dell'utente, posizionare l'azione primaria a destra di una finestra di dialogo è effettivamente più veloce.

4

Per le applicazioni web ASP.NET, dopo aver preso molta aspirina per gestire i problemi dei pulsanti predefiniti (qualunque cosa si attivi quando si preme il tasto Invio), ho appena messo il mio pulsante predefinito a sinistra in modo che sia il primo nel markup.

Browser diversi gestiranno più pulsanti di invio in modo diverso quando si preme il tasto Invio (specialmente quando il cursore si trova all'interno di una casella di testo al momento della pressione di Invio). Alcuni browser useranno semplicemente il primo pulsante nel markup per inviare il modulo, che potrebbe non essere quello che desideri (soprattutto se in seguito dovrai fare qualcosa sul lato server).

Se non stai utilizzando JavaScript personalizzato per gestire scenari di pulsanti predefiniti e fai affidamento sul comportamento predefinito del browser Web, probabilmente dovresti posizionare il pulsante predefinito a sinistra.

4
Adam Toth

Se possibile, suggerirei di omettere del tutto il pulsante Annulla, risolvendo così il tuo dilema. - A volte non è necessario ed è spesso attivato per errore.

Da http://www.nngroup.com/articles/reset-and-cancel-buttons/ :

La maggior parte dei moduli Web avrebbe migliorato l'usabilità se il pulsante Ripristina fosse stato rimosso. I pulsanti Annulla hanno spesso scarso valore sul Web.

Offri un pulsante Annulla quando gli utenti possono temere di essersi impegnati in qualcosa che vogliono evitare. Avere un modo esplicito di annullare fornisce un ulteriore senso di sicurezza che non è offerto semplicemente dalla partenza.

Annulla è utile soprattutto per le finestre di dialogo in più passaggi in cui l'utente ha superato una o più pagine con azioni. Al momento, premendo il pulsante Indietro non si annulleranno queste azioni e sarebbe meglio se l'utente facesse clic su Annulla.

4
Adam George

Alla fine (soprattutto dopo aver letto tutte le risposte di cui sopra), vedo questa discussione ridursi alla convenzione della piattaforma rispetto all'usabilità "oggettiva". Quello che intendo per "obiettivo" è quanto sarebbe utilizzabile qualcosa per gli utenti che non hanno familiarità con alcuna convenzione del sistema operativo. Più specificamente:

OK a destra
Questo modello vince a mani basse nell'argomento oggettivo di usabilità SE gli utenti non sono condizionati alla convenzione Windows meno utilizzabile (vedi articolo ). Mentre l'articolo discute, avere OK a destra si allinea con la nostra convenzione di lettura da sinistra a destra, un flusso di attività più efficiente, è un obiettivo d'angolo migliore, anche il fatto che pensiamo che le tempistiche siano eseguite da sinistra a destra (quindi un 'indietro'/'annulla' sulla destra ha senso visto che è un modello di ritorno nel tempo).

OK a sinistra
Convenzione di Windows

È una realtà sfortunata, ma i modelli mal progettati (come OK a sinistra) possono diventare una convenzione e gli utenti se ne aspettano. Cercare di fare qualcos'altro, anche se oggettivamente è un modello più utilizzabile, si tradurrà in una scarsa usabilità. Un esempio classico è il sistema di misura metrico vs. imperiale: il sistema metrico ha tutto ciò che serve in termini di usabilità, facile conversione dell'unità, ecc .; ma se costringi gli americani delle piccole città a pensare in metri e centimetri quando sono abituati a pollici/piedi otterrai scarsa usabilità e utenti molto frustrati. Immagino che la lezione sia lavorare molto duramente per assicurarsi che non introduciamo mai povere convenzioni in primo luogo!

Personalmente, quando progetto per il web, scelgo di mettere il pulsante OK a sinistra, insisto anche per affermare la mia altezza in centimetri e il mio peso in chilogrammi, anche quando parlo con persone dalla mentalità imperiale. È davvero una guerra di logoramento, ma lentamente il sistema imperiale si estinguerà e, si spera, anche la convenzione "OK a sinistra" di Windows :)

3
M.A.X

Andrei con "Ok" sulla destra. A causa della direzione di lettura occidentale che va da sinistra a destra. E "Annulla" non ti porterà avanti, ma "Ok" lo farà.

Ma un approccio totalmente diverso. Non usare "Ok" e scrivi sui pulsanti quello che fanno. Ad esempio "Salva" o "Non salvare" non richiede all'utente di leggere il testo della descrizione. Risparmia tempo e previene errori di input.

2
erikrojo

Lol, non posso fare a meno di ridere di molte di queste risposte. Sembra un caso di non vedere la foresta per gli alberi. Come ogni problema UX, fondamentalmente dipende da come è strutturato il modulo. Ad esempio, Etichette in alto, campi in basso o etichette a sinistra dei campi accanto. Guarda l'intera pagina e come gli occhi di un utente scorrono lungo il modulo. C'è una chiara linea di vista sul pulsante finale "Invia"?

Come affermato in un post precedente, il libro di Luke Wroblewski sui moduli Web Design di moduli Web: Riempire gli spazi vuoti contiene alcuni dei migliori consigli nella creazione di moduli Web e un grande paradigma di moduli dal punto di vista dell'utente - I moduli sono un mezzo per raggiungere un fine e sono tollerati a causa del risultato finale previsto (ad es. acquisto di qualcosa, creazione di un account per ottenere l'accesso a un luogo, ecc.). Test utente, test AB sì ovviamente se puoi. L'obiettivo finale è che il modulo è più semplice da compilare meglio è.

2
mike

Mi piacciono molto alcuni dei siti in cui NON c'è un pulsante (visivamente) per le azioni negative, solo un link. In questo modo non devo perdere tempo a guardare i pulsanti, so ancora meno che il pulsante lo fa. E se so che non voglio fare ciò che le pagine vogliono che io faccia, mi prendo un po 'di tempo per vedere come sarebbe meglio andare avanti (cercare il pulsante di chiusura, il pulsante Annulla)

quindi invece di:

[NOOOOO!] [CLICMI! CLICMI!]

ci sarebbe:

No grazie! [Sì, per favore!]

In questo modo non è molto importante posizionare il pulsante, ne esiste solo uno e quindi facile da individuare.

1
fallenboy

Nelle mie app sto usando il colore visivo per evidenziare lo scopo del pulsante di azione. Quindi non importa se è sinistra o destra. Personalmente preferisco avere il pulsante "ok" sulla destra (perché sono destrimano e/o utente osx - e in realtà questo è un link ..)

  • grande pulsante verde per la convalida
  • grande pulsante rosso per la cancellazione
  • (grande o no) pulsante grigio per annullare
1
Marc D

Per me questo sarebbe l'ordine logico:

<LeftRight>

<PreviousNext>

<BackForward>

<BackDone

Do nothingDo it

CancelOK

Tranne OK, dovrebbe essere sostituito con l'azione effettiva come SaveDeleteAcceptExit o Send.

Quando incontro persone che discutono di mettere OK a sinistra, chiedo sempre loro di posizionare Left vs RightPrevious vs Next, e Back vs Forwarde lascia che discutano il motivo per cui li hanno messi in quell'ordine, prima di lasciarli discutere OK dovrebbe essere sulla sinistra.

1
Ole Tange

In ordine di priorità, utilizzare la prima soluzione disponibile:

  • linee guida della piattaforma
  • dall'inizio alla fine (dove l'inizio per le lingue occidentali è in genere a sinistra, tuttavia può essere diverso, ad esempio l'arabo inizia a destra e termina a sinistra)
  • nel modo più atteso dal tuo utente

Tuttavia, nel caso di screen reader e simili strumenti di accessibilità, avere l'azione principale all'inizio (lasciato nelle culture occidentali) può far risparmiare un sacco di tempo a utenti con bisogni speciali!

1
straya

Naturalmente ci sono molti argomenti a favore e contro entrambe le parti.

Lo direi così. "Credi che il posizionamento positivo-negativo sia il migliore? No o Sì?"

Il punto è che "Sì o No" scorre meglio quando pronunciato, il che probabilmente spiega perché l'ordine dei pulsanti positivo-negativo è stato scelto da Microsoft.

D'altra parte, il flusso positivo-negativo è spesso usato nella retorica e nel dibattito per aggiungere peso all'argomento positivo e mantenerlo fresco nella mente di una persona. "Vuoi vedere i tuoi figli soffrire per mano del partito avversario? O vuoi votare per il nostro partito e garantire il tuo futuro?" E così via.

0
Seth Jeffery

Supponendo che sia necessario prendere la decisione se l'azione positiva debba essere disponibile a sinistra oa destra e ignorare la propensione all'utilizzo di determinati sistemi operativi o apparati fisici (libri), costrutti astratti (flusso di forme magiche) ecc., La scienza comportamentale sembra suggerire che l'opzione statisticamente più a sinistra sia scelta più frequentemente come prima scelta.

Ciò implica che è preferibile posizionare un'azione positiva (OK o etichetta di azione esplicita) a sinistra se non vengono considerati altri fattori.

Fonte: Sono solo gli umani che contano da sinistra a destra?

0
too