搜索结果页的10项最佳实践帮你提升整个用户体验

所属分类: 平面设计 / 平面其它 阅读数: 1207
收藏 0 赞 0 分享

Nick Babich 的UI/UX系列文章是目前最实在的设计系列文章,设计规则、最佳实践和实战案例三者兼顾,颇为值得学习。今天的文章聊的是搜索结果页的设计,喜欢的朋友一起来学习吧。

搜索就像用户和系统之间的对话:用户将他们的信息需求提交上来查询,系统针对提交的信息进行检索,再从界面上给用户以反馈,呈现为一组结果。所以,搜索结果页是搜索的最重要的组成部分之一,它满足了用户对于特定信息的需求。

这篇文章中,我将搜索结果页的10项最佳实践列举出来,它们应当能够有效的帮你提升整个用户体验。

1、点击搜索按钮之后,不要清除用户的查询内容

对于用户的查询内容,在搜索结果页当中应当忠实地、完整地呈现出来。这不仅包含目前的搜索,而且应当涵盖之前的搜索内容。对于许多信息获取的过程而言,历史和当前查询内容都是关键信息,如果用户当前的搜索关键词找不到想要的结果的话,他们会稍加调整,并继续搜索。为了方便用户进行查询,最好在搜索框中保留初始的关键词,便于查看也便于调整进行下一次查询。

2、提供准确的和相关的搜索结果

搜索结果的第一页是至关重要的。必须承认,搜索结果页给用户提供的信息与体验是整个搜索体验的关键环节,搜索引擎的转化率好坏与否,与之息息相关。通常只需要通过一两次搜索,用户就能通过搜索结果页,快速地对整个搜索引擎的素质进行判断。

准确地将搜索结果反馈给用户是构建用户信任的基础。所以,搜索引擎需要确定结果的优先级,并且将匹配度最高的结果呈现在结果页上。

3、使用有效的自动建议

无效的自动建议让整个搜索体验降低,而精准的自动建议会让整个体验好上许多,它会根据用户用户的输入内容(词汇词根和后台数据)为用户提供有用和精准的输入内容建议,这有助于帮助用户提高搜索过程的精准度,提升整个搜索体验。

4、内容纠错

输入错误绝对是最常见的错误,如果用户错误地输入某个关键词,而你的检测到了,并且针对错误提供更正之后的结果,这样就成功的规避了因为错误的关键词所导致的不良后果,用户也不用再次进行搜索了。

苹果的0条目的搜索页面并不支持搜索结果自动更正

相反,Asos 在这方面就做的很好,当输入错误发生的时候,他们会尽量以无侵略性的方式来帮助客户,比如“您的初始搜索为Overcoatt,我们也为您搜索了Overcoats的相关结果”。

5、显示搜索结果的数量

显示搜索结果的数量能够让用户更清楚他们需要在浏览结果这件事上花费的时间。

而搜索结果同时还能帮助用户针对下一次搜索,作出跟明确的调整和选择。

6、保留最近的用户查询

即使用户熟知搜索引擎的全部功能,也需要借助大脑记忆来挑选关键词,进行搜索。想要找出有意义的、可用的搜索关键词搭配,用户需要结合他们的搜索方向,最近的查询,联想相关的属性和关键词,最终促成一次成功的搜索。在设计整个搜索体验的过程中,你应该始终记住一点:

尊重用户的努力。

你的网站应当存储所有最近的搜索,以便在用户进行下一次搜索的时候,提供这些数据。

最近的搜索帮助用户节省了在相同内容搜索上所耗费的时间和精力。

小贴士:尽量一次展示不超过10个条目,这样不会让用户觉得信息过载。

7、选择合适的页面布局

不同的内容其实需要不同的页面布局来支撑的,而我们最常见的两种布局,列表布局和栅格布局,应该能够满足绝大多数的需求。对于布局,我们的经验以一言以蔽之就是:

细节用列表展现,图片靠栅格支撑。

让我们在Cotext 的产品页面中验证一下这一经验。产品的细节展现是非常重要的时刻,对于电子产品而言,需要呈现的配置信息非常的多,所以,列表视图是非常合理的。

而对于相对产品信息更少的产品而言,栅格式的布局则是更好的选择。想服装这样的产品,少有需要借助文本式的产品信息来呈现其特征的,更多还是依靠图片和视觉设计,所以这类产品需要栅格式的布局,而不是冗长的内容信息。

小贴士:

·允许用户选择列表视图和栅格视图,让用户选择他们更喜欢的方式来查看内容。

·在设计栅格布局的时候,确保图片的尺寸合理,大到足以看清其中细节,而又不会太大,让用户一次尽量看到更多的条目。

8、展示搜索过程

理想状况下,用户点击搜索按键之后,搜索结果会立刻显现出来。但是实际情况是,它通常是需要有一个过程的。通过进度条和动效让用户明白他们大概需要等多久,或者让等待的过程更加有趣。

小贴士:动效可以有效的分散用户等待过程中的无聊感,让用户实际等待的体验更好。

9、提供排序和过滤的选项

当用户看到的搜索结果过多,或者相关度较低的时候,会对搜索结果非常茫然。而排序和过滤的功能则能够很好的缓解这一情况。

过滤和排序能够帮用户调整和缩小搜索结果,大幅度降低用户手工翻页筛选的工作量。

小贴士:

·最重要的一点是不要让用户有太多的选择,如果搜索本身需要大量的筛选的话,那么默认尽量折叠或者隐藏一些相对不那么重要的结果。

·不要隐藏排序功能。

·当用户筛选到了一个相对狭窄的搜索范围的时候,在结果页面的顶部对此范围进行标注和说明。

10、不要告诉用户“没有结果”

什么都没搜到会让用户感到非常沮丧的,尤其是当用户进行了好几次搜索之后,依然没有结果。你应该尽量避免用户陷入死胡同,当用户没有搜到他们想要的内容之时,应当为他们提供有价值的替代品。

结语

搜索引擎为一个网站所提供的价值是显而易见的,而可用性良好,体验平滑舒适的搜索结果页则能够让用户快速地判断出网站和搜索引擎的重要价值。

一个优秀的搜索引擎应当在结果页当中,为用户提供有效、有用、有价值的搜索结果。

更多精彩内容其他人还在看

UI设计师必看:详解最全面的组件化开发与设计指南

作为一个UI设计师,设计最重要的一点就是要符合产品功能逻辑,绝不是所谓的“好看”。而组件化的设计理念恰恰是最能帮助设计符合产品功能逻辑的,下面为大家带来详解最全面的组件化开发与设计指南,来看看吧
收藏 0 赞 0 分享

平面设计中相近性的应用技巧

相近性原则也取决于元素在背景上不同位置的放置,从而使人们获得各种不同的信息组合,而最清晰的效果就是利用白色背景来区分这些组合,今天为大家分享平面设计中相近性的应用技巧,来看看吧
收藏 0 赞 0 分享

相似的形状、颜色等其他特性在平面设计中的应用

在设计中相似的特性可以成为我们有力的工具,利用相似性,我们可以使两个相隔较远的元素在信息上联系起来,下面为大家详细介绍相似的形状、颜色等其他特性在平面设计中的应用,来看看吧
收藏 0 赞 0 分享

看看近30年奥斯卡最佳影片海报都长什么样子

今天为大家带来近30年奥斯卡最佳影片海报,看看都长什么样子,统计是从第59届奥斯卡开始的,因为之前的海报都太具有年代感了,对于设计朋友真的很值得过来学习,一起来学习吧
收藏 0 赞 0 分享

SVG格式的图片编辑修改方法

做分析的时候,经常会遇到一些SVG格式的图片,但SVG格式的图片并不能插入到Word文档中,并且需要按照期刊要求修改,怎么办
收藏 0 赞 0 分享

如何创造出好设计?教你利用坏图创造出好设计

虽然说一图胜千言,一张好图会说话。但在设计师的实际工作中,甲方不少,好图难得,碰到客户给的是烂图怎么办?还想不想要高端大气了?如果你的回答是肯定的,那就来看一下今天分享的这篇好文,实例分析,不纸上谈兵,文中涉及很多实用技巧,非常值得新手设计师阅读呢。
收藏 0 赞 0 分享

设计师必须知道的17个行业规则

设计这行摸爬滚打十几年,林林总总各行各业的客户接触不少,由于中国应试教育的不足,导致不少人对这一行业工作流程缺乏了解。本文就为设计师总结了17个行业规则,希望作为设计朋友认真阅读,这样在以后的工作中可以少走点弯路
收藏 0 赞 0 分享

如何才能做出有创意的作品 什么是好的创意

作为一名设计师,常常面对各种创意需求,但创意这种东西,在有限的时间之内,常常是没有创意的、没有灵感的,这让许多设计师苦恼抓狂。本文就向设计师朋友介绍如何快速打造有创意的作品的一些方法和发散思维的办法,希望能帮助到大家
收藏 0 赞 0 分享

图文搭配技巧:给照片配上文字的十个方法

图文搭配是是平面设计的基本功。给照片配上文字,与平面排版有相通之处,但因为偏重不一样,所以处理方式截然不同。本教程就为大家介绍十个图文搭配的技巧,教程比较实用,推荐过来与大家一起分享学习,希望大家喜欢
收藏 0 赞 0 分享

UI界面中首字母大写和小写有哪些优缺点呢?

UI界面中首字母大写和小写有哪些优缺点呢?对于很多朋友并不是很清楚,所以下面小编就为大家详细介绍一下,不会的朋友可以参考本文,一起来看看吧
收藏 0 赞 0 分享
查看更多