it-swarm.it

Un pulsante di attivazione / disattivazione dovrebbe mostrare lo stato corrente o lo stato in cui cambierà?

Ho una domanda veloce sui pulsanti che si alternano tra due stati. (Pensa a Riproduzione/Pausa, o Riproduzione casuale/Riproduzione regolare.) Come dice il titolo, l'interruttore dovrebbe mostrare lo stato corrente o lo stato in cui passerà?

Penso che le persone siano abituate alla convenzione Play/Pause. Ma la riproduzione casuale/casuale potrebbe essere più confusa se si mostra lo stato di transizione invece dell'attuale. Ad esempio, il lettore musicale integrato su Xbox 360 lo fa in questo modo: quando è in modalità shuffle, mostra l'icona per la riproduzione diretta e viceversa e mi confonde sempre (sono in modalità shuffle o riproduzione diretta).

Lo vedo in questo modo: Play/Pause è più simile all'azione come all'inizio della riproduzione o alla pausa della riproduzione. Sì, dietro le quinte è una transizione di stato ma per l'utente c'è un'azione. Considerando che Shuffle/Straight Play è un'opzione ed è meglio mostrare lo stato corrente (e possibilmente avere solo un'icona e un pulsante di modifica per mostrare che l'opzione è abilitata/disabilitata). Pensieri?

461
Michael Brown

In About Face 2. (c'è una v3 ma non ce l'ho) Cooper e Reimann (2003, pp. 341-2) trattano questo argomento sotto il intestazione "Pulsanti flip-flop: un linguaggio di selezione da evitare". Consiglio vivamente di consultare questo libro in quanto presenterò solo un estratto:

I controlli dei pulsanti Flip-flop sono molto efficienti. Risparmiano spazio controllando due opzioni reciprocamente esclusive con un unico controllo. Il problema con i controlli flip-flop è che non riescono a soddisfare il secondo dovere di ogni controllo: informare l'utente del loro stato attuale. Se il pulsante indica ON quando lo stato è spento, non è chiaro quale sia l'impostazione. Se è OFF quando lo stato è spento, tuttavia, dov'è il pulsante ON? Non usarli. Non sui pulsanti e no sui menu!

Gli autori (e penso a questi come un'autorità in materia) presenta due possibili soluzioni: Dovresti precisare l'azione del pulsante come una frase verbale (ad es. Passa alla modalità ritratto, sacrificando in tal modo parte dello spazio salvato) o usa completamente un'altra tecnica ( ad es. due pulsanti di opzione).

268
jensgram

Risposta breve:

Una risposta piuttosto tardiva, ma sono sorpreso che nessuno qui lo abbia sottolineato prima - è possibile che un interruttore a levetta mostri il suo stato attuale e lo stato in cui cambierà semplicemente avendo il testo all'esterno il pulsante, anziché su di esso.

Real Life Switches

Risposta lunga:

Come sottolinea dotancohen:

Il problema è che in inglese "on" e "off" sono sia avverbi che aggettivi.

I pulsanti che hanno un testo al di fuori del loro corpo usano questo fatto a loro vantaggio! Continuare a leggere...


iOS On-Off Switch

Concentriamoci sullo stato che è blu e dice SU per esempio.

iOS ON

Puoi sapere se l'interruttore è attualmente su ON o se andrà avanti se sposti/fai clic/tocchi il cursore? Il testo è ovvio? "ON" è qui uno stato (aggettivo) o un'azione (verbo)? Poco chiaro. Il colore è utile per aiutarti a decidere? Probabilmente, ma non certamente - gli utenti iOS potrebbero essere abituati agli stati di questo progetto, ma non si può dire come gli utenti non iOS lo interpreterebbero. Per capire cosa intendo, prendi questo interruttore di viaggio nella vita reale, che ha lo stesso design dell'interruttore iOS: puoi dire con certezza se l'interruttore di viaggio è attualmente ATTIVO?

Ambiguous Trip Switch

L'interruttore di seguito è sulla falsariga del design iOS, ma molto peggio ...

Ambiguous On-Off Switch

... non è nemmeno chiaro quale sia la metà della maniglia di scorrimento/clic!


Unambiguous On-Off Switch

La domanda dalla citazione di Jensgram ...

Se il pulsante indica ON quando lo stato è spento, non è chiaro quale sia l'impostazione. Se è OFF quando lo stato è spento, tuttavia, dov'è il pulsante ON?

... non sorge mai qui poiché il pulsante non indica né ON né OFF: si regge da solo. Inoltre, non c'è confusione sul contesto delle parole ON e OFF: sono stati molto chiaramente (aggettivi) poiché fare clic su di essi (nel disegno normale) non farebbe nulla!

Potrebbe essere interessante notare che una modifica a questo disegno consentirebbe di rendere il testo sul lato più lontano del pulsante selezionabile/selezionabile. In tal caso, la parola più vicina alla maniglia dell'interruttore è lo stato, mentre l'altra è l'azione e i ruoli vengono invertiti quando l'interruttore viene attivato.

Modded On-Off Switch

Anche così, la prospettiva dell'utente sullo switch non viene modificata - in nessun caso l'utente è confuso sullo stato corrente dello switch. In effetti, il design potrebbe essere ulteriormente migliorato per la facilità d'uso evidenziando lo stato attuale:

Highlighted On-Off Switch


Win8 On-Off Switch

Il colore del pulsante indica lo stato corrente (acceso = ON, come nella vita reale) e le parole On/Off sotto il testo dell'opzione rassicurano l'utente dello stato corrente.

414
SNag

Qualunque cosa tu decida, per favore non fare ciò che fa Twitter.

Aargh don't change the button when I'm about to click it!

60
Daniel Alexiuc

Il problema è che in inglese "on" e "off" sono sia avverbi che aggettivi. Pertanto, trova le parole di sostituzione che sono verbi o aggettivi per etichettare il pulsanti con:

Enable / Disable
Enabled / Disabled
Start / Stop
Running / Stopped

modifica molto tardi: guarda questo fantastico interruttore progettato da un mio collega, che riesce a mantenere la terminologia "on/off" ma lo fa in modo inequivocabile:

on off switch

35
dotancohen

Un compromesso ragionevole sarebbe di non evidenziare il pulsante (forse avere un colore di sfondo neutro) quando è spento, ed evidenziarlo (cambiare il colore di sfondo) quando è acceso.

Ad esempio, guardando questo screenshot dell'app Spotify (web), pensi che shuffle sia attivato o disattivato?

Shuffle is most certainly on

26
Marks Polakovs

Penso che tu abbia praticamente tutto nella tua domanda.

Se l'interruttore è un'azione - Riproduci/Pausa - allora dovrebbe mostrare cosa accadrà. Quindi, durante la pausa, mostra Play e poi durante la riproduzione di Show Pause.

Se l'interruttore è un'opzione - Shuffle/Linear - dovrebbe mostrare lo stato corrente.

Come indichi che per l'utente quel pulsante è un'azione e l'altro è un'opzione non sono sicuro ...

25
ChrisF

Direi che dipende dal caso, come ha detto ChrisF, è importante fare una distinzione tra pulsante azione e pulsante stato.

Se il tuo pulsante ha del testo, puoi cambiarlo per mostrare che fare clic su di esso farà qualcosa (es: "Attiva riproduzione casuale"). Tuttavia, nel tuo caso, poiché è solo un'icona, andrei con solo un'icona shuffle che sembra abilitata/disabilitata a seconda dello stato. Se è disabilitato, dovrebbe essere chiaro all'utente che è un gioco diretto. Potresti accenderlo o mostrare il pulsante come premuto.

Valuta di aggiungere una descrizione comando al passaggio del mouse per renderlo ancora più chiaro.

20
mbillard

Sono sorpreso di non menzionare la tecnica utilizzata in iOS (e altrove), un pulsante combinato azione/stato, in cui entrambe le opzioni sono visibili, raggruppate e quella attiva è chiaramente evidenziata.

Terribile arte ascii da dimostrare:

[ ON | off ]

Airplane mode toggle on iOS

20
jezmck

Mi fermerei poco prima di "non usarli".

Suggerirei che i pulsanti di attivazione/disattivazione siano accettabili nel caso in cui sia presente uno stato di attivazione e disattivazione. Ciò può accadere, ad esempio, quando hai una linea di pulsanti in grigio che diventano colorati quando fai clic su di essi.

Questo è il motivo per cui Play/Pause funziona in molti casi. Il pulsante di riproduzione non è tanto un interruttore tra due stati quanto un'abilitazione/disabilitazione. Diventa verde acceso quando acceso (sto giocando!), Diventa grigio e mostra un || quando spento (non sto giocando!).

Gli altri pulsanti fanno lo stesso, quindi la coerenza aumenta la convenienza. Probabilmente si basa anche sulle nostre percezioni storiche di un registratore a cassette o di un videoregistratore, che aveva pulsanti premuti (cioè nello stato) o depressi (cioè nello stato spento) e penso che questo sia un ottimo modello mentale da tenere a mente quando si considera un interruttore .

Ma in ogni caso in cui non sono semplicemente "attivati", in cui non è possibile sostituire l'interruttore con una casella di controllo più brutta, per impostazione predefinita non "li uso", per tutti i motivi già menzionati.

[~ ~ #] Inoltre [~ ~ #]

Ho appena notato oggi che Evernote ha un interruttore abbastanza efficace. Hanno adottato l'approccio di un mouseover, che in realtà ha funzionato abbastanza bene. Si noti che questo è un altro caso di un controllo di stile on/off.

toggled off

toggled on

AGGIUNTA AGGIUNTIVA

Ho trovato questo passaggio interessante oggi e mi è stato ricordato questo UX Q&A. Nota come lo stato sia immediatamente evidente e il fatto che cambierà quando lo tocchi è reso evidente anche dalla "maniglia" strutturata (cioè dalla convenienza) - so solo che quando afferro quella manopola sollevata, cambierà dalla parte opposta e dire il contrario di ciò che dice ora; è proprio come un bagno aereo.

Quindi possono essere fatti bene.

toggled offtoggled on

20
Kato

Ci sono già 18 risposte qui, quindi potrebbe essere tardi per la festa, ma ha senso usare le caselle di controllo in tali situazioni. Qualche esempio:

enter image description here

E quando selezionato:

enter image description here

Questo è simile all'approccio "fioco/acceso" che "Mi piace" di Facebook utilizza , ma è combinato con una casella di controllo per una migliore visibilità. In ogni caso, il punto chiave è usare solo una Parola (o insieme di parole) invece di cercare di far decidere all'utente tra più parole.

Inoltre, cerca di evitare l'uso di prefissi negativi (" Not ", " Non - ", " Un - "," Dis - "," Im - "," Mis - "," In - "," Il - "," Ir - ") altrimenti l'utente dovrebbe quindi fare un" doppio negativo "nella sua mente quando ha  un spuntato la casella:

enter image description here

20
Pacerier

Ho usato il pulsante Attiva/Disattiva per "Aggiungi" e "Rimuovi" elementi a una raccolta usando un semplice Attiva/Disattiva pulsante (uno con stato visibile alla volta) che presentava i seguenti stati.

  • AGGIUNGI (se il pulsante non è stato mai cliccato)

  • RIMUOVI (se il pulsante era stato precedentemente selezionato e un elemento faceva ora parte della raccolta)

MA questo mi ha sempre pizzicato come per un utente inesperto (età superiore ai 50 anni), inizialmente era difficile capire cosa è successo e perché il pulsante chiede "Rimuovi" anche prima che venissi a sapere che l'oggetto era ora parte della collezione. Il bit mancante in questo caso era un messaggio di notifica che diceva "Articolo aggiunto con successo". Sto usando un messaggio di stato basato su Javascript che appare nella parte superiore dello schermo (usando http://Twitter.github.com/bootstrap/javascript.html#alerts ) ma poiché è stato spostato visivamente dal elemento di interazione, ho risolto solo una parte del problema per alcuni utenti.

Un altro problema

Il pulsante cambia la sua "Posizione" o "Capovolge i lati" dopo ogni clic. A volte dice "Sono il pulsante Aggiungi" e alcune volte lo stesso pulsante (nella stessa colonna tra gli altri pulsanti Aggiungi) dice "Sono pulsante Rimuovi". Cambiare i colori aiuta ma questi sono ancora due ruoli opposti occupati da un pulsante. NOT SO GIUSTO.

La mia soluzione:

La mia soluzione a questo problema minore e ben discusso è sostituire il pulsante di attivazione/disattivazione con qualcosa del genere.

Pulsante che ha la didascalia "Aggiungi" quando non si fa clic Dopo il clic, il pulsante si sostituisce con un messaggio "Aggiunta riuscita" e mostra un piccolo pulsante 24x24 che ha l'etichetta "X" e che consente di annullare l'ultimo atto che è sempre "Aggiungi" . Quindi non fai mai clic sul pulsante "Rimuovi" ma solo "annulla" la tua precedente "Aggiungi operazione". Inoltre non è necessario mostrare una notifica "Aggiunta correttamente" separata nella pagina. L'aspetto negativo di questo approccio è che hai bisogno di più spazio per mettere l'etichetta "Aggiunti con successo" e un "Pulsante per annullare", ma questo secondo me è uno degli approcci meno confusi.

enter image description here

12
Salman Ehsan

In molti casi potrebbe essere utile o possibile evitare tali pulsanti.

Per esempio. in caso di riproduzione casuale/casuale: basta usare una casella di controllo con un'etichetta "shuffle" accanto ad essa, e nessuno si confonderà ...

E nel caso di un pulsante play/shuffle, forse non è nemmeno necessario cambiare l'etichetta sul pulsante. È possibile utilizzare un pulsante "premuto" per indicare "riproduzione" e un pulsante "su" per indicare "non riproduzione". Oppure potresti mettere un indicatore da qualche altra parte nell'interfaccia utente ovviamente (è quello che fa il mio sistema stereo ...).

Non è perché alcune aziende iniziano a utilizzare un determinato widget che all'improvviso dovrebbe essere utilizzato per tutto ...

11
JanC

Su Facebook, il pulsante mi piace è un buon esempio di pulsante di attivazione/disattivazione.

Su Facebook app Android, il mi piace è su un pulsante ed è grigio quando è spento e evidenziato in blu quando è acceso. Vedi schermate di seguito.

Fondamentalmente, sono d'accordo con loro - enfatizza il positivo e non scherzare con il cervello degli utenti (cambiamento minimo).

Non sono sicuro che sia un buon modo per accecare i colori. Forse avrebbero dovuto rendere l'indicazione più audace.

enter image description hereenter image description here

Su Facebook web-app, il modello è diverso. Il testo del pulsante cambia per indicare l'azione: cosa succede al clic. Questo è confusionario. MA, questo ha senso perché hanno molto spazio e hanno un'indicazione separata che a un utente piace un post.

enter image description hereenter image description here

9
AlikElzin-kilaka

Vorrei raccomandare di guardare il seguente video (dal 1991!) Che è stato fondamentale per l'attuale progetto del toggle iOS per esempio: https://www.youtube.com/watch?v=wFWbdxicvK

E il documento corrispondente: http://dl.acm.org/citation.cfm?id=143079

Ecco i toggle che hanno confrontato: The toggles they compared E i risultati in preferenza: Results of the preference test

7
Riche Design

I pulsanti con etichetta (pulsanti a levetta) sono spesso confusi o persino ambigui, come fai notare. Anziché,
mostra lo stato e l'azione, in questo modo:

online Go offline

Quindi abbiamo un etichetta non cliccabile che indica chiaramente lo stato corrente e un pulsante cliccabile per eseguire un'azione per cambiare lo stato.

Se fai clic sul pulsante "Vai offline", l'etichetta cambia in "Offline" e il pulsante cambia in "Vai online".

Mostrare sia lo stato corrente sia l'azione allo stesso tempo è l'unico modo per essere completamente chiari. I pulsanti di opzione lo farebbero, ma la soluzione etichetta + pulsante è migliore perché offre una chiara distinzione visiva tra i due. Inoltre è naturalmente più compatto dei pulsanti di opzione.

Per quanto riguarda le alternative, penso che sia concordato che i pulsanti di attivazione/disattivazione possono essere problematici. Anche le caselle di controllo possono essere fonte di confusione:

 online

La casella di controllo non è selezionata, quindi l'applicazione non è in linea. Ma questo non è particolarmente chiaro. Se lo guardi, la prima cosa che vedi è la parola "Online", quindi è facile trarre una conclusione sbagliata.

Il problema è che tutto ciò che puoi vedere è una singola etichetta. Devi pensare un po 'prima di poter decidere se l'etichetta indica uno stato o un comando. Questo problema è comune alle caselle di controllo e ai pulsanti e il tentativo di utilizzare in modo coerente aggettivi (o verbi o altro) può migliorare le cose ma non risolverà il problema.

6
Bennett McElwee

Per l'esempio di riproduzione/pausa, mostrerei lo stato corrente normalmente e l'opposto al passaggio del mouse (quando è appropriato, cioè non sui touchscreen). Quell'elemento ha 2 stati naturali e nessun verbo unificante. On/Off d'altra parte può essere semplificato con Power con lo stato On acceso e lo stato Off, beh, no.

4
Rob Allen

Vorrei sempre andare con stato attuale. Penso che il linguaggio play/pause sia l'eccezione piuttosto che la regola. Penso che giocare/mettere in pausa com'è, sia probabilmente una sospensione dai tempi dei vecchi nastri a cassetta. Quando play/pause sono stati combinati su lettori CD, ricordo di aver pensato a quanto fosse bello e innovativo.

Ad ogni modo, un modo per rendere evidente che lo stato corrente è "selezionato" è quello di rendere il pulsante bagliore un po ', o delinearlo con un po' di magia che sembra blu.

enter image description here

Il blu magico di solito indica che uno stato è "attivo"

Quindi, il pulsante sopra è in realtà un pulsante tri-state di iTunes. Ha 3 stati: ripeti, ripeti tutto e ripeti 1. È abbastanza chiaro cosa sta succedendo qui dalla faccia del pulsante. La ripetizione 1 è su .

Come altro esempio, ho 3 diverse impostazioni della fotocamera che sono attivate da un solo pulsante: ortogonale 1 su, ortogonale 4 su e prospettiva. Un singolo pulsante scorre ciclicamente questi 3 stati e sto mostrando lo stato corrente sulla faccia del pulsante.

I singoli pulsanti per più stati non sono che confondono una volta che ti ci abitui. Sono fantastici perché gruppo si escludono a vicenda e salvano ingombro l'interfaccia utente con molti pulsanti distinti. In un certo senso, sono come un pulsante di opzione compatto.

Altre opzioni che mi vengono in mente sono:

  • Mostra stato corrente e apre un menu per cambiare stato (anche se ci sono solo 2 opzioni)

Un esempio di ciò è come Mac OS ti mostra lo stato del tuo BlueTooth o dell'Aeroporto - ha anche un pop-out con frasi complete su ciò che ogni azione farà:

enter image description here

Mostra il suo stato attuale (grigio sbiadito significa spento) e mostra gli stati successivi tramite un menu a comparsa con frasi complete.

3
bobobobo

L'etichetta sul pulsante di attivazione/disattivazione come Play/Pause non dovrebbe cambiare. Il pulsante stesso dovrebbe indicare visivamente che è stato premuto (lasciando l'etichetta "Riproduci"). Questo elimina tutta la confusione.

2
Denzo

Le immagini di risposta di @ Kato da Evernote lo mettono in chiaro: c'è l'etichetta che comunica ciò che è controllato dal toggle ("Auto save"), e il toggle, che funge anche da indicatore di stato (O | I).
Il problema con alcuni interruttori sta cercando di usare lo stesso bit per due scopi diversi: comunicare lo stato e comunicare l'azione.
Le luci della mia casa, ad esempio, hanno un interruttore anonimo e un indicatore luminoso, che è la luce stessa (quando la lampadina si guasta di solito non possiamo dire se l'interruttore si trova nella posizione di accensione o spegnimento) .
Il gioco | la disposizione delle pause ha anche un chiaro indicatore di accensione, il suono della musica stessa. La levetta svolge una funzione (controllo), la musica svolge l'altra (stato di comunicazione).
Il comando shffle vs. linear controlla lo stato, ma non lo comunica. Dovresti prendere la custodia del CD, attendere che un tema finisca e controllare se quello che inizia dopo è il prossimo nell'elenco o no (e ripeti per essere sicuro). Ma se lo pensi come uno shuffle | opzione binaria non-shuffle, quindi potresti etichettare dopo il comportamento che controlla ("shuffle" come verbo) e comunicare lo stato illuminandolo.
A mio avviso, in ogni caso devi comunicare lo stato.
Un mio amico è pazzo del telecomando della sua auto. Ha uno stato stampato e non sa se si tratta dell'azione o del feedback.

1
Juan Lanus

Per ridurre l'ambiguità suggerisco:

  1. Utilizza l'azione come testo del pulsante di attivazione/disattivazione, non come stato.

  2. Assicurarsi che il pulsante non sia evidenziato.

  3. Evidenzia l'azione al passaggio del mouse/focus per enfatizzare ciò che accadrà.

  4. Evidenzia lo stato corrente e posizionalo accanto al pulsante.

Per esempio...

enter image description here

(altri esempi: "attiva" + "disattiva", "disattiva" + "attiva")


Oppure puoi usare i cursori e

  1. Evidenzia lo stato corrente, che dovrebbe apparire sul controllo del pollice

  2. Posiziona l'azione che transita lo stato all'interno dell'area vuota (non evidenziarlo)

Per esempio...

enter image description here

(Immagina che il controllo del pollice assomigli a un controllo del pollice e non a un pulsante)


Tratto dalla mia risposta alla domanda duplicata chiusa con alcuni miglioramenti.

0
Danny Varod