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

Qual è il modo migliore per mostrare ai miei utenti che i pulsanti nella stessa linea hanno funzionalità diverse?

Ho quattro pulsanti sulla mia interfaccia che sembrano tutti uguali ma non tutti agiscono allo stesso modo. Sono disposti come nell'esempio seguente.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

Il pulsante 1 e il pulsante 2 sono una sorta di interruttore a levetta modificato. Se l'utente fa clic sul pulsante 1, verrà selezionato. L'utente ha quindi due opzioni. Se fanno clic sul pulsante 2, il pulsante 1 verrà deselezionato e il pulsante 2 verrà selezionato. Se fanno di nuovo clic sul pulsante 1 quando è selezionato, si spegne. Lo stesso comportamento si verifica per il pulsante 2.

Pulsante 3 e Pulsante 4 sono interruttori a levetta on/off standard. Fai clic una volta per accenderlo. Fare di nuovo clic sul pulsante per disattivarlo.

Il problema è che, poiché i primi due pulsanti fanno qualcosa di diverso rispetto ai secondi due, ho la sensazione che debbano essere separati visivamente. Il mio problema risiede nel come separarli poiché sono in qualche modo simili nella loro funzionalità.

Esiste una procedura ottimale per disporre pulsanti con funzionalità diverse?

18
BDD

Le caselle di controllo vengono spesso utilizzate invece ...

Per questo tipo di opzioni selezionabili, reciprocamente esclusive. Per esempio:

enter image description here

Ma se preferisci i pulsanti ...

Un segno di spunta all'interno dei pulsanti offre una migliore opzione di attivazione/disattivazione ed è anche più amico dei colori:

enter image description here


I pulsanti di opzione possono essere utilizzati anche qui per i pulsanti esclusivi, ma essi (a) richiedono una terza scelta aggiuntiva nell'interfaccia utente ("nessuno dei due") che può essere o non essere accettabile; e (b) non soddisfano il comportamento click-to-toggle specificato nella domanda.

Se desideri soddisfare questi requisiti, anche i pulsanti di opzione sono un'alternativa.

39
tohster

Vorrei unire il pulsante 1 e il pulsante 2. Quindi è possibile selezionare una tonalità diversa da quella selezionata (ad esempio, nell'esempio di seguito è selezionato "sì". Quando si seleziona "no", diventerà blu e 'sì' diventerà bianco). Ciò mostrerà che quei due si escludono a vicenda.

Quindi per i pulsanti 3 e 4, utilizzerei gli stessi colori "on" e "off", ma li lascerei come pulsanti singoli. Spero che sia di aiuto.

20
Marcie Kaiser

Per quello che vedo, in realtà hai 3 pulsanti ( = azioni ).

Pulsante 1

Pulsante/interruttore a tre stati:

Il pulsante 1 reagisce a se stesso e il pulsante 2

Il pulsante 2 reagisce a se stesso e il pulsante 1

Pulsante 2

Pulsante/interruttore booleano:

Il pulsante 3 reagisce a se stesso (SÌ/NO, ACCESO/SPENTO)

Pulsante 3

Pulsante/interruttore booleano:

Il pulsante 4 reagisce a se stesso (SÌ/NO, ACCESO/SPENTO)

Fondamentalmente, hai 3 azioni, in cui la prima è un gruppo di azioni con azioni figlio che interagiscono con la stessa logica booleana dell'altra: sì/no, on/off, 1/0

Un riferimento culturale valido sono i vecchi registratori a nastro, in cui erano presenti pulsanti di pausa che interagivano da soli, quindi i pulsanti di riproduzione e registrazione che dovevano essere premuti insieme, quindi riavvolgi e in avanti i pulsanti che si cancellavano l'un l'altro

enter image description here

Quindi, la soluzione proposta è quella di raggruppare i primi 2 pulsanti e utilizzare un interruttore a tre stati poiché interagiscono tra loro, lasciando i pulsanti rimanenti isolati ma ancora parte del processo. Vedi un mockup di base di seguito:

enter image description here

Come puoi vedere, ora tutti i pulsanti sono selezionati da soli, mentre i pulsanti 1 e 2 sono chiaramente collegati come parte di uno stesso gruppo di azioni ma abbiamo anche aggiunto un terzo stato (spento), in cui è possibile annullare entrambe le azioni secondarie (pulsante 1 e pulsante 2) contemporaneamente

7
Devin

n pulsante ciclico può essere la scelta migliore.

Ho dei dubbi sui controlli segmentati poiché tradizionalmente corrispondono al modello mentale dei pulsanti di opzione: una scelta deve essere sempre selezionata. È possibile aggiungere un'opzione "Nessuno", ma ciò potrebbe aumentare il disordine e la confusione sulla barra degli strumenti.

Un interruttore a tre vie può adattarsi meglio al tuo caso d'uso.

Animated button cycle.

Non è un modello molto comune in quanto non consente a un utente di vedere quali sono le altre opzioni, né quante ce ne saranno prima che ritorni in giro. Inoltre, se si verifica un costo prestazionale ogni volta che si cambia il filtro, gli utenti che "non riescono a raggiungere il proprio obiettivo" potrebbero infastidirsi nel tempo necessario per tornare indietro alla scelta corretta.

Ma, se il contesto è limitato a solo 2 modalità reciprocamente esclusive che l'utente tipico capirà nel contesto più una delle due modalità, questa opzione potrebbe essere molto funzionale per te. Qualcosa come un filtro che mostra "Widget attivi", "Widget inattivi" o "Tutti i widget" dovrebbe essere abbastanza semplice da consentire agli utenti di capire cosa stanno vedendo.

A seconda dell'aspetto delle altre levette standard, questo controllo può sollevare il classico dibattito sulle etichette di stato e di azione.

4
Nathan Rabe

Dovresti provare a creare un controllo pulsante raggruppato. Qualcosa come questo:

Segmented button

Quando un utente guarda i pulsanti raggruppati, potrebbe non capire immediatamente quale è acceso e quale è spento, quindi è necessario aggiungere un po 'di colore (attivo = verde). Se ritieni che ciò non sia sufficiente e se il tuo progetto lo consente, aggiungi un po 'di profondità per eliminare ogni dubbio su quale sia selezionato.

Button depth

Se non ti piace, forse dovresti raggrupparli in un controllo di gruppo (allineare il gruppo) qualcosa del genere:

Grouping buttons like in Microsoft Office suit

Spero che questo possa essere d'aiuto. :)

3
asuciu

Esiste una procedura ottimale per disporre pulsanti con funzionalità diverse?

Torniamo a questo tra poco.

Innanzitutto, diamo un'occhiata (enfasi aggiunta):

Ho quattro pulsanti sulla mia interfaccia che sembrano tutti uguali ma non tutti agiscono allo stesso modo.

Quindi hai posto una domanda sul layout, ma al centro il vero problema che stai cercando di risolvere è come creare spunti per l'interazione di controllo.

Il layout è sicuramente un modo chiave per indicare particolari elementi di interazione di controllo: più specificamente e frequentemente, relazioni semantiche con i processi interessati.

Il layout può essere utilizzato anche per affrontare le differenze nel comportamento di controllo?

Torniamo alle origini.

Come impariamo come funziona un controllo, funzionalmente?

Innanzitutto, lo esaminiamo. Che aspetto ha, che cosa ci ricorda ... essenzialmente, a cosa sembra globalmente coerente, visivamente?

Anche se non abbiamo riferimenti esterni per capire come dovrebbe funzionare un controllo, possiamo ancora provare a giocarci. In che modo l'interazione con il controllo cambia il suo aspetto visivo? L'interazione con il controllo A influisce su altri controlli? Esiste una differenza sostanziale nell'aspetto tra i controlli che influiscono sul funzionamento di altri controlli, rispetto a quelli che sembrano autonomi?

Ogni volta che riconosciamo uno schema, proviamo a riapplicarlo quando interagiamo con qualcosa che sembra soddisfare lo stesso schema. In sostanza, formiamo uno schema e lo adeguiamo secondo necessità, di solito con una preferenza per adattarsi a cose apparentemente nuove che vediamo nel nostro schema attuale (assimilazione). Questo è ciò che ci consente di consentire rapidamente agli attuali modelli di interazione di applicarsi a scenari in cui qualcosa appare leggermente diverso ma sembra aderire al modello generale.

Un buon esempio è un interruttore a levetta. Riconosciamo rapidamente il comportamento binario di stato esclusivo di un tale interruttore perché è modellato su interruttori che vengono utilizzati fisicamente, dove se tale interruttore viene attivato in una direzione, fisicamente non può trovarsi nell'altro stato. Mentre sarebbe facile considerare l'aspetto visivo della maggior parte degli interruttori a levetta come semplicemente skeuomorphic, in realtà sono importanti riferimenti visivi che sono globalmente coerenti e coerenti con il comportamento fisico che dovrebbero servire da segnali.

Ora proviamo qualcosa di un po 'più interessante.

Qual è la differenza tra un gruppo di pulsanti di opzione e un gruppo di caselle di controllo?

Se ogni gruppo è limitato in una casella, come fai a sapere, come qualcuno che cerca di ottenere un risultato, come ciascun gruppo interagirà a tal fine?

  1. Coerenza globale e conoscenze pregresse in contesti simili (software/web): sappiamo come ogni gruppo interagirà perché sappiamo dall'uso del controllo preventivo in altri luoghi che un pulsante rotondo indica stati collegati, reciprocamente esclusivi tra di esso e altri pulsanti del gruppo, e uno quadrato indica stati indipendenti, anche se ognuno è semanticamente o altrimenti collegato in qualche altro modo (quindi il raggruppamento).
  2. Conoscenze (globali) correlate da contesti diversi: potremmo aver visto un dispositivo fisico usando i pulsanti di opzione (come, diciamo, le radio più vecchie da cui prendono il nome). Potremmo aver svolto compiti che coinvolgono fisicamente (matita/penna) il controllo delle scelte o la compilazione di circoli (scantron, ecc.) In cui spesso vengono rispettati paradigmi simili.
  3. Scoperta attraverso l'esplorazione (apprendimento specifico per questa interazione, ma condotto con aspettative dall'apprendimento precedente): quando giochiamo con i pulsanti rotondi dell'interruttore, selezionandone uno diverso deseleziona quelli precedentemente selezionati. Possiamo dedurre che si tratta di un comportamento comune a questi perché appaiono visivamente diversi dagli altri controlli, ma appaiono relativamente uguali all'interno dello stesso tipo di controllo. Questo comportamento non si verifica con i pulsanti dell'interruttore quadrato.

Quindi cosa succede quando tutti i pulsanti sono rotondi, ma un gruppo si comporta come pulsanti di opzione e l'altro come caselle di controllo?

Confusione.

Non possiamo più fare affidamento sul nostro schema attuale per fornire informazioni significative, il che significa che dobbiamo testare ogni set di controlli per vedere come funziona. Potrebbero esserci degli spunti forniti, ma l'incongruenza con ciò che già sappiamo e il modo in cui abbiamo già familiarità con l'interazione con il mondo provocherà gradi di frustrazione anche allora: essenzialmente, indipendentemente dal fatto che sia consciamente riconosciuto o meno, ciò crea uno stato di dissonanza cognitiva che è faticoso e frustrante. Anche all'interno di un set di attività comune (un singolo modulo, applicazione, ecc.) Il conflitto rimarrà per un po 'di tempo, prima che le conoscenze specificamente diverse possano essere partizionate per l'applicazione esclusivamente all'interno di quel dominio di attività.

E il layout?

Bene, il problema è che il layout esiste ad un livello più ampio di quello del semplicemente il controllo stesso. Visivamente, il layout è un significante secondario all'azione o all'importazione del controllo, rispetto secondo il design del controllo.

Differenze e somiglianze nell'aspetto del controllo stesso avranno sempre la precedenza sul modo in cui qualcuno che interagisce con esso interpreta il suo comportamento d'azione previsto.

Il mancato funzionamento del controllo in modi previsti causerà frustrazione quando il controllo si comporta diversamente da quanto previsto.

Il mancato funzionamento del controllo in modo anticipato provocherà anche esitazione in tutto il dominio dell'attività: la persona che interagisce con il tuo software non è più in grado di fare affidamento sulla possibilità di differenziarsi semplicemente osservando l'aspetto del controllarsi.

L'esitazione è a sua volta frustrante.


In breve, come risposta alla domanda posta all'interno dell'organismo delle domande:

Non fare affidamento sul layout per indicare comportamenti diversi tra controlli altrimenti visivamente identici

In termini di diversi design di controllo, penso che una serie di opzioni proposte siano promettenti.

L'uso di un menu a discesa per un controllo dello stato ternario non è una cattiva idea.

Anche l'uso di un controllo "switch" a tre vie collegato non è necessariamente una cattiva idea. Vorrei avvertire che potrebbe diventare ingombrante a seconda del testo utilizzato.

L'uso di un controllo dell'interruttore a due vie può essere problematico, poiché di solito si prevede che sia binario: un esclusivo o in cui uno deve essere selezionato e l'altro è quindi deselezionato.

Usa il layout per raggruppare i controlli in base a ciò che influenzano

Il posizionamento è utile per mappare gli oggetti interessati non solo fisicamente (ad es. Posizionamento dei controlli su una stufa), ma anche a livelli più astratti.

Il posizionamento e il raggruppamento sono utili anche per separare i controlli da altri oggetti in competizione per attirare l'attenzione, il che può essere utile nel ridurre lo stress del tentativo di elaborare quelli che altrimenti potrebbero essere i controlli vicini per possibili relazioni nella funzionalità generale.

Leggermente più semplicemente, se la preoccupazione immediata su cosa influenza una serie di controlli è limitata solo a tali controlli, può aiutare a separare tali controlli tramite la distanza o tramite segnali visivi (linee di separazione, riquadri di delimitazione, ecc.).

Fai solo attenzione a non confondere accidentalmente i segnali con altre possibili interpretazioni che creano confusione inutile (ad esempio, se posto troppo vicino tra due controlli, una singola linea di separazione verticale a volte può sembrare che denota invece uno stato di commutazione binaria per il controlla che riposa tra).

Penso che il layout possa essere usato a tuo vantaggio qui, ma penso che tu debba prima affrontare l'aspetto dei controlli in un modo che crei un indizio visivo preciso che differenzia quelli che hanno un comportamento d'azione disparato.

Se tutti questi si applicano essenzialmente allo stesso oggetto/aspetto interessato, solo in modi diversi, consiglierei comunque di tenerli raggruppati, se possibile, per mantenere quel significato, soprattutto perché sono solo 4 (o 3) controlli separati.

1
taswyn

A meno che i testi dei pulsanti non siano confusi, seguirei il suggerimento di BDD di unire i pulsanti 1 e 2. se le etichette dei pulsanti lo fanno. Suggerisce che possono essere cancellati aggiungerei il testo 'cancella' da qualche parte vicino alla riga del pulsante, quando è stato selezionato un pulsante. Non prima. E i pulsanti di testo 'clear', non 'none' o fri-state, potrebbero essere fonte di confusione.

0
Jkarttunen

Un pulsante di opzione che fornisce le 3 opzioni ("Opzione A", "Opzione B", "Nessuno dei due") sarebbe il più appropriato per il primo gruppo? So che non sono "sexy" come i pulsanti, ma mi sembra che sia quello che stai cercando di forzare un diverso tipo di input per la replica.

Le altre due sono caselle di controllo.

Sono sicuro che ci sono alcuni requisiti di progettazione visiva, nel qual caso potresti volerli modellare in modo appropriato, ma attenersi agli elementi HTML standard ove possibile mantiene le cose accessibili a tutti - ad esempio quelli con screen reader, JS disattivato, ecc. Ecc.

0
Algy Taylor