产品设计:App搜索功能设计分享

搜索框是一个常见的交互控件,在各种网站上,在各种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的商品/视频存量太少而放弃使用,用户体验会变差,用户粘性也会降低。到最后也会影响用户的留存率。

六、总结

以上就是小编最近对搜索功能学习的内容,要做一个功能的交互设计需要考虑的地方特别多,作为一名产品白的我还有很多细节的地方需要继续学习。比如拍照片识别,语音输入搜索方式。

上就是主要内容,如有不足的地方请多多指教,也欢迎大家一起来讨论。未经同意,禁止转载!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,064评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,606评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,011评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,550评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,465评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,919评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,428评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,075评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,208评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,914评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,482评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2 339

推荐阅读更多精彩内容

  • 写在前面 无论网站或是App,搜索功能几乎成了标配,在其间占据着或轻或重的位置。一方面,搜索可以帮助用户节约时间、...
    vivijia阅读 1,624评论 0 33
  • 搜索功能无论在web端还是移动端,都是产品中十分重要的功能。文章主要从用户体验和产品功能、策略角度来分析,提出一些...
    史蒂芬宋阅读 2,726评论 4 44
  • 搜索功能是绝大部分产品中标配的功能,因为搜索功能可以帮助用户快速找到想要的内容,缩短用户使用成本,文章主要聊一聊A...
    Yoga_Miao阅读 1,772评论 0 17
  • 在不同的APP或者不同的场景下搜索入口有着不同的表现形式,具体的表现形式取决于产品对搜索功能权重的定义,如果说在某...
    Perry阿力阅读 2,358评论 2 42
  • 不知不觉,岁寒输入法的更新历史已经可以列出这么一长串来了。从中可以看出,岁寒的发展过程也是一个不断试错的过程,其中...
    临岁之寒阅读 33,890评论 1 6