Qual è il miglior modello di web design per le opzioni di attivazione / disattivazione all'interno di un menu di attivazione / disattivazione padre
Sto lavorando a un menu che può essere attivato o disattivato, con opzioni secondarie all'interno del menu che possono essere attivate o disattivate. mentre logicamente penso che abbia senso sia per il menu principale che per le opzioni figlio avere pulsanti di attivazione/disattivazione, visivamente sembra un po 'confuso. Ho provato un sostituto che utilizza invece le caselle di controllo per gli elementi figlio, che mi sembra un po 'più chiaro. Esiste un modello di progettazione alternativo che funzioni meglio/sembra più intuitivo di queste due opzioni?
Le priorità di progettazione possono aiutare qui.
Penso che una priorità qui sia, siamo il miglior controllo per il lavoro.
Le caselle di controllo (senza etichette) sono utili per gli stati di attivazione/disattivazione in cui è chiaro il significato degli stati di verifica/deselezione. Gli interruttori a levetta con etichetta ti danno l'opportunità di mostrare cosa significa ogni stato ('on' e 'off').
Immagino che il miglior controllo per la tua situazione sia l'interruttore a levetta, poiché le etichette "on" e "off" sono utili per l'utente. Quindi usiamolo.
Ora, hai una preoccupazione secondaria che è se una colonna di levette sembrerà imbarazzante. Dal momento che è una preoccupazione secondaria, dovremmo cercare di affrontarla senza abbandonare del tutto il controllo. Il design può aiutare molto:
- Uno dei problemi con il wireframe è che le levette arrotondate creano un flusso visivo imbarazzante dall'alto verso il basso sul lato destro. Quindi, quadriamoli per fornire un layout della griglia più fluido.
- Un altro problema è distinguere le opzioni di menu dalle opzioni di intestazione. Quindi usiamo il design per rendere la differenza molto più chiara.
- Infine, odio le piccole levette perché non sono amichevoli al tocco delle interfacce. Quindi, ridimensionali tutti per renderli più touch-friendly.
Ecco un risultato che potrebbe avere più successo:
Innanzitutto, i pulsanti di attivazione/disattivazione sono alquanto problematici. Sebbene siano un modello di progettazione piuttosto comune sui moderni dispositivi touchscreen, non è immediatamente ovvio che si possano attivare semplicemente facendo clic. Un utente che non ha familiarità con questo elemento sullo schermo ma che ha familiarità con la sua controparte nella vita reale proverà a trascinarlo poiché non facciamo clic su tali interruttori nel mondo reale.
https://ux.stackexchange.com/a/43889/332
https://ux.stackexchange.com/a/63886/332
Inoltre, se guardi a siti come GMail o Amazon, che investono enormi quantità in UX vedrai delle caselle di controllo, non attivare/disattivare gli interruttori.
Le caselle di controllo indicano on/off (sì o no; o se sei geniale, 1 o 0) e sono state usate sul web letteralmente miliardi di volte per rappresentare sì o no, opzioni di tipo on o off per gli utenti.
Si riscontra anche un problema se si dovesse utilizzare lo stesso elemento per padre e figlio (in particolare una casella di controllo) poiché si imita un altro modello di web design molto comune che è il modello di casella di controllo genitore tutto o nessuno. Questo va oltre il problema estetico che sollevi nella tua domanda. Ci sono migliaia di esempi di questo modello in tutto il web.
Quello che consiglierei è il seguente design:
download bmml source - Wireframe creati con Balsamiq Mockups
Dove le selezioni di attivazione e disattivazione sono chiaramente selezionabili e in cui le caselle stesse rimangono impostate quando l'utente le ha lasciate. Lo stato corrente sarebbe chiaramente definito da quale pulsante è stato selezionato
Inoltre, l'intero pannello verrebbe visualizzato in grigio, collassato o entrambi mentre era spento. Entrambe queste azioni e il passaggio allo stato dell'interfaccia in base alla scelta aiuterebbero a rafforzare l'azione.
PS ... Sto assumendo che tu voglia mantenere lo stato impostato della casella di controllo indipendentemente dallo stato genitore, in caso contrario e il genitore è una funzione "attiva/disattiva tutto" quindi usa le caselle di controllo in tutto ciò poiché questa è una soluzione molto ben definita, comune e utilizzabile .