it-swarm.it

I pulsanti OK / Annulla devono essere allineati a destra o al centro?

Dove devo inserire i pulsanti OK/Annulla nelle mie finestre di dialogo? In basso centrato o allineato, giusto? Ho visto entrambi e personalmente non mi interessa, ma voglio creare un aspetto coerente in tutta la mia applicazione. Ci sono delle linee guida per questo o dovrei fare quello che voglio?

46

Penso che questo si applichi anche a questa domanda e risponda:

(Spoiler: Non importa .)

In casi come questo, spesso non importa cosa fai. Entrambe le scelte hanno buoni argomenti a suo favore e nessuna scelta è suscettibile di causare catastrofi di usabilità. Alcuni utenti potrebbero risparmiare 0,1 secondi se si sceglie la scelta "giusta" per determinate circostanze, ma semplicemente non vale la pena condurre ricerche sufficientemente elaborate per scoprire quale sia quella scelta. Meglio spendere le risorse di usabilità per quelle cose che possono cambiare i tuoi indicatori chiave di prestazione dell'83% o più.

Ulteriori informazioni: seit.com/alertbox/ok-cancel.html

45
Nacho

Quando si parla strettamente di allineamento, non esiste una risposta giusta se non quella di essere coerenti.

Tuttavia, l'allineamento dei pulsanti è correlato a posizionamento o ordine logico dei pulsanti .

Esistono due paradigmi generali che possono essere applicati al posizionamento dei pulsanti **.

  1. Ordine di lettura: il primo pulsante rilevato nell'ordine di lettura è primario (Ok) e viene data priorità alle opzioni successive (Annulla)
  2. Avanti/Indietro: l'avanzamento o l'azione in avanti (Ok) sono associati al movimento verso destra mentre all'indietro o Annulla (Annulla) è associato al movimento verso sinistra.

L'allineamento dei pulsanti può influenzare il paradigma percepito dell'utente. Pertanto, alcune combinazioni di allineamenti e posizioni possono essere in conflitto e quindi confondere gli utenti.

alt text

** questo presuppone una lettura da sinistra a destra; forse non è lo stesso per le lingue da destra a sinistra.

35
g .

Fai ciò che si adatta alla tua applicazione e al sistema operativo di destinazione.

Tuttavia, come sottolineato, la coerenza tra le applicazioni è probabilmente più importante.

24
ChrisF

Penso che sia meglio (e più generico) averli allineati correttamente.

4
megubyte

Sono sempre sulla destra e l'utente si aspetta che siano sulla destra. Assicurati di spaziarli abbastanza e dai loro stili diversi per evidenziare l'azione principale.

3
giancarlo

Preferisco posizionare l'azione più probabile (OK in questo caso) a destra e dargli un qualche tipo di colore per renderlo più facile da individuare e l'azione meno probabile (Annulla in questo caso) a sinistra colorata in grigio o un colore lungo le linee dello sfondo del modulo.

Penso che sia un cattivo design metterli uno accanto all'altro. Seguendo l'approccio "non farmi pensare", quando devo annullare, mi fermo e cerco il pulsante, ma in tutte le altre volte voglio solo agire automaticamente.

Inoltre vedi questa domanda su ui.stackexchange .

3
idophir

Dipende dalla tua piattaforma. Windows posiziona i pulsanti sul lato destro nell'ordine <OK> <Annulla> e Mac OSX nell'ordine <Annulla> <OK>. Come altre risposte .... sii coerente. Per il posizionamento dei pulsanti preferirei il lato inferiore destro.

2
sysscore

penso che "OK" o il pulsante di azione prioritario dovrebbe essere sulla sinistra per il seguente motivo 1: buona percentuale di utenti usa la tastiera su moduli o finestre di dialogo e l'utente impiegherà meno tempo per raggiungere l'azione più favorevole tramite tabulazione se sono sul lato sinistro . 2: Rotazione degli occhi o Legge di Fitt 3: Pensa alle persone non vedenti (semi cieche) o all'uso dell'applicazione quando guidi o accedi all'applicazione in modalità vocale. 4: ultimo, non ultimo, usa i verbi come tua azione

Ci sono molti thread disponibili in questo forum, ti preghiamo di esaminarli

Inoltre, tieni presente che i miei suggerimenti non sono per piccoli dispositivi.

2
Hemchandra

Per un processo lineare (come un programma di installazione), l'allineamento dei pulsanti "Avanti" a destra (in un ambiente occidentale) potrebbe essere più intuitivo.

Direi che l'ordine dei tuoi pulsanti è più importante. Su Windows, il "pulsante OK" è sempre a sinistra e il "pulsante Annulla" a destra. Poiché gli utenti non leggono, scambiando i pulsanti OK e Annulla (come fanno alcune applicazioni Mac con port), si confonde l'utente.

2
Petrus Theron

Penso che dipenda dal design. Se si utilizza un design standard per il modulo, posizionerei i pulsanti OK/Annulla sul lato destro (http://bit.ly/9IzQo0), ma se si utilizza CSS per modificare i moduli, li posizionerei al centro (http://www.tumblr.com/register).

1
rgaspary

Se i campi del modulo sono allineati a sinistra, sembra logico allineare anche i pulsanti. Ecco alcune ricerche su dove vanno realmente gli occhi degli utenti e quanto velocemente reagiscono: http://www.lukew.com/ff/entry.asp?571

Ciò suggerisce che l'allineamento a sinistra di queste due opzioni è la scelta migliore per il design, specialmente quando anche i controlli del modulo sopra sono allineati a sinistra. Posizionando i pulsanti "Invia" e "Annulla" a sinistra significa che gli occhi delle persone avevano meno distanza da percorrere.

In termini di movimenti oculari, le persone erano meno efficienti quando utilizzavano [un'opzione con i pulsanti allineati a destra].

1
Luke

Penso che sia facile criticare argomenti come questi caso per caso, ma penso che tutti dovrebbero considerare un intero sistema di progettazione e/o libreria di modelli quando esprimono la loro opinione e/o i risultati dei test. Il fatto è che, a seconda del contenuto e dei test, alcuni potrebbero mostrare una conversione più elevata con OK a sinistra e OK a destra.

Tuttavia, quando si considera un intero sistema di progettazione, ritiene che la coerenza sia migliore rispetto a quando funziona meglio nei singoli test sinistro/destro? Sono d'accordo che si desidera invertire intenzionalmente l'azione "in avanti" quando vi sono esternalità negative ponderate, come "Elimina profilo di pagamento", qualcosa che non è reversibile, ecc., Posizionando il CTA - in quei casi - a sinistra e annullare sulla destra.

Ma, anche con questo in mente, immaginiamo che la maggior parte degli utenti siano utenti di Windows (in questo momento), e stai andando a un flusso di checkout progressivo. Ti aspetteresti che "checkout" o "Continua" siano sulla destra, con indietro o annulla sulla sinistra. Questo è anche il caso della maggior parte del layout di annullamento/Ok dell'utilizzo modale (tranne per Foundation), ma ciò non si adatta bene a coloro che discutono i singoli test A/B o usano test che hanno prodotto una conversione più elevata a sinistra, a destra.

Personalmente, nell'esperienza di test, i CTA funzionano meglio a destra, ma sono sempre curioso di sapere quali parametri hanno le persone che hanno una guida di stile o un modello di progettazione che mostra i CTA nella posizione più a sinistra.

1
Arondale
  1. L'ordine non ha importanza fino a quando sono vicini per implicare che sono fratelli. Cioè, i pulsanti OK e Annulla fanno cose diverse ma influenzano lo stesso elemento.
  2. Per una lingua da sinistra a destra, metterei i pulsanti al centro o arrossire a destra.
  3. Vorrei sottolineare il pulsante OK con un colore che corrisponde al marchio.
0
Tim Huynh

In genere utilizzo OK a sinistra, Annulla a destra.

L'unico caso in cui potrei vedere alterare questo schema (e questo è spaccare i capelli, intendiamoci) sarebbe per azioni irrevocabili da parte dell'utente (cioè, cancellare il mio account, uccidere tutti gli umani, ecc.) E quindi potrei desidera deviare per costringerli a pensare all'azione o forzare l'azione predefinita a essere l'opzione più sicura.

0
drivingmenuts

Secondo diagramma di Gutenberg , l'area terminale (dove il sito presenta la sua chiamata finale dopo che l'utente ha scannerizzato il contenuto della pagina) è in basso a destra dello schermo. A causa del modello di lettura naturale dei lettori occidentali, avere i pulsanti in questa posizione in realtà riduce l'affaticamento dell'utente, mentre finiscono la navigazione in questa posizione. Se i pulsanti si trovano in basso a sinistra, gli utenti generalmente finiranno nell'area del terminale e dovranno tornare a sinistra in base al richiamo per fare la loro azione. Questo modello si applica sia ai popup sia alle schermate di modifica/aggiunta.

Questo schema generale si applica anche all'ordine in cui sono posizionati i pulsanti. Se si elenca OK prima di Annulla, l'utente visualizzerà quasi sempre tutte le opzioni prima di selezionare quella desiderata. Nella maggior parte dei casi, l'utente dovrà fare clic su OK su Annulla. Ciò significa che visualizzano OK, quindi Annulla, quindi tornano a OK. Lavoro molto minore, ma ancora aggiunto.

0
Brad Hutchison

Grandi risposte qui. Ciò che nessuno ha menzionato è la legge di Fitt che regola la velocità (e la facilità) di fare clic sui target in una GUI. Fornisce una dura scienza su dove posizionare i pulsanti primari.

In sostanza la legge Fitts ( https://en.wikipedia.org/wiki/Fitts%27s_law ) afferma che la dimensione del bersaglio e la distanza agiscono prevedibilmente sul tempo necessario per colpire il bersaglio. Quando un pulsante si trova nell'angolo di una "scatola", la dimensione del bersaglio è probabilmente infinita (le uniche dimensioni del bersaglio davvero infinite sono gli angoli dello schermo del computer in cui il cursore si ferma completamente da solo). Mentre la velocità non è sempre una considerazione primaria, dovrebbe essere il comfort (facilità d'uso).

Demo interattiva (senza angoli!): http://simonwallner.at/ext/fitts/

0
Rashcom