搜索结果页的10项最佳实践帮你提升整个用户体验
Nick Babich 的UI/UX系列文章是目前最实在的设计系列文章,设计规则、最佳实践和实战案例三者兼顾,颇为值得学习。今天的文章聊的是搜索结果页的设计,喜欢的朋友一起来学习吧。
搜索就像用户和系统之间的对话:用户将他们的信息需求提交上来查询,系统针对提交的信息进行检索,再从界面上给用户以反馈,呈现为一组结果。所以,搜索结果页是搜索的最重要的组成部分之一,它满足了用户对于特定信息的需求。
这篇文章中,我将搜索结果页的10项最佳实践列举出来,它们应当能够有效的帮你提升整个用户体验。
1、点击搜索按钮之后,不要清除用户的查询内容
对于用户的查询内容,在搜索结果页当中应当忠实地、完整地呈现出来。这不仅包含目前的搜索,而且应当涵盖之前的搜索内容。对于许多信息获取的过程而言,历史和当前查询内容都是关键信息,如果用户当前的搜索关键词找不到想要的结果的话,他们会稍加调整,并继续搜索。为了方便用户进行查询,最好在搜索框中保留初始的关键词,便于查看也便于调整进行下一次查询。
2、提供准确的和相关的搜索结果
搜索结果的第一页是至关重要的。必须承认,搜索结果页给用户提供的信息与体验是整个搜索体验的关键环节,搜索引擎的转化率好坏与否,与之息息相关。通常只需要通过一两次搜索,用户就能通过搜索结果页,快速地对整个搜索引擎的素质进行判断。
准确地将搜索结果反馈给用户是构建用户信任的基础。所以,搜索引擎需要确定结果的优先级,并且将匹配度最高的结果呈现在结果页上。
3、使用有效的自动建议
无效的自动建议让整个搜索体验降低,而精准的自动建议会让整个体验好上许多,它会根据用户用户的输入内容(词汇词根和后台数据)为用户提供有用和精准的输入内容建议,这有助于帮助用户提高搜索过程的精准度,提升整个搜索体验。
4、内容纠错
输入错误绝对是最常见的错误,如果用户错误地输入某个关键词,而你的检测到了,并且针对错误提供更正之后的结果,这样就成功的规避了因为错误的关键词所导致的不良后果,用户也不用再次进行搜索了。
苹果的0条目的搜索页面并不支持搜索结果自动更正
相反,Asos 在这方面就做的很好,当输入错误发生的时候,他们会尽量以无侵略性的方式来帮助客户,比如“您的初始搜索为Overcoatt,我们也为您搜索了Overcoats的相关结果”。
5、显示搜索结果的数量
显示搜索结果的数量能够让用户更清楚他们需要在浏览结果这件事上花费的时间。
而搜索结果同时还能帮助用户针对下一次搜索,作出跟明确的调整和选择。
6、保留最近的用户查询
即使用户熟知搜索引擎的全部功能,也需要借助大脑记忆来挑选关键词,进行搜索。想要找出有意义的、可用的搜索关键词搭配,用户需要结合他们的搜索方向,最近的查询,联想相关的属性和关键词,最终促成一次成功的搜索。在设计整个搜索体验的过程中,你应该始终记住一点:
尊重用户的努力。
你的网站应当存储所有最近的搜索,以便在用户进行下一次搜索的时候,提供这些数据。
最近的搜索帮助用户节省了在相同内容搜索上所耗费的时间和精力。
小贴士:尽量一次展示不超过10个条目,这样不会让用户觉得信息过载。
7、选择合适的页面布局
不同的内容其实需要不同的页面布局来支撑的,而我们最常见的两种布局,列表布局和栅格布局,应该能够满足绝大多数的需求。对于布局,我们的经验以一言以蔽之就是:
细节用列表展现,图片靠栅格支撑。
让我们在Cotext 的产品页面中验证一下这一经验。产品的细节展现是非常重要的时刻,对于电子产品而言,需要呈现的配置信息非常的多,所以,列表视图是非常合理的。
而对于相对产品信息更少的产品而言,栅格式的布局则是更好的选择。想服装这样的产品,少有需要借助文本式的产品信息来呈现其特征的,更多还是依靠图片和视觉设计,所以这类产品需要栅格式的布局,而不是冗长的内容信息。
小贴士:
·允许用户选择列表视图和栅格视图,让用户选择他们更喜欢的方式来查看内容。
·在设计栅格布局的时候,确保图片的尺寸合理,大到足以看清其中细节,而又不会太大,让用户一次尽量看到更多的条目。
8、展示搜索过程
理想状况下,用户点击搜索按键之后,搜索结果会立刻显现出来。但是实际情况是,它通常是需要有一个过程的。通过进度条和动效让用户明白他们大概需要等多久,或者让等待的过程更加有趣。
小贴士:动效可以有效的分散用户等待过程中的无聊感,让用户实际等待的体验更好。
9、提供排序和过滤的选项
当用户看到的搜索结果过多,或者相关度较低的时候,会对搜索结果非常茫然。而排序和过滤的功能则能够很好的缓解这一情况。
过滤和排序能够帮用户调整和缩小搜索结果,大幅度降低用户手工翻页筛选的工作量。
小贴士:
·最重要的一点是不要让用户有太多的选择,如果搜索本身需要大量的筛选的话,那么默认尽量折叠或者隐藏一些相对不那么重要的结果。
·不要隐藏排序功能。
·当用户筛选到了一个相对狭窄的搜索范围的时候,在结果页面的顶部对此范围进行标注和说明。
10、不要告诉用户“没有结果”
什么都没搜到会让用户感到非常沮丧的,尤其是当用户进行了好几次搜索之后,依然没有结果。你应该尽量避免用户陷入死胡同,当用户没有搜到他们想要的内容之时,应当为他们提供有价值的替代品。
结语
搜索引擎为一个网站所提供的价值是显而易见的,而可用性良好,体验平滑舒适的搜索结果页则能够让用户快速地判断出网站和搜索引擎的重要价值。
一个优秀的搜索引擎应当在结果页当中,为用户提供有效、有用、有价值的搜索结果。
相关文章
各类商务印刷品的尺寸怎么选? 印刷设计常用的尺寸纸张/克重都在这里了
日常经常印刷各种东西,哪些尺寸,纸张更合适呢?本文为大家整理了常用印刷尺寸,方便图文广告店、印企在日常接单生产中能够快速掌握客户关键性信息,详细请看下文介绍2024-02-10- 现如今,证件照已成为我们生活中不可或缺的一部分,无论是求职应聘,还是入学注册,亦或是办理各种证件,都需要提交符合规定格式和要求的证件照,那么,这些证件照的尺寸和2024-02-10
- 平面设计是一个注重视觉效果的设计,简单的排版方式有时候不能满足视觉突出的效果,业务很难达到吸引用户的眼球,下面我们就来看看8个平面设计技巧分享2023-10-08
- 每个设计师都有自己最喜欢的设计软件,并把软件作为自己的第二语言,今天我们来推荐10款UI设计不可或缺的工具,详细请看下文介绍2023-10-08
- 夏日电影风怎么调色调色?夏天快到了,想要调节夏季电影风的画面,该怎么操作呢?下面我们就来看看适合夏季的柔和绿色调调色分享2023-04-02
什么是真RAW 什么是伪RAW? 简单说说真 RAW 和 伪RAW
随着索尼α7RV(ILCE-7RM5)正式发售,近期有不少网友跟我咨询索尼相机“无损压缩(M)”和“无损压缩(S)”RAW的问题,今天做一个统一答复2022-12-24- 手机UI设计尺寸有哪些?作为新手在设计手机ui的页面的时候,发现自己设计的尺寸都很奇怪,如果能有元素尺寸介绍就好了,下面就来看看我们汇总的超全面的UI元素尺寸设置指南2021-08-06
- 常用照片尺寸有哪几个?我们经常说一寸照片,二寸照片,这些照片的尺寸是怎么计算的?下面我们就来看看照片标准尺寸/像素对照表汇总2021-08-06
怎么让设计更高级? 一些不受关注的小细节设计提升作品高级感的技巧
怎么让设计更高级?都一样是做设计的,一样的素材一样的文案,为什么有的设计很高级,有的很拉胯呢?在素材一样的大前提下,细节就能决定成败,下面我们就来分享一些不受关2021-08-05- 新人如何快速掌握黄金分割构图法?看到结构漂亮的图片,很多朋友都能想到黄金分割,即使不熟悉的朋友也知道黄金分割构图,什么是黄金分割构图?怎么掌握这个知识点呢?下面2021-08-05
最新评论