如何设计完美的搜索结果?(二)

分享10个搜索结果的技巧,来帮助你改进搜索结果的UX。

上一篇写的是关于“如何设计完美的搜索框”,这篇来聊一下搜索功能中另外一个重要的设计,“搜索结果”的完美的设计方法。

搜索就好比是产品和用户的对话:用户将其需求输入搜索框,产品对这一行为响应的方式就是为用户提供对应的搜索结果。搜索结果是不是用户真实想要的影响着用户对产品的体验:搜索结果将为用户需求和产品构建一个继续对话的机会。

这篇文章中,给大家分享10个搜索结果的技巧来帮助你改进搜索结果的UX。

1.点击搜索按钮后,不要清除搜索框中的查询内容

保留搜索内容,将已查询的内容重新输入是比较常见的错误体验。如果用户找不到预期的内容,那么他们会稍微修改查询以便再次搜索。为了使这一交互更容易,在搜索框中保留搜索的词条是极有必要的。

2.提供精确的和相关的结果

搜索结果的第一个页面是非常重要的,搜索结果对搜索的体验起着至关重要的作用,好的搜索结果可以提高网站的转化率。用户通常根据一俩组搜索结果的质量来对比网站的价值,以此快速的做出选择。

给用户提供更加精确的搜索结果非常重要,否则因为搜索结果会降低用户对网站的信任度。因此,优化搜索结果的排序,并将重要的、匹配度较高的搜索结果在第一页呈现也至关重要。

3.使用有效的自动提示

无效的搜索联想(自动建议)也会降低搜索体验。确保自动提示是有用的,当用户在执行输入行为的时候,词根识别、文本预测、和自动建议,都有助于加快搜索过程。

4.正确的“输入错误”

当网站可以检测到用户输入了错误的信息,则有必要为用户显示其猜测和“更正后”的文本搜索结果。这样可以避免用户因“返回”之前的搜索的而导致的挫败感,同时用户也不必被迫重新输入搜索项。

5.显示搜索结果的数量

显示搜索结果数量,帮助用户意识到决定花多长时间浏览搜索结果上(心理预期)。

6.保留用户近期的搜索查询记录

即使用户熟悉搜索功能,搜索需求也需要他们来思考要搜索什么,或者需要用户回忆我之前搜索过的是什么文本。为了输入一个有效的查询文本,用户需要考虑其目标的相关属性,并将他们合并进行查询。在设计搜索功能的时候,设计师应该牢记基本的可用性规则:

尊重用户的成就(Respect the users effort)

提示:产品应该记录所有最近的搜索记录,以便用户在下次搜索的时候为用户提供次数据。

7.选择正确的页面布局

不同类型的搜索结果内容需要选择显示不同的页面布局。内容呈现的俩个基本布局是“列表视图”和“网格视图”,判断选择视图的基本原则是:

“呈现信息为主使用列表视图,呈现图片为主使用网格视图”

在某些产品的搜索结果呈现页面中,产品的具体细节非常重要,如型号、额定值、尺寸等细节的信息影响用户的选择和判断,则使用列表视图。

对于产品信息较少,或该产品更侧重视觉呈现的应用,网格视图的形式更贴近产品。如购物网站中,在用户更多的是通过产品的外观做出判断选择,对于这类型的产品,用户更愿意通过滑动整个页面并观察不同项目在视觉上的差异,而不是在列表视图和网格视图之间反复切换。

提示:

允许用户在搜索结果页面自主选择“列表视图”和“网格视图”,让用户使用他们自己的需要的方式浏览搜索结果。(如下图天猫商城)

在使用网格布局时,图像尺寸要大到可以被清晰的看到,同时小到让更多的产品在同一时间被看到。但同一个页面也不宜为用户提供太多的选择。

8.显示搜索进度

理想情况下,执行搜索操作立即显示搜索结果,如果不能,应当为用户提供进度条,以此明确指示并告知用户他们需要等多久。

提示:如果搜索时间过长,可以考虑使用动画,好的动画可以分散用户的注意力,使他们忽略长时间的搜索过程。

9.提供排序和筛选条件功能

当用户的搜索和得到的结果看似有关,又没有太大关系,并且有很多结果时,用户会变得不知所措,这时应该为用户提供有效的搜索排序和筛选过滤条件,并使其能够允许用户同时选择多个筛选条件。

过滤器可以帮助用户缩小并组织搜索结果,否则需要大量的页面和滚动操作。

提示:

如果产品的搜索需要很多过滤筛选条件,默认情况下将不是高频的筛选条件折叠。

不要在过滤筛选条件中隐藏排序功能,它们是不同的作用。

10.不要告诉用户“搜索无结果”

当搜索依旧不能满足用户需求的时候,会令用户变得沮丧,特别是他们多次尝试了用不同的文本搜索。当没有匹配的搜索结果时,为用户提供相关的或者可替代的选择。

结论

搜索是产品设计中至关重要的功能,用户在查询和了解某些内容的时候期望获得流畅并且稳定的体验,并且通常会通过一俩组搜索来判断搜索的结果和质量,对产品的价值做出非常快速的判断。通过“搜索框”和“搜索结果”这俩篇文章希望可以帮助大家设计或者优化一款产品是搜索功能,一个优秀的搜索功能可以帮助用户快速的找到他们想要的内容。

文 / 胡兵兵  微信公众号:HolyhiLab

0条评论 添加新讨论

登录后参与讨论
Ctrl+Enter 发表