今天继续探讨如何帮助用户找到内容——「搜索」过程产品设计。
我们先看一个完整的搜索用户体验流程:有一个用户小明,进入一个APP之后,通过搜索功能查找相关内容,系统反馈结果,小明对结果进行浏览,最终找到目标对象。
整理抽象后的流程为:搜索入口(功能入口)→搜索页(关键词输入)→搜索结果页(相关数据列表)→目标结果页(详情页)。
下面我们按照这四个步骤分别探讨可能的设计方案,以帮助我们提高产品搜索功能的使用体验。
一、搜索入口
设计规范:Android/iOS
两大移动平台都有标准的搜索控件,尽量按照平台规范设计,使用原生控件。
设计层面:整体性、规范性、美学性。
技术层面:标准化组件,开发成本低、兼容性好、体验流畅。
PS:Android版本跨度较大,考虑部分原生控件兼容性稍差,可根据实际需求重新设计。
二、搜索页
关键词联想、关键词排序、热门搜索、搜索历史
1. 有效的关键词联想。当用户输入文字时,使用有效的自动提示,诸如词根识别、文本预测等都可以降低用户的输入难度、操作强度,有助于加快搜索提高效率。
京东(iOS)
2. 联想关键词排序。阅读顺序为从上到下。根据关键词相关性、文本匹配算法确认联想出的关键词排列顺序,提供最短路径,节省消耗。
若联想出的关键词,已经找到目标对象,则点击后直接跳转至目标结果页。
微信(iOS)
3. 显示最近搜索记录。提供搜索历史主要用于再次查询,帮助用户节约时间和精力。符合基本的可用性原则:尊重用户的付出。
搜索记录数量不宜过多,尽量不使用滚动条,太多的信息会造成过载且意义不大。若有必要,可以提供入口查看所有记录。
4. 可提供热门搜索。用户没有明确的搜索目标,推荐部分关键词,给用户提供选择,帮助用户了解趋势。 同时,推荐的关键词可以提高转化。非必须项,根据产品属性选择使用,推荐性、商业性较弱的产品,可不使用。
京东(iOS)
5. 显示搜索进度。从「搜索页」到「搜索结果页」的过渡,需要给出搜索进度提示,可使用动画特效完成转场,降低焦虑感。注意区分短等待与长等待。
三、搜索结果页
关键词回显、结果排序、结果数量、显式方式选择、过滤器
1. 回显用户在「搜索页」输入或选择的内容。再次查询是信息检索中关键的一步。在搜索框中留下初始的关键词,方便用户进行再次查询,让用户不至于重复输入。
2. 反馈准确或相关的结果。以合理的方式确定结果优先级,并把所有重要的结果放置在前面。关联性(优先级)排序:准确>相关>推荐。最好能基于自己数据库里的数据范围做匹配或推荐,提高准确度。
3. 纠正拼写错误。打字容易出错,尤其移动场景。 如果用户输入了错误的关键词,为避免因没有返回结果导致用户不得不再次输入关键词的不适,提供两种设计方案:
3.1 系统直接按照预测判断的正确关键词反馈结果,给出提示。
3.2 在结果页告知输入错误,提供建议关键词,或直接给出建议关键词之后的结果。
京东(iOS)
4. 显示搜索结果数量及分页。告知用户具体数量及位置,帮助用户在进行内容比较时快速定位;指导用户后续动作,如需要花费多长时间浏览、是否需要再次搜索。
5. 选择合适的结果页布局方式:列表、网格。若只有图片或关键文本信息,采用网格形式;若需要展示更多细节信息,采用列表形式。
5.1 提供展示方式切换选择。
5.2 网格布局形式的图片要适中,基于展示需求及美学性。
6. 提供过滤器。必要的筛选条件可以提高效率节省精力。一次搜索系统返回的结果过多时,通过排序和筛选条件缩小搜索结果范围,帮助用户更快更精准找到目标内容。
6.1 提供全站(综合)及分类查询。
6.2 排序及筛选条件分开设置。
6.3 筛选选项不宜过多(≦5个)。
6.4 提供筛选选项默认值。
6.5 若只有一个Filter入口,提供多选设置。
6.6 回显已设置选项值。
7. 尽量不直接显示"无结果"。原则上帮助用户寻找替代品。给出相似/相近关键词推荐;给出相似/相近内容推荐;文案友好。
四、目标结果页
一个关键原则:目标结果页与搜索结果页的关键信息显示应前后一致,否则容易造成用户的担忧。具体的内容设计及界面设计放在下一个系列更新。
一个优秀搜索产品基本要求:快速准确找到用户想要的。如果有可能,不要让用户花精力去找,直接提供给他。
愿你更进一步。
完。