risposta-alla-domanda-sullo-sviluppo-web-bd.com

Due pulsanti a levetta sono migliori di un interruttore a tre stati?

Ho una griglia di persone in cui per ogni persona l'utente deve decidere se includere la persona in un gruppo predefinito, escluderla dal gruppo o lasciarla indecisa. Lo stato iniziale è indeciso. Avere due pulsanti di opzione non funzionerà perché l'utente dovrebbe essere in grado di tornare a "indeciso" dopo aver inizialmente selezionato "dentro" o "fuori" (ecco perché questo è una domanda diversa).

Sono arrivati ​​due approcci. Uno è avere due pulsanti a levetta e l'altro è avere un "interruttore" a tre stati (che è essenzialmente un gruppo di tre radio, visualizzate in modo diverso).

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

  • I pulsanti di attivazione/disattivazione si escludono a vicenda (è possibile selezionarne solo uno, ma entrambi non possono essere selezionati)
  • Questo è all'interno di una griglia piuttosto trafficata, quindi gli immobili (larghezza della colonna) sono sicuramente un fattore
  • Questa non è un'interfaccia touch

Qual è l'approccio migliore qui? Pro e contro?

32

Design per il micro-flusso di lavoro


Osservazioni

  • La maggior parte degli utenti effettuerà una selezione e proseguirà, come hai notato. È molto probabile che gli utenti non deselezionino una scelta, né immediatamente né successivamente.

  • In e Out sono le scelte principali qui. La scelta indecisa è un default imparziale.

    • Le scelte nulle/predefinite/indecise/sconosciute sono spesso molto difficili da progettare correttamente e spesso i progettisti non ci pensano abbastanza quando progettano i controlli.
    • I programmatori sono spesso meglio di questo per abitudine (pensa a null vs '' vs undefined in javascript), ma anche in questo caso la semantica è spesso facile da rovinare.
  • L'allineamento della griglia e l'economia dello spazio sono importanti .... dato che ci sono molti altri controlli sulla pagina.

Un possibile disegno

in/out button pair, with visually distinct and de-emphasized 'none' button

La logica di progettazione qui è:

  • Rendi chiare le scelte primarie. I pulsanti grandi forniscono facili punti di atterraggio per il cursore e le opzioni principali sono visivamente chiare.

  • De-enfatizza la scelta indecisa. Puoi nasconderlo fino a quando l'utente non fa una scelta (esempio in alto), oppure tienilo mostrato (esempio in basso e probabilmente migliore). Questo pulsante è un'opzione/scenario relativamente raro, quindi non è necessario promuoverlo alla ribalta delle selezioni primarie.

  • Sbarazzarsi delle icone. Questi aggiungono solo disordine visivo e occupano un prezioso spazio orizzontale.

  • Considerare l'aggiunta di un segno di spunta al pulsante selezionato per chiarezza (esempio in basso).

  • Mantieni i pulsanti conformi alla griglia per compattezza e per calmare l'interfaccia generale.

On toggle vs tri-state ...

Questa risposta (si spera) mostra che nessuno dei due approcci è intrinsecamente migliore dell'altro. Credo che il modo di decidere tra i due sia quello di definire gli obiettivi e i vincoli del progetto, riflettere attentamente su cosa significhi lo stato null , e quindi il design l'attività dovrebbe diventare molto più chiara.

36
tohster

Se non ti dispiace nascondere le opzioni disponibili a prima vista, puoi anche utilizzare una combo anziché i pulsanti di opzione che potrebbero farti risparmiare una larghezza di colonna.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

25
Vincent Robert

Suggerirei una serie di tre pulsanti di opzione: uno per "in", uno per "out" e uno per "indeciso".

I toggle che si escludono a vicenda richiedono probabilmente molte spiegazioni e potrebbero confondere l'utente: una coppia di pulsanti a levetta sembra offrire 4 diverse combinazioni (A +/B +, A +/B-, A-/B +, A-/B-) ma dovrai spiegare che ce ne sono solo tre (A +/B-, A-/B +, A-/B-). Inoltre, la terza opzione non viene mai mostrata esplicitamente nelle impostazioni di controllo - nel tuo caso mostri 'in' o 'out' ma 'indeciso' viene mostrato solo dall'assenza di qualsiasi altra impostazione. Anche questo richiederebbe ulteriori spiegazioni.

Una serie di tre pulsanti di opzione esclusivi dovrebbe fare esattamente quello che vuoi: tutte e tre le opzioni sono visibili e il fatto che l'utente possa selezionarne solo una è indicato da un modello stabilito.

23
Andrew Martin

La prima opzione è migliore, con l'interruttore. Il motivo è che gli utenti hanno dato istruzioni chiare sulle possibili risposte hanno maggiori probabilità di comprenderle e risponderle (correttamente) rispetto a quando le istruzioni sono oscurate. Nel caso del tri-switch, ci sono due opzioni visibili e un'opzione invisibile. Ognuno ha tre stati, ma quest'ultimo ha un'opzione non inerente, il che significa che dovrai fornire istruzioni o sperare che l'utente possa "capirlo".

A seconda del tuo gruppo demografico, questo potrebbe non essere un problema. Gli utenti più giovani e più esperti di tecnologia avranno il passaggio con una singola istruzione. Tuttavia, dal momento che ho cambiato lavoro in una società il cui gruppo demografico ha più di 55 anni, anche le semplici istruzioni non sono sempre sufficienti. Ad esempio, il tuo esempio di tre pulsanti non funzionerebbe: il pulsante indeciso non elenca che è indeciso, solo che ha un punto interrogativo. Nel mio universo ciò significa "Ho una domanda e facendo clic su questo pulsante mi permetto di chiederlo o fornire suggerimenti".

6
Jamezrp

Per rispondere alla tua domanda, è necessario considerare la frequenza di questa azione.


Bassa frequenza:

Gli utenti non ricordano le loro opzioni quando non le usano regolarmente e quindi le opzioni dovrebbero essere facilmente reperibili e comprensibili.

Considerando la proprietà dello schermo che hai menzionato e per gli utenti di capire facilmente le loro opzioni, suggerirei anche un menu a discesa simile a quello di Vincent.

Ovviamente, il menu a discesa aggiunge un ulteriore clic per raggiungere le opzioni, ma va bene come obiettivo principale qui è quello di consentire all'utente di identificare e decidere la sua prossima azione senza troppi problemi. Pertanto, si consiglia di utilizzare elementi dell'interfaccia utente che l'utente ha già familiarità con le schermate che non vengono utilizzate di frequente.


Alta frequenza:

Se questa schermata viene utilizzata spesso e gli utenti devono alternare tra indecisi, dentro e fuori, un menu a discesa frustrerà l'utente. Qui, gli utenti dovrebbero avere un rapido accesso alle loro opzioni.

In questo caso, consiglierei l'interruttore a tre stati. La curva di apprendimento è piccola quando gli utenti usano questo interruttore frequentemente, quindi a tempo debito sarà in grado di adattarsi al tuo interruttore a tre stati. Ma non vorrei suggerire un punto interrogativo.

Per favore dai un'occhiata al mio mock-up qui sotto. È un semplice interruttore a tre stati con qualche divertimento aggiunto ad esso, che potrebbe comportare un migliore coinvolgimento degli utenti. Si adatta al bene immobile che hai descritto. Tuttavia, tieni conto del mio suggerimento solo se questa azione di attivazione/disattivazione viene utilizzata di frequente. Grazie

Tristate switch suggestion

6
Gautham Raja

Sembra che ci siano due problemi a portata di mano

Tri-state esplicito o implicito? Abbastanza all'unanimità per motivi dati il ​​Tri-state esplicito è migliore

Visualizzazione compatta di Tri-stato esplicito Tre pulsanti, gruppo di pulsanti di opzione, casella combinata fanno tutti il ​​lavoro. Ma un'altra interfaccia utente che aiuta a comunicare chiaramente la connessione dei concetti è anche il dispositivo di scorrimento - o altri elementi visivi simili che ricordano una scala di likert

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

3
Jason A.

La tua soluzione è ancora un pulsante di opzione. È un pulsante di opzione con tre opzioni: "in", "out" e "indeciso"; di cui "indeciso" è l'impostazione predefinita. Se mostri chiaramente "indeciso" come terza opzione, allora non c'è alcuna ambiguità per l'utente.

Non esiste alcun motivo UX per cui non è possibile selezionare un'opzione del pulsante di opzione e quindi modificarla in un secondo momento, come la selezione di pulsanti di attivazione/disattivazione o la digitazione di elementi. Non sono sicuro da dove provenga il tuo preconcetto che questo non sarebbe accettabile. Se il tuo progetto lancia un sacco di cose quando selezioni l'uno o l'altro, allora posso capire come ciò complicherebbe la tua implementazione, ma in quel caso probabilmente inizierai con il design sbagliato in primo luogo.

2
Graham Bartlett

Sebbene alcune guide dell'interfaccia utente suggeriscano che le caselle di controllo dovrebbero essere utilizzate solo nei casi in cui qualsiasi combinazione di selezioni sarebbe valida, suggerirei (e alcuni progettisti sembrano concordare con me) che sono anche appropriate in molti casi in cui, dato qualsiasi combinazione di stati precedenti e stato cliccato, sarebbe "ovvio" quale sarebbe la successiva combinazione di stati desiderata.

Nella particolare situazione in cui le caselle di controllo rappresentano una scelta con la semantica "A, B o nessuna" [con "entrambe" non è una scelta valida], la scelta se utilizzare un pulsante a tre stati o una coppia di controllo le caselle dipenderebbero dal fatto che il caso "nessuno dei due" rappresenti uno stato in sé e per sé, rispetto alla mancanza di altri stati. Ad esempio, la casella "Carattere" per MS-Word degli anni '90 aveva caselle di controllo per "Tutte maiuscole" e "Maiuscole", e per "Apice" e "Sottoscrizione", accanto alle caselle "Grassetto", "Corsivo", ecc. L'uso delle caselle di controllo per tutto ciò ha dato un aspetto più ordinato rispetto ai pulsanti di opzione, evitando inoltre la necessità di trovare etichette per i pulsanti "Non tutti maiuscoletti o maiuscoli" e "Non apice o pedice".

Se si utilizza un pulsante a tre stati per "include", "exclude" o "indeciso", quest'ultima scelta suggerirebbe che il loro stato dovrebbe essere impostato su "indeciso". Date le caselle di controllo "includi" o "escluso", lasciare entrambe le caselle deselezionate suggerirebbe che le persone debbano essere lasciate all'interno se all'interno o all'esterno se all'esterno. Se si intende quest'ultima semantica, utilizzare le caselle di controllo potrebbe essere migliore.

1
supercat

Tra le due opzioni menzionate, l'opzione pulsante a due levette sarà un buon metodo. vantaggi:

  • chiari vantaggi
  • non distrae dal contenuto principale

esempi esistenti:

pulsanti upvote/downvote attraverso vari siti come questo (stackexchange), reddit, quora ecc.

[p.s. poiché gli elementi sarebbero all'interno di una griglia occupata, l'implementazione di un design con enfasi sulla grafica attirerebbe molta attenzione e aumenterebbe la frenesia]

1
BatlaDanny

Questo è uno che dovrebbe essere testato perché non ho idea se funzionerà. Volevo inventare qualcosa che utilizza elementi comuni e mostra tutte le opzioni in modo compatto. L'idea è di lasciare fuori l'etichetta "indecisa" usando due caselle di controllo.

Perché le caselle di controllo? Dovrebbe essere comune alle persone che se non si desidera alcuna opzione, è sufficiente deselezionarle. È inevitabile che la gente pensi che entrambi possano essere controllati. Questo può essere risolto in due modi:

  1. disabilitando l'altra casella di controllo quando viene selezionata:

enter image description here

  1. con un messaggio quando le persone provano a controllare entrambi. In questo esempio, è stato fatto clic su "Out":

enter image description here

Mi piace # 2 meglio perché non dà l'idea che tu sia bloccato con la tua scelta ed è più utile quando qualcuno non capisce l'intenzione.

0
jazZRo

Puoi usare tre pulsanti radio con il loro colore di sfondo colorato con Rosso = Fuori, Giallo = Indeciso e Verde = In (questo perché hai menzionato una griglia occupata) e utilizzare una legenda che spiega il significato del colore.

0
Aneido Gp

Perché non usare semplicemente un'intuitiva colonna con tre stati (se disponibile)?

Risparmia spazio e rappresenta correttamente i tuoi dati (se/quando gli utenti hanno familiarità con tali controlli).

0
Astrogator