网站搜索建议交互设计指南

摘要：网站搜索建议交互设计指南

关键词：搜索建议，电子商务，交互设计

搜索建议 是用户在搜索框中键入时出现在下拉列表中的推荐搜索。这些建议出现在搜索框下方，并随着用户输入关键词的变化而变化。

当用户使用搜索建议的优点：

• 选择合适的关键词，展示良好的搜索结果
• 减少交互成本，用户可以少打字
• 避免拼写错误
• 使用较少的脑力搜索，用户可以快速识别想要的关键词

有趣的是，只有23%的用户会使用搜索建议。即使用户实际上并未使用搜索建议，该功能仍然有可能提供一些参考。

用户可以阅读这些搜索建议，查看网站上可用的内容、如何拼写难懂的术语以及其他用户搜索的内容。

搜索建议的进一步好处是告知用户站点提供的产品范围或选项。

相反，如果在输入产品名称的前几个字符后没有将某些内容显示为搜索建议，一些用户可能会断定网站不提供该产品并关闭该网站，甚至不再进行搜索。

不显示坏的搜索建议

确保每个搜索建议都具有良好的相关搜索结果。

当搜索建议返回不相关的结果时，用户会很生气。

使用文本样式区分搜索文本和搜索建议

在搜索建议下拉列表中，每个搜索建议都包含两部分：用户已经输入的字符，以及系统为完成搜索建议的字符。

使用不同的视觉风格来显示哪些角色属于每个类别是很重要的。视觉区分可帮助用户了解搜索建议并扫描可用选项。

DicksSportingGoods.com 在其搜索建议中使用粗体来设置用户键入字符的样式。

搜索建议包含范围

范围搜索只在某些网站上使用，那么每个搜索建议可以包含三个组成部分：

• 用户已经输入的字符
• 系统提示完成查询的字符
• 该建议的范围（如果有）

Amazon.com 通过在搜索词下方缩进范围类别来显示其范围搜索建议。

不仅仅是搜索建议

除了完成用户的查询之外，搜索建议下拉菜单还可以包含指向其他类型相关内容的链接。

B&H Photo Video 在其超大的搜索建议下拉列表中使用了各种丰富的内容。

如果您决定使用丰富的搜索建议，请使用自适应方法来简化移动设备的功能。在较小的设备上，只需提供简单的文本搜索建议。

对于移动设备，Sur La Table（左）和 Home Depot（右）减少了丰富的搜索建议，只显示简单的文本建议。