如何在用户界面中设计有效的搜索功能

搜索可用性是网站和移动应用获得用户体验的关键因素之一。特别是那些包含很多项目供您选择的项目,例如新闻,博客,电子商务商品,艺术品等等。我们今天的文章提供了一些有用的见解和设计实践,以使内部搜索直观易用。

什么是内部搜索

内部搜索是一种功能,可浏览网站或应用程序内部的内容,并根据其搜索查询向用户显示该内容。正确调校后,它会显示相关内容,并以此方式为用户提供所需的快捷方式。因此,内部搜索节省了用户的时间和精力,扩大了数字产品的可用性,支持了用户留存并提高了转换率。

在用户界面中负责内部搜索的交互式元素是搜索字段。搜索字段(也称为搜索框或搜索栏)提供了界面元素,该界面元素使用户可以键入搜索查询,并以此方式查找所需的内容。

食品配送服务的网站在标题中具有搜索控件

 

何时使用内部搜索

何时使用内部搜索

无论界面导航多么出色,如果您的网站或移动应用由50多个页面组成,那就该考虑应用内部搜索了。精心设计且易于查找的搜索字段使用户无需浏览众多页面和菜单,即可跳转至必要的位置。这种方法现在是用户行为的一种常见模式,它尊重用户的时间和精力,因此在用户友好的界面中对此有很高的要求。

为什么进行内部搜索很重要?网络和应用商店中不断增加的资源为现代用户提供了各种各样的选择。如果访问者已经访问过您的网站,则您的任务是尽快为他们提供他们想要的东西。在大多数情况下,用户(尤其是来自外部搜索引擎的用户)进入具有特定目标或查询的资源,而又不想花费大量时间寻找它。搜索使他们能够使过程更加专注和有效。

但是,在设计搜索可用性时,请不要犯相反的错误:不要在用户界面中将搜索优先于导航。基于上面提到的所有内容,设计人员可能会认为搜索是值得关注的最佳且唯一的交互元素。那是一个大错误。尽管许多用户确实尝试通过搜索更接近其目标,但也有一些用户可能在搜索交互方面遇到问题。例如,他们对某种语言的了解不足以构成正确的查询,对他们来说很难键入内容,或者他们只是讨厌思考文本查询,而宁愿遵循已经存在的导航和提示,比通过搜索与系统进行通信的认知负担更大。

考虑到这一点,力求在导航和搜索之间保持良好的平衡。

卖昆虫的电子商务平台在标题中具有开放的搜索字段

 

有效搜索的核心特征

使搜索交互更加清晰直观有不同的细微差别,但是以下三个功能是内部搜索要考虑的核心点:

1、它应该立即可见

2、作为搜索功能应该很清楚

3、它应该显示相关内容

UX搜索设计实践

将搜索字段放置在最可见的交互式区域中关键设计问题之一是在界面中放置搜索图形控件。在网页设计中,搜索字段通常可以在网站的标题中找到,这是一个不错的选择,正如我们在专门针对以下内容的设计实践的文章中提到的那样:网站标题,对于任何网站来说,它都是可见度最高的区域,因此在其中放置搜索字段可以使用户快速转移到他们真正需要的页面,而无需在网站上漫游和向下滚动。

例如,对于大型电子商务网站通常由具有特定目标,所要寻找的特定目标的用户访问-如果无法快速方便地找到它,则存在很高的风险,即他们将降低资源的获利能力。此外,还应考虑到习惯和思维模式的力量:由于许多网站都在其标题中进行搜索,因此用户习惯于在需要时在此处查找它。

专门介绍甜点食谱的博客在标题中带有搜索图标

 

将搜索字段隐藏在首屏区域(仅向下滚动页面后才可见的页面部分)或页脚中,会增加大多数用户根本看不到它的风险。但是,在页眉和页脚中使用搜索控件都可以有效地工作,尤其是在网站不使用粘性标头的情况下。在这种情况下,向下滚动到页脚将使用户不需要重新搜索内容。

谈到移动界面中的搜索领域,情况有所不同,因为设计人员在可用空间方面的限制更大。如果该应用程序基于大量内容,并且搜索是交互的主要元素之一,则可以在标签栏轻松到达。如果搜索对于用户目标和应用程序的可用性不是至关重要的,则可以将其隐藏在菜单中。

 

内容丰富的菜谱应用程序在屏幕顶部设有搜索字段,带有搜索图标和文本提示,使其功能非常清晰。此外,下面的标签有助于更好地调整搜索。

 

Gallery 应用程序在选项卡栏中具有搜索图标,允许用户快速访问它

 

使用清晰的可识别图标

在交互设计方面,可以用不同的方式来显示搜索字段,从带框的选项卡到交互式输入行,甚至是一个极简的可单击图标。在大多数情况下,搜索字段会以带有放大镜的图标标记。该符号可被众多用户识别,因此它已被证明可以有效地设置直观的导航。

Daily Poetry 网站在标题中具有搜索图标,并且由于颜色对比而使其超级可见

 

提供文字提示并自动填充

文本提示是向用户提示有关特定界面元素的交互性和功能的好方法。每个人都知道的经典示例是Google搜索,它可以在您输入查询后立即为您提供选项。这样,您可以减少填写搜索字段的时间,并让用户更快地开始与内容的实际交互。当然,根据最受欢迎和最相关的查询来调整自动填充是很合乎逻辑的。

Tubik 博客中的搜索会打开一个简约的新页面,将博客主页作为背景模糊。用户获得带有文本提示“键入搜索”和显示表单是交互式的脉冲光标的大搜索字段。此外,还有带有流行查询的可点击标签。

 

立即提供选项

交互流程也可以通过下拉菜单提供支持,该下拉菜单在用户键入查询时提供了可能的选项。除了自动填充功能,这些还可以是功能强大的相关商店商品,新闻,博客等的摘要。

卡路里计算器应用程序的搜索交互

 

使用过滤器调整搜索

如果网站上的内容强度很高(想象亚马逊有成千上万的商品),那么即使是精心设计的搜索查询也可能不够用,因为它会在搜索结果中带来太多选择。在这种情况下,过滤器可以支持交互流程,并允许用户更好地调整搜索条件:例如,在电子商务平台上,过滤器可以根据价格范围,特定品牌,产品的特定特征来缩小搜索结果的范围。

以下是 Wallmart 网站上搜索过滤器的样子:搜索结果页面左侧有一个侧边栏,允许用户通过微调缩小选项列表

 

因此,内部搜索是为网站访问者或应用程序用户提供良好用户体验的高度重要的元素。使其直观,利用习惯的力量,考虑上述几点,以改善用户界面的搜索体验,并努力实现搜索与所有其他导航的良好平衡。并且不要忘记分析内部搜索结果:他们会告诉您用户需要什么并在您的资源上寻找。

作者:by Marina Yalanska

本页面最后更新于 2021年06月30日 10:33