水平工具栏在筛选过程中的表现

Source: A Horizontal Toolbar Can Outperform the Traditional Sidebar

水平筛选

曾几何时侧边工具栏是流行标配，但随着界面设计的变化，前50名美国电商网站中的24%开始使用如上图所示的水平筛选排序工具栏。根据可用性实验的结果，水平工具栏适合部分特定类型的电商网站。

观察结果

水平工具栏某种程度上解决了侧边工具栏的两个问题：
1、用户通常会「看不到」侧边栏；
2、用户会误以为排序功能就是筛选功能（如下图Macy's）；

管视Tunnel Vision

用户直接略过侧边筛选

从上方热区图可以发现侧边筛选栏相对不容易被注意。「管视」现象放之四海皆准，尽管给侧边工具栏加上checkbox或多或少能减轻无视现象，但也不能完全消除。

Filter or Sort？

Macy's

由于管视现象的存在，误以为sort就是网站提供的所有筛选功能就一点都不奇怪了，而且Filter（筛选）和Sort（排序）在英文表达里并不那么容易区分，以至于有些用户会在筛选的过程中去点排序按钮。

解放页面布局

将筛选和排序整合成一个水平工具栏除了解决管视和筛选排序傻傻分不清这两个问题以外，还有一个好处就是解放了两栏的局限，放宽了商品展示区域。

水平工具栏只适合部分品类

水平筛选的弊端也很明显：能放的筛选条件有限。所以服饰、家具品类看起来适应性较好。

Crate&Barrel

水平工具栏的三个设计注意点

尽管有24%的顶尖电商使用了水平工具栏，很实验发现只有其中一半是真正用对的。有三个关键点会影响水平工具栏的可用性。

1、定制下拉菜单
下拉菜单提供多选对用户来说很重要，由于原生HTML组件单选的特性，建议自行定制下拉筛选。

2、实时返回筛选结果
由于下拉菜单并不是一个传统而又常见的筛选组件，实时返回筛选结果对用户来说可以通过比较点选前后来理解组件功能。

3、筛选条件永远可见

筛选value可见

如上图所示，size、color等筛选值露出让用户了解当前的筛选场景。