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

Question

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

• 一些非常简单/常见,并将在很大程度上使用(即时间段,项目ID)
• 有些人不那么主流
• 有些不会被大量使用,但我仍然想提供它们

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

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

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

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

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

• 您是否认为最好显示所有搜索条件,或者如果用户希望查看/使用更多条件,则让用户点击"高级"

• 你会如何组织标准？按使用频率,或者更确切地说按区域(即与用户,地点,时间等有关的标准)

• 我应该在哪里放置"搜索"按钮？旁边是更常见的搜索控件,还是底部或两者？

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

Answer 1

不是UI的专家,但我看到了很多糟糕的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

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

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