设计一个完美的搜索框

来源：Medium网站

作者：尼克·巴比奇

翻译：奥创

阅读时长：6min

搜索框是输入字段和提交按钮的组合。有人可能认为搜索框不需要设计; 毕竟，这只是两个简单的元素。但是，在内容繁重的网站上，搜索框通常是最常用的设计元素。当用户遇到相对复杂的网站时，他们会立即寻找一个搜索框，以便快速，轻松地到达最终目的地。搜索框的设计及其可用性变得非常重要。

在本文中，我们将看到如何改进此元素，以便将用户时间节省在他们想要的位置。

最佳做法

1.使用放大镜图标

始终伴随着带有放大镜图标的搜索框。根据定义，图标是对象，动作或想法的可视化表示。有一些图标主要是用户的通用识别。放大镜图标就是这样的图标之一。

  即使没有文字标签，用户也会识别放大镜图标。

提示：使用原理图标，最简单的放大镜版本。更少的图形细节加速识别。

2.突出显示搜索字段

如果搜索是您的应用/网站的重要功能，则应突出显示，因为它可能是用户发现的最快路径。

  左：搜索功能隐藏在图标后面。图片来源：thinkwithgoogle

显示完整的打开文本字段非常重要，因为隐藏在图标后面的搜索会使搜索功能不那么明显并增加交互成本：

  不要使用渐进式discosure进行搜索，因为它隐藏了上下文。图片来源：AntonioJDN

3.为搜索框提供搜索按钮

一个按钮可以帮助人们认识到还有一个步骤可以触发搜索操作 - 即使他们决定通过按Enter键来执行此操作。

提示：

• 适当调整提交按钮的大小，以便用户不必非常精确地指向鼠标。较大的可点击区域使得点击和点击更容易。

  
  

• 让用户使用回车提交搜索，然后单击图标。许多用户仍然习惯于点击实际按钮来提交搜索。

4.将搜索框放在每个页面上

您应该始终在每个页面上提供对搜索框的访问权限，因为如果您的用户找不到他们要查找的内容，他们将尝试使用您的搜索，无论他们在您的网站中的位置。

5.简化搜索框

如果您设计了一个搜索框，请确保它看起来像一个，并且尽可能简单易用。根据可用性研究，默认情况下不显示高级搜索选项更加用户友好。高级搜索选项（例如下面的示例中的布尔搜索查询）可能会混淆尝试使用它的用户。

  布尔搜索

6.将搜索框放到用户希望找到的位置

当用户必须搜索搜索框时，这不好，因为它不突出并且不容易被发现。

您在下面看到的图表取自A. Dawn Shaikh(人名)和Keisi Lenz(人名)的一项研究：它显示了在142名参与者的调查中网站搜索表的预期位置。研究发现，用户最方便的地方是您网站上每个页面的左上角或右上角，用户可以使用常见的F形扫描模式轻松找到它。

  该图说明了参与者希望找到搜索的区域。右上角仍然是用户期望找到搜索的第一个位置。

因此，在您的布局的右上角或中上区域放置一个搜索框，您将确保您的用户可以在他们期望的位置找到它。

  内容丰富的YouTube在上层中心进行搜索。

提示：

• 理想情况下，搜索框应该完全符合网站的整体设计，并在用户需要时略微突出。

• 您拥有的内容越多，您希望显示搜索功能的次数就越突出。如果搜索对您的网站至关重要，请使用充足的对比度，以便字段和图标从背景和周围元素中脱颖而出。

7.适当的字段大小

使输入字段太短是设计人员常犯的错误。当然，用户可以键入长查询，但一次只能看到部分文本，这意味着可用性差，因为用户无法轻松查看和编辑查询。实际上，当搜索框具有有限数量的可见字符时，用户被迫使用简短，不精确的查询，因为较长的查询将是困难且不方便阅读。如果输入字段根据其预期输入调整大小，则它们更易于阅读和解释用户。

一个经验法则是输入一个27个字符的文本（它可以容纳90％的查询）。

  亚马逊使用适当大小的搜索框。

提示：请考虑使用不断增长的搜索框，该搜索框会在点击时展开文本输入字段。这样可以节省屏幕空间，同时仍然为用户提供足够的视觉提示，以便快速查找和执行搜索。

8.使用自动建议机制

自动建议机制通过尝试根据输入的字符进行预测来帮助用户找到正确的查询。自动建议机制不是关于加快搜索过程，而是关于引导用户并帮助他们构建搜索查询。典型用户在查询表达方面非常差：如果他们在第一次尝试时没有获得好结果，则后来的搜索尝试很少成功。事实上，他们经常放弃。当自动填充建议运行良好时，它们可以帮助用户表达更好的搜索查询。

谷歌搜索掌握了这种模式，自2008年开始实施。由于用户倾向于不止一次搜索相同的内容，通过记住搜索历史记录，Google可以节省时间并创造更加便捷的体验。

提示：

• 确保自动建议很有用。设计糟糕的自动建议可能会使用户感到困惑和分心。因此，使用拼写自动更正，识别根词和预测文本以改进工具。

• 您应该尽快提供自动建议，例如在输入第三个字符后，提供即时价值并减少用户数据输入工作。

• 提供少于10个项目（并且没有滚动条），因此信息不会变得势不可挡。

• 允许键盘导航以获取建议列表。一旦用户向下滚过最后一个项目，他们应该返回到列表的顶部。Esc键应允许用户退出列表。

• 突出显示输入的信息和建议信息之间的差异（例如，输入文本具有标准权重，而建议的术语具有粗体重量）。

  自动完成模式可以节省用户时间，甚至可以建议内容或正确的措辞。

9.明确用户可以搜索的内容

最好在输入字段中包含一个示例搜索查询，以向用户建议可以使用的功能。如果用户可以搜索多个条件，请使用输入提示模式进行说明（即下面的示例中的IMDb）。HTML5可以轻松地将包含在输入字段内的占位符的文本包含在内。

提示：将提示限制为几个单词，否则实际上会增加认知负荷。

结论

搜索是一项基本活动，也是构建内容繁多的应用或网站的关键要素。即使是较小的更改，例如输入字段的适当大小或指示搜索字段中的信息，也可以显着提高搜索可用性以及整体用户体验。

---------------------------------

喜欢请点赞分享并关注哦~~