搜索框是一个常见的交互控件,在各种网站上,在各种App上都会有一个搜索框,或者放大镜的图标提示着用户,我们的产品给大家提供了搜索功能,大家可以输入关键字来找到自己想要的信息。
最近小编在公司参与了一款产品的搜索功能设计,在参与过程中也学到了一些关于搜索功能的知识,在这里想给大家分享一下我的学习成果,和大家交流一下搜索功能设计的相关知识
用户在使用搜索功能时,大致会按照以下行为路径:发现入口——进入——使用——得到结果。接下来的整篇文章都会围绕这行为路径来进行分享。
目录
1、搜索用户画像
2、搜索框入口
3、进入搜索
4、使用搜索
5、搜索结果呈现
6、总结
一、搜索用户画像
搜索功能的用户大致可以分为三种
第一种:有明确的需求,并且知道自己想要什么;比如小明是一名比较理性的消费者,平时有需要的时候才会打开京东买自己想要添置的电子产品,这时候当他打开京东时,就会很明确的知道自己这次想要购买的是一台电脑,然后他就会在搜索框中输入电脑然后点击搜索,此时他的搜索需求大,搜索结果精确度也高
第二种:需求并不怎么明确,知道自己大概想要什么,比如小泉是一名互联网公司的产品助理,每到中午晚上的时候他都会点开饿了么或者美团等外卖App来订餐,今天想要吃清淡点时会在搜索框输入清淡,得到的结果可能是粥店,粉店等;想要吃辣时就会输入麻辣关键词,得到的结果可能是麻辣香锅,麻辣小龙虾等各种麻辣的菜。此时小泉的搜索需求还是有的,只不过比第一种的小明会低一点,准确度也会没有那么高,因为清淡和麻辣包含的范围比较大。
第三种:需求不明确,并不知道自己想要什么,只是进来随便逛逛。小华是一名大二的学生,平时无聊的时候会打开淘宝来看看,如果看到合适的就会购买,没有合适的也没有关系,因为她只是进来打发时间的,此时小华的搜索需求可以说是没有,进入淘宝后可能会随便点。
二、搜索的入口
搜索框的位置对于内容搜索高频的App来说十分重要,比如外卖的美团,饿了么;购物的淘宝,京东这种电商类似App,用户对于搜索功能的依赖性会比较高,所以搜索的位置一般会放在首页的顶部,如果手机屏幕往下滑,搜索框的位置会常置顶,这样会方便用户想搜索的时候就能随时找到搜索框,一定程度上会提高搜索的效率和增加订单交易的成功率。
从上面的4张截图可以看出,搜索框的位置都是放在首页的顶部,但是京东和淘宝的搜索框由于底色与搜索框的色差较大,所以比饿了么和大众点评要显眼得多。之前有看过一些关于搜索框设计的文章,其中有提到根据用户搜索需求强度得不同,可以把背景与搜索框的色差变大,或者变小。我觉得这个观点有一定的道理,但是也有可能是因为App的设计风格刚好是浅色,所以没有与搜索框形成较为明显的色差,但是他的用户需求程度也是比较高的。
除了搜索框为发现入口以外,还有一些App的搜索入口是以放大镜icon在右上角表示搜索页面的入口,这时就弱化了搜索搜索功能为icon,这种入口搜索效率会比常置顶首页的低一点,也没有前者显眼。
三、进入搜索
在使用搜索功能之前,按照正常的路径应该是发现,然后点击进入搜索功能。目前小编发现进入搜索功能的方法主要分为两种,第一种是在当前的页面进行搜索输入的操作,这只情况小编发现出现pc网站的情况会比较多,另外一种则是进入一个新的页面进行搜索,进入新页面的时候会拉起手机键盘或者再次点击搜索框再拉起键盘。
四、使用搜索功能
1、进入搜索页面时键盘拉起
由上图可以看出,在人人视频App中,当我们进入搜索页的时候,键盘是没有自动拉起的,而飞猪和百果园则会自动的拉起手机键盘给我们使用。
首先我们来看看自动拉起键盘,当我们进入首页时,键盘自动拉起会减少用户进行搜索的操作步骤,一定程度上提高了搜索的效率和用户的体验。另外我们也可以手动把键盘收起,收起的时候会发现屏幕的留白会比较多,所有就算键盘被自动拉起了也不会有很大的影响。
那么我们再来说键盘需要手动点击搜索框才出现的情况,我们在人人视频的截图中可以看到,人人视频中搜索页面的信息比较多,大致如下:顶部banner的广告位+搜索框+热门搜索+历史搜索+推荐。当键盘拉起时会挡住历史搜索,部门热门搜索的关键词,一定程度上会影响用户的操作体验,以及会减少相关视频的点击率。更重要的是,在这种情况下用户可以看到系统推荐的视频,如果一进入搜索页面就拉起键盘,那么大多数的用户会不知道有推荐存在,可能搜索完之后就只看搜索结果,从而忽视了相关视频的推荐,大大的降低了点击率和播放量。
所以对于是否要主动拉起手机键盘,关键还是要看产品想在搜索页面引导用户去干什么,要具体问题具体分析,是单纯的进来搜索还是搜索之余点击相关的推荐信息来增加搜索量和点击率。
2、搜索框内默认文本
相信大家在使用搜索功能的时候都都会发现在搜索框内会有默认的搜索关键字,有的可能是关键词提示,有的可能是最近搜索量大的关键词。那么这样做会有什么好处呢,下面我们来看一下。
从上图我们可以看出,腾讯视频在影片类搜索框里提示用户输入片名、主演或者导演,这样在一定程度会减少用户使用这款产品的疑惑,因为如果没有这些直接的关键词提示,用户可能会不知道原来输入导演也可以找到自己要看的电视剧或电影,这样的提示不仅提高了搜索的效率,还提高了搜索的准确度。
接下来我们再看看美团,美团的输入框内的默认搜索词会不断的改变,当我们刷新页面时,默认关键词就会改变,这样不断更换热度高的商品搜索词一方面可以提高该商品的销量,另一方也会起到宣传的作用,假如我打开美团想要点个外卖,但跟很多人一样不知道要吃什么,看到搜索框内提示的黄焖鸡好像不错,那为就会直接点击搜索,然后订黄焖鸡的外卖。那么我这个订单一定程度上是由关键词的默认提示促成的,也发挥了美团外卖帮助用户快速地点到外卖的作用,提高了产品的用户粘性,解决了用户的需求。、
总的来说,在搜索框内增加默认的文案提示,可以帮助需求用户知道如何可以快速的找到自己
想要的结果,同时也告诉了用户该产品能搜索到什么。如果在输入框内缺少了这些默认的关键词,那么有的用户在搜索时就会产生迷惑,不知道输入什么才会精准而快速的找到自己要看的电影,美食等,下一步就是因为功能交互体验不佳而导致用户流失,用户留存率就会减少。外卖订单的促成的几率减少,商家的利润也随着下降。
3、历史记录和搜索词推荐
由上图可以看到,在搜索页面内会有历史搜索关键词和热门搜索关键词,这两种功能设计都可以帮助用户快速进行搜索,减少重复输入关键词的步骤。另外,当用户在热门搜索中对了某个关键词感兴趣,就会点击直接进行搜索,这样就会很容易促成商品交易成功,或者提高视频点击播放率。从另外一个角度上看也给用户提供了较好的用户体验,提高了产品的粘性。
4、搜索联动提示
当我们有目的进行搜索时,会想用最少的操作就能找到目标。而联动提示就是可以满足这一需求的功能。我们首先来看看QQ浏览器,我在搜索框内输入火影两个字的时候,就已经触发了搜索的操作,在下面会给我展现相关的搜索内容。第二个是一款叫nice的社交软件,我在输入框内输入穿搭时,会有相关搜索词提示给我,帮助我更准确的去进行搜索。当我在第三款产品的输入框中输入菜字,下面就给我提供了一系列的搜索关键词。
以上三款产品在输入关键词后的交互设计无疑都给用户节省了许多的时间,但是这个交互设计有需要注意的地方就是,提示给用户的内容需要准确,比如说我输入火影其实是想找火影人物介绍,输入穿搭是想了解本季的穿搭。如果在提示上没有做到用户想要的结果时就不会给用户带来较好的用户体验,也不会给用户有眼前一亮的感觉。所以做这个功能时,要尽量提高内容的关联程度和内容准确度,提高用户体验和粘性。
五、搜索结果呈现
搜索结果呈现给用户的方式有很多种,要考虑的因素也有很多。
比如外卖搜索,要考虑结果与用户当前定位距离不能相差太远,结果按距离近到远排列,还有其他人气,食物评价等次要考虑因素;
再比如电商类的搜索,假如用户搜索某个商品时存在错别字,那么是不是就返回无当前商品就呢,结果是否定的,就是用户搜索词有误,无法匹配到任何商品,商家们也不能错过任何能促成订单的机会,那么这时候就会有两种处理方法。
第一种就是增加容错率,当用户输入的关键词有错别时,系统可以自动识别并且主动更正,然后再进行下一步的搜索。如下图所示:
当我在淘宝搜索框内输入“库子”时,系统会提示裤子的搜索结果,但是如果还是想要用回“库子”进行搜索时,就可以点击“库子”进行搜索。这个容错的功能可以防止出现暂无搜索结果的情况出现,因为有时候找不到搜索结果是因为用户的操作有误,当没有什么耐心的用户看到无结果时就会停止索,订单的成交率就会下降。如果搜索的容错率提高,自动帮用户纠正个别可能是错误的词语,然后再得出搜索结果,这样会给用户带来一定的好感之余还能降低用户的搜索成本。对于商家而言也能提高商品的点击率和订单量。
第二种就是提示用户暂无结果,但是会推荐一些商品给用户浏览。如下图所示:
如果在搜索上没有很好好容错处理,那么在搜索结果页中给用户推荐商品页是一个不错的选择
可以给用户推荐人气热销,新款商品等,当然如果是视频类的App,可以给用户推荐人气视频或者根据用户近期的搜索路径给用户推荐结果。这样也可以使用户在找不到相关结果的页面中得到可以浏览的东西,如果用户对系统推荐的结果感兴趣,那么就可以提高点击率,用户的搜索失败心理也会得到缓和。如果页面只是返回暂无搜索结果几个字,那么用户很可能会觉得当前App的商品/视频存量太少而放弃使用,用户体验会变差,用户粘性也会降低。到最后也会影响用户的留存率。
六、总结
以上就是小编最近对搜索功能学习的内容,要做一个功能的交互设计需要考虑的地方特别多,作为一名产品白的我还有很多细节的地方需要继续学习。比如拍照片识别,语音输入搜索方式。
上就是主要内容,如有不足的地方请多多指教,也欢迎大家一起来讨论。未经同意,禁止转载!