飞雪踏浪

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://lengfeixue.blogbus.com/logs/37308913.html

先插一句，文章作者是java高手~~

尽管很多用户的搜索行为都是偶然的，但差不多有一半的用户都是那种“搜索狂”，他们直接去搜索，而从不看网站其他的导航。搜索结果页有着如此庞大的用户群，它的可用性可以说是整个网站的关键。

这一点在电子商务网站体现的淋漓尽致。但即使是大型的购物网站，像搜索结果页这样重要的页面也充斥着过多的视觉噪声或不恰当的分类和过滤选项。设计很好的搜索结果页是非常重要的，它可以帮助你的用户很容易找到他想要的东西，并再次访问你的网站。

过多的数据

很多购物网站都有的通病：过量的原始搜索结果没有经过任何加工。为了让用户最大限度的“冲动购买”，许多网络公司都为用户的搜索提供尽可能多的东西，以及各种绚烂的营销策略，致使他们忽略了最根本的用户体验：让用户最快的找到他想要的东西。

正如Krug说的，“如果这个东西很难用，那我不会再用它了。”相信任何人遇到一个很难用让人很沮丧的网站都不会想再访问它。

想要让用户再次访问你的网站，那么所有与成功交易相关的页面都应予以重视并重点设计。其中最常用的就是搜索结果页。要想满足用户目标以及他的心智模型，有两点很重要：提供正确的排序方式和过滤选项。但接下来你就会发现提供“正确的过滤选项”并不是一件容易的事。

正确的过滤选项：所有用户的需要，仅此而已

设计师Milton Glaser曾经说过“少并不是多，够用才是多（Less is not necessarily more...just enough is more）”。想遵循这个原则可不容易。要想提供“够用”的功能，设计师必须找一个特定的用户，充分理解他的需求和行为。

下面举个例子。我的朋友很喜欢烹饪，尤其是做巧克力。在她生日那天，我想送她一本图文并茂价格在5美元以内的制作巧克力教程的书。我很明确我想要什么：
媒体类型：书
分类：烹饪
主题：巧克力/甜点
价格范围：0到5美元
排名：用户关注度最高/畅销书

可以看到，为了满足我的需求，同时提高搜索结果页的可用性，只要加上两个过滤条件就可以了：分类和价格范围。两个条件中任何一个都可以大大减少搜索结果的数量。加在一起就可以帮我把搜索结果减到最少。这样的过滤既节省了搜索时间也能让我成功的完成购买任务。

值得注意的是，过滤本身对于大部分用户来说都是个陌生的概念。因此Krug提出，一个好的搜索过滤选项应该设计成用户自己的语言，自然的语言，读起来像一个句子，比如：Search ____ for ___________ in ___________ Price from $___ to $___"
Figure 1.

要设计好的搜索过滤不是件容易的事。像图1中的例子相信可以帮助像我这样的用户快速完成任务。但是，这种方式是否适合所有的用户呢？对于访问网站的新手用户来说会不会产生迷惑？或是给页面增加噪声？光猜是没有用的，要想做个好设计，就要去密切了解目标用户群。

Cooper介绍persona是“一个确切的描述型用户模型，描述用户想要完成什么以及为什么。”使用persona可以帮助设计师明确哪种用户是最重要的——设定一到两个“主要人物角色”。再设立几个“次要人物角色”来辅助。这样，要设计一个“够用”的产品就是要满足主要人物角色的需求，同时不会给次要人物角色带来不便。

不论你是否使用persona的方法，在设计过程中不断的请真实用户进行可用性测试是十分重要的。可用性测试一定要经常性的实施，并且是在设计初期越好，可以使用标准的html或仅仅是低保真的纸面原型。人物角色的方法再加上频繁的可用性测试是最具效益的方式，确保你的产品可以完成用户的需求。

分类过滤应该用链接

分类过滤的一个很流行的方式就是采用下拉菜单。这种控件很容易实现，但是在搜索前期这种控件通常是毫无意义的。现在亚马逊有35种分类，很少有人能把这35种分类全部浏览完再选择与自己相关的类别。如果用户有时间有耐心读完所有的类别，那他就用不着搜索，直接浏览好了。

分类过滤的关键不是缩小类别范围而是要让搜索结果更受控，这样用户可以轻松的从精简但相关度高的列表中选择与自己更相关的类别。通常，包含搜索结果最多的类别显示在第一位，其他相关分类顺序排列在后面。为了让用户更加理解这种排序，在每一个类别名称后面加上商品数目。在我们的例子中，“烹饪”明显是拥有最多商品的类别，放在第一位最容易点击的位置。

正如我之前提到的，过滤的概念对于很多用户来说都是陌生的。一个通用的过滤控件应该是类别链接，如图2。
Figure 2.
 

链接方式有如下几个好处：

1.可视并且用起来很直观
2.它们是最普遍接受的网站导航形式
3.不需要额外的点击查看和从下拉菜单中选择
4.用户感觉这是一个安全链接，如果错了，可以点击后退按钮回来。

类别链接应该出现在搜索框周围，而不是在左侧或右侧导航中。在图2中，搜索框和过滤链接紧密相连，表明它们的功能关系相近。而且，为了减少多链接带来的视觉噪声，这里只显示了最为相关的4~5个类别链接，其他的由“more...”来表示。这里的省略号也是标准的表示法，表明它不是一个类别，而是其他信息的省略。

设计最低和最高价格区间过滤

在图1中，搜索结果中的价格范围过滤是通过预设最高价和最低价来完成的，在用户搜索的过程中也提供了很好的视觉线索。用一系列的数值来预设过滤选项是一个好的尝试，并且也很好实现。如图3：
Figure 3

设计排序方式：链接式还是下拉式？

排序是用户梳理搜索结果的另一个有效的工具。与过滤不同，排序是大部分用户能轻松理解的，并可以简单的标识为“按...排序”，如图4。就像之前的过滤控件一样，我们把整个排序控件也设计成自然语言式。
Figure 4. 

要设计出一个好的排序功能，首要关注的是人物角色的目标而非任务。比如，在我的例子的场景中，我的目标是在0~5美元的价格范围内找到一本畅销书。我的任务则是用价格和类别过滤，然后以“用户关注度”来排序。我并不需要什么类别排序，出版日期排序，作者名字排序等等。添加这些选项无非是制造了更多的认知噪声，让用户界面更加杂乱。

排序在页面上可以用链接来显示（eg：洲际酒店网站），也可以用下拉菜单来完成（eg：亚马逊）。链接形式可以节省页面空间。然而，更多的电子商务网站采用的是下拉式菜单排序。抛开代码上的好处不说，这样的控件可扩展性强。最重要的是，我们可以把显现出来的条目以自然语言的形式映射到用户的心智模型（如图4）。
可用性良好的网站应该以主要人物角色的目标来设定默认排序方式。

Conclusion

选择正确的主要人物角色，并频繁的进行可用性测试，这样可以确保你只添加了合适的过滤选项和排序方式，避免视觉噪声。

整个排序控件，以及标题，都应该以自然语句的方式呈现。

去看看原文>>