专业干货!一个特别好用的搜索框必须考虑的五个方面

专业干货!一个特别好用的搜索框必须考虑的五个方面,第1张

专业干货!一个特别好用的搜索框必须考虑的五个方面

品牌推广会用这些招数,7月份活动减500-1000元。

今天这个翻译开门见山。下面从搜索框可见性、范围搜索、本地搜索、高级搜索、输入五个方面来谈谈如何设计一个特别好用的搜索功能。附大量例子(想知道谷歌搜索有没有不好的交互)。结合实践,可以深入浅出的讲解,帮助你掌握网上搜索的这五个方面。

可见度

在UX领域,可见性是其基本概念之一:物体行为的潜在可能性可以从其外观特征中推导出来。比如门上的推板,表示门可以推;把手表示门可以拉。你有没有来到一扇门前,却发现打开的方式和你预想的大相径庭?(译者注:没错,我的大学是,但是每年HCI的课都会举例子,给人一种“我是故意的”高调的错觉)?这是由于事物的物理特征和实际功能不匹配造成的。

同样,搜索框的设计也要遵循其功能性。它的目的是允许用户以关键字的形式输入请求,所以它应该看起来像是可以输入的,并且有一个相关的键可以清楚地表明它的功能。它还应该足够宽以容纳更长的单词。

eBags.com的搜索功能结合了外形和功能。

一个不太常见的搜索框设计在basmatitree.net。

可见性的概念应该贯穿于用户体验的各个方面。然而,目前许多主流的网络搜索引擎为了彰显个性或品牌需求,选择了另类设计。例如,谷歌在主页上使用了两个按钮,包括一个莫名其妙的“我感觉很幸运”选项。两个按钮都在输入框下方居中,所有组件的边框都很窄,只能模糊地理解其功能。

简单的谷歌搜索框设计

然而,这些设计已经被大众所接受。毕竟这么多年来,凭借着谷歌的名声,人们似乎已经习惯了将这种所谓的“简单”作为其“优秀”品牌文化的诠释。首页搜索框的位置和布局只是临时的;只要用户在输入框中输入,页面的布局就会改变,结果和搜索框会跑到页面的左上角。搜索按钮的标签将变成一个放大镜图标。在此之前,作为搜索功能的一个动作按钮,它具有合格的可见性。

谷歌显示结果的页面上更常见的搜索框设计

Bing也在主页上提供了一个类似的居中搜索框。一旦进行搜索,搜索框等一系列组件将立即移动到左上角。

Bing结果页面上的搜索框

雅虎可能是所有这些搜索引擎中最正常的——它采用简单的布局和总是清晰的可用性按钮,这两者在搜索前后都相当一致。

雅虎搜索界面上的搜索框

这三个网站都将在页面加载后自动将光标定位在搜索框上,并且都允许用户通过点击Enter提交搜索请求。

此外,他们会在提交搜索后将搜索请求的内容保留在输入框中,这将允许用户确认其搜索信息,并为下一次相关搜索提供便利。

在互联网上,用户几乎可以搜索任何内容,除了在某些情况下对主题或内容类型有限制。在网站搜索中(例如,在特定网站中的搜索),这种限制经常随着更严格的图像而频繁出现。这是占位符文本和其他提示性标签被用来帮助用户只搜索有意义的关键词的时候。以Pipl网站为例。它告诉用户,他们可以通过占位符搜索姓名、位置、电子邮件、用户名或电话号码。当用户点击输入框输入文字时,这些提示文字会立即消失。

Pipl上的搜索框可以引导用户输入有意义的搜索请求。

范围搜索

在一些搜索应用程序中,内容通常以类别的形式组织。例如,易贝上的产品按其独特的内容分类进行分组。这使得用户可以在有限的范围内搜索特定种类的产品。例如,这里可以使用下拉菜单或其他类似的组件:

对易贝的搜索可以被限制在一个特定的商品类别。

允许用户在执行搜索之前选择一个类别,可以帮助他们更快地缩小搜索范围,并细化特定类别中的选项。比如你在易贝上的“汽车/摩托车/车辆”类别中搜索“高尔夫”,提炼结果的选项和在“体育用品”中找到的选项有很大不同(译者注:这里所说的“选项”不是搜索结果,而是一系列提炼搜索结果的选项,后面会提到)。范围搜索将对拥有领域知识的用户有很大的帮助,尤其是当他们知道自己在找什么的时候。

但这种方案并不适合目的性不强、领域知识较差的用户,他们可能一开始并不确定选择哪个类别。类别选择不当会直接导致他们搜索无关内容,或者范围缩小到零结果,从而降低意外找到有用信息的可能性。Craigslist网站提供了一系列的选择,但是如果你要找一个焦点小组,你应该选择哪个类别呢?

Craigslist上的范围搜索

正确答案是“其他工作”或“表演”。因此,从“所有类别”开始,而不是默认的范围搜索,将是一个更好的解决方案。

当一个已有的范围限制被默认应用于新的搜索请求时,这个问题会变得更加复杂(译者注:比如天猫进入某个店铺后,搜索框中“搜索我们的店铺”和“搜索全部”的区别。试想一下,如果现在只有“搜索我们的店铺”是一种怎样的体验)。例如,在WARC网站的“单词分析”类别中搜索“图表”,将会得到零个结果,但是相同的请求将会返回“所有类别”中的结果。在所有情况下,尤其是当搜索结果为零时,最好的解决方案是采用全局搜索,并在结果中清楚地显示当前搜索的范围。

当WARC中的范围搜索结果为零时,可以包括用于全局搜索的后退机制。

本地搜索

搜索框可以说是整个搜索体验的入口;在我们开始搜索之前,它真的是最显眼的东西。但很多情况下,我们会在所有搜索结果都跳出来之后,再进行一次关键词搜索,目的是从现有结果中找到我们想要的那一个。这时,我们可以通过再次搜索,对结果进行细化和细分。其功能类似于这个筛选菜单(译者注:前面提到过,比如通常由滑块组成的一系列菜单(价格区间/品牌/地点等。)和电商或房产网站某类产品左侧或顶部列表菜单中的单选按钮)。

鉴于此,本地搜索通常与过滤菜单成对出现。这时候一个页面上会出现两个搜索框,需要明确的标明它们的相互功能,然后可以用占位符等文字标签来引导用户。另外,由于搜索中使用的关键词起着筛选的作用,所以也要挑出来,在某个地方明确标注出来。

dabs.com的本地搜索是过滤器菜单的一部分。

另一种可能是将本地搜索框与标准搜索框合并,然后使用单选按钮或复选框在两种不同的输入模式之间切换。在这种情况下,切换的控制取决于当前情况(因此,如果本地搜索在当前页面/状态中不可用,则需要阻止该选项)。况且,用户勾选“本地搜索”后,当前搜索框中的文字应该会消失,毕竟与新的搜索行为无关。

bulbs.com的本地搜索显示为复选框。

鉴于用户在本地搜索时输入的特定简明条件可能与当前的任何结果都不匹配,我们应该做好零结果的准备。虽然这种情况已经很完美了,但是我们还是有很多手段可以解决这个问题,比如去掉不符合搜索条件的关键词,或者提供一些建议和工具让用户重新搜索等等。

高级搜索

所谓高级搜索,基本上就是提供一些比基础搜索框或者标准搜索体验更丰富的功能。通常,高级搜索的条目以普通搜索框旁边的链接的形式出现。

WARC的高级搜索是以链接的形式出现的。

当最初构思参数搜索时,它的交互是基于从一个不断增长的列表中选择参数的概念。默认保留一些选项似乎更容易理解,而不是用一个高级选项来表达。

WARC的高级搜索是填写表格。

但正因为如此,我们对搜索的理解发生了演变,让用户提前做出选择的方案失去了价值。如果你要和一个陌生人交谈,你会先问他们“我应该用什么语气?”(比如是随意还是死板)?一个高效的策略并不需要一开始就把你没有的东西都固定下来,只需要在你能察觉到的每一点对交互行为进行快速而有意义的微调,就像聊天时随时有意识地改变对话一样。

当然,总有一些应用或网站会把用户分成两个或两个以上的群体。例如,医疗信息网站既服务于医疗系统的专家,也服务于普通大众。在这种情况下,需要更灵活的策略来打造整体体验(如内容、导航等。)所有用户都能接受,而不是让搜索功能成为特定用户的特权场所。高效的搜索体验应该给所有用户“高级”的搜索工具,用户可以并且愿意随时以任何方式使用它们。遗憾的是,在现实生活中,上面提到的这些高级搜索例子并没有被充分利用,甚至没有必要。

除了关键字

目前,我们知道如何使用关键字进行搜索,但实际上,我们有许多其他不同的方式来表达信息。

自然语言

用自然语言问可能是最直接的方式,就像你在和另一个真人对话一样。这种互动是通过Ask(以前叫AskJeeves)这样的搜索引擎推广的。它同时结合了词和人的概念,创造了基于问答系统的搜索体验。

Ask上的自然语言问答

事实上,自然语言之前一直扮演着“杀手级应用”的角色——那是无数初创企业抢夺的蛋糕。然而,很少有公司对主流搜索体验产生持久的影响。这主要是因为NLP的算法改进还有很长的路要走。但这也反映了搜索体验本身的无数可能性:要支持人类在极其广阔的任务情境中搜索信息,我们需要推动一种开放、灵活、互动的对话形式。答案可能是一部分,但不是全部解决方案。对于某些类型的应用,类似于本地搜索的技术可以以比纯语言结构交流更“自然”的形式进行搜索对话。

但这并不是说NLP在搜索领域没有未来。相反,用对了地方就能大放异彩。例如,NLP技术目前正被用于一个充满希望和蓬勃发展的领域——各种提供客户服务的聊天机器人和交互助手,以及各行各业的其他类型的自动支持服务。在TrueKnowledge的网站上,NLP被应用到一个帮助用户理解问题含义的问答服务中。WolframAlpha还使用NLP来回答用户的问题,将计算出的答案和基于数据库分析结合相关数据的可视化图表结合起来。

WolframAlpha的自然语言问答系统

非文本请求

信息并不总是用语言或文字来表达。有时候图形媒体是更自然的方式,尤其是有先例的时候。在谷歌图片中,你可以通过图片搜索的方式发起搜索请求。

在谷歌搜索图片

同样,Like.com(现在是谷歌产品搜索的一部分)允许用户上传图片,以帮助描述难以用关键词表达的内容。除此之外,像Shazam这样的服务允许用户录制并上传一小部分音乐,然后通过其庞大的音频数据库来识别它属于哪首歌曲。

这些服务中的每一个都代表一种特定的搜索类型。但是搜索请求不需要是一个完整的东西。Retrievr允许用户通过手绘图形或线框找到相关信息。在Etsy中,您可以通过在调色板中选择颜色来进行搜索:

在Etsy中按颜色搜索

这些可供选择的输入形式提醒我们,尽管关键词可能是最简单的输入类型,但它们并不总是最自然的。有时候我们的信息需要超越语言。要根据整体情况来判断选择哪种输入法。

总结和练习

搜索框

形式应遵循其功能;设计控件时,应牢记可视性原则;

保持搜索框的位置统一,宽度足够容纳更多的词;

页面加载后,自动将光标聚焦在搜索框中,并允许用户通过回车键提交请求;

通过占位符和其他暗示性语言帮助用户建立有意义的请求(但要让它们在光标聚焦在输入框时立即消失);

完成搜索后,将请求文本保留在搜索框中。

范围搜索

范围搜索针对的是具有一定领域知识的用户。为了照顾到大家,这个功能不应该是应用中唯一的搜索方式。请确保默认情况下使用全局搜索;

如果某个类别下的搜索结果为零,则显示所有类别下的搜索结果作为回退机制;

同时,搜索结果应该清楚地显示当前搜索的范围。

本地搜索

如果本地搜索作为过滤器菜单的一部分出现,那么用占位符或其他指示性文本标签清楚地记录它的功能。确保在完成搜索后,您刚刚搜索的关键字会显示在某个地方。

如果是作为全局搜索的一个选项出现,请注意,这个切换机制与当前应用的整体情况密切相关。此外,当“本地搜索”被选中时,原始搜索框中的输入文本应该会消失。

高级搜索

看高级搜索的基本原理,尤其是考虑一个定制化的体验对一个专家用户来说是不是更好的解决方案,而不是“拍脑袋”决定让搜索华丽起来。

除了关键字[/s2/]

有时候我们的信息不仅仅是以文字的形式呈现。在选择输入法时,要注意与媒体的匹配。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zz/779171.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-04
下一篇 2022-05-04

发表评论

登录后才能评论

评论列表(0条)

保存