你会如何设计一个好的搜索UI？

Question

我想为我的用户提供“高级”搜索引擎。 我基本上有很多搜索标准可供选择：

• 一些非常简单/普通，并且将在很大程度上使用（即时间段，项目ID）
• 有些人不那么主流
• 有些不会被大量使用，但我仍想提供它们

总的来说，我有大约30多个标准可供选择

结果是我在网格中显示的数据集。

我在互联网上寻找灵感，甚至google似乎也没有一个很好的高级搜索解决方案。

我过去曾设计过这种工具，虽然用户最终能够非常有效地使用它，但我对结果并不满意。

• 您是否认为搜索面板应始终可见（即显示在我的结果网格顶部）或以单独的形式提供（这样可以让我为所有控件使用更多位置）

• 您认为最好显示所有搜索条件，还是让用户点击“高级”，如果他想查看/使用更多条件

• 您如何组织标准？按使用频率，或者更确切地说按面积（即与用户，地点，时间等有关的标准）

• 我应该在哪里放置“搜索”按钮？在更常见的搜索控件旁边，或在底部，或两者都有？

更一般地说，您是否有关于如何设计一个漂亮的搜索UI的技巧？ 在这种“高级”搜索引擎中，您通常会错过哪些功能？

Answer 1

不是UI方面的专家，但我看到了很多糟糕的用户界面。

• KISS是一个好的开始。
• 让它直观。
• 保持搜索位于顶部和底部。我不愿意使用某些东西迫使我向上移动页面进行打字（参见Flex文档，他们的分页控件只在顶部 - 你知道哪里是一个痛苦的痛苦）。
• 标准的组织应该是双重的：
  • 基本操作员（20％），其中80％将使用前期
  • 随时动态编辑可用的标准集。
• 以最少的加速时间启动用户，并允许他们根据需要添加/删除条件。我的想法是让他使用他需要的东西，而不是用你的功能集的光彩来混淆他的思想或工作流程。
• 正如其他人所提到的，并且现在是UI的趋势，使用隐藏的控件，除非用户明确需要高级/微调（按需UI）。
• 一个好的经验法则是在页面上最多包含5-7个功能。
• 如果您能够以这样的方式安排标准以便从中创建故事，即用户可以阅读他的查询并且您的操作员从中获得一些意义，那就太棒了。
• 我是小文本的忠实粉丝，易于理解图标，但这样的设置取决于您的安装环境。你的孙子孙女可以使用那个强大的主力吗？
• 良好的设计还需要您可以访问UI。这是一个难以破解的坚果，我完全不知道你是怎么做到的。

祝你好运！

Answer 2

我倾向于喜欢“规则列表”的方法。你知道那个：

Find items that match [ All |v] of these conditions:

[Name            |v]  [Contains   |v] [_____________] (-) (+)
[Start date      |v]  [Is before  |v] [_____________]     (+)

                                            (Cancel) (Search)

这可以防止对话过于混乱，但仍然可以为用户提供他们可能需要的所有选项。

但是假设你需要先进的东西！您可能会发现智能设计的关键字列表方法可以正常工作。

Answer 3

默认情况下隐藏高级控件。无论您的高级控件是否可见，您的搜索输入和操作按钮应始终可见且突出显示。确保显示/隐藏高级控件不会更改主输入或按钮的位置 - 这些位置需要保持静态，以便用户的空间内存不受影响。

对于高级控件，如果不确切知道需要显示哪种类型的数据，我只能概述潜在的组织方法。就个人而言，我喜欢LATCH：

• 位置
• 字母
• 时间（时间表或年表 - 想想历史博物馆）
• 类别（想想百货商店）
• Heirarchy（从最大到最小，从最轻到最黑，等等。

根据您的控件，其中一个最有意义。相应地组织。如果您可以使用滑块或范围输入（例如，“最亮”，“较轻”等）而不是复选框/无线电列表，则这是优选的，因为它减少了页面上可视元素的数量。

忘记“加/减7”规则 - 这些规则完全脱离了那些没有真正读过这项研究的人。简而言之 - 它仅适用于人类对外部刺激的反应，而不适用于屏幕上显示的选项。这并不是说你应该过火，但即使你有很多选择，你也可以在视觉上调整它们。杂乱是设计的失败 - 而不是信息。

请记住使用大量的空格和<label>元素为每个选项提供一个大小合适的点击目标。在处理复选框或无线电时，这一点尤其重要。

确保在返回结果时，有一个明确的标题（<h2>或<h3>通常就足够了）重新说明用户的查询，以及返回了多少结果。不要忘记0结果页面！如果可能的话，提供一些关于扩展查询的建议。

Answer 4

只是一般建议：保持简单。许多选择会使用户感到困惑，并增加了不使用某些功能的可能性。

在用户身上尝试不同的原型，找出哪些选项有价值，哪些选项没有。

Answer 5

Answer 6

我使用的默认设计模式是Filter Table。这涵盖了90％的用例。对于更复杂的搜索，我需要有关用户目标和用例的更多具体信息，以便为这些情况设计更优化的解决方案。

Answer 7

简单就是好。我建议采用迭代方法，在进行用户验收测试并观察日志以查看他们使用（或不使用）的功能后，您可以慢慢构建功能。您知道要改进的唯一方法是观看您的用户。

Answer 8

尽量保持界面尽可能简单。大多数用户只需要一个文本窗口和一个搜索按钮。其余选项可以放在高级搜索选项中。

此设置对新用户更友好，并通过为实际需要的用户保存更昂贵的高级搜索来帮助节省资源。

Answer 9

我的想法：

- 只在需要时显示高级标准。当搜索到的人尽可能简单时，搜索是一件好事。

- 如果高级搜索有一些非常大的搜索条件：不要用它来混淆结果。让用户返回并修改标准变得非常容易和明显，但不要试图通过立即再次给予他们标准来浪费结果空间。

- 如果不了解标准，很难说标准的组织。但正如其他人已经/将要说的那样：让它变得简单！您可能不需要立即显示所有内容：如果我想要更多内容，请让我扩展区域，隐藏我不想使用的内容。然后在其底部放置一个搜索按钮。但同样，我不想只是为了找到这个按钮而滚动浏览随机标准页面。

Answer 10

• 在网站的每个页面上都应该有一个搜索文本框作为桅杆头的一部分。
• 我更喜欢将按钮标记为“查找”而不是“搜索”，因为优惠总是比功能更具吸引力。
• 您的搜索算法应该是复杂的，而不是GUI。

Answer 11

请针对提出的每个问题（斜体字）找到我的答案（正常文本）。

“1）您是否认为搜索面板应始终可见（即显示在我的结果网格顶部）或以单独的形式提供（这样可以让我为所有控件使用更多位置） “

显示在结果网格的顶部，因为这会留下额外的水平空间来显示搜索结果，从而显示更多的搜索数据列而无需水平滚动。

“2）您认为最好显示所有搜索条件，还是让用户点击”高级“，如果他想查看/使用更多条件”

以标签方式显示所有可用条件。即将输入搜索字段分类为类别，并为每个类别设置一个选项卡。

“3）您将如何组织标准？按使用频率，或者更确切地说按区域（即与用户，地点，时间等相关的标准）”

按区域组织'因为不同的人喜欢使用不同的标准。 每个标准都有自己的标签。但是，按照您的想法，按照“更受欢迎”的顺序将标签组织为“不太受欢迎”。在您的情况下，选项卡可以是“按名称”（包含字段名字，中间名，姓氏，母亲姓名，昵称，父亲姓名等），“按位置”（地名，县名，地区名称，州名） ，国名等） 依此类推，直到高级选项卡（您放置最少使用的字段）。

“4）我应该在哪里放置”搜索“按钮？在更常见的搜索控件旁边，或在底部，或两者都有？”

将上面讨论的搜索输入字段放在标签式的方式中，根据“字段类型”对它们进行分类（我将此区域称为搜索网格）。然后在搜索网格下方放置“搜索”，“清除/重置”等操作按钮，与中心对齐（我将此区域称为按钮网格）。然后将搜索结果窗格置于按钮网格下方更加水平区域可用于显示，以便可以一次显示最大列。

Answer 12

看看quince，infragistics ui模式网站：http://quince.infragistics.com。

就个人而言，我会考虑使用可过滤的网格，例如DevExpress中的xtragrid：http://www.devexpress.com/Products/NET/Controls/WinForms/Grid/datafiltering.xml

与其上方的搜索栏相结合，最初填充网格。

Answer 13

不要认为这已被提及，但不要忘记，当用户在任何搜索字段中按Enter键时，您还需要启动搜索。可能已经意识到这一点，但无论如何都值得一提。