UI组件——搜索最佳实践

搜索设计可能看起来像是一个一小时的任务：添加一个输入、一个搜索按钮和结果页面，然后就结束了。可悲的是，许多设计师忽略了搜索最佳实践，导致放弃率急剧上升。

令人惊讶的是，统计数据显示，电子商务网站上 31% 的所有产品搜索任务最终都会让用户感到无休止的挫败感。为什么会这样？

用户无法使用搜索的原因有多种：

• 您用来命名项目、类别、概念或想法的语言与您的受众的语言不同。

• “无结果”页面几乎没有或根本没有让用户回到正轨并变成 UX 死胡同的途径。

• 搜索结果页面包含太多详细信息，并且是非结构化的、压倒性的且难以扫描。

糟糕的搜索模式，再加上可用性问题（缺乏视觉层次、系统状态反馈不足、导航不清晰等），可能会变成用户体验灾难。

搜索功能需要大量工作和用户测试，因此用户可以成功完成任务并体验对产品的整体满意度。

搜索位置

简而言之，不要让用户搜索搜索框——让它容易被发现和识别。人们习惯于在屏幕右上角看到搜索框，所以把它放在那里。

避免在桌面上隐藏搜索栏

将搜索栏隐藏在图标后面可以节省很多空间，设计师可以将其用于更重要的事情。但是，如果搜索是网站的主要焦点，则搜索栏需要尽可能突出。

此外，虽然在空间有限的移动设备上隐藏图标背后的搜索功能是有意义的，但在桌面设备上却很少需要它。此外，它会损害可访问性并增加交互成本。

提供示例搜索查询

消除猜测并提供用户可以搜索的内容或输入表单的功能的示例搜索查询是一个很好的做法。占位符似乎是最简单的方法。确保文本不会太长，并且只包含几个相关的单词。否则会增加认知负荷。

这里要注意一点——通常，在输入中应避免使用占位符。它们通常看起来像默认值或已经填充的文本，使用户认为他们不需要输入任何数据并且通常缺乏对比。此外，占位符可能会损害可访问性，因为并非所有辅助技术都能识别占位符。因此，并非所有用户都能阅读提示并输入相关查询。

搜索图标

无需重新发明轮子——当涉及到最常见的操作时，请坚持使用通用图标。放大镜无疑是一种熟悉且普遍认可的搜索符号。

图标位置

标签前的左对齐图标可帮助用户立即了解输入的作用。

搜索宽度

搜索输入应该足够宽以适应典型的搜索查询。短搜索输入迫使使用更少和更短的关键字，这反过来导致糟糕的搜索结果并对用户体验产生负面影响。

Nielsen Norman Group 建议对搜索输入使用 27 个字符的最小宽度。

移动宽度

当搜索输入占据移动屏幕的整个宽度时，用户会很感激。请记住，许多用户只用一只手操作他们的智能手机，这意味着每个人都应该可以访问搜索输入的触摸目标区域，而不管他们的手指大小。

Apple 和 Google 指南建议的最小目标尺寸分别为 44 × 44px 和 48 × 48px。

提供合理数量的搜索建议

精心设计的自动建议菜单可帮助用户选择正确的选项，最多显示不超过 10 个相关结果。否则，您可能会冒着压倒用户而不是帮助他们的风险。建议的结果不是滚动的正确位置，因此不惜一切代价避免它。

为了使自动建议功能更加有用，请实现自动更正、单词预测和相关单词识别。

在搜索结果页面上突出显示匹配的关键字

根据 NN Group 的研究，只有 16% 的人真正逐字阅读网页上的内容。剩下的 79% 呢？他们扫描页面，寻找突出显示的关键字、副标题、项目符号列表和短段落。问题是，人脑很懒惰，会试图找到完成任务的最简单方法。

在搜索结果页面上突出显示匹配的关键字，以帮助用户注意提供的结果是否包含他们正在寻找的相关信息。它使页面看起来更易于扫描，并减少了用户查找所需内容的时间和精力。

应用粗体样式或其他颜色来匹配单词部分。

自动搜索

如果无法立即显示搜索结果，请显示进度指示器以通知用户该过程可能需要一段时间。

如果加载时间超过 10 秒，请通过动画吸引用户以减少等待时间。

提供建议

在某些时候，用户将不可避免地得到“无结果”页面——通过提供类似的建议或推荐拼写检查来优雅地处理它。

在这里使用正确的语气可以缓解紧张情绪并让用户振作起来。

保留搜索查询

如果在你站起来的那一刻有人拿走了你的椅子，你会有什么感觉？如果在 搜索结果出现时原始搜索查询 消失了，它会在用户中唤起类似的情绪。

如果用户第一次没有找到他们要查找的内容，他们可能想要修改查询。保持原样，这样用户就可以轻松地编辑他们的查询，而无需重新键入它，也不会消耗他们的短期记忆来回忆原始版本。

本文内容为转载