21

我想为我的用户提供一个“高级”搜索引擎。我基本上有很多搜索条件可供选择:

  • 有些非常简单/常见,将大量使用(即时间段、项目 ID)
  • 有些不太主流
  • 还有一些不会用很多,但我还是想提供

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

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

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

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

  • 你认为搜索面板应该一直可见(即显示在我的结果网格顶部)还是以单独的形式提供(这让我可以为所有控件使用更多位置)

  • 您认为最好显示所有搜索条件,还是让用户在想要查看/使用更多条件时单击“高级”?

  • 您将如何组织标准?按使用频率,或者按区域(即与用户、位置、时间等相关的标准)

  • 我应该把“搜索”按钮放在哪里?在更常见的搜索控件旁边,还是在底部,或两者兼而有之?

更一般地说,您是否有关于如何设计一个漂亮的搜索 UI 的提示要分享?在这种“高级”搜索引擎中,您通常会错过哪些功能?

4

13 回答 13

12

不是 UI 方面的专家,但我见过很多糟糕的 UI。

  • KISS 是一个好的开始。
  • 让它直观。
  • 将搜索保留在顶部和底部。我不愿意使用迫使我向上移动页面以键入的东西(请参阅 Flex 文档,他们的分页控件仅在顶部 - 你知道在哪里痛苦的痛苦)。
  • 标准的组织应该是双重的:
    • 基本运算符(20%),其中 80% 将预先使用
    • 随时动态编辑可用的标准集。
  • 让用户以最少的启动时间开始,并允许他们根据需要添加/删除标准。这个想法是让他使用他需要的东西,而不是让他的思想或工作流程因为你的功能集的光彩而混乱。
  • 正如其他人所提到的,并且是现在一般 UI 的趋势,使用隐藏的控件,除非用户明确想要高级/微调(按需 UI)。
  • 一个好的经验法则是一个页面上最多有 5-7 个功能。
  • 如果您能以这样的方式安排标准以便从中制作故事,那就太好了,即用户可以阅读他的查询并且您的操作员从中获得一些意义。
  • 我非常喜欢小文本和易于理解的图标,但这样的设置取决于您的安装环境。您的孙子可以使用那匹强大的主力吗?
  • 好的设计还需要你让你的 UI 易于访问。这是一个难以破解的难题,我完全不知道你会如何做到这一点。

祝你好运!

于 2009-02-28T19:36:12.237 回答
8

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

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

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

                                            (Cancel) (Search)

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

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

于 2009-02-28T19:33:41.433 回答
5

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

至于高级控件,在不知道具体需要展示什么类型的数据的情况下,我只能概述潜在的组织方法。就个人而言,我喜欢 LATCH:

  • 地点
  • 字母
  • 时间(时间线或年表 - 想想历史博物馆)
  • 类别(想想百货公司)
  • 层次结构(从大到小,从最轻到最暗,等等。

根据您的控件,其中之一将最有意义。相应地组织。如果您可以使用滑块或范围输入(例如,'lightest'、'lighter' 等)而不是复选框/收音机列表,则最好这样做,因为它可以减少页面上的视觉元素数量。

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

请记住使用大量空白和<label>元素为每个选项提供合适的点击目标。这在处理复选框或收音机时尤其重要。

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

于 2009-02-28T19:42:52.953 回答
4

只是一个一般性建议:保持简单。过多的选择会使用户感到困惑,并增加了某些功能未被使用的机会。

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

于 2009-02-28T19:08:49.637 回答
3

1)您认为搜索面板应该在我的结果网格顶部可见吗?

像 Google 的基本搜索这样的简单搜索面板可能会出现在结果页面上,因为它很紧凑。这允许用户使用不同的标准重新尝试搜索,而不会浪费时间转到新的页面或窗口。高级搜索更加混乱,因此在轻松访问结果(在较小的窗格中)和轻松访问重新搜索之间有一个更重要的权衡,因此您需要评估用户重新搜索的频率与他们使用结果。例如,如果重新搜索发生 50% 的时间,但在结果页面中包含高级搜索面板需要额外滚动 75% 的时间,您的用户最好不要在结果中使用高级搜索面板。作为一般规则,高级搜索不应出现在“结果”页面上,除非任务真的是对数据进行试探性探索。

结果顶部的“搜索”面板的另一个问题是如果结果不符合条件(例如,如果用户在显示结果之后但再次单击“搜索”之前更改了条件)该怎么办。使用高级搜索,用户更容易忘记或错过他们是否更改了标准,然后对哪些标准对结果有效而感到困惑。将高级搜索放在单独的页面上可以防止这种情况,但如果高级搜索在结果页面上,还有其他方法可以避免这个问题(例如,使用即时应用的“分面”搜索)。

在任何情况下,结果页面都应该显示用于进行搜索的标准。

2)您认为让用户点击“高级”以获得更多标准更好吗?

对于大多数数据库应用程序,特定组(例如,工作职位)的用户有 2 到 5 组特定的搜索条件,这些条件可以让他们完成大部分工作(例如,搜索在用户提供的两个日期之间下达的订单) ,有时包括甚至具有特定标准值的标准(例如,搜索所有处于待处理状态的订单)。在这种情况下,如果您有一个用于即席搜索的高级按钮,用户将最快并且最不可能混淆,而默认搜索具有针对这些特定搜索定制的控件。仅当您的用户主要进行探索性临时搜索时才默认为高级搜索。

3) 你将如何组织标准?

如果有某些特别经常使用的条件,那么它们将通过基本搜索进行处理,如 2 所述,因此在高级搜索中按频率排序条件几乎没有优势。它只是让用户很难找到他们正在寻找的标准。通常,您可以依赖具有特定命名字段的用户,因此按字母顺序对标准进行排序,或者,如果用户熟悉结果页面并且其字段的布局方式与用户的想法一致,则使用相同的顺序用于结果列。

4) 我应该把“搜索”按钮放在哪里?

理想情况下,搜索按钮应始终可见。最好的解决方案是在可滚动窗格上使用窗格外的按钮将所有条件设置为。将按钮放在顶部和底部是一种常见但笨拙的选择。我不会使用通用标准,因为如果您的用户从基本搜索转到高级搜索,他们可能没有使用通用标准。如果您可以将响应时间控制在 500 毫秒以下,请考虑不要使用搜索按钮,而是提供类似于 Vista 中的即时应用。

5)如何设计一个漂亮的搜索用户界面?

对于基于字段的多条件搜索,有两种基本设计:

一个。所有字段的表单,其中包含为每个字段输入标准值的位置。这样做的问题是具有设置值的字段可以滚动到视图之外,并且用户可能忘记了他们已经设置了一个值。因此,您希望使其尽可能紧凑。有关一种方法,请参阅 Alan Cooper 的 About Face 2.0 中的“改进数据检索”一章。您还可以在用户可以检查的搜索按钮附近提供所选条件的摘要字符串。单击字符串中的每个条件甚至可以将用户跳转到更改它的条件。

湾。用户从字段列表中选择要在标准中使用的字段,然后在合并位置设置标准的值。这里的主要挑战是尽量减少选择字段的“开销”点击次数。理想情况下,字段列表始终可用,单击选择字段,将其置于合并位置,并将光标置于值控件中,如http://www.zuschlogin.com/content/blogimages/中所示37/FindAdvanced.gif,仅用于搜索而不是查找。(根据任意约定,“查找”对于用户而言与“搜索”非常不同;查找突出显示当前页面中匹配给定条件的内容,而搜索检索匹配给定条件的内容)

这两种设计都通过逻辑 AND 链接每个字段的标准,并且在基础数据库表之间的连接中受到限制,但这可能会满足您的几乎所有用户。如果任务需要更复杂的连接和布尔组合,请查看图形查询设计(例如,Badre AN、Catarci T、Massari A 和 Santucci G 1996。图表与标志性查询语言的比较易用性。在 J Kennedy 中& P Barclay (Eds) 数据库接口 (IDS-3):第三届数据库接口国际研讨会论文集,爱丁堡纳皮尔大学,7 月 8 日至 10 日)和示例设计查询。

于 2009-03-02T13:23:23.507 回答
1

The default design pattern which I use is Filter Table. That covers maybe 90% of the use cases. For more complex searches, I would need more specific information on the goals and use cases of the users, so that it would be possible to design a more optimal solution for those situations.

于 2009-03-02T13:35:39.187 回答
1

简单就好。我推荐一种迭代方法,在进行用户验收测试并查看日志以查看他们使用(或不使用)哪些功能之后慢慢构建功能。您知道要改进什么的唯一方法是观察您的用户。

于 2009-03-25T14:31:15.707 回答
0

我的想法:

- 仅在需要时显示高级标准。当搜索对试图搜索的人来说尽可能简单时,搜索是一件很棒的事情。

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

- 标准的组织很难在不知道的情况下说出来。但正如其他人已经/会说的那样:让它变得简单!您可能不需要一次全部显示:如果我想要更多,让我扩展区域,隐藏我不想使用的东西。然后在它的底部放一个搜索按钮。但同样,我不想滚动浏览随机标准页面只是为了找到这个按钮。

于 2009-02-28T19:12:13.793 回答
0
  • 在网站的每个页面上都应该有一个搜索文本框作为桅杆头的一部分。
  • 我更喜欢将按钮标记为“查找”而不是“搜索”,因为好处总是比功能更引人注目。
  • 应该复杂的是您的搜索算法而不是 GUI。
于 2009-02-28T19:14:28.997 回答
0

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

于 2009-03-02T14:32:02.187 回答
0

Please find my answers(in normal text) against each of the questions(in italics) asked.

"1) Do you think the search panel should be visible all the time (ie displayed on top of my result grid) or available in a separate form (which would let me use more place for all the controls)"

Display on top of result grid as this leaves extra horizontal space to display search results and thereby to display more columns of search data without scrolling horizontally.

"2) Do you think it's better to display all the search criteria, or to let the user click on 'advanced' if he wants to see/use more criteria"

Display all available criteria but in a tabbed fashion. i.e. categorize input search fields into categories and have a tab for each category.

"3) How would you organize the criteria? by usage frequency, or rather by area (ie. criteria related to user, to location, to time, etc.)"

Organize 'by area' because different people like using different criteria. Each criteria would have tab of it's own. But organize the tabs in the order of 'more popular' to 'less popular' as you think. In your case tabs may be 'By Name'(containing fields first name, middle name, last name, mother maiden name, nick name, father's name etc), 'By Location' (place name, county name, district name, state name, country name etc) and so on until the advanced tab(where you'd put least used fields).

"4) Where should I put the 'Search' button? next to the more common search controls, or at the bottom, or both?"

Put the input fields of search as discussed above in a tabbed fashion categorizing them based on 'type of field'(I'll refer to this area as search grid). Then put action buttons such as 'Search', 'Clear/Reset' just below the search grid aligning to the center(I'll refer to this area as button grid).Then put the search result pane below the button grid as more horizontal area is available for display so that maximum columns can be displayed at once.

于 2009-03-02T13:53:11.797 回答
0

Take a look at quince, the infragistics ui patterns site: http://quince.infragistics.com.

Personally, I'd look at using a filterable grid, like the xtragrid from DevExpress: http://www.devexpress.com/Products/NET/Controls/WinForms/Grid/datafiltering.xml

coupled with a search bar above it to initially populate the grid.

于 2009-03-02T14:13:34.557 回答
0

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

这种设置对新用户更友好,并且通过为真正需要它们的人节省更昂贵的高级搜索来帮助节省资源。

于 2009-02-28T19:09:16.997 回答