赞助商
立即赞助

如何做好浏览器搜索设计?我总结了这9个建议

交互设计3年前 (2021)发布 流光
1.7K 0 0

于搜索,百度百出基本解释是: 予定条件后再寻求,搜查。此,

搜索,可看做是户快速获取特定信息的一种方式。

吾生也有涯,而知也无涯。以有涯随无涯,殆已!早在战国期,庄就发出了这的叹:以有限的生命追逐无限的知识,必然是失败的。互网伊始,当网络息开始呈指数型增长,搜索就应运而生,从Yahoo、Google百度,在搜索的地基上催生了庞大的商业帝国。由此可见,面对息爆炸的互网,人对于搜索,这一主动寻求定息方式的烈渴求。

从认知科学的角度,人脑很难了解记住所的信息。认知科学的先驱托马斯·兰道尔,曾过一实验,用与算机内存相同的衡标准衡人类的记忆,他通过几种巧妙的方法推算出人的平均知识0.5GB。后他又根据人们知识习得的速度,用多种方法估算70寿命后人脑所能存储的知识,后都指向同一答案:1GB。这点存储浩如海的互联网信息相比,简直微如尘埃,不一提。当然人类的脑,主用途并不存储,也不擅记忆,所以我们学会了创造并使用各种媒介作我们身体的延伸。

正因为互联网上信息浩烟,人们的忆容量又极为有,不同人在不同时刻,不同场下想获取的识千差万别,任何产品很难揣摩其意图,随时随地,心照不宣的给出人们想要的信息。所以搜索之互联网,就像阳光雨露一般不缺失。借助搜索一工具,人们无需众里寻他千百度,只需一个简单的输,搜索引擎就能把结果呈现在灯火阑珊处。

我们来共关注两项调查:

根据艾媒咨询2018年的调研报告,当人们有搜索诉求时,多数户第一反应是采浏览器进行搜索。

如何做好浏览器搜索设计?我总结了这9个建议

△ 艾媒咨询2018中国移搜索户偏好适搜索渠道渠道入口调查

(数据来源:艾媒报告 I 2018-2019中国移动搜索市监测报告https://www.iimedia.cn/c400/63519.html)

浏览器作搜索的主载体,搜索的滋养下,羽翼渐丰。根据艾媒咨询19中手机浏览器用户使用目的调查——搜索信息,也用户使用浏览器的主目的。

如何做好浏览器搜索设计?我总结了这9个建议

△ 艾媒咨询2019中手机浏览器用户使用目的调查

数据来源:艾媒报告 I 2019 Q1中国手机浏览器季度监测研究报告https://www.iimedia.cn/c400/64329.html

这两个调研互相验证了搜索于浏览要性。

既然搜索信息是户使浏览器的要目的(同时搜索为浏览器产带来可观的商收益),我们就有必要断打磨浏览器的搜索体验,浏览器搜索用户满意度和留存,进而提高浏览商业收益。

那么具体该怎么做呢?

搜索的最终目的都是为了获取相关的知识,这种知识的获取,属于典型的猎物酬赏。

这种酬赏,可以刺激脑中的伏隔核,让神细胞传递多的多巴胺,从让我们感受到类似于「丰收」的喜悦,或者「意外」的惊喜。一旦用户搜索——喜悦之间建立连接印象,用户就会越越信任搜索产品,从产品的商业转化的价。

如何做好浏览器搜索设计?我总结了这9个建议

△ Fogg行模型:B=MAT (Behavior=Motivation * Ability * Trigger).

根据Fogg行为模型,触提醒用户采取行动,动机决定用户是否愿意采取行动。动机和能力先决哪一个?答案始终是能力。因为增强用户的使用动机往往耗时又费钱。而简化操程,推动他们进行践,远比强化他们的动机,吊他们的胃口要管用得。要赢得人心,首先要先让自己的产品便捷易操,让用户能够轻松驾驭。

搜索用户其实分两,是内部触发,用户已经生了明确搜索动,知自己想搜什么,希望浏览能快速满足自己信息获取需求。另,则是部触发,用户本来没有明确搜索目,是浏览内某些信息,激发了用户好奇心和求知欲,于是生了搜索为。

管是触发,还是外触发,都只是醒户采取行。设计师需要将搜索过程做到极简,减户到达结果的层级和阻,于行的达成。很多事实都证明,当使某个产需的步骤被缩减或是优时,户使它的频率就会增。

所以,把搜索过程的计愿景归纳为:一键搜索,一键结果。借此来提升搜索的体验和频次。

如何做好浏览器搜索设计?我总结了这9个建议

结用户使用浏览器的动机和体景,按照用户的搜索行为路径,搜索可以拆为三个阶段:

  • 搜索前
  • 搜索
  • 搜索后

搜索前的计目标可以归纳为以下三点:

如何做好浏览器搜索设计?我总结了这9个建议

若搜过,莫重搜

「若搜过,莫重搜」,指的是如果户之前搜过某个信息,产就应该记录户的搜索行为,尽量减户重复性的操作。这个具体体现在设计上,包括两种解决思路:

第一,如果用户上次使用浏览器搜索后,停留在某个结果页面,未曾主动离开,那下次进入这个产品,不管过了多久,这个产品应始终留在来的结果页面,让用户可以继续上次的浏览。这是Google浏览器和UC浏览器的常用做法。

原因两:

结果页其是用户当时选择的结果,果销毁,用户次找到他们的操成、认成和时间成极高,留录,对计机来说没有任何存储压力,但对仍需要它们的用户来说,却是极大的方便。

即使这些结页用户不再需要,用户需要击返回,即可消除这些记录,操作成本极低。从纯粹用户体验度来说,我比较提倡这处理,为这可以让用户生熟悉感和控制感。这好像我们离开家,论多久回来,家里摆设都保留着初模样,会让用户感到个性化尊,激发用户回忆和好感。

如何做好浏览器搜索设计?我总结了这9个建议

第,由于某些商业诉求,品希望用户再回来时(特指用户主动/被动退出浏览后再回来,如用户并未退出浏览,是退驻到后台再回来,论如何,也应该按照第解决思路进处理),浏览下其他内容,比如新闻资讯等,所以把用户带回首页。(毕竟用户已退出了浏览,再回来回到起,用户是可以接受),这情况下,需要做是明确提供个提示及入口,让用户可以过提示了解我们依然为他保留了上结页,而可以过入口操作,键原来搜索结页。有了这项备选提示后,我们可以保证有需求用户,可以键上结页,没有需求用户,可以接在首页开启新任务,或者接受品引导,进新闻信息浏览。

若想搜,直接搜

指是如用户是带着明确搜索目来,我们应尽量在用户进入浏览页,可以接发起搜索,而不需要逐级返回再去寻找搜索入口。

根据数据我们了解到,户进入浏览器时的页面要分为大类:首页、宫格页和他。类页面的占分别是:2X.XX%, X.XX%,6X.XX%, 首页和宫格页是直接带搜索框入口的。他页有地址栏,但并没有明确的搜索指示。导致个页面的搜索转率分别为:6X.XX%,X.XX%和2X.XX%。有此可见有40%的户进入到他页后,转到了首页进行搜索,而是从他页直接发起搜索。受到这一数据的启示,我们在他页的地址栏信息中明确增了搜索图标,而且调整了地址栏的视觉样式,和输入页的搜索保持一致,强地址栏的搜索属性,达到户随时随地,想搜就搜的目的。

如何做好浏览器搜索设计?我总结了这9个建议

未想搜,诱我搜

作为浏览品,满足用户已有搜索诉求,是品最基础需求,为了提升品使用频,培养用户搜索习惯,有必要采取些列措施去挖掘用户潜在搜索诉求,并引导用户进搜索。引导用户搜索,从引导强化程度,又划分为三大类。

如何做好浏览器搜索设计?我总结了这9个建议

第,弱引导按搜索。按搜索在界上,并任何特殊样去引导用户搜索,是旦用户击了某个文本,表了文本兴趣后,品会在底部出现搜索提示,用户可以过击提示,键搜索结页。如用户是为误触击文本,则需理会底部提示,继续浏览或操作其他内容,提示会自动消失。这搜索,依赖于用户操作,将搜索槛降到了最低,可以有效促进搜索转化。

第二,有中性引导的标蓝搜索。标蓝搜索是指,在章落中,将户经搜索的容进行标蓝显示(超链接的标准样式),户可感知到,这个信息是有深信息的,是可通过一步点击操作直达转的。这种具有初步视觉暗示的信息,如果激发了户的疑问和好奇心,是非容易转的。

第三,有烈运营和推属性的热词搜索和相关搜索。这个诱导方式比较常见,产品内也比较多。比如搜索框内的引导词,搜索热榜,文章末尾的相关搜索,新闻资讯中的推搜索,搜索输入页的实热搜等等,这些都需要结当下热点和用户标签,才能够提高搜索推的准性。

搜索时的设目标可以归纳三点:

如何做好浏览器搜索设计?我总结了这9个建议

能不输,就不输

这主要是指要尽量避免让用户键盘输入。

家都知道移动手机,键盘小,屏幕按钮理手感理反馈,需高度集中精力可以完准确的输入。常看到人拿手机走走突然停下,始操作手机,因走操作很易发错误,只停下能保证操作的确性。且当人们途中时,手里可能还拿/扶东,只能被迫单手操作。这种环境下,我们必提供一些辅措施,让用户尽可能的避免键盘输入,这里给家提供一些避免键盘输入的几种方式。

如何做好浏览器搜索设计?我总结了这9个建议

第一,提供语音搜索或图片搜索,让用户可以通过简单的点击唤起搜索,并通过语音或扫描的方式完搜索信息的输入。

二,提供历史录。当用户想要次查询曾经输的内容,以通点击历史录搜索。历史录一定要考虑口录的合并,经常有用户反馈找不到历史录,是因为他们在不同的口进行搜索的,但软件却没有将录合并在一显示,导致用户从另一口进就找不到历史录。

第三,提供智能提示,用户复制个网址时,考虑到网址和浏览亲密性,可以考虑在复制瞬,自动弹出智能提示,用户可以过击提示,步网页,而需手动粘贴输入。

第,显示剪贴容,当户复制一个普通本进入到浏览器输入页时,可根据当的场景智的显示复制容,方户一键点击直达搜索结果页,避免户手粘贴输入。

非要输,便捷输。

这是指如果一定要户输入,就尽量户输入的操作更,更顺手。这里最的处方式就是供搜索联想词,而于搜索搜索联想词,我有个小建议。

如何做好浏览器搜索设计?我总结了这9个建议

第一,支持拼音联想,见即得,户可快速看到联想词条,并且可户减一次键盘点击,直接点击对应的联想词就发起搜索。

第二,凸显差异化的想词,让用户可以把视线焦点集中在差异化的词尾上,方便用户快速扫描对比想词,减少用户筛选的成本。

第三,无联词条时,出一条伪装联词,增强用户搜索的信,也方便习惯点击联词的用户,可以通过点击联词发起搜索(一始输入时,一般都会联词,随用户输入内的增多,可能可匹配的联词,下方就一片空白,会让部分用户误以搜索结果,所以出一条伪装联词,可以增强用户输入搜索的信)毕竟即使联词条,一般也都搜索结果的。

既已输,全显示。

当所的搜索输入框都单行文本框,不用户输入多少内,输入框的高度都不会发变化。当输入词超过一行以后,输入信息会自动滚,如果用户检查确认所输入的内,必须手动移动光标,去阅读所的文本。

种单行文框存在以下问题:

  • 用户无法直观的获取当所输入的完整内,不能速的检查搜索内的确性。
  • 当用户决定要检查输内容时,需要通左右滑动光标来查看内容,左右精度不太控,操不方便。
  • 用户左右滑动标时,始终能看见前后内容,比较考验用户短期记忆能力,而很容易和右侧关闭按钮发生误操作,用户体验不太友好。

如何做好浏览器搜索设计?我总结了这9个建议

考虑到单行文本框的这些特点,建议用自应高度的多行文本框作搜索框。未输入时显示单行文本框,当用户输入超过一行时则自应高度拓展一行。考虑到搜索引擎所支持的输入文字数38-40字,基本三行的文本框可以覆盖,所以可以将文本框的高度限确3行,超过3行后,可能框内滚动查看。因三行的显示区操作区都于一行,所以显示的完整性操作的便捷度都幅提高。

搜索设计目标拆下来也有三点:

如何做好浏览器搜索设计?我总结了这9个建议

无结果,要推荐

当用户发起搜索查询后,若果搜索结果,或者搜索结果少,或者不满足用户诉求时,建议给出推荐搜索。

如何做好浏览器搜索设计?我总结了这9个建议

比如Google虽然退出了中市场,但每日中使用Google搜索的用户仍然10W+,面对查询失败的结果,给用户推荐内搜索引擎搜索,就一不错的选择,它可以确保用户能渠道可查。

当用户选择某一个搜索引擎搜索时,果一直滑动到页面底部依没有找到合适的结果,以在底部提供其他相关搜索词,建议用户更换搜索词进行搜索,更用户找到精准的结果。

用户不切换搜索词,是始终未找到合适搜索结时,可以荐用户切换搜索引擎进查询。毕竟个搜索引擎爬取内容范围不样,而某些指定内容支持特定搜索引擎查询(比如微信内公众号信息支持搜狗搜索),切换搜索引擎,也有利用户找到更全结。

有结果,精匹配

搜索引擎结页,是各大搜索引擎商业和内容制衡结,毕竟个搜索公司都不是盈利组织,在其插入商业广告在所难免。此,搜索精准度排序,也是各个引擎公司优化。

浏览器一般只是接入搜索结果页进行呈现。由于商务及法律的原因,是允许修改搜索结果页的容及序的。如果想要在搜索结果上供更好的操作,各的做法,基本上都是在呈现搜索结果页之前,在户输入过程中,就通过联想匹配,直接给户呈现最相的结果,可方户一键直达结果(如应、影视等),甚至无需继续搜索,直接在联想页就得到最终结果(如天气)。

如何做好浏览器搜索设计?我总结了这9个建议

看详情,少干扰。

虽然搜索结页是受搜索引擎控制,浏览不能擅自改内容及排序,是到了结详情页,浏览相可控度会大很多。现在比较常见控制有两。

第:去广告。

根据艾媒咨询调研结论,国移动搜索用户最期望功能优化是减少页广告。

如何做好浏览器搜索设计?我总结了这9个建议

△ 艾媒咨询2018国移动搜索用户移动搜索使用优化期望调查。

数据来源:艾媒报告 | 2018-2019中国移搜索场监测报告 https://www.iimedia.cn/c400/63519.html

一浏览器都会做广告拦截,拦截的机制是保持有页面的基本结构不变,将页面中所能识别的各种广告,比如弹窗,悬浮广告,页面内插入广告等,全部清除(清除后可能用户无知,也可能用户会广告占位符)给用户一个相对干净的网页。

第二:排版。

摒弃有的页面结果,将用户兴趣的内容提炼出来,按照息内容的主次层,重新排版呈现,给用户造一种更加沉浸的页面浏览体验。比如Safari的清爽模式和vivo的说阅读模式。

如何做好浏览器搜索设计?我总结了这9个建议

以上就是浏览器搜索设计过程中的9个建议,围绕这9个设计建议,可展开很多具体的设计优点,如果有中没有到的,留言和我一起探讨。

欢迎关注作者公众号:「VMIC UED」

如何做好浏览器搜索设计?我总结了这9个建议

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

小溜Epik:目前搜索功能是每个应用产品不可缺少一部分,同时也是用户经常光顾到的功能。一个好的搜索设计能够提高转化率,提...
搜索方式
本文作者将从用户诉求、信息层级、界面表现三个层次上,试图对搜索和筛选两者的边界进行理清,并分别给出一些设计切入点。 一...
搜索技巧
概述 今天给大家分享海外浏览器视觉风格升级的案例。希望可以把整个产品改版过程中的沉淀以及总结经验分享给大家。整个项目从...
vivo设计
宜信大数据创新中心-UI 设计师李婷婷 :文章带大家一起了解如何通过设计提升搜索功能的视觉层次、情感体验、搜索效率等。 一...
搜索功能
新闻阅读是我们生活中息息相关的事儿~我们每天清晨醒来,是不是会打开惯用的app,看看又发生了什么,又有什么瓜可以吃?一不...
新闻设计
推荐算法出现之前,寻找信息的主场景是通过搜索获取。 用户通过搜索框,输入目标的关键词进行查询。这一过程是用户的主动行...
交互设计
“搜索”是产品中一个非常必要的功能模块,搜索就像为用户提供了一条便捷的绿色通道,方便用户快速检索内容。 搜索动作在 App ...
ui设计
推荐算法出现之前,寻找信息的主场景是通过搜索获取。 用户通过搜索框,输入目标的关键词进行查询。这一过程是用户的主动行...
交互设计