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

Caselle di controllo e pulsanti di opzione confusi

Ho un problema con la creazione di una determinata interfaccia utente per un sito Web. Ho intenzione di dimostrare il problema con un semplice sito Web per una catena di ristoranti:

Contesto

il sito web ha molti utenti e molti ristoranti. A ciascun ristorante sono assegnati determinati utenti, in cui l'utente può essere un manager, un cuoco o un cameriere.

il cameriere può vedere gli indirizzi degli ordini che arrivano, il cuoco può vedere che e il contenuto degli ordini (che cos'è il cibo), e il gestore può vedere entrambe queste cose e può cambiare i ruoli di qualsiasi utente.

Ci può essere solo un manager per ogni ristorante, ma quanti cuochi e camerieri desiderano. Ecco come appare l'interfaccia utente fin d'ora:

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

Problema

Gli utenti possono avere solo un ruolo ciascuno, poiché ogni ruolo ha tutti i privilegi dei ruoli precedenti più un nuovo privilegio. Quindi nessuno può essere sia un cameriere che un cuoco, o un cuoco e un manager ecc. Non è molto chiaro usando l'interfaccia utente sopra, poiché si potrebbero selezionare due caselle di controllo per lo stesso utente, o anche tutti e tre i ruoli.

Domanda

Come chiarisci questa idea attraverso l'interfaccia utente? "l'idea" è che ci può essere solo un gestore di un ristorante e ogni utente può avere solo uno ruolo.

A proposito, questo è il mio primo post, quindi spero di essere nel posto giusto. Grazie per le risposte in anticipo!

EDIT: ci sono ruoli più alti che possono cambiare liberamente tutti e tre i ruoli menzionati.

L'ultimo caso è quello che sto cercando di evitare (Mary).

Image .

70
H. Saleh

In uno scenario come questo, farei in modo che l'interfaccia utente rifletta i possibili stati dell'applicazione. Puoi avere un solo manager, quindi dovrebbe esserci un solo posto per selezionare un manager, tutti gli altri possono essere un cuoco o un server, quindi fornire widget dell'interfaccia utente reciprocamente esclusivi per quegli stati. Ecco un esempio:

Mockup

In pratica potresti voler rendere un po 'più deliberato cambiare i ruoli delle persone, ma speriamo che almeno trasmetta l'idea.

Modifica: Come alcuni commenti hanno menzionato che ci sono problemi di progettazione con questo modello, e non raccomando un'implementazione diretta di esso. Si prega di essere consapevoli del fatto che il modello era destinato esclusivamente a rispondere alla domanda del PO e che altri principi di progettazione si applicano ancora qui.

Alcuni esercizi per il lettore includono:

  1. Elimina l'ambiguità in cui il ruolo è attualmente selezionato
  2. Visualizza le informazioni del gestore (telefono, e-mail, ...)
  3. Rendi le operazioni di modifica dei dati più deliberate rispetto alla semplice modifica di un menu a discesa o di attivazione/disattivazione
122
Tristan Shelton

Poiché il cambio dell'attuale Manager è un'azione che invalida le altre opzioni, la presenterei in un modo che comunica chiaramente cosa sta per accadere.

Cameriere/Chef sono pulsanti di opzione, quindi solo uno di essi può essere attivo alla volta - e solo una persona può essere manager e nient'altro.

Example For Manager with Button

106
Falco

Sembra un'attività di raggruppamento di utenti.

Entrambi questi esempi hanno la proprietà Nice che è possibile stampare una vista simile da visualizzare in cucina. Inoltre non hai alcun testo duplicato/ridondante di Cook/Waiter su tutta l'interfaccia utente, quindi penso che sia più facile leggere e capire chi sta lavorando con chi.

Stile tag

Simile a come si aggiungono tag a una domanda di Stack Stack.

enter image description here

Stile menu

Ho preso la modifica del menu WordPress come concetto di base per simulare la gerarchia.

enter image description here

21
icc97

Usa questo: questa è una vista di ruolo più elevata.

Dal punto di vista del manager, il manager non avrà una casella combinata per il suo ruolo.
La vista delle altre due sarà di testo semplice, senza caselle combinate.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

13
DPS

Da quello che vedo dovrebbero essere tutti pulsanti di opzione (utilizzare una spaziatura migliore per dividere ciascun utente e i pulsanti di opzione associati).
La domanda, nella tua testa, dovrebbe essere:
Chi è Alice? È una (•) Manager, una () cuoca o una () cameriera?
Chi è Bob? È un () manager, un (•) cuoco o un () cameriere?
eccetera.

Leggiamo da sinistra a destra, quindi noterai prima l'utente e solo i ruoli. E poiché può esserci un solo ruolo per utente, dovrebbero essere tutti pulsanti di opzione

4
Armands

Ho trovato la soluzione utilizzando il concetto di segmentazione iOS insieme allo stato di disabilitazione. Penso che sia visivamente comprensibile ma serve allo scopo.

enter image description here

0
Vadivel