it-swarm.cn

组成布尔逻辑的直观界面?

我有兴趣知道人们的状况,还是会构造一个简化逻辑布尔条件构造的接口? (是的,它是一个数据库查询生成器)在我看来,一个糟糕的界面使他们键入了许多AND,而不是IN,OR关键字等。否则,则有一个百万组合框。

我想知道是否有人可以借鉴我的好榜样?还是一些建议?

目前,我正在考虑使用带网格的拆分屏幕来组成查询,并使用画布来显示条件集以及它们如何重叠等的直观表示。类似于维恩图。这仍然给我网格控件的可用性/直观性带来了问题。

编辑:我对简化技术的用户的想法非常感兴趣。但是,针对高级用户的UI版本的构想也非常有帮助。

134
Edward Williams

另请参阅iTunes 9或更高版本。它增加了执行“嵌套” AND/OR)表达式的能力,类似于程序员如何使用括号来做到这一点:

alt text

59
Hisham

非技术用户使用布尔逻辑的主要问题是理解AND与OR的区别,因为它并不总是与自然语言相对应(例如,“向我展示来自纽约和纽约的订单泽西岛”几乎可以肯定意味着位置= NY OR位置= NJ)。通常,用户倾向于将“或”解释为互斥的“或”。这就是丢失对嵌套括号的跟踪的问题。

避免这两个问题的一种解决方案是使用管道或电气隐喻以图形方式表示逻辑。采用这种方法有几项工作:

Shneiderman,B(1991)。用于信息探索的可视用户界面。美国信息科学学会第54届年会论文集,第28卷,第379-384页。

Murray NS,Paton NW,Goble CA,Bryce J(2000)Kaleidoquery-一种基于流的视觉语言及其评估。视觉语言与计算杂志,11(2),151-189。

查询构建器是拥有单独的基本和高级模式的少数几个地方之一。您可能会发现90%的用户查询仅符合几种模式(例如,“名称以Xxxx开头的客户”,“我负责处理未付帐单的帐户”,“日期a和b之间的订单”)。将它们作为罐头或半罐头查询是很有意义的,可以轻松地选择和指定这些查询,同时在“高级”下放置诸如Kaleidoquery之类的内容以进行罕见的即席查询。

45
Michael Zuschlag

这对技术用户和非技术用户都进行了很好的测试,并且可以生成几乎所有可能的数据库查询...

db query builder

好处是非常清楚,用户可以拖放或删除)树中的任何表达式或一组表达式。

不利的一面是它消耗了多少空间。

43
DaveAlger

有一个jquery插件可以执行此操作,称为QueryBuilder,它以一种有趣的方式执行此操作: http://mistic100.github.io/jQuery-QueryBuilder/

Jquery QueryBuilder Screenshot

14
dryobs

我喜欢Apple邮件规则工作的方式:

screenshot

10
LennyUserExperience

这里有很多好的想法/参考,尤其是一些现有方法。通常,尽管并非总是如此,苹果公司的方法是一个很好的起点-但就您而言,可能并非如此。我得到的印象是(尽管您实际上并没有说过)您正在使用由许多字段/变量组成的大量数据。

我同意,只要您希望使用该系统的技术用户减少,就可以为技术较少的用户找到一种简化它的方法。否则,开发一个不太复杂的界面可能会花费很多功夫。我也喜欢维恩图的想法-看到它如何成功会很有趣。

但是,根据有关如何简化此操作的实际建议,另一种方法是仅创建某种“向导”过程,结合自然语言和熟悉的“ Web”外观,使用户逐步完成该过程。以下是一个使用汽车数据库示例的样机:

enter image description here

上面显示了第1步的工作方式,通过勾选相关复选框为用户提供了许多可供选择的选项。他们可以根据需要选择一个或多个复选框(或可能没有?)。如果他们选中需要进一步信息的选项的复选框,则相关单词将超链接。单击超链接的单词将为用户提供类似于以下示例的内容:

enter image description here

因此,上面的示例显示了用户选中“特定制造商生产的车辆”复选框,然后单击超链接文本以选择他们想要包含在搜索结果中的制造商时可以看到的内容。当然,您的方法可能会有所不同,具体取决于他们是否应看到自由文本字段,选项的下拉列表等。

现在,要处理搜索条件的任何“例外”,您基本上将再次重新创建第一个窗口,但是用不同的措词,例如:

enter image description here

因此,在选择了上面的加油例外之后,用户单击超链接的单词“特殊燃油”以选择以下加油例外:

enter image description here

再次,这可能是一个下拉列表,单选按钮等,具体取决于最适合该条件的内容。他们还将通过相同的过程选择不希望在其制造汽车的国家/地区。

当然,我认为这种“向导”方法适用于技术含量较低的用户。您还可以为用户提供一个“高级”选项,让他们对更复杂的方法感到满意,与Wizard)相比,该方法可以简化。

[〜#〜]附录[〜#〜]

好的,这让我昨晚起床了。实际上,我认为这种Wizard)方法是一个很好的方法,因此认为值得再次改进我的答案,因为它可能对其他人有所帮助。

我已经更新了上面的模型图像,并希望扩展您使用分屏的想法。

最初,我认为在完成最后一步之后,可以使用诸如维恩图的想法之类的东西直观地指示用户选择了什么。但是后来我想到了我最初的主张,即用户也应该有一种来回移动的方式来修改他们的标准。因此,现在我正在考虑使用拆分屏幕可以同时实现两者。下面是一张新图片,以说明我的想法:

Split screen view

因此,以上示例显示了拆分屏幕第二部分中可能显示的内容。当用户选择他们的标准时,此更新将指示他们的选择。这种方法还使用了熟悉的Web外观,通过超链接突出显示了他们的选择,并且,如果他们愿意,他们可以通过单击此屏幕上的超链接来更改其标准,而不必在屏幕之间来回重做脚步。当然,如果他们想选择一个new条件,则可能需要返回到相关步骤。但是你明白了。

我想提及的唯一另一件事是,在不知道数据复杂性的情况下,您可能需要改进此Wizard方法。我简单的车辆数据库只需要两步,但很复杂人们可能需要更多的步骤,虽然这种方法的重点不是步骤的数量,但事实上Wizard通过使用自然语言的步骤与人们交谈尽可能地。

无论如何,我希望这以及所提供的其他答案能为您带来一些思考。也许还有一些。这是一个好话题,我认为这与许多用户有关。

祝好运!

10
Monomeeth

这取决于用户的复杂程度。在当前版本的接口中,我们有一些相似之处,其中没有进行分组,并且将术语之间的连词固定为OR。每个术语可以取反。大多数用户都可以使用这种查询,并且大多数人将无法正确地制定更高级的查询。现在,我们正在执行一个两步过程,其中查询的结果可用于限制后续查询中的填充(仍然在UI中保留显式分组)。

用户界面是可以添加,删除,激活,停用和否定约束的基本列表。对于用户想要创建的大多数查询而言,这已经足够了。我们设计了一个基于数据流概念的新版本的设计(从vistrails中获得了很大的启发,请参见下文),但从未执行。 Vistrails是可用于创建VTK管道的产品。如果要走很多UI路线,则数据流可用于制定查询条件,但也可用于制定输出格式。

在寻找灵感

9
Harald Scheirich

与我之前 已回答 重复使用数据透视表不同,我认为这是一个实验性UI,旨在应对重复编写ANDOR的需求。

它依赖于一个元素,您必须了解ANDs是水平的而ORs是垂直的。但是,它设法处理相当复杂的布尔逻辑。

总览

假设ABCDE是布尔表达式。

为了测试该概念,这里是如何绘制标准布尔等值的两个不同方面:

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

enter image description here

这扩展到更复杂的查询:

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

enter image description here

实际用户界面

对于此数据表:

enter image description here

屏幕分为两部分:

  1. 一组过滤器(实际上是AND个查询)
  2. 过滤器的组合

设置过滤器(这些过滤器仅使用基本的条件日志输入),然后将其拖动以与完整查询“合并”。

enter image description here

将新的过滤器集拖到后面之后,左侧将返回未过滤的列表,而右侧将显示“合并”数据集:

enter image description here

然后,您应该可以在右侧拖动和编辑表达式-但这需要做很多工作。

7
icc97

Microsoft Access通过生成可视化版本的 “通过示例查询” 尝试了一种简单的数据库查询UI。

它具有一种更自然的语言,避免了嵌套UI的需要,但以偶尔增加行中的冗余条目为代价。

mockup

下载bmml源 –使用 Balsamiq Mockups 创建的线框

6
Jason A.

这是一个古老的问题,但是我想如果有人感兴趣的话,我会做出贡献。尽管已经提供了许多有趣的答案,但我为我们的应用程序设计了以下内容:

enter image description here

最初只有第一个组表达式和一个规则。单击“添加条件”在其上方添加一个新条件,而“添加组”在其下方添加一个新组;父组中的其他组是同级,而您可以使用嵌套组中的“添加组”按钮创建无限嵌套。

在移动设备上,条件堆栈以及“删除”操作按钮-现在将其文本更改为“删除条件”。

enter image description here

设计效果很好,看起来不错,反应灵敏,并且也不占用太多空间。

增加的奖励:组上方的一行显示最终产生的条件,例如

[日期大于XXX AND(名称等于尼克)]

编辑:为了使非技术人员更易于使用,我将遵循该主题中其他人所说的-遵循Apple的道路。代替AND/OR,我将使用ALL/ANY +上下文。

6
scooterlord

如果您的用户具有足够的高级知识来了解查询的层次结构,则您提供给他们的任何图形界面都必须足够流畅,以免妨碍他们的前进。我认为基于拖放元素以创建隐式层次结构的接口是理想的。这是用户如何构造查询(A and B) or ((not C) or D)的扩展注释视觉示例:

将A拖放到面板上。
 + --- + 
 | A | 
 + --- + 
 
在A。
 + ---------------后面放“ and” ---- + 
 | + --- + + ----- + | 
 | | A |和... | | 
 | + --- + + ----- + | 
 + ------------------- + 
 
 Drop B转到“ ...”上。
 + ----------------- + 
 | + --- + + --- + | 
 | | A |和B | | 
 | + --- + + --- + | 
 + ----------------- + 
 
在后面加上“或” “和”。
 + -------------------------------- + 
 | + ----------------- + | 
 | | + --- + + --- + | + ----- + | 
 | | | A |和B | |或| ... | | 
 | | + --- + + --- + | + ----- + | 
 | + ----------------- + | 
 + ------------------------ -------- + 
 
将C拖放到“ ...”上。
 + ---------------- -------------- + 
 | + ----------------- + | 
 | | + --- + + --- + | + --- + | 
 | | | A |和B | |或| C | | 
 | | + --- + + --- + | + --- + | 
 | + ----------------- + | 
 + ------------------------ ------ + 
 
将“ not”拖放到C。
 + -------------------- ------------------ + 
 | + ----------------- + + ----------- + | 
 | | + --- + + --- + | | + --- + | | 
 | | | A |和B | |或|不C | | | 
 | | + --- + + --- + | | + --- + | | 
 | + ----------------- + + ----------- + | 
 + ----------- --------------------------- + 
 
将“或”放在“非C”之后。
 + ---------------------------------------------- ------- + 
 | + -------------------------- + | 
 | + ----------------- + | + ----------- + | | 
 | | + --- + + --- + | | | + --- + | + ----- + | | 
 | | | A |和B | |或| |不C | |或| ... | | | 
 | | + --- + + --- + | | | + --- + | + ----- + | | 
 | + ----------------- + | + ----------- + | | 
 | + -------------------------- + | 
 + --------------- -------------------------------------- + 
 
拖放D到“ ...”上。
 + ------------------------------------ --------------- + 
 | + ------------------------ + | 
 | + ----------------- + | + ----------- + | | 
 | | + --- + + --- + | | | + --- + | + --- + | | 
 | | | A |和B | |或| |不C | |或| D | | | 
 | | + --- + + --- + | | | + --- + | + --- + | | 
 | + ----------------- + | + ----------- + | | 
 | + ------------------------ + | 
 + ----------------- ---------------------------------- + 

单独的查询元素(AB等)在构造之前,使用组合框或任何必要的元素进行了构造。较小的边距和交替的颜色可以使此内容易于阅读,以及一些显示规则,例如使ors链显示在单个级别上:

 + ------------------------- + 
 | + --- + + --- + + --- + | 
 | | A |或| B |或| C | | 
 | + --- + + --- + + --- + | 
 + ------------------------- + 

自然,查询元素在放到组成面板中之后可以被扩展,折叠,重新排序和编辑。

我并不是说这是为此目的构建系统的最简单方法。实际上,从开发的角度来看,它可能会尽可能地困难。但这是我能想到的最有效,最直观的方法,无论如何,它基本上只是Apple Mail规则UI的一个克隆,但更强调层次结构。

希望这对您搜索正确的东西有用。

6
Jon Purdy

CognitoForms 具有我遇到的最直观的AND/OR解决方案 enter image description here

4
leahg

这是组成布尔逻辑的接口。

Interface for composing boolean logic

一些想法

  • 界面开始很简单
  • 如果变得复杂,那是因为用户逐步构建了它
  • 无需编辑或拖放-只需创建和删除分支
  • 在此示例中,条件是一个简单的下拉列表,但可能更复杂或可能被否定

歧义

顺便说一句,我还一直担心“给我看红色和蓝色”衬衫的含糊不清,因为用户在技术上可能意味着“红色蓝色衬衫。

我认为,如果您要求他们描述单数形式(“衬衫”),那么问题会有所减轻。例如,如果他们的意思是“红色或蓝色”,他们就不会说“给我看一件红色和蓝色的衬衫”。

4
bendytree

我们开发了 票务应用 中的示例。

而不是将“ AND/OR”分组,我们将其放在顶部的“ all/any/none”下拉列表中。正是由于上述示例:非技术人员说“来自纽约和新泽西的命令”时,山雀实际上意味着“逻辑或”。

enter image description here

由于人们感到困惑,我们还决定不对多个复杂的AND/OR组合进行分组。我们改为为他们提供“递归”,以“触发另一条规则”(在屏幕截图的底部)。

2
Alex

我正在重新设计使用Boolean的Web应用程序,下图显示了当前的操作方式。用户可以在需要的地方删除括号或将其重新添加。我正在努力寻找一种更好的方法来这样做,因此最终可能会保留用户似乎使用得很好的这一部分。

UI boolean

2
Gueda

我最喜欢的用于规则构建的UI是 ATG的场景服务器 。看一下这个:

alt text

2
Julian H

对于创建相对复杂的单表查询,数据透视表非常有用。

好东西

  1. 您只需很少的知识就可以得到SUMAVGGROUP
  2. 通过在列与行之间划分字段,可以得到AND个查询
  3. 总计为您提供OR个查询
  4. 您可以正确地“构建”查询-即您可以快速查看母版集,然后添加行/列,然后添加过滤器,该过滤器向您显示哪些数据可用于过滤

坏事

  1. 我想如果您尝试组合多个表/数据集,将会达到极限。
  2. 根据您想要AND/OR查询的嵌套深度,您可能会遇到问题

但是至少您没有大量的组合框,而您拥有的组合框更直观。

这是我之前用一些可爱的梦幻足球统计数据制作的。

enter image description here

2
icc97

对于传统上由技术用户处理的问题,很难准确地确定直观的内容(与命令提示符相比,界面不一定更像用户)。这种效率有一个特殊的原因,因为可以在命令行提示符下明确指定和执行查询。同样,对于更复杂的查询,传统的界面设计可能会打破,这也不会让人感到惊讶。

尽管如此,我认为可以肯定地说,在布尔逻辑方面,最常见/最熟悉的主题必须是维恩图。因此,问题可能是如何获取数据库查询的精确语句,并将其与维恩图(如接口)的简单性相结合?

我认为从概念上讲,一种可行的解决方案是将空间布局与反映了所执行操作性质的用户交互结合起来。这样,您将使维恩图的概念传达给用户,同时使操作“直观”到足以理解的程度。因此,这实际上是采用@bendytree和@sboye建议的方式进行实际数据输入,而且还以维恩图的形式输出这些操作的结果,以便用户可以立即查看他们是否执行了正确的布尔操作类型。 。但是,您可能希望通过对要显示的布尔运算符和数据集/字段实施一些拖放操作,使输入变得更加容易,并从Google搜索中可以找到的一些交互式维恩图中汲取灵感。

1
Michael Lai

如果它是移动的,那么每个操作都有一个按钮,只需将其输入文本框即可。提供一个链接,以帮助您解决布尔代数等问题。这既简单又灵活。

0
timseal