搜索建议(有时也称为自动完成或Autosugtest)用于站点搜索的可选,非常适合的功能。(在本文中,我们使用“站点搜索”一词来引用网站自己的搜索功能 - 仅限searches within that single site’s content- 与像谷歌,Bing或百度一样的网上搜索引擎相反,横跨多个站点搜索。)

定义:
搜索suggestions是推荐的查询,当用户在搜索框中键入时出现在下拉列表中。这些建议显示在搜索框下方,并随着用户输入每个查询的每个字母而更改。

In recent years, search suggestions have become an expected sign of a well-designed search feature. This change in expectations is likely a result of users’ frequent exposure to query suggestions on Google, which always sets the (unrealistic) standard of what a “good” search feature should be.

When your users select from search suggestions rather than typing in their own complete query, they benefit because they:

  • 选择合适的术语,这将向他们展示良好的结果,而不是构成可能没有结果或结果不佳的查询
  • Decrease互动成本那because they can type less
  • Avoid typos,because they don’t need to type out the entire query themselves
  • Use less mental effort to search,because they can simply认识他们想要的正确的词语或措辞

有趣的是,即使用户期望此功能,有时会在网站上没有注释它时,它们并不总是实际使用它。在我们最近关于电子商务网站的研究中,建议查询是selected by users in only 23% of the instanceswhere they were offered. (There were 31 suggestions selected out of 136 instances where suggestions were offered. The margin of error for this proportion is 7%.)

但是,即使用户实际上没有从查询建议列表中选择时,该功能仍然有可能提供一些优点作为参考。用户可以阅读建议,以查看网站上可用的内容,如何拼写困难的术语以及其他用户搜索。在某些情况下,特别是当查询短语短暂时,用户更容易才能完成键入查询本身,而不是重新获取鼠标或点击屏幕。

对于网站搜索,搜索建议有进一步的好处,可通知用户网站提供的产品范围或选项。相反,如果在进入产品名称的前几个字符之后未显示某些东西作为搜索建议,则一些用户可能会得出结论,该网站不会提供该产品并在不执行搜索的情况下放弃该网站。

如果您计划实施或改进您的网站的搜索建议,请遵循这些提示以使其尽可能有用。

Don’t Suggest Bad Results

确保每个建议的查询实际上都有良好的,相关的结果。

One participant in a usability test was shopping for a new suitcase on JC Penney’s website. He typed “luggage” into the search box and saw the phrase “luggage sets clearance” in the suggested queries.

He selected the query and was taken to a results page that had no luggage sets at all — just two travel items for pets.

“That’s very weird,” he said. “The search was suggested to me, so I would think that clicking行李箱套房would take me to luggage on sale. So this is not great.”

/users/kate/dropbox/reports/ecommerce --search/report-screenshots/jcpenney-luggage-sets -cercentance.png.
当建议的查询返回无关效果时,用户很生气。

建议返回零结果或无关紧要的结果的术语比无益的结果更差 - 他们侧面刺激性,并且是彻头彻尾的刺激性。

使用文本样式来区分键入的查询文本和建议的条款

Within a suggested search dropdown, each suggestion has two parts: the characters already typed by the user, and the characters suggested by the system to complete the query.

使用不同的视觉样式非常重要,以显示每个类别的字符属于每个类别。您可以使用粗体,斜体,颜色或缩进来传达这些部件之间的差异。可视化差异化帮助用户了解为什么显示建议并扫描可用选项。

您的网站优惠的建议类型应该帮助您确定如何样式的建议。

  • 如果您的建议的搜索功能将字符附加到最后of the user’s text to finish the query, then you should突出显示建议的角色
  • 相反,您建议的搜索功能将会suggest popular queries that contain用户的文本在查询中的任何地方,最好是Highlight the user’s query.

例如,一个用户在网站上键入了他的查询,“篮球篮”,为迪克的体育用品。当他键入每个字母时,建议的搜索术语出现在下拉列表中。

迪克的体育用品使用第一种类型的建议 - 它只将字符附加到用户的文本,以完成该查询。匹配此特定用户已经键入的字符以粗体显示(“篮球H”),而建议完成查询的字符具有正常的字体重量。

/Users/kate/Dropbox/Reports/Ecommerce--Search/report-screenshots/Screen Shot 2017-08-22 at 4.40.29 PM.png
dickssportinggoods.com使用粗体文本在其搜索建议中拟合用户的键入字符。

This approach clearly showed the difference between the two parts, but unfortunately placed the emphasis on the repetitive characters in each suggestion (the already-typed characters). So, it would’ve been better for Dick’s Sporting Goods to present the search suggestions like this, with the emphasis on the unique characters:

  • 篮球Hoodie
  • 篮球Hoop.
  • 篮球H

但是,如果您的功能表明了包含查询中任何位置的流行查询,则相反的方法更好 - 您希望突出显示用户的查询。

使用我们的篮球示例,具有这种建议的系统将返回像“篮球连帽衫”这样的建议,也可以像“便携式篮球筐”和“孩子篮球帽一样”。在这种情况下,您应该突出显示用户的查询,以帮助用户扫描建议并识别查询文本在每个建议内都适应的位置。例如:

  • 篮球Hoodie
  • 便携式篮球Hoop.
  • 孩子们篮球H

Include Scope in Search Suggestions

范围搜索应​​该仅在某些网站上使用,甚至那么,只有它可以很好地实现。如果您的网站范围内容,您将希望在网站的搜索建议中反映出来。

For scoped sites, each search suggestion can have three components:

  • 用户已键入的字符
  • the characters suggested by the system to complete the query
  • 该建议的范围(如果有的话)

就像其他两个部分一样,您需要在视觉上区分其余建议的范围。用户知道系统将在搜索“篮球短路”中是重要的女士的部分的网站,而不仅仅是搜索for the terms “basketball shorts in Women’s.” Indenting scoped or category suggestions beneath the recommended query can communicate their relationship to the query.

One user’s search for “water bottle” on Amazon.com brought up two scoped suggestions:在家庭和厨房in Outdoor Recreation。这些方案建议的文本以较浅的灰色呈现,并在建议的查询下面缩进。

/users/kate/dropbox/reports/ecommerce--search/report-screenshots/amazon-waterbottle.png
Amazon.com通过缩小查询条款下的范围类别来显示其范围的搜索建议。

这种方法工作得很好,因为所有三个层面都被联系起来。用户可以选择三种略微不同的选项:

  • 搜索“水瓶”而没有任何范围
  • 在家庭和厨房范围中搜索“水瓶”
  • 在户外娱乐范围中搜索“水瓶”

考虑,包括不仅仅是简单的查询建议

除了刚完成用户的查询之外,搜索建议下拉列表可以包括与其他类型相关内容的链接。例如,B&H Photo Video使用一个巨大的全宽搜索建议下拉列表,提供了查询建议,但也链接到:

  • Category pages
  • 产品细节页面
  • 资源/文章manbetx官网手机登陆
B&H照片视频在其非常大的搜索建议下降中使用了各种丰富的内容。

考虑这种类型的复杂搜索建议下拉会有所帮助,对您的用户或令人困惑的跨危机有所帮助。如果您确实采用这种方法,您的建议下降应该很好地组织和标记。用户应该能够轻松扫描并理解所呈现的所有信息。

In particular, providing links to related products in the dropdown can be a good shortcut for those who know what they were looking for. However, we found that it was rare for participants in our study to select a specific item from the rich suggestions. Instead, most users preferred to see the full list of results, so they could browse and compare.

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

对于移动设备,Sur La表(左)和Home Depot(右)减少其丰富的搜索建议,仅显示简单的文本建议。

结论

在搜索建议中优先考虑Scannability和易于处理。请记住,他们的主要目的是使您的用户尽可能简单地表达他们的信息需要并查看有用的结果。

(For more information, see the new 4th edition of our report on电子商务搜索User Experience那with 80 design guidelines.)