找寻设计的最佳实践

翻译心得:

哪怕是看起来非凡简单的检索功用的计划性,都包含着分外多的底细,每一个细节都可能影响体验。
何以去考虑到这么多的细节呢?除了在规划过程中尽量考虑清楚多情形、多角色和多环境的意况,还有针对每一个世界都多多参考一些经验法则。

检索就像是用户与使用或者网站之间的一场对话:用户通过询问表达他们的音讯需要,应用或者网站以一组搜索结果作为回应。用户在搜索时期待流畅的感受,并且他们屡屡依据一两组搜索结果的质料就会对应用的价值做出飞速的判定。

在统筹搜索和查找结果背后的UI时,有诸多工作需要考虑。为了方便阅读,我将这篇作品分为多个关键部分:搜索框设计和结果页布局。尽管遵照你的急需和目的的不等(比如,对于你的网站来说搜索可能是个基本点的/次要的风味;提供平行选项可能是个不利的或者福利的选项),确切的指出未必适用,但仍然有一部分适用于广大不同系列的运用和网站的通用技能。在我们开首从前,先问一个重要的题目:哪天你会需要摸索?

咋样时候应该(或者不应有)在网站上提供查找

越小的网站,不提供查找可能越好。对于一个情节少于(比如,少于100-200页)的网站以来,不需要寻找。

当网站变得进一步大和复杂的时候,搜索就变得更为首要。电子商务网站或者是提供查找的最常见的事例,因为用户在摸索具有一定属性的产品。在打的电商网站,搜索栏会相差网站头部并在界面中担当一个核心角色。多达30%的访客会使用网站的追寻工具,并且设有完全清楚自己想找什么样的高动机的购物者。

2018正版葡京赌侠诗 1

对此那几个通过消息传递提供劳动的网站(新闻门户网站),以及提供航班、旅程、交易的预约服务的网站以来,搜索是少不了的。

2018正版葡京赌侠诗 2

当你拜访Skyscanner的主页,注意力会首先集中在搜索框

搜索框设计

搜索框是输入区和交给按钮的组合。有人或许会以为搜索框不需要统筹;无论怎样,它唯有多少个大概的因素。不过因为搜索框已经成为了以内容为主的网站中使用率最高的计划性因素,它的可用性就变得更为关键了。

更分明地出示搜索框

搜索框设计中最重大的条条框框是,让它可被发现。如若搜索在您的运用或者网站中是一个关键职能,这它就相应充足显眼,因为它是意识内容的最快路径。

2018正版葡京赌侠诗 3

封存开放的文书输入区。用户愿意可以很快输入搜索词。

将寻找隐藏在按钮下边会带动一些负面结果:

  • 让追寻效果不便于被注意到。假使没有应用一个怒放的文书输入区,搜索就会占有更少的岗位。从视觉上,它就会变得愈加不显然所以很难注意到。
  • 充实了交互成本。也就是说,为了进入搜索框用户需要做额外的操作。

2018正版葡京赌侠诗 4

毫无用渐进展开的物色按钮因为内容会被挡住

利用放大镜图标

从概念上,图标是一个实体、动作或者想法的视觉代表。用户对有些图标具有最通用的回味。放大镜图标就是其中一个。尽管没有文字标签用户也会以为放大镜图标代表搜索。

Tip:使用最简单易行的放大镜图标,因为压缩图片细节可以加快辨认。

2018正版葡京赌侠诗 5

将搜索框放在用户期望的岗位

至于网站上的搜索框的极品地方有一部分相接的争辨。不过过多资深网站比如YouTube、Amazon、IMDB、BEST
BUY都将搜索框放在顶部中间如故页面右上角的职位。A. Dawn Shaikh和Keisi
Lenz
开创了一个图片,显示了网站搜索框的预料地方,数据来自他们做的一个蕴含142个被试的考察。研讨发现对用户来说最方便的点是网站每个页面的右上角或者左上角,用户采用相似的F形扫描情势可以很容易地找到。倘若把搜索框放在用户不希望的岗位,意味着用户需要花费额外的肥力去寻觅搜索框。

2018正版葡京赌侠诗 6

用户在右上角寻找搜索框,假如没有找到,他们就会扫描页面顶部

Tip:使用热图或者眼动追踪工具去琢磨用户作为。这会扶助您鉴别出用户注意的地方。你可以把搜索框放在非常地方。

为搜索框提供一个寻觅按钮

虽说经过按下Enter键也能随意地起身搜索,有局部用户依然会寻找一个观念的“搜索”按钮。同时这也同意用户通过传统的探寻按钮触发搜索,尽管他们最后选项采纳Enter键。

2018正版葡京赌侠诗 7

Tips:

  • 2018正版葡京赌侠诗,保证搜索按钮的大小适当,别让用户需要规范地运动鼠标或者手指举办点击。更大的可点击区域可以让点击更加便于。
  • 让用户通过Enter和点击按钮提交搜索。很多用户仍然保留着点击按钮去付出搜索的习惯。为了避免键盘可及性问题,需要对表单举行测试。键盘测试的底蕴很粗略——Tab键可以用来在表单控件之间导航,Enter键可以用来选中元素。
彰着用户能检索什么

在输入区中富含一个简单的搜索查询以指示用户可以什么查询,这是个正确的主意。假诺用户可以通过多种原则搜索,可以应用一个输入提醒来表达。然则保证限制搜索提醒的篇幅,否则会加强认知负荷。

占位符文本可以很好地擢升用户可以寻找什么。

2018正版葡京赌侠诗 8

并且,正如麦克Madaio近来涉及的,在少数景况下,占位符文本会带来可及性问题:当占位符文本在颜色上被设计得更淡时,会造成相比较问题——无法满足网站可及性的通用规范(普通文书保持4.5:1的比重)(译注:在白底上的浅褐色文本无法满足网站相比较度要求)。此外,依据W3C,占位符文本不可能被救助技术很宽泛地协理,提高了那一个用户不利地输入表单的难度。

在每个页面上停放搜索框

Tucker
菲茨杰拉德(FitzGerald)(FitzGerald)在另一篇著作中强调了让用户在每个页面都能触达到搜索框的必要性。用户最可能在他们找不到温馨想要的情节时行使搜索框。对于像404如此的远非开腔的页面来说尤为如此。

2018正版葡京赌侠诗 9

推特的404

适量的尺寸

输入区域太短是设计师常犯的荒谬。当然用户在端的输入区中或者得以输入长的搜索词,可是输入框中两遍只可以展现文本的一片段,这就是糟糕的经验,因为用户不可知检查或者修改总体的搜索词。事实上,假设一个输入框可以看出的字符数有限,用户会襄助于接纳短的、不规范的搜索词,因为长的搜索词不便于阅读。倘诺输入区可以遵照预期的输入来规定尺寸,对用户来说就会更便于阅读和演讲。一个经验法则是在输入框中突显27个字母(将搜索框延伸到27个假名的尺寸可以满意90%的搜索词)。

2018正版葡京赌侠诗 10

Google的搜索框充足容纳长句

2018正版葡京赌侠诗 11

亚纳逊的输入框很大,因为几乎所有人都会首先使用搜索

Tips:

  • 用em设定宽度,不要用px或者pt。一个em就是一个m字母的冲天和宽度(不管网站使用什么字号)。
  • 即便急需保留空间,同时需要让搜索框分明,使用增长型的输入框,当用户点击的时候会进展。这可以节省屏幕空间,同时给用户充裕的视觉线索去发现和施行搜索。
![](https://upload-images.jianshu.io/upload_images/4717279-9a8980b4460bc75e.png)

当用户点击时,输入框延伸以保证用户可以输入搜索词
运用机动提议机制

自行提出是一个可以减弱数量输入的强有力工具。设计师通常认为自动指出机制是为着增强用户输入的进度,不过它实际上可以帮助用户创造他们的寻找语句。典型的用户都很不善于构思查询内容:如果她们在第一次尝试时没有博得所需的结果,之后的追寻尝试也很少会马到成功。尽管自动补全指出运行非凡的话,就可以扶持用户创制更好的查找查询。

2018正版葡京赌侠诗 12

Tips:

  • 担保活动指出是行得通的。设计得不得了的自动提议反而会迷惑和分散用户注意力。所以,使用拼写自动校正,识别跟词以及可预测的文本以提高机关提议工具的效应。
![](https://upload-images.jianshu.io/upload_images/4717279-062804765b59c176.png)
  • 指出的个数不要超越10个(并且不要接纳滚动条),不要造成信息过载。

  • 提议的列表要允许键盘导航。当用户滚动到最后一项时,应该力所能及回到到列表顶部。允许采纳Esc退出列表。

  • 明明有别于输入的音信和指出的新闻。比如,输入的文件使用正式的字体,而指出的文书使用粗体字。

  • 为品种添加图片预览以及文字描述,以增强指出的效益。

2018正版葡京赌侠诗 13

LED HUT通过在自动指出中进入了图片预览,从而加强了搜索转化率

结果页布局

在扶持用户尽可能快捷、简单和纯粹地输入数据后,你现在的目的应该是以清晰的和易于阅读的体制去提供最精确的查找结果。结果页是寻找体验的重大部分:它提供了机遇去引发出一个得以带领用户的新闻需求的对话。

无须在用户点击搜索按钮后逃匿用户的查询

保存原来的文件。重新输入查询在诸多信息旅程中是受到诟病的步子:假诺用户没有找到她们想要找的信心,他们可能会想要通过调整查询词重新寻找。为了让用户越来越便宜地成功这件事,把原来的搜索词留在搜索框中,这样用户就不需要再次输入完整的查询词了。

为您的音信采纳一个确切的布局

展现搜索结果的挑衅之一就是见仁见智类此外情节需要不同的布局。二种基本的始末显示布局是列表视图和网格视图。经验法则:呈现细节用列表,显示图片用网格。

让我们在产品页面的条件中检查一下这多少个原理。在甄选列表视图和网格视图时重点的要素时用户在选拔产品的时候需要多少信息。对于像电气用具这样的产品,用户接纳产品时最要紧的要素时模型数量、等级和维度,这时列表视图最合适。

2018正版葡京赌侠诗 14

列表视图更合乎细节导向的布局,对于高规格的成品的话在结果页中涵盖产品介绍可以帮忙用户挑选

网格视图适用于当用户接纳产品需要考虑的出品音讯较少时。网格视图对于类似服装这样的产品来说很常用,因为用户一般经过产品的外观而不是文字描述来做决定。对于这多少个类此外成品,用户在意的是成品之间的视觉区分,而且更愿目的在于一个独门的长页面滚动而不是再次地在列表视图和产品细节页面之间转换。

2018正版葡京赌侠诗 15

网格视图更契合视觉导向的布局

允许用户为寻找结果选用列表视图或者网格视图。这让用户可以挑选以团结更欣赏的点子浏览结果。

2018正版葡京赌侠诗 16

显示匹配结果的数目

体现搜索出来的结果的数额,以便用户可以控制他们要花费多少长度期浏览结果。

2018正版葡京赌侠诗 17

匹配结果的数据让用户精通咋样重新询问

呈现搜索过程

完美图景下搜寻结果应当及时表现,但是假若做不到,应该运用过程指示器作为给用户的类别反映。你应当让用户清晰地领会他们还亟需等多长时间。

2018正版葡京赌侠诗 18

Aviasales网提醒用户搜索需要花费一点时光

Tip:假若搜索花的时日相比长(超过10秒)你可以接纳动画片。好的卡通片可以分流用户的注意力并且让她们忽略了查找的光阴较长。

2018正版葡京赌侠诗 19

毫不回来“无结果”

把用户丢在一个显得无结果的页面会令人备感心寒,尤其是她们早已尝试寻找了几许次时。

在无结果页面上,你可以经过下边的两点协理用户进行修补:

  • 清晰地解释没有匹配的结果。
  • 提供后续提升的起源(比如,在线公司可以从一般的档次里提供可选产品提议)。
![](https://upload-images.jianshu.io/upload_images/4717279-a0bb99bcd7cd142a.png)

在HP的例子里一个“无结果”页面对用户来说没有出路。而形成鲜明对比的是亚马逊在无结果页面中使用了内容类别或者搜索词建议。
提供筛选和排序选项

当搜索结果看起来跟搜索词没有关联时,用户是感到崩溃的。筛选和排序可以匡助用户筛选数据。

  • 排序和筛选不是一律的。不要把排序效率隐藏在筛选效率中——它们是四个例外的职责。不像筛选,排序不会限制显示怎样内容,而是改变了结果表现的依次。
  • 限制可视的筛选选项数量。因为大家的长时间记忆只可以将很少多少的信息(一般在7个档次仍然更少)保留很短的年华,所以并非采取太多信息让用户超负荷——同时出示不多于7个可视的筛选选项。假使你的搜寻需要广大筛选选项,就将内部部分默认折叠起来。此时需要加上一个链接“查看所有筛选器”确保它们都足以被触达。
  • 对筛选器排序。定义你的网站的中央搜索标准,并且依照这些发现去协会筛选器。比如,Airbnb知道大多数人采纳价格筛选器,所以她们将它放在了顶部。
  • 保险排序逻辑对用户来说丰硕清楚。当显示了大气结实时,用户想要搞精通的第一件事情就是排序规则。
  • 知晓地出示怎么筛选选项被接纳到了探寻结果中。当用户举办了筛选后,在结果页顶部清晰地显示筛选范围。
![](https://upload-images.jianshu.io/upload_images/4717279-6c329f81478a7a19.png)

好的查找就是好的经验

对于开创一个内容为主的接纳或者网站来说,搜索是一项核心运动和重要的元素。固然一线的转移比如输入区的适宜大小如故提出可以搜索哪些音讯都能强烈地增进搜索的可用性以及完整的用户体验。

翻译自:http://www.uxbooth.com/articles/best-practices-for-search/

发表评论

电子邮件地址不会被公开。 必填项已用*标注