it-swarm-eu.dev

Interfaccia intuitiva per la composizione della logica booleana?

Sono interessato a sapere come hanno le persone o costruiscono un'interfaccia che semplifica la costruzione di condizioni logiche booleane? (Sì, è un generatore di query di database) Nella mia mente una cattiva interfaccia li ha digitando un sacco di AND, NOT IN, OR parole chiave ecc. Oppure ha un milione di caselle combinate.

Mi chiedo se qualcuno ha un buon esempio da cui trarre idee? O qualche suggerimento?

Al momento sto prendendo in considerazione uno schermo diviso con una griglia per comporre la query e una tela per visualizzare una rappresentazione visiva degli insiemi di condizioni e di come si sovrappongono, ecc. Come un diagramma di Venn. Questo mi dà ancora un problema con l'usabilità/intuitività dei controlli sulla griglia.

EDIT: sono molto interessato alle idee che lo semplificano per gli utenti meno tecnici. Tuttavia, anche le idee per una versione dell'interfaccia utente per utenti esperti sono molto utili.

134
Edward Williams

Vedi anche iTunes 9 o successivo. Aggiunge la possibilità di fare "nidificato" AND/OR espressioni, simile a come farebbe un programmatore con parentesi:

alt text

59
Hisham

Il problema principale che gli utenti non tecnici hanno con la logica booleana è capire la differenza tra AND e OR perché non corrisponde sempre al linguaggio naturale (ad esempio, "mostrami ordini da New York e New Jersey "significa quasi certamente Location = NY OR Location = NJ). Spesso gli utenti tendono a interpretare" o "un OR esclusivo. Quindi c'è il problema di perdere la traccia delle parentesi nidificate.

Una soluzione che evita entrambi questi problemi è quella di rappresentare graficamente la logica con un impianto idraulico o una metafora elettrica. Ci sono state un paio di linee di lavoro che hanno adottato questo approccio:

Shneiderman, B (1991). Interfacce utente visive per l'esplorazione delle informazioni. Atti della 54a riunione annuale dell'American Society for Information Sciences, 28, 379-384.

Murray NS, Paton NW, Goble CA, Bryce J (2000) Kaleidoquery: un linguaggio visivo basato sul flusso e la sua valutazione. Journal of Visual Languages ​​& Computing, 11 (2), 151-189.

I compilatori di query sono uno dei pochi posti in cui ha senso avere modalità Base e Avanzate separate. Probabilmente scoprirai che il 90% delle query dei tuoi utenti si adatta solo a pochi schemi (ad esempio, "Clienti con nome che iniziano con Xxxx", "Account di cui sono responsabile con fatture in sospeso", "Ordini effettuati tra la data aeb “). Ha senso avere queste come query in scatola o semi-in scatola che possono essere selezionate e specificate facilmente mentre si mette qualcosa come Kaleidoquery in Avanzate per le query ad hoc più rare.

45
Michael Zuschlag

Questo è stato testato bene con utenti sia tecnici che non tecnici e può generare praticamente qualsiasi query sul database possibile ...

db query builder

I vantaggi sono che è molto chiaro e un utente può trascina e rilascia ( o elimina ) qualsiasi espressione o gruppo di espressioni nella struttura.

Il lato negativo è lo spazio che consuma.

43
DaveAlger

Esiste un plugin jquery per farlo, chiamato QueryBuilder, che lo fa in modo interessante: http://mistic100.github.io/jQuery-QueryBuilder/

Jquery QueryBuilder Screenshot

14
dryobs

Mi piace il modo Apple Mail funzionano:

screenshot

10

Ci sono alcune buone idee/riferimenti qui, specialmente per alcuni approcci esistenti. Spesso, sebbene non sempre, l'approccio di Apple è un buon punto di partenza, ma forse nel tuo caso potrebbe non esserlo. Ho l'impressione (anche se in realtà non l'hai detto) che stai lavorando con moltissimi dati composti da molti campi/variabili.

Sono d'accordo che cercare di trovare un modo per semplificarlo per utenti meno tecnici è una buona idea, purché tu preveda di avere meno utenti tecnici che utilizzano il sistema. Altrimenti lo sviluppo di un'interfaccia meno complicata può richiedere molto lavoro e poco guadagno. Mi piace anche l'idea di un diagramma di Venn - sarebbe interessante vedere come andrà a finire.

Tuttavia, in termini di suggerimenti concreti su come semplificare ciò, un altro approccio sarebbe quello di creare una sorta di processo "Wizard" che guidi l'utente attraverso il processo con una combinazione di linguaggio naturale e un aspetto "web" familiare. Di seguito è riportato un modello di come potrebbe funzionare, usando un esempio di un database di veicoli a motore:

enter image description here

Quanto sopra mostra come potrebbe funzionare il passaggio 1, offrendo agli utenti una serie di opzioni che possono selezionare spuntando la relativa casella di controllo. Possono selezionare una o più caselle di controllo secondo necessità (o forse nessuna ?!). Se selezionano una casella di controllo per un'opzione che richiede ulteriori informazioni, le parole pertinenti vengono collegate ipertestualmente. Facendo clic sulle parole con collegamento ipertestuale, l'utente presenterebbe qualcosa di simile all'esempio seguente:

enter image description here

Pertanto, l'esempio sopra mostra ciò che un utente può vedere se ha selezionato la casella di controllo "Il veicolo è prodotto da produttori particolari" e quindi ha fatto clic sul testo del collegamento ipertestuale per selezionare i produttori che desidera includere nei risultati di ricerca. Ovviamente il tuo approccio può differire a seconda che debbano vedere un campo di testo libero, un elenco a discesa di opzioni, ecc.

Ora, per gestire eventuali "eccezioni" ai criteri di ricerca, dovresti ricreare nuovamente la prima finestra, ma con una formulazione diversa, come:

enter image description here

Quindi, dopo aver selezionato l'eccezione del carburante sopra, l'utente fa clic sulle parole ipertestuali "carburante particolare" per scegliere l'eccezione come di seguito:

enter image description here

Ancora una volta, questo potrebbe essere un elenco a discesa, pulsanti di opzione, ecc. A seconda di ciò che meglio si adatta alla condizione. Avrebbero anche attraversato lo stesso processo per selezionare il paese in cui non volevano fabbricare il veicolo.

Ovviamente, vedo questo approccio "Wizard" come per utenti meno tecnici. Offri anche un'opzione "Avanzata" per gli utenti che si sentono a proprio agio con un approccio più complicato che può essere semplificato rispetto all'approccio Wizard.

[~ ~ #] addendum [~ ~ #]

Ok, questo mi ha tenuto sveglio la scorsa notte. In realtà vedo questo Wizard come un buon modo per andare, quindi ho pensato che valesse la pena tornare per migliorare la mia risposta in quanto potrebbe aiutare qualcun altro se non tu.

Ho aggiornato le immagini del modello sopra e volevo ampliare la tua idea di utilizzare uno schermo diviso.

Inizialmente pensavo che dopo aver completato l'ultimo passaggio, qualcosa come l'idea del diagramma di Venn potesse essere utilizzata per indicare visivamente ciò che l'utente ha scelto. Ma poi ho pensato alla mia affermazione originale che dovrebbe esserci anche un modo per l'utente di andare avanti e indietro per modificare i propri criteri. Quindi ora sto pensando che usando il tuo schermo diviso potresti ottenere entrambi. Di seguito una nuova immagine per illustrare ciò che sto pensando:

Split screen view

Quindi, quanto sopra è un esempio di ciò che potrebbe apparire nella seconda parte dello schermo diviso. Man mano che l'utente seleziona i propri criteri, questo aggiorna per indicare quali sono state le selezioni. Questo approccio utilizza anche l'aspetto familiare del web di evidenziare le loro scelte con i collegamenti ipertestuali e, se lo volessero, potrebbero cambiare i loro criteri facendo clic sui collegamenti ipertestuali all'interno di questa schermata, anziché dover andare avanti e indietro tra le schermate per ripetere il loro passi. Naturalmente, se volessero selezionare una nuova condizione , dovrebbero forse tornare al passaggio pertinente. Ma hai avuto l'idea.

L'unica altra cosa che vorrei menzionare è che senza conoscere la complessità dei dati, potrebbe essere necessario perfezionare questo approccio Wizard. Il mio semplice database di veicoli richiede solo due passaggi, ma un complicato uno potrebbe aver bisogno di più passaggi. Il punto di questo approccio, tuttavia, non è tanto nel numero di passaggi, ma nel fatto che il Wizard "parla" attraverso i passaggi usando il linguaggio naturale come il più possibile.

Ad ogni modo, spero che questo, insieme alle altre risposte fornite, ti dia qualche spunto di riflessione. E forse alcuni altri. Questo è un buon argomento e penso che sarà rilevante per molti utenti.

In bocca al lupo!

10
Monomeeth

Dipende dal livello di raffinatezza dei tuoi utenti. Abbiamo qualcosa di simile nella versione corrente dell'interfaccia che ha tralasciato il raggruppamento e risolto la congiunzione tra i termini a OR. Ogni termine può essere negato. La maggior parte degli utenti sta bene con quel tipo di query e la maggior parte di loro non sarebbe in grado di formulare correttamente query più avanzate. Ora stiamo implementando un processo in due fasi in cui il risultato di una query può essere utilizzato per limitare la popolazione in una query successiva (tralasciando ancora il raggruppamento esplicito nell'interfaccia utente).

L'interfaccia utente per questo è un elenco di base di vincoli che possono essere aggiunti, rimossi, attivati, disattivati ​​e negati. Questo è stato sufficiente per la maggior parte delle query che gli utenti vogliono creare. Avevamo un design per una nuova versione che era basato su un concetto di flusso di dati (prendendo forte ispirazione dalle registrazioni, vedi sotto) ma che non è mai stato eseguito. Vistrails è un prodotto che può essere utilizzato per creare pipeline VTK. Se si desidera seguire il percorso di molte parti dell'interfaccia utente, il flusso di dati funziona per la formulazione di query, ma anche per la formattazione dell'output.

Cerca ispirazione

9
Harald Scheirich

A differenza del riutilizzo delle tabelle pivot come in precedenza risposta , questa è un'interfaccia utente sperimentale che ho pensato di gestire la necessità ripetitiva di scrivere AND o OR.

Si basa su un elemento che devi imparare che ANDs sono orizzontali e ORs sono verticali. Riesce però a gestire una logica booleana abbastanza complessa.

Panoramica

Supponiamo che A, B, C, D e E siano espressioni booleane.

Per testare il concetto qui è come disegnare i due diversi lati di un'equivalenza booleana standard:

(A and B) or C === (A or C) and (B or C)

enter image description here

Questo si estende a query più complesse:

((A and B and C) or D) and E

enter image description here

UI effettiva

Per questa tabella di dati:

enter image description here

Lo schermo è diviso in due:

  1. Un set di filtri (effettivamente AND query)
  2. Una combinazione di filtri

Impostare i filtri (questi sono appena digitati con il log condizionale di base) e quindi trascinarli attraverso per unirli con la query completa.

enter image description here

Dopo aver trascinato il nuovo set di filtri, il lato sinistro torna a un elenco non filtrato e il lato destro mostra il set di dati "unito":

enter image description here

Dovresti quindi essere in grado di trascinare e modificare le espressioni sul lato destro, ma ciò richiede molto più lavoro.

7
icc97

Microsoft Access ha tentato ragionevolmente di eseguire una semplice interfaccia utente per la query del database producendo una versione visiva di "Query per esempio"

Ha un linguaggio più naturale che evita la necessità di un'interfaccia utente nidificata , a spese di voci occasionalmente leggermente più ridondanti nelle righe.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

6
Jason A.

È una vecchia domanda, ma ho pensato che avrei contribuito nel caso qualcuno fosse interessato. Sebbene siano già state fornite molte risposte interessanti, ho progettato per la nostra app quanto segue:

enter image description here

Inizialmente c'è solo la prima espressione di gruppo e una regola. Facendo clic su "Aggiungi condizione" si aggiunge una nuova condizione sopra di essa, mentre "Aggiungi gruppo" aggiunge un nuovo gruppo direttamente sotto di essa; altri gruppi del gruppo principale sono fratelli mentre è possibile creare un annidamento infinito utilizzando il pulsante "Aggiungi gruppo" all'interno di un gruppo nidificato.

Sui dispositivi mobili le condizioni si accumulano, insieme al pulsante di azione "rimuovi", che ora cambia il testo in "Rimuovi condizione".

enter image description here

Il design funziona bene, sembra buono, è reattivo e non consuma troppo spazio.

Bonus aggiunto: sopra il gruppo una singola riga mostra la condizione di fine prodotto, ad es

[Data maggiore di XXX AND (Nome uguale a Nick)]

modifica: Al fine di renderlo più accessibile da persone non tecniche, seguirò ciò che è stato detto da altri in questo thread - seguire il percorso di Apple. Invece di AND/OR utilizzerei il contesto ALL/ANY +.

6
scooterlord

Se i tuoi utenti sono abbastanza avanzati per conoscere la gerarchia di una query, qualsiasi interfaccia grafica che dai loro deve essere abbastanza fluida da non ostacolarli. Penso che sia ideale un'interfaccia basata sul trascinamento di elementi per creare una gerarchia implicita. Ecco un esempio visivo esteso con annotazioni su come un utente potrebbe costruire la query (A and B) or ((not C) or D):

 Rilascia A sul pannello. 
 + --- + 
 | A | 
 + --- + 
 
 Rilascia "e" dopo A. 
 + --------------- ---- + 
 | + --- + + ----- + | 
 | | A | e | ... | | 
 | + --- + + ----- + | 
 + ------------------- + 
 
 Rilascia B su "...". 
 + ----------------- + 
 | + --- + + --- + | 
 | | A | e | B | | 
 | + --- + + --- + | 
 + ----------------- + 
 
 Rilascia "o" dopo "e" 
 + -------------------------------- + 
. | + ----------------- + | 
 | | + --- + + --- + | + ----- + | 
 | | | A | e | B | | o | ... | | 
 | | + --- + + --- + | + ----- + | 
 | + ----------------- + | 
 + ------------------------ -------- + 
 
 Rilascia C su "...". 
 + ---------------- -------------- + 
 | + ----------------- + | 
 | | + --- + + --- + | + --- + | 
 | | | A | e | B | | o | C | | 
 | | + --- + + --- + | + --- + | 
 | + ----------------- + | 
 + ------------------------ ------ + 
 
 Rilascia "non" su C. 
 + -------------------- ------------------ + 
 | + ----------------- + + ----------- + | 
 | | + --- + + --- + | | + --- + | | 
 | | | A | e | B | | o | non | C | | | 
 | | + --- + + --- + | | + --- + | | 
 | + ----------------- + + ----------- + | 
 + ----------- --------------------------- + 
 
 Rilascia "o" dopo "non C". 
 + ---------------------------------------------- ------- + 
 | + -------------------------- + | 
 | + ----------------- + | + ----------- + | | 
 | | + --- + + --- + | | | + --- + | + ----- + | | 
 | | | A | e | B | | o | | non | C | | o | ... | | | 
 | | + --- + + --- + | | | + --- + | + ----- + | | 
 | + ----------------- + | + ----------- + | | 
 | + -------------------------- + | 
 + --------------- -------------------------------------- + 
 
 goccia D su "...". 
 + ------------------------------------ --------------- + 
 | + ------------------------ + | 
 | + ----------------- + | + ----------- + | | 
 | | + --- + + --- + | | | + --- + | + --- + | | 
 | | | A | e | B | | o | | non | C | | o | D | | | 
 | | + --- + + --- + | | | + --- + | + --- + | | 
 | + ----------------- + | + ----------- + | | 
 | + ------------------------ + | 
 + ----------------- ---------------------------------- + 

I singoli elementi di query (A, B, ecc.) Vengono costruiti prima di essere rilasciati nel pannello, utilizzando caselle combinate o qualsiasi elemento necessario. Piccoli margini e colori alternati potrebbero renderlo molto leggibile, così come le regole di visualizzazione che rendono, ad esempio, una catena di ors visualizzate a un singolo livello:

 + ------------------------- + 
 | + --- + + --- + + --- + | 
 | | A | o | B | o | C | | 
 | + --- + + --- + + --- + | 
 + ------------------------- + 

Naturalmente, gli elementi della query potrebbero essere espansi, compressi, riordinati e modificati dopo essere stati inseriti nel riquadro di composizione.

Non sto dicendo che questo è il modo più semplice per costruire un sistema per questo scopo. In effetti, dal punto di vista dello sviluppo, è probabilmente il più difficile possibile. Ma è la cosa più efficiente e intuitiva che posso inventare, e comunque è fondamentalmente solo un clone dell'interfaccia della regola della posta Apple Mail ma con maggiore enfasi sulla gerarchia.

Spero che questo si riveli utile nella tua ricerca di ciò che è giusto.

6
Jon Purdy

CognitoForms ha la soluzione AND/OR più intuitiva che abbia mai visto enter image description here

4
leahg

Ecco un'interfaccia per comporre la logica booleana.

Interface for composing boolean logic

Alcuni pensieri

  • L'interfaccia inizia in modo semplice
  • Se diventa complicato, è perché l'utente lo ha creato passo dopo passo
  • Nessuna modifica o trascinamento/rilascio - solo creazione ed eliminazione di rami
  • Le condizioni sono un semplice menu a discesa in questo esempio, ma potrebbero essere più complicate o eventualmente negate

ambiguità

Per inciso, mi sono anche preoccupato dell'ambiguità delle camicie "mostrami rosso e blu" poiché l'utente potrebbe tecnicamente significare "rosso o blu " camicie.

Penso che se chiedi loro di descrivere la versione singolare (una "camicia"), il problema si riduce in qualche modo. Ad esempio, non direbbero "Mostrami una camicia rossa e blu" se significano "rosso o blu".

4
bendytree

Aggiunta di esempio dall'app ticketing app che abbiamo sviluppato.

Invece di raggruppare "AND/OR" abbiamo optato per un menu a discesa "tutto/qualsiasi/nessuno" in alto. Proprio a causa dell'esempio sopra citato: quando persone non tecniche dicono "dammi ordini da New York e New Jersey" tit in realtà significa "OR logico".

enter image description here

Abbiamo anche deciso di non raggruppare più combinazioni AND/OR complesse, poiché le persone si sono confuse. Offriamo invece una "ricorsione", offrendo di "attivare un'altra regola" (nella parte inferiore dello screenshot).

2
Alex

Sto lavorando a una riprogettazione di un'app Web che utilizza Boolean e l'immagine in basso mostra come viene attualmente eseguita. L'utente può eliminare le parentesi quando necessario o aggiungerle di nuovo. Sto facendo fatica a trovare un modo migliore per farlo, quindi posso finire per mantenere questa parte che gli utenti sembrano usare abbastanza bene.

UI boolean

2
Gueda

La mia interfaccia utente preferita per la creazione di regole è server Scenario di ATG . Controllalo:

alt text

2
Julian H

Per la creazione di query relativamente complesse tabella singola, le tabelle pivot sono molto utili.

Roba buona

  1. Puoi ottenere SUM, AVG e GROUP con una conoscenza relativamente scarsa.
  2. Dividendo i campi tra colonne e righe si ottengono AND query
  3. I totali ti danno OR query
  4. È possibile "compilare" correttamente le query, ovvero è possibile visualizzare rapidamente un set principale, quindi aggiungere righe/colonne e quindi aggiungere filtri che mostrano quali dati sono disponibili per filtrare

Brutta roba

  1. Immagino che raggiungerai i limiti se provi a combinare più di una tabella/set di dati.
  2. A seconda della profondità con cui vuoi annidare le tue query AND/OR potresti avere problemi

Ma almeno non hai un sacco di caselle combinate e le caselle combinate che hai sono più intuitive.

Eccone uno che ho fatto in precedenza con alcune belle statistiche di football fantasy da abbinare.

enter image description here

2
icc97

È difficile individuare esattamente ciò che è intuitivo per qualcosa che è stato tradizionalmente trattato dagli utenti tecnici (che non troverà necessariamente interfacce più user-friendly rispetto ai prompt dei comandi). C'è un motivo particolare per questa efficienza, poiché le query possono essere specificate in modo univoco ed eseguite in un prompt della riga di comando. Inoltre, probabilmente non sorprenderà nessuno che la progettazione dell'interfaccia tradizionale probabilmente si interromperà quando si tratta di query più complesse.

Tuttavia, penso che sia probabilmente sicuro affermare che quando si parla di logica booleana, il tema più comune/familiare deve essere il diagramma di Venn. Quindi la domanda potrebbe essere come prendere le precise dichiarazioni delle query del database e combinarle con la semplicità di un diagramma di Venn come l'interfaccia?

Penso che concettualmente una possibile soluzione sarebbe quella di combinare sia il layout spaziale con le interazioni dell'utente che riflettono la natura delle operazioni che vengono eseguite. In questo modo otterrai il concetto del diagramma di Venn attraverso gli utenti, rendendo le operazioni abbastanza 'intuitive' da capire. Questo sta effettivamente prendendo ciò che @bendytree e @sboye hanno suggerito di fare l'effettiva immissione dei dati ma anche di presentare il risultato di tali operazioni sotto forma di un diagramma di Venn in modo che l'utente possa vedere immediatamente se ha eseguito il giusto tipo di operazione booleana . Ma potresti voler rendere l'input ancora più semplice implementando alcuni drag'n'drop per gli operatori booleani e i set di dati/campi che vuoi visualizzare, prendendo ispirazione da alcuni dei diagrammi interattivi di Venn che puoi trovare nelle ricerche di Google.

1
Michael Lai

Se è mobile, disporre di un pulsante per ogni operazione che lo inserisce semplicemente in una casella di testo. Fornisci un link per aiutare sull'algebra booleana e simili. Sarebbe sia facile che flessibile.

0
timseal