首页 > 网站建设 >

网站制作搜索框用户终极体验的设计方法(二)

发布时间:2017-12-23 作者:博纳网络

 
  • 网站制作搜索功能之历史记录

历史记录适用两种场景:一是搜索词与历史搜索有一定相关性,需要在历史搜索的基础上调整关键词。二是搜索的关键词,搜索结果可能有更新(如在 58 搜索酒仙桥三室一厅的租房信息,房源信息可能会增加)、搜索结果之前并未处理完(如在京东搜索加湿器,只浏览了第一页,并未完成购买)或者需要再次搜索(如高德地图中从不同的起点搜索某地、做路线规划),这时需要重新输入关键词。

历史记录能提升重复搜索时的效率,但并非所有的搜索都需要历史记录。如果搜索结果操作较为简单,且通过一次即可完成,那么就可视情况省略。

比如App Store,无论是搜索关键词或者精确的App名称,用户搜到之后,最有可能的动作就是下载。如果不满意,可能会离开,但离开后再搜索同一App的可能性很小,历史记录起到的作用有限。

考虑到搜索页的空间、有效性,通常需要控制历史记录的数目和时间范围。

历史记录的形式主要有两种:一种是标签式,一种是列表式。标签式节约空间,列表式扩展性强(可以展示更详细的信息,也可支持收藏、删除等操作)。

考虑到隐私问题,历史记录一般支持删除。删除有两种,一种是删除单条,一种是清空所有。删除单条功能多见于列表式,一些标签类的也可采用长按的方式删除单条(比如淘宝)。

图9  网站搜索历史记录

需要注意的一点,历史记录只用于搜索初期,后续可在适合的场景下,引导用户使用收藏、订阅、足迹等功能,打造更好的体验。例如,腾讯视频记录观看历史,不但使用户免于搜索,而且可以记录进度。什么值得买,在搜索结果页添加了“关注”按钮,关注后用户可以在首页“关注动态”tab看到持续更新的搜索结果。

图10  网站搜索功能之更丰富的引导方式

  • 网站制作搜索功能之热搜

热搜的作用类似于搜索框中的预设文案,起引导作用。但因为辅助区的空间有限(键盘会遮盖一部分),为尽可能提高利用率,热搜的字数通常会作出限制。

常见的热搜主要有 4 种:

  1. 整个平台用户的热搜

  2. 基于用户的个性化推荐(根据用户资料、轨迹等信息做智能化推荐)

  3. 平台运营内容(为某些品类引流)

  4. 推广(商业广告)

热搜的展示形式以标签为主。因为部分热搜是个性化推荐,可能会暴露隐私,一些App还贴心地设置了隐藏按钮。

  • 网站搜索功能之分类搜索

当App中涉及到的业务、类型、品类多时,可能出现多种类别的搜索结果,其形式和操作也不同。为了让一部分目的明确的用户(明确知道要搜索的类别),从中快速、准确地找到自己预期的结果,常常采用分类搜索的方式。

网站设计搜索功能具体有 3 种方式:

  • 搜索框分类选择

  • 辅助区分类选择

  • 搜索结果页分类选择

未在搜索框中选择分类的,仍然有机会在搜索过程中选择分类。淘宝采用tab的方式,区别展示“全部”、“天猫”、“店铺”的搜索建议和结果。亚马逊则在输入过程中,提供类别的选择(默认搜索全部分类,但提供搜索小类的入口),同样的还有58、京东、闲鱼等。搜索框中的分类选择,适合那些需求明确的用户。如在链家中,搜索二手房还是租房,用户是特别明确的。在搜索框中默认限定类别,可能会导致搜索结果偏差。为了照顾到更多用户,大多数App提供了“全部”类别,并默认搜索“全部”类别下的结果,比如微博。

更多的App采用搜索结果分类的方式,将结果分门别类呈现,减少用户在搜索过程中的决策压力。最常见的形式是tab式(代表:知乎、支付宝),第一个tab一般为各类结果的堆叠,后面每个tab为一类,便于切换。还有的采用标签来区分(代表:Facebook、网易考拉、京东)、用列表作为类别入口(代表:58)、直接将各个类别模块堆叠起来(更像是列表式的扩展,每个类别外露一些内容,代表:微信、豆瓣)。

这几种方式并不是完全独立的,可以根据需要灵活运用。

图11  网站制作分类搜索的常见形式

网站制作搜索过程第二阶段(开始输入文字/字符)的反馈如下:

  • 变化:搜索框中,引导文案消失,出现清除icon

  • 匹配:根据输入的内容,进行关键词联想

  • 清除icon

清除icon是一个贴心的小设计。它的作用是一键清空搜索框中内容,与引导文案交替出现:键入文字时,引导文案消失,清除icon出现;点击清除icon,文字清空,引导文案出现。

下图是某App的截图,需要注意取消按钮的形式,避免与清除icon冲突,引起用户困惑。

图12  网站制作搜索功能避免取消按钮和清除icon冲突

  • 网站制作搜索功能两种匹配机制

分析关键词联想之前,我们先来了解下两种匹配机制:一种是输入过程匹配,一种是输入完成匹配。

网站搜索功能制作输入过程匹配:在输入时,每输入一个字/字母/字符,就进行一次匹配,同时更新页面信息。这里更新的信息,可以是针对输入内容进行推荐的信息,也可以是直接的搜索结果。

前者是对输入的内容进行关键词联想,如输入“女”,推荐信息显示“女包”“女鞋”“袜子女”等等。这种方式可以即时提供搜索建议、引导性强、可提高效率。

后者则是每输入一个字/字母/字符,就立即对数据库进行一次搜索,同时把搜索结果展示出来。这种无需点击搜索按钮就实时展示搜索结果的方式,被称为“即时搜索”。

即时搜索可以直接、快速地看到结果,在一定程度上可以提高搜索效率,但对计算能力要求高,若计算能力跟不上,则可能需要等待加载,从而影响体验。一般适合于数据量不大或者数据库已经下载到本地的情况。

例如,QQ邮箱预先已下载部分数据到本地,搜索可即时看到结果(仅包含已下载的数据),点击“在服务器上继续搜索”,才向服务器请求数据。

网站制作搜索功能之输入完成匹配:仅在输入完成后,点击“搜索”按钮时,才开始进行搜索、匹配,直接展示搜索结果。这种方式省去了对输入过程实时分析、引导的过程,适用于对搜索功能要求不高的情况。


目前很多App采用组合方式:
输入过程关键词联想+输入完成执行搜索图13  即时搜索与输入完成匹配

这是一个很讨巧的组合。既对用户提供了必要的帮助和引导,又减少了请求次数,避免出现等待加载的状况。

  • 网站搜索功能之关键词联想

关键词到底有什么作用?简单来说是:联想、匹配、引导、纠正。展开来说,有四个作用:

  • 第一,用户不一定清楚要搜的精确名称,关键词可以作为引导。

  • 第二,系统可以根据已有的搜索数据,对关键词进行关联分类,并且与数据库精确匹配。如果用户选择了做过关联处理的词,就可以获得内容更精确、数量更可控的搜索结果(而这次选择,对系统本身也是一次反馈)。同时,因为已预先做了分类,搜索时可以直接调取、减少计算量,速度也更快。

  • 第三,可以减少用户的输入错误。

  • 第四,提供很多很动态的运营位。

关键词的展示形式比较灵活。最简单的是根据输入词,直接展示联想的关键词(如今日头条),但因为页面空间有限,被键盘遮盖后只能露出几条,于是大家又发明了二级标签。它伴随关键词一起出现,提供更多相关的入口。

如下图,搜索“niu rou”,推荐关键词“牛肉”,后面跟着 3 个小标签“风干”“手撕”“张飞”,这 3 个关键词都是对“牛肉”的再次联想。点击整栏,执行搜索“牛肉”;点击二级标签(如“张飞”),执行搜索“牛肉张飞”。需要注意的是,二级标签的操作区域很小,对于操作精准度要求高,数量不能超过 3 个。

图14 网站制作搜索功能之 今日头条直接展示联想词、京东采用二级关键词标签

有时系统推荐的关键词不够精确,用户需在后面输入其它内容。但无论是关键词,还是二级标签,点击后都直接执行搜索,这就需要用户在搜索结果页再去激活搜索框,继续完善搜索词,中断了搜索过程。YouTube、Facebook、亚马逊、淘宝等采用了“向上补全”功能,点击关键词或二级标签,执行搜索,点击向上补全icon,会将关键词补全到搜索框中。

图15  网站制作搜索功能案例之淘宝的向上补全功能

还可以将关键词对应的搜索结果数量前置,便于用户控制搜索词的颗粒度,也避免出现无结果或者少结果的情况。代表有Twitter、大众点评、喜马拉雅、链家、百度外卖等。

图16  关键词后显示结果数目

除了提供关键词,还可以对输入词进行判断,适时提供分类建议(如58、京东、亚马逊、闲鱼等,可参考前文「J.分类搜索」一节)。 58 作为一个综合的生活服务平台,业务类别多,搜索“牛肉”,在很多类别都有相关信息,选取“食品”和“招商加盟”这两个可能性最大的类别推荐给用户。

图17   网站制作搜索功能案例之58 对输入词提供分类建议

另外,也可以将部分搜索结果前置,与关键词一起显示。这些搜索结果,可能是平台用户的热搜、对当前用户的个性化推荐,也可能是平台运营、推广的内容。

图18  将部分搜索结果前置显示

网站制作搜索过程第三阶段,点击搜索按钮/关键词后,跳转至搜索结果页。深圳网站制作博纳网络编辑整理。全文未完,详见下篇

文章标题:网站制作搜索框用户终极体验的设计方法(二)
本文地址:https://www.198bona.com/news/919.html
如果您觉得案例还不错请帮忙分享:

网站建设

网络推广

解决方案

域名主机

建站行业资讯