如何设计出一个完美的搜索框

小编:UI设计是一个不简单的工作,我们不仅需要把产品设计的好看更要注意它的用户体验。从一个产品的整体感受到一个按钮的展现形式都在我们的考虑范围,所以我们不能忽视每一个细节。今天就带大家来研究一下一个完美的搜索框是如何被设计出来的!

所谓搜索框,实际上就是一个输入域和提交按钮的组合。有人可能会认为搜索框并不需要设计, 毕竟它只涉及到两个简单的元素。然而,在那些重内容的网站上,搜索框常常都是用户最用到的设计元素。当用户遇到一个相对复杂的网站时,他们往往会首先寻找这个网站内的搜索框,以便能快速高效地到前往自己想去的页面或找到自己最为关心的内容。因此,搜索框的设计及其可用性问题其实是一个不容忽视的要点。

在这篇文章中,我们将看到该如何改进设计搜索框,以减少用户所需要花费的查询时间。

一个搜索框应该始终与放大镜图标放在一起。所谓图标,其实就是代表着一个对象、动作、想法等多种含义的图形符号。我们通过图标看到的不仅仅是图标本身,而是它所代表的内在含义。然而,对于用户来讲,具有通用性代表含义的图标为数并不多,幸运的是,放大镜图标正是其中之一。

提示:使用示意型的图标即可,这也是最简单的放大镜图标版本。更少的图形细节能够加快用户的识别效率。

如果搜索是你的应用程序/网站的一个重要功能,那么搜索框的显示务必要足够显著,以保证用户能够最快的发现它。

直接显示完整的搜索框很重要,因为默认只显示搜索图标(点击图标才展开搜索框)的话会使搜索功能不那么明显,而且增加了用户的交互成本:

搜索按钮可以帮助用户识别出触发搜索操作的下一步——即使他们可能往往会通过按Enter键来执行此操作。

提示:

1)提交按钮的尺寸大小要合适,以便用户不必非常精确地移动鼠标位置到它上面。较大的可点击区域会使得按钮本身更容易被发现和点击。

2)使用Enter键或点击搜索按钮都应该能执行搜索操作才对,毕竟许多用户仍然有点击搜索按钮来提交搜索的习惯。

用户在每个页面上都应该能获取搜索框,因为如果用户找不到他们要找的内容,他们往往会自然而然地想要尝试使用搜索功能来进行查找,他们才不关心自己当前是在你网站的哪个地方(以及该不该有搜索)。

如果你设计了一个搜索框,请确保它看起来确实像是一个搜索框,并且使用起来要足够简单。可用性研究表明,默认情况下不显示高级搜索选项对用户会更加友好。高级搜索选项(例如下面的示例中的布尔搜索查询)可能会混淆要尝试使用它的用户。

如果因为搜索框不够突出、不容易察觉,用户还得花费精力去找它,那这个设计无疑是不够友好的。

下面的图表来自 A. Dawn Shaikh 和 Keisi Lenz 的一项研究:它显示了参与调查的142名参与者针对网站中的搜索表单的位置的预期情况。研究发现,对于用户来说,搜索框最佳的位置是网站上每个页面的左上方或右上方——用户可以使用常见的F形浏览模式轻松地找到它。

因此,最好将搜索框放在页面的右上方或中上方,以确保用户能在预期的位置找到它。

提示:

1)理想情况下,虽然搜索框在用户需要的地方应该能轻易出现,但是搜索框的设计也应该完美地契合网站的整体设计效果。

2)内容越重的站点,你越希望搜索框显著。如果搜索对你的网站至关重要,请使用大的对比度,以便搜索框和图标能从页面背景和周围元素中脱颖而出。

输入框太短是设计人员常犯的一个错误。当然,用户可以键入长查询,但一次只能看到一部分输入的文本,这自然也就存在可用性问题,因为用户无法轻松地回看和编辑其刚刚才输入的查询条件。事实上,当搜索框具有有限数量的可见字符时,用户会被迫使用短的、不精确的查询条件,因为更长的查询条件将不易阅读。 但如果输入框的长度是根据用户的预期输入来确定大小的,那对用户而言就友好多了。

表明一个可以输入27个字符的输入框是比较合适的,它能够适应90%的查询条件。

提示:不妨考虑使用扩展型的搜索框,它会在用户点击时展开文本输入框。这种做法一方面节省了屏幕空间,同时仍能给予用户足够的视觉提示以便他们快速找到并执行搜索。

自动检索匹配机制可根据用户输入的字符进行预测来帮助用户找到一个可能匹配的查询条件。 该机制并不是为了加快搜索过程,而是为了引导用户并帮助他们构建他们的查询条件。普通用户在构建查询方面往往会有困难:如果他们在第一次尝试查询后没有获得满意的结果,后面的查询也会很难顺利,事实上,他们常常就会放弃。而当自动检索匹配机制运作顺利时,它们就能帮助用户将查询条件表达的更加清楚。

Google 搜索自2008年起就已经开始应用该机制,现在已经相当成熟。由于用户常常会多次搜索相同的内容,因此通过记住搜索记录,Google既节省了时间成本又能创造出更为便捷高效的搜索体验。

提示:

1)确保自动检索匹配机制是有效的,若设计不当,就可能会混淆和分散用户的注意力。因此,不妨使用自动更正拼写错误、根词识别和文本预测等做法,来改进这种机制发挥更好的作用。

2)你应该尽快提供自动检索匹配,例如在用户输入第三个字符后就提供有效匹配以减少用户的输入成本。

3)匹配的查询条件不要多余10个(而且不要显示滚动条),以保证信息不会变得过载。

4)允许使用键盘在匹配的条件列表中导航。一旦用户在最后一个项目中接着向下滚动,他们应该重新返回到列表的顶部。另外,Esc 键应该允许用户退出列表。

5)突出输入部分跟匹配部分的差异(例如,输入文本具有标准字重,而匹配部分使用粗体字重)。

在输入框中显示一个搜索查询的示例条件是一个不错的做法,这样能够向用户表明他们究竟可以应用该搜索框搜索哪些/哪类内容。 如果用户可以搜索多个条件,则使用输入提示模式来向用户说明(例如,下面示例中的IMDb。 HTML5 技术使得我们可以很轻松地在输入框中写明作为占位符的提示文本。

对于创建一个重内容的应用程序或网站而言,搜索理应作为一个基本的操作和关键要素。即使小幅的改进(例如使搜索框长度更合适或者指明可以搜索哪些信息)都可以显着增加搜索的可用性以及整体的用户体验。

uxplanet

译文地址:简书

译文作者:三达不留点gpj

(0)

相关推荐

  • 一个优秀的搜索框必须考虑的五个方面

    今天@励定洲 这篇译文开门见山,从搜索框的可见性.范围搜索.局部搜索.高级搜索以及输入五个方面聊聊如何设计出一个特别好用的搜索功能,内附大量实例(想知道谷歌搜索有哪个交互不好吗),结合实践,深入浅出, ...

  • 交互设计之(二)搜索框设计

    在交互设计中,各个不同的场景需要不同的搜索框设计.搜索框是一种常见的交互控件,用于精准提取海量的信息中的准确内容.搜索框几乎存在所有的网站和APP中,尤其是海量内容为导向的产品之中,例如音乐库.电商网 ...

  • 如何设计出一个优秀的LOGO?

    @畅游VC:如何做一个Logo?如何做一个好的Logo?这已经是一个老生常谈的问题了.好多大神巨神都有自己的观点.自己的看法.今天我也来班门弄斧下,总结总结自己关于Logo的一知半解. 什么是Logo ...

  • 教大家PPT设计出一个大气的数字

    数字是PPT主要的构成元素之一,通常用来表达数据,比如常见的人数.金额等,或者作为序号来引导阅读,比如时间.目录.导航等. 当我们将数字作为PPT的主体时,可以形成很强的冲击力,短时间内让观众产生记忆 ...

  • 干货!最全优秀搜索框设计案例

    面对纷繁复杂的网页内容,用户通过查询关键词表达需求,期望在响应的查询结果中快速获取准确的信息和流畅的用户体验.用户与网络世界的万千联系都是从搜索开始的.搜索框之于用户就像是用户与应用或网站之间的对话窗 ...

  • 设计师眼中的搜索框小细节

    激活搜索框.输入搜索关键词.点击搜索按钮这一系列非常自然的动作看似很简单,背后的故事不少. 之前笔者发表的<搜索之前>介绍了用户使用搜索的原因,不同的用户群是怎么在页面中找到他们需要的信息 ...

  • Win10怎么关闭小娜搜索框?关闭Win10小娜搜索框的方法

    Win10怎么关闭小娜搜索框?Win10系统的任务栏中有一个小娜搜索框,通过她可以方便的完成搜索,但是这个框占用了大量任务栏空间,下面小编就给大家带来关闭Win10小娜搜索框的方法,一起来看看吧. 1 ...

  • 怎样用CorelDRAW快速画一个完美的太极图

    下面详细的介绍一下如何用CorelDRAW快速画一个太极图,对于CorelDRAW不熟练的朋友,也可以按此教程画出一个完美的太极图. 操作方法 01 在电脑上打开CorelDRAW软件,选择" ...

  • 两步轻松揪出Windows7搜索框

    两步轻松揪出Windows7搜索框