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

Almeno uno è obbligatorio. Come lo chiarisco?

Ho un elenco in cui l'utente deve selezionare alcuni elementi. A volte nessuno di questi è obbligatorio, a volte uno è obbligatorio, a volte almeno uno su due è obbligatorio. Ma come faccio a mostrarlo?

In questo momento, la soluzione per contrassegnare un elemento obbligatorio è utilizzare un triangolo di emergenza. Ma come faccio a mostrare lo scenario "uno su due"? Un suggerimento è di rendere i triangoli parzialmente trasparenti. Ma non credo sia abbastanza chiaro.

one list where one item has an orange triangle with white exclamation mark; another list where two items have similar triangles that are semi-transparent

Qualcuno di voi ha un suggerimento migliore su come chiarirlo? Dovrei usare il triangolo d'avvertimento? O c'è un modo migliore?


MODIFICARE:

In realtà ho bisogno di cambiare la mia domanda poiché qualcosa che cambia tutto è apparso ieri. L'elenco è in realtà una struttura ad albero. Come questo: Lists as in previous image, but items are grouped under headings

48
efrethe

È possibile dividere l'elenco.

  • elementi obbligatori come pulsanti di opzione.
  • optionals come caselle di controllo

Questo assicura anche che l'attenzione per importanza non sia divisa e consente un confronto più semplice tra gli elementi obbligatori.

enter image description here

139
Tom.K

Penso che questa soluzione potrebbe essere utilizzabile. Si noti che l'elemento obbligatorio è selezionato E disabilitato. L'utente è costretto a selezionare uno degli elementi obbligatori attraverso un menu a discesa

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

38
Marco Tatta

Nel sito di ammissione del mio campus, alcuni studi sono facoltativi, alcuni studi sono obbligatori. Dagli studi obbligatori, è necessario prendere alcuni studi in un momento specifico mentre un altro studio è obbligatorio, ma ci sono più volte disponibili e puoi scegliere il programma più adatto a te.

Questo è quello che hanno fatto: invece di fare affidamento sulla grafica visiva, perché non semplicemente stabilire ciò che è necessario nel testo?

Devi prendere la classe A alle 22:00 martedì e mercoledì

Devi prendere la classe B. Ci sono più programmi disponibili che puoi controllare.

Una classe obbligatoria su un programma obbligatorio è disabilitata e controllata. Ogni classe obbligatoria con un programma opzionale ha un triangolo rosso. Cosa significa questo triangolo rosso? Vai al testo. Il triangolo non è un imperativo "scegli uno di questi", ma semplicemente "ricorda questo"

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

Se qualcuno fallisce la classe obbligatoria con programma opzionale , viene lanciato un messaggio rosso che ti dice dove hai sbagliato.

Devi scegliere un programma dalla classe B.

Quando la visualizzazione non riesce, passa al testo classico.

11
Realdeo

Penso che per questa situazione insolita, le soluzioni ben note non funzionerebbero. Potresti sperimentare nuove soluzioni.

Una soluzione che posso trovare è data nel mock-up qui sotto. Collega le opzioni obbligatorie. Dovresti mostrare l'avviso come a destra se nessuno di questi è selezionato. Puoi facoltativamente mostrare l'avviso anche se uno di essi è selezionato ma in un colore diverso (preferibilmente giallo). Dovresti anche mostrare il messaggio di avviso quando l'utente passa sopra le linee guida.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

9
Gökhan Kurt

Per rispondere alla tua domanda sull'uno o sull'altro, considera l'aggiunta di alcune istruzioni per l'utente che lo spiegano, qualcosa all'effetto di "Seleziona una delle seguenti opzioni" proprio sopra le due opzioni. Potrebbe funzionare meglio per mettere il triangolo giusto con questo invito all'azione, invece che su ciascuna delle opzioni che stai scegliendo.

Le funzionalità che hai descritto su queste opzioni suonano come pulsanti di opzione, in cui è possibile selezionarne solo uno alla volta, quindi un pensiero è far apparire tali opzioni come pulsanti di opzione per dare un ulteriore suggerimento all'utente che solo uno può essere selezionato.

L'icona del tuo triangolo esclamativo suggerisce che devo correggere qualcosa sulla pagina per poter continuare. Anche se avere un campo per correzione dà una sensazione leggermente diversa rispetto a un campo obbligatorio che necessita di dati inseriti, se è quello che stai cercando, allora penso che funzioni.

Non sono un grande fan del triangolo parzialmente trasparente, poiché ciò mi suggerisce che l'opzione è attualmente disabilitata o inattiva.

3
ToddBFisher

Una soluzione che non ho ancora visto, ma dipende davvero dal contesto. Potrebbe essere un po 'noto all'utente che queste scelte sono obbligatorie? Se fossi l'utente mi piacerebbe se il triangolo non significasse "Obbligatorio" ma piuttosto "Ehi, guarda questo, questo è probabilmente quello che stai cercando".

In questo modo, puoi semplicemente mettere un triangolo per ognuna delle tre speciali nel tuo esempio. Se si seleziona il vero obbligatorio, il triangolo scompare. E se scegli uno dei due "OR-Mandatories", entrambi i triangoli scompaiono lì.

Dipenderà dal contesto, il presupposto è che l'utente dovrebbe sapere ciò che è obbligatorio, quindi i triangoli non sono l'unica cosa che lo guida. Ma dopo deve solo provare le combinazioni fino a quando tutti i triangoli sono spariti.

0
ObsessionAddict

È possibile spiegare questi requisiti con le note. Questo probabilmente funzionerà bene solo se le opzioni obbligatorie sono rare.

A parent
    ☐ An option
    ☑ An option¹
A parent
    ☐ An option
    ☐ An option
    ☐ An option²
A parent
    ☐ An option²
    ☐ An option

¹Because of ______, this option must be selected. 
²Because of ______, at least one of these options must be selected.
0
uber5001

Questa non è una soluzione che vorrei scegliere. Meglio mantenerlo pulito e semplice. Meno è più come dice il proverbio. Attualmente tutti i tuoi articoli sono in grassetto - e lo cambierei per differenziarne di più, migliorare l'attenzione e la leggibilità.

Quindi un suggerimento potrebbe essere quello di rendere audaci quelli obbligatori per farli risaltare o in secondo luogo tenerli in linea con gli altri ma aggiungere un (*) In terzo luogo potresti mettere tutti quelli obbligatori in cima all'elenco

In questo modo manterrai intatta la gerarchia delle tue informazioni.

0
Imagestyler

Raggruppa le opzioni con quella proprietà (almeno una è obbligatoria) nei set di campi o aggiungi un involucro per esse. Cambia lo sfondo per quel gruppo di opzioni e aggiungi lo stesso colore di sfondo per le opzioni obbligatorie.

Mantieni l'icona posizionata al centro del gruppo (centrata verticalmente) o prima dell'opzione nel caso sia solo una.

enter image description here

0
Madalina Taina

Questo è un comportamento che è facilmente supportato contrassegnando i campi richiesti con un colore di riempimento. Una volta soddisfatto il requisito, rilascia il colore in modo che appaia come qualsiasi altro input nella pagina.

Ora nel tuo caso, quando l'utente è tenuto a selezionarne almeno uno, tutte le caselle di controllo sono colorate fino a quando non viene scelta una singola opzione. La regola può applicarsi a qualsiasi numero di scelte richieste in un elenco.

Ma se hai un'opzione che deve essere selezionata, allora dovrebbe essere selezionata e disabilitata per impostazione predefinita in modo che l'utente non possa fare l'errore di deselezionarla. Questo comportamento può anche essere guidato da regole aziendali in modo che ciò che è preselezionato sia guidato da scelte fatte in altre aree del modulo o dell'applicazione.

0
RCburn