高级搜索设计:如何提升用户体验?(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

Image title

eBay:每个参数的“查看全部”选项,都可以查看对话框中的完整列表

Amazon使用相同的方法,在搜索方面的参数显示为8-10个值。选择“查看更多”选项时,可以看到剩余值。但如果计数值非常大,所有值都会在单独的页面上显示。

Image title

Amazon:“查看更多”和“查看更少”选项可用于显示和隐藏所有值

Microsoft招聘页面在侧边滑动条上显示的所有值。为用户方便选择,他们在每个参数的顶部提供了一个搜索框。

Image title

Microsoft招聘:所有值都可以在搜索方面滚动

分析:

a. 由于值以列表的形式显示为清单、单选选项和超链接。列表中显示选项数量的通用准则适用于此处。

b. 最佳方法是在小于8时显示所有值。如果大于8,仅使用“更多”选项显示常用值。当项目数仍然超出时,在扩展列表或对话框中提供剩余项目。

c. 用滑动显示同一位置的所有项目会使用户难以找到所需的数值。

d. 用值显示可用项目的计数是向用户提供所要执行搜索的项目数量的一种好方法。

四、如何执行搜索

可以使用以下任一方式执行搜索:

1. 点击“搜索”或“确定”按钮,或按Enter键

2. 用户更改参数时运行。

AmazoneBay都是在用户设置任何给定选项后执行搜索。

Linkedin的搜索是用户设置参数后点击应用按钮时执行的。

Image title

Linkedin:执行搜索需求在设置参数后按“应用”按钮

分析:

a. 在运行时执行搜索为用户提供愉快简单的体验,在每次点击后用户便可以看到结果。

b. 按下按钮时执行搜索时需要用户设置所有参数,单击按钮以查看结果。如果用户想要在每次更改后查看结果,则每次更改参数时都必须单击该按钮。

c. 另外,如果用户想要回到以前的状态,他必须恢复所有更改,况且他很可能已经忘记了已定义的选项。

五、如何显示搜索结果

在执行搜索时,内容按照已定义的过滤器显示。显示搜索结果时应该考虑几个因素。

1. 搜索结果的位置

搜索结果显示在定义过滤器的同一页面上,或者打开一个新页面显示结果。

TwitterLinkedin遵循在单独页面上显示搜索结果的惯例。

Image title

Twitter在单独的屏幕上显示搜索参数。单击“应用”按钮会打开搜索结果

Image title

Linkedin列出所有搜索参数显示扩展区域。单击“应用”按钮将关闭此区域显示的结果

Microsoft招聘提供搜索结果的参数面板。加载结果时,仅自动刷新结果区域。

Image title

Microsoft招聘:搜索结果加载在用户定义参数的同一页面上

分析:

a. 当打开新页面显示搜索结果时,用户的所在环境会发生变化,会感觉像打开了一个新内容。

b. 如果搜索参数在单独的屏幕或对话框上显示,每当用户想要更改参数时都必须返回。

c. 仅将结果区域重新刷新为Microsoft招聘是一种很好的方法,因为用户会强烈感觉到他正在同一页面上工作。

2. 搜索进度

搜索操作需要一些时间显示结果。在等待期间,显示关于搜索功能的进展的反馈。

加载结果时,Amazon会在页面中心显示加载图标。

Image title

Amazon:加载图标显示搜索结果正在页面中加载

Microsoft招聘的显示加载图标是提供搜索结果将在一段时间内显示的指示。

Image title

Microsoft招聘:生成结果时会显示加载图标

分析:

a. 加载图标是显示正在加载内容的一个好办法。

b. 如果在加载结果时出现问题,应以正确的消息形式传达给用户。

3. 布局

搜索结果以适用于网站或应用程序的列表或网格形式显示。

eBay在列表视图中显示结果,用户也可将视图改为网格模式。

Image title

eBay:用户可在列表和网格视图之间切换查看搜索结果

Linkedin显示的搜索结果将默认视图从经典视图改为拆分视图。

Image title

Linkedin:搜索结果用拆分视图和经典视图显示

分析:

a. 根据搜索项目类型和用户需求完美地描述搜索项目的布局。

4. 分页与无限滚动

搜索结果通常包含需要在多个页面上显示的大内容。分页或无限滚动用于导航内容。

eBayMicrosoft招聘在结果页面的底部分页显示。

Image title

eBay:结果页面的分页控制

Image title

Microsoft招聘:结果页面的分页控制

当超过页面大小时Twitter用无限滚动显示加载的搜索结果。

Image title

Twitter的搜索结果加载了更多结果

分析:

a. 无限滚动最适合网站和APP的用户生成内容流,比如:Twitter,Facebook,Pinterest,Instagram。另一方面,分页非常适合以目标为导向的网站和APP。

b. 当用户自上至下查看结果时,可能会在顶部跳过页面导航。所以一个更加对用户友好的方法是在底部显示分页。

5. 应用过滤器列表

搜索结果显示了应用于生成结果的过滤器列表。用户可以删除任何应用的过滤器,并相应地更新搜索结果。

eBay在搜索结果的顶部列出了所有应用的过滤器。用户可以删除任何他想要删除的过滤器。单击“全部清除”选项将立即删除所有过滤器。

Image title

eBay:所有应用的过滤器都列在搜索结果的顶部。用户可删除不再需要的过滤器

Linkedin在顶部显示应用的过滤器。由于所有过滤器前端的用户界面都不可见,因此“清除”选项会显示应用过滤器的数量。单击“全部过滤器”选项时,应用过滤器的详细信息将显示在扩展面板中。

Image title

Linkedin:应用过滤器列表显示在页面顶部。要查看所有应用的过滤器,用户单击“所有过滤器”选项

分析:

a. 应在结果页面上列出所有应用的过滤器,以便用户可以轻松地将它们与结果相关联。

b. 如果用户必须转到其他页面才能查看应用的过滤器,则会向用户提供断开连接的行为。

6. 结果计数

结果计数显示作为搜索结果生成的项目数。

 收藏