设计搜索栏,你遵守这五条原则了吗?

2016-08-05 来源:交互设计学堂 阅读:

♝点击上方“交互设计学堂”关注我们,送电子书


如果顾客都搜不到想买的东西,你还怎么指望你的产品能卖出去?搜索功能是营利性 app 和网站上,很基本也很关键的功能。在搜索、了解产品时,用户期盼着流畅的 app 内搜索体验。而且他们常常根据一两组的搜索结果,很快地对 app 的好坏做出评价。

完善的搜索功能应该能让用户快速简单地找到他们想找的。这篇文章中,我们会探究如何使之成为可能。

1.搜索栏的放置位置

用户寻找搜索栏时,可谓是又快又狠。他们常常只是扫描一下页面去寻找“我可以输入的那个小框”。

目标:设计能被快速发现而且明晰的搜索栏。

1.1将搜索栏放置在醒目的位置

搜索栏是用户找产品最快速的一种途径,所以它是电商app/网站的主要功能,也应该被放置在醒目的位置。将搜索栏放在隐蔽位置的app会让用户觉得沮丧,也会让用户的操作流程变慢。设计搜索栏,你遵守这五条原则了吗?

电商app应该将搜索栏放在的首页顶部(如果你的首屏很长,那么在底部也放上搜索栏)。对拥有大量商品的app来说,将搜索栏放在这样的位置,能够让它既明显又能够很快被找到。设计搜索栏,你遵守这五条原则了吗?

1.2将放大镜图标和搜索栏放一起

只有少数图标具有世界范围内的广泛认知度,放大镜图标恰恰是其中一个。就算你没有使用文字标签说明,用户也能将放大镜图标看作是“搜索”的意思。

你应该使用一个粗线条,最简化的放大镜图标。因为图形细节越少,认知速度越快。

设计搜索栏,你遵守这五条原则了吗?


1.3范围栏(iOS系统特有)

在iOS系统中,搜索栏会伴随一个范围栏,这个范围栏能够让用户快速地选择搜索范围。设计搜索栏,你遵守这五条原则了吗?

范围栏可以被加在搜索栏之后,以便用户能够再次缩小搜索范围。

然而,更好的办法还是优化搜索结果,省得用户自己给搜索划范围。

2.理解搜索栏中的问句

搜索栏迫使用户做更多的工作,不仅因为用户需要提出问句,他们还需要将它打出来。输入是一件浪费时间的事情(特别是在手机上)。

目标:尝试降低用户输入数据的难度,同时提供即时的搜索结果。

2.1自动建议

大多数用户不擅长于构建问句:第一次搜索时,如果他们找不到想要的结果,之后的尝试也很少成功。事实上,大多数情况是他们直接放弃了。自动建议机制通过用户输入的文字,来预测用户想查找的内容,帮助用户找到合适的问法。自动建议机制帮助用户更好地构建问句。

自动建议机制不在于加快搜索的过程,但却能指导用户输入合适的问句。

设计搜索栏,你遵守这五条原则了吗?

但是确保自动建议机制是有用的。设计糟糕的自动建议机制会使用户感到困惑。所以请使用拼写自动更正功能来优化这个工具。设计搜索栏,你遵守这五条原则了吗?

2.2近期的搜索记录

app应该储存下所有交互过程,包括最近的搜索和购买记录,以便在用户下次搜索时供他们使用。这会让用户在搜索相同物件时节省不少时间和力气,也能提升用户体验。

设计搜索栏,你遵守这五条原则了吗?

3.搜索过程

最理想的情况是搜索结果能立刻展现,如果做不到的话,你也应该提供合适的视觉反馈。但要记住,漫长的加载过程会让用户沮丧,还会有失去他们注意力的可能性。

目标:让用户感知到的搜索时间短于实际时间。

3.1搜索占位符

一般来说,0.1s以下的延迟不必提供特别的反馈。但如果长于这个时间,你至少要尝试让等待的过程变愉悦。这时,临时的消息占位符就很适合展示。设计搜索栏,你遵守这五条原则了吗?

3.2延迟加载

延迟加载是一种常用的技术。它可以确保展示一部分的内容的同时,另一部分继续加载。用这种方式页面加载地非常快,因为最初只需加载少量的产品信息。设计搜索栏,你遵守这五条原则了吗?

延迟加载产品时,最好先将产品文字说明加载出来。这样,没耐心的用户也能先通过浏览文字信息找寻目标商品,而不必等待所有图片都加载出来。设计搜索栏,你遵守这五条原则了吗?

4.搜索结果的展示

目标:确保搜索结果是有用的。加快搜索过程,同时保持用户对接下来任务的注意。

4.1前几条搜索结果具有高度相关性

因为不需滑动就能看到的手机屏幕太小了,你要确保用户最先能看到一组高度相关的结果(3或5个);这之后,他们才需要滑动屏幕去浏览更多内容。

4.2筛选和分类

在一项关于电商app可用性的研究中,Baymard 机构发现,超过半数的用户尝试在目前的页面“中搜索”,为的是“用搜索过滤掉更多产品”。然而,94%的手机电子商务app或网站不支持这个功能。

用户会被大量看起来不相关的搜索结果吞没。过滤和分类选项,能够帮助用户缩小和组织搜索结果。否则,用户就需要不停地滑动小小的手机屏幕。设计搜索栏,你遵守这五条原则了吗?

4.3“在其中搜索”区域

这个功能能鼓励用户在搜索结果中“再次搜索”,而不是使用传统的过滤功能。而这个功能会让你的用户更好地掌控他的搜索结果。下方你可以看见具有“在其中搜索”功能的页面示例:设计搜索栏,你遵守这五条原则了吗?

4.4有用处的“没有结果”页面

用户搜索时难免会遇到“没有结果”页面。缺乏设计的“没有结果”页面对于用户来说是一个死胡同。设计搜索栏,你遵守这五条原则了吗?就算用户搜索不到任何产品,也要避免让他在你的 app 中遇到死胡同。当没有匹配结果时,你应该提供可替换的选择给用户,比如相似类别的产品。为了更好的帮到用户,你应该开发出“智能搜索”功能来。它们能够覆盖单双数修正以及错误拼写纠正等功能。设计搜索栏,你遵守这五条原则了吗?

5.产品分类

5.1不友好的分类目录

用户在理解那些,不按照他们期待的方式排列的分类目录时,会很吃力。分类目录应该做到明确而且没有重叠的部分。因为当用户被搜索结果折腾得疲惫不堪时,目录会是他们最后的招数了。设计搜索栏,你遵守这五条原则了吗?

结论

鉴于目前30%的网络购物行为发生在手机端上,电商 app 的担子从未如此之重。你的 app 需要包含各种类型的搜索方式,也要给用户提供相关的搜索结果。当在手机上购物变得简单时,用户才更有可能用手机来购买,而不仅仅是搜索。

原作者:Nick Babich  翻译者:Puddinnng

本教程为翻译教程,原文地址为:

http://babich.biz/mobile-ecommerce-how-to-design-ux-search/


老D点评:

这篇文章基本把常见的搜索框体验提升策略都说了,自动填充、历史记录、系统推荐、范围搜索等等,可以作为一个提升搜索体验的一个工具箱,对UI也涉及了一些,但是也还是缺少了一些更为细致的总结,比如搜索框的提示文字其实也是很重要的,清空按钮也是移动端常见的配置,还有设计运营的热搜词等等还有很多,希望小伙伴们能够自己总结下,为以后自己工作提供便利。

把搜索框做明显也得看场景,在电商网站如此,因为搜索是用户最常用的功能,但是还有很多的其他场景搜索框是要弱化的,仅仅是提供一个入口而已,比如iOS9,在设置里加了搜索框,但是默认是被遮住的,只有当下滑屏幕的时候才会展示。

有关搜索推荐大家看下《搜索模式》这本书。

另外交互设计学堂近期将开设新的栏目-《行知书院》,旨在帮助小伙伴们来高效的学习现在市面上优秀的用户体验书籍,同时结合老D的工作经验来帮助你们从不同的高度和角度来解读书中的内容。为了准备内容请小伙伴在文章左下角点击“阅读原文”,说出你对读书栏目的诉求。


加老D私人微信18605817040,和老D一起学交互,老D会在朋友圈多发干货文章哦。新手小伙伴可以问老D3个专业问题哦。


写给被我们转载的文章作者们:

交互设计学堂文章大部分来自于网络精选,为了尊重知识产权,我们诚意邀请您联系我们一起合作,合作形式包括但不限于植入作者打赏二维码、直接稿酬等。如果不同意我们转载,也可以根据您的要求删除文章。

欢迎投稿:anhejiao@126.com


标签: 搜索   用户   app   加载  

订阅热词

猜你喜欢