logo标签列表

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

user-interfaceusabilitysearch-engine
21

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

  • 一些非常简单/常见，将被广泛使用（例如时间段，物品编号）
  • 一些不太主流
  • 还有一些可能不会经常使用，但我仍然想提供

总体而言，我有30多个条件可供选择

结果是一个数据集，我在一个网格中显示它。

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

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

  • 您认为搜索面板应始终可见（即显示在我的结果网格顶部）还是以单独的表单形式可用（这样我就可以为所有控件使用更多空间）？

  • 您认为显示所有搜索条件更好，还是让用户单击“高级”以查看/使用更多条件更好？

  • 您将如何组织这些条件？按使用频率，还是按领域（例如与用户，位置，时间等相关的条件）？

  • “搜索”按钮应该放在哪里？靠近常见的搜索控件，在底部还是两者都有？

更一般地说，您有什么提示要分享如何设计一个漂亮的搜索UI？ 你通常在这种“高级”搜索引擎中缺少什么样的功能？

13个回答
12

虽然我不是UI方面的专家，但我看过许多糟糕的用户界面。

  • KISS是一个好的开始。
  • 使其直观易懂。
  • 保持搜索在页面顶部和底部都可见。如果强制我向上滚动页面才能进行搜索，我会很烦（参见Flex文档，他们的分页控件只在页面顶部 -- 非常麻烦）。
  • 条件的组织应该是双重的：
    • 基本运算符（20%），80%的人会在最开始使用
    • 随时动态编辑可用的条件集。
  • 让用户尽可能快地开始使用，并允许他们根据需要添加/删除条件。这样做的目的是让用户使用他需要的内容，而不是用你的功能集来干扰他的思路或工作流程。
  • 正如其他人所提到的，在目前的UI趋势中，使用隐藏的控件，除非用户明确要求高级/精细调整（按需UI）。
  • 一般而言，一页最多只有5-7个功能。
  • 如果您能够以某种方式安排条件，使其构成一个故事，那将是很好的，即用户可以读取他的查询并且您的运算符使其具有一定的意义。
  • 我喜欢简短的文本和易于理解的图标，但这种设置取决于您的安装环境。您的孙子是否能够使用那个强大的工具？
  • 良好的设计也需要使您的UI可访问。这是一个难题，我完全不知道您如何做到这一点。

祝您好运！

8

我倾向于采用“规则列表”方法。你知道这种方法：

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

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

                                            (Cancel) (Search)

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

但这假设您需要使用这么高级的功能！您可能会发现一个智能设计的关键词列表方法可以很好地解决问题。

减号应该放在第二个字段旁边，因为它会删除第二个字段，而不是第一个。 - dusoft
搜索按钮不应该在取消按钮的左边吗？ - Greg D
2
Greg D：这完全取决于你使用的平台，不是吗？ - Becca Royal-Gordon
5
默认情况下，保持高级控件隐藏。您的搜索输入和操作按钮应始终可见并突出显示，无论您的高级控件是否可见。确保显示/隐藏高级控件不会更改主要输入或按钮的位置 - 这些需要保持静态，以便不影响用户的空间记忆。
至于高级控件，如果不知道需要显示什么类型的数据，我只能提供潜在组织方法的概述。个人而言，我喜欢 LATCH：
- 地点 - 字母表 - 时间（时间轴或时间顺序 - 想象一下历史博物馆） - 类别（想想百货公司） - 等级制度（从大到小，从浅到深等）
根据您的控件，其中之一将是最合理的。相应地进行组织。如果可以使用滑块或范围输入（例如，“最浅”，“较浅”等），而不是复选框/单选按钮列表，则这是可取的，因为它减少了页面上的视觉元素数量。
忘记“加/减7”的规则-那已经被那些实际上没有阅读该研究的人完全曲解了。简而言之-它仅适用于人类对外部刺激的反应，而不适用于屏幕上显示的选项。这并不是说您应该过度，但即使您有很多选项，也可以通过视觉方式调整它们。杂乱无序是设计失败-而不是信息。
记得使用大量的空格和
4

一般建议：保持简单。过多的选择会让用户感到困惑，并增加某些功能不被使用的机会。

尝试向用户展示不同的原型，找出哪些选项是有价值的，哪些不是。

3

1）您认为搜索面板应该显示在我的结果网格的顶部吗？

像Google基本搜索一样的简单搜索面板可以放在结果页面上，因为它很紧凑。这使用户可以在不浪费时间转到新页面或窗口的情况下使用不同的标准重新尝试搜索。高级搜索会更加混乱，因此在易于访问结果（在较小的窗格中）和易于重新搜索之间存在更重要的权衡，因此需要评估用户重新搜索与他们使用结果所需的工作之间的频率。例如，如果重新搜索发生了50％的时间，但是在结果页面中包括高级搜索面板需要额外滚动75％的时间，则用户最好不要在结果上放置高级搜索面板。通常情况下，除非任务确实是数据的切割和尝试探索，否则高级搜索不应该出现在结果页面上。

搜索面板位于结果顶部的另一个问题是，如果结果与标准不符（例如，如果用户在显示结果后但在再次单击搜索按钮之前更改了标准），该怎么办。对于高级搜索，用户更容易忘记或错过是否更改了标准，然后对结果有效的标准感到困惑。将高级搜索放在单独的页面上可以避免这种情况，尽管如果高级搜索在结果页面上（例如，使用即时应用的“分面”搜索），则还有其他避免此问题的方法。

无论如何，结果页面都应显示用于进行搜索的标准。

2）您认为让用户单击“高级”以获取更多标准更好吗？

对于大多数数据库应用程序，特定组的用户（例如，工作职位）具有2到5个特定的搜索标准集，这些标准集可以帮助他们完成其工作的绝大部分（例如，在两个用户提供的日期之间搜索订单），有时包括甚至具有特定标准值的标准（例如，搜索所有具有挂起状态的订单）。在这种情况下，如果默认搜索具有针对这些特定搜索量身定制的控件，则用户将最快速且最不容易混淆，同时为了临时搜索，您需要一个高级按钮，而默认搜索只适用于这些特定搜索。仅在您的用户主要进行探索性临时搜索时才默认使用高级搜索。

3）您会如何组织这些标准？

如果有一些标准经常使用，则按照第2条所述通过基本搜索处理它们，因此按频率对高级搜索中的标准进行排序并没有太大的优势。这只会使用户难以找到他们正在寻找的标准。通常，您可以指望用户有一个特定的命名字段在脑海中，因此按字母顺序对标准进行排序，或者如果用户熟悉结果页面并且其字段按照用户思考方式排列，则使用与用于结果列相同的顺序。

4）我应该将“搜索”按钮放在哪里？

搜索按钮最好始终可见。最佳解决方案是在可滚动的窗格中放置所有标准，并将按钮放在窗格外部。将按钮放在顶部和底部是常见但不太好的替代方案。如果用户已从基本搜索切换到高级搜索，则不会将其放置在常见标准旁边，因为他们可能不使用常见标准。如果响应时间可以保持在500毫秒以下，请考虑无搜索按钮，而提供像Vista中看到的即时应用程序。
5）如何设计一个漂亮的搜索UI？
对于基于字段的多标准搜索，有两种基本设计：
a.所有字段的表单，其中每个字段都有一个输入标准值的位置。问题在于，具有设置值的字段可能会滚动出视图，用户可能已经忘记了他们设置的值。因此，您要尽可能紧凑地保持这种方式。请参见Alan Cooper的About Face 2.0中的“改进数据检索”一章，以获取一种方法。您还可以在搜索按钮附近提供所选标准的摘要字符串，用户可以检查。单击字符串中的每个条件甚至可以跳转用户以更改条件。
b.用户从字段列表中选择要用于标准的字段，然后在合并位置设置标准的值。这里的主要挑战是将选择字段的“开销”点击数量最小化。理想情况下，字段列表始终可用，并且单击即可选择字段，将其放置在合并位置，并将光标放在值控件中，类似于http://www.zuschlogin.com/content/blogimages/37/FindAdvanced.gif所示，只不过是搜索而不是查找。（按照任意约定，“查找”对用户来说与“搜索”非常不同；查找突出显示满足给定标准的当前页面内的内容，而搜索检索满足给定标准的内容）
这两种设计都通过逻辑AND链接每个字段的标准，并且在底层数据库表之间的连接方面受到限制，但这可能会满足您几乎所有的用户。如果任务需要更复杂的连接和布尔组合，请查看图形查询设计（例如Badre AN、Catarci T、Massari A和Santucci G 1996年的比较易用性。图解式查询语言与图标式查询语言。在J Kennedy和P Barclay（Eds）Interfaces to Databases（IDS-3）：Proceedings of the 3rd International Workshop on Interfaces to Databases，Napier University，Edinburgh，8-10 July）和Query by Example设计。
1

我使用的默认设计模式是过滤表格。这可以涵盖大约90%的使用情况。对于更复杂的搜索，我需要更具体的用户目标和用例信息，以便为这些情况设计更优化的解决方案。

1

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

0
尽量保持接口尽可能简单。大多数用户只需要一个文本窗口和一个搜索按钮。其余选项可以放在高级搜索选项中。
这种设置对于新用户更友好，同时通过为实际需要它们的人保存更昂贵的高级搜索来帮助节约资源。
0

我的想法：

-只有在需要时才显示高级搜索条件。当搜索变得尽可能简单易用时，它就是一件好事。

-如果有一些非常大的高级搜索条件集：不要用它来混淆结果。让用户很容易明显地返回并修改条件，但不要试图通过立即给出它们的条件来浪费结果空间。

-没有了解所有条件，很难说组织条件的方式。但正如其他人已经/将要说的那样：让它变得简单！您可能不需要一次性全部显示：如果我需要更多信息，让我展开区域，隐藏我不想使用的内容。然后在底部放置一个搜索按钮。但是，我不想滚动页面查找此按钮而浏览一堆随机条件。

0
  • 网站的每个页面的主页都应该有一个搜索文本框。
  • 我更喜欢将按钮标记为“查找”，而不是“搜索”，因为好处总是比功能更具有说服力。
  • 应该精细的是您的搜索算法，而不是GUI。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接