过滤和排序是必不可少的，尤其是在选项丰富的情况下。了解帮助用户浏览过滤器以找到所需内容的技巧。
搜索结果数
如果您知道实际有多少选项，那么找到一些东西会容易得多。如果组合过滤器，则向用户显示许多结果并动态更新它们。例如，如果用户选择“运动鞋”类别，则向他们展示运动鞋，而不是一般的男鞋。
允许清除所有过滤器
有时，用户会应用大量过滤器来查找特定内容，但最终得到的结果列表非常有限。或者，也许他们改变了主意，想要寻找完全不同的东西。
有一个选项可以一个一个地删除过滤器是件好事，但是检查您应用的所有过滤器并删除它们可能既困难又耗时。允许用户一键删除所有过滤器 ——它可以节省用户的时间和精力，尤其是在他们使用移动设备购物时。
Clear All 按钮应该看起来很微妙，但看起来并没有被禁用。确保按钮在悬停或单击时更改状态，以便用户知道他们可以与之交互。
搜索时允许排序
一些搜索结果可能包含数百甚至数千个项目。在这种情况下，找到所需的产品可能会成为一场噩梦。幸运的是，您可以通过允许用户对结果进行排序并在此过程中应用过滤器来简化此过程。
许多用户混淆了过滤和排序选项的术语，有时可以互换使用它们。但是，差异是显着的。
过滤器 设置“硬”边界，以便页面显示严格匹配特定选定条件的项目。
排序设置“ 软”边界。它不是排除项目，而是按特定顺序排列它们。
根据 Baymard 研究所的研究，用户通常更倾向于使用排序。原因如下：
• 害怕错过（FOMO）
用户只是害怕丢失刚好超出其定义过滤范围的相关产品。
• 没有足够的产品细节
用户可能不太了解产品的领域或技术特征来设置过滤标准。
• 对自己的喜好没有信心
用户可能不太确定自己的预算限制、兼容性要求、使用条件等，更喜欢浏览，直到找到自己喜欢的内容。
最终，用户需要这两种功能来查找相关内容。如果空间不足，您可以将它们分开或组合成一个 UI 组件。
提供最流行的排序选项——按最高和最低价格、评级、最新等。
匹配结果数
显示多个搜索结果非常有用。如果可能，不仅要在过滤器附近显示它，还要在“应用”按钮中显示它。这样，您可以使信息更加可见。
您还可以降低交互成本——用户在与界面交互时为实现目标所付出的精神和身体努力的总和。例如，当找到的项目数量太少或为零时，用户可能根本不会单击“应用”按钮，然后删除几个过滤器以查看更多结果。
测试您的按钮宽度以适合带有三位数字的文本。
手机过滤器
在移动应用程序中显示所有可用的过滤器可能并且可能会涵盖其他内容。为避免这种情况， 默认情况下将过滤器隐藏在按钮后面 并将其放置在搜索结果上方以在单击时展开或打开带有过滤器选项的另一个页面。
水平过滤板
如果用户寻找由道德品牌在马达加斯加制造的廉价黄色运动鞋，他们可能会应用许多过滤器。 水平过滤面板 似乎是正确的解决方案。
与过滤侧边栏相比，水平面板更引人注目。研究表明，用户通常倾向于完全忽略过滤侧边栏，或者认为放在产品列表上方的排序工具是缩小搜索结果的唯一可用选项。
水平滤波的主要缺点是空间不足。如果您的网站有多个过滤器，它们在展开时可能会占用大量空间并迫使用户滚动查看结果。问题是，我们不需要水平显示所有过滤器并扩展面板以覆盖屏幕的一半。将最重要的过滤器留在屏幕上，例如价格和品牌，并隐藏其余的。
水平过滤器面板在桌面上更常见
立式过滤板
垂直过滤板代表了最传统的过滤工具。与水平过滤器面板不同，垂直过滤器面板可以适合所有过滤器组，尤其是在桌面设备上。因此，您甚至可以将很少使用的过滤器放在那里。
不幸的是，垂直过滤板占用了大量的水平空间，根据 Baymard 研究所的研究，用户完全没有注意到。
您应该根据需要、可用空间和过滤器选项的数量来选择过滤器面板类型。
像处理许多其他事情一样，为移动设备调整垂直面板。否则，移动界面看起来会很拥挤——而且不是很好。
分组类别
浏览一个普通的过滤器列表真的很难。您需要第二次甚至第三次浏览才能找到所需的参数。这就是为什么设计师决定按共同特征对过滤器进行分组。
分块和副标题为设计带来了秩序，并显着提高了可扫描性。您可能会遇到的另一个问题是类别的命名和过滤选项的标签。你应该称它为“面料”还是“材料”？你需要像“风格”或“场合”这样的过滤器吗？与您的用户交谈以了解此信息并了解他们使用的单词。它将使您的过滤器听起来更合乎逻辑且对用户来说更熟悉，因此他们可以在没有任何猜测的情况下进行导航。
负空间和/或分隔线是分隔组的最佳朋友，但在组元素内保持接近。
允许多选
大多数时候，在一个过滤器类别中只应用一个选项是不可能找到的。例如，在为一大群朋友寻找度假住宿时需要考虑很多事情。你可能想要一个有多张床的地方，允许宠物，允许吸烟，提供无线网络，空调，包括早餐，并提供附近的各种餐馆吃饭。从功能上讲，单选按钮只允许选择一项，而复选框可以将其取消。除非选项相互消除，否则复选框会提供更灵活的搜索。
使用视觉上标准的复选框（选中时带有复选标记或 X 的小方块）以避免用户混淆。
预先显示最受欢迎的选项
毫无疑问，用户经常在服装网上商店应用价格和尺寸过滤器。但是像图案或袖长这样的过滤器呢？由于这些过滤器不常用，请将它们放在过滤器列表的末尾或完全删除它们，将 最流行的留在顶部。
你怎么知道哪些是受欢迎的？与您的用户交谈或尝试卡片分类方法，以了解您的受众如何理解和分类信息
命名
你知道fit &flare 或bodycon 是什么意思吗？如果是，那么您的表现超过了我们，因为我们真的不知道，用户也可能如此。所以，试着为你的过滤器想出广泛使用的人名。
查看产品评论或进行简短的采访，以了解您的用户在有关产品或类别的对话中实际使用的单词。
在概览中显示应用的过滤器
我们通常在设计上力求少，但有时，更多的细节是不可避免的。
Baymard 研究所的研究告诉我们，网站应该两次显示应用的过滤器——通过在选项的复选框中添加复选标记并提供概述。
例如，您可以使用带有选定选项的芯片，这些选项执行以下操作：
• 使用户的选择更加引人注目，并提供应用过滤器的即时反馈。
• 提供删除过滤器的快速方法。
• 告知用户他们在哪里以及他们现在正在查看什么类型的产品。
在某种程度上，应用的过滤芯片作为页面标题或面包屑提供上下文并协助导航。
考虑交互成本
过滤器帮助用户缩小搜索结果，删除所有不重要的内容，并更快地找到他们需要的内容。适当的过滤器面板应显示应用的过滤器，指示选定的选项，并允许用户随时以最小的努力和交互成本删除选择。
侧边栏过滤器系统可能比顶部在线过滤器系统占用更多空间，但更易于扫描。此外，用户只需单击一下即可删除选择。反过来，内联过滤器面板花费的时间更少，并且可能包含隐藏在更多过滤器按钮后面的更多过滤器。
考虑您的产品需求并选择与您的业务部门和用户相关的过滤器面板。
首先显示最常见的选项
如果您决定使用水平面板来显示过滤器，请特别注意保持设计准确且整洁。仅显示最常见的过滤器，而将其余过滤器隐藏在“更多过滤器”按钮下。首先，您可以为实际内容节省空间。其次，你不会压倒用户。
确保按钮足够可见，这样用户就不会意外忽略它，假设网站没有提供很多过滤条件。
允许更改视图选项
我们都以不同的方式感知信息。当用户需要快速阅读尽可能多的选项时，列表视图更有意义。反过来，在客户决定转到产品页面了解更多详细信息之前，网格视图会提供有关产品的更大图像和简短信息。通过提供不同的视图选项，您可以引入更多的灵活性。
人们的偏好并不是唯一的因素。上下文也很重要。例如，地图视图适合寻找附近的咖啡馆，列表视图适合寻找评分最高的咖啡馆。
本文内容为转载
网友评论