加入收藏 | 设为首页 | 会员中心 | 我要投稿 成都站长网 (https://www.028zz.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 站长学院 > PHP教程 > 正文

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

发布时间:2022-09-30 14:31:04 所属栏目:PHP教程 来源:网络
导读: Amazon使用相同的方法,在搜索方面的参数显示为8-10个值。选择“查看更多”选项时,可以看到剩余值。但如果计数值非常大,所有值都会在单独的页面上显示。

Amazon:“查看更多”和“查看更

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

高级搜索设计:如何提升用户体验?  第19张

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

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

高级搜索设计:如何提升用户体验?  第20张

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

分析:

由于值以列表的形式显示为清单、单选选项和超链接。列表中显示选项数量的通用准则适用于此处。最佳方法是在小于8时显示所有值。如果大于8,仅使用“更多”选项显示常用值。当项目数仍然超出时,在扩展列表或对话框中提供剩余项目。用滑动显示同一位置的所有项目会使用户难以找到所需的数值。用值显示可用项目的计数是向用户提供所要执行搜索的项目数量的一种好方法。四、如何执行搜索

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

点击“搜索”或“确定”按钮,或按Enter键用户更改参数时运行。

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

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

高级搜索设计:如何提升用户体验?  第21张

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

分析:

在运行时执行搜索为用户提供愉快简单的体验,在每次点击后用户便可以看到结果。按下按钮时执行搜索时需要用户设置所有参数PHP高级过滤器,单击按钮以查看结果。如果用户想要在每次更改后查看结果,则每次更改参数时都必须单击该按钮。另外,如果用户想要回到以前的状态,他必须恢复所有更改,况且他很可能已经忘记了已定义的选项。五、如何显示搜索结果

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

1. 搜索结果的位置

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

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

高级搜索设计:如何提升用户体验?  第22张

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

高级搜索设计:如何提升用户体验?  第23张

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

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

高级搜索设计:如何提升用户体验?  第24张

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

分析:

当打开新页面显示搜索结果时,用户的所在环境会发生变化,会感觉像打开了一个新内容。如果搜索参数在单独的屏幕或对话框上显示,每当用户想要更改参数时都必须返回。仅将结果区域重新刷新为Microsoft招聘是一种很好的方法,因为用户会强烈感觉到他正在同一页面上工作。2. 搜索进度

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

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

高级搜索设计:如何提升用户体验?  第25张

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

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

高级搜索设计:如何提升用户体验?  第26张

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

分析:

加载图标是显示正在加载内容的一个好办法。如果在加载结果时出现问题,应以正确的消息形式传达给用户。3. 布局

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

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

高级搜索设计:如何提升用户体验?  第27张

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

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

高级搜索设计:如何提升用户体验?  第28张

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

分析:

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

4.分页与无限滚动

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

eBay和Microsoft招聘在结果页面的底部分页显示。

高级搜索设计:如何提升用户体验?  第29张

eBay:结果页面的分页控制。

高级搜索设计:如何提升用户体验?  第30张

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

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

高级搜索设计:如何提升用户体验?  第31张

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

分析:

无限滚动最适合网站和APP的用户生成内容流,比如:Twitter,Facebook,Pinterest,Instagram。另一方面,分页非常适合以目标为导向的网站和APP。当用户自上至下查看结果时,可能会在顶部跳过页面导航。所以一个更加对用户友好的方法是在底部显示分页。5. 应用过滤器列表

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

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

高级搜索设计:如何提升用户体验?  第32张

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

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

高级搜索设计:如何提升用户体验?  第33张

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

分析:

应在结果页面上列出所有应用的过滤器,以便用户可以轻松地将它们与结果相关联。如果用户必须转到其他页面才能查看应用的过滤器,则会向用户提供断开连接的行为。6. 结果计数

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

高级搜索设计:如何提升用户体验?  第34张

Microsoft招聘页面显示页面顶部的结果数。

分析:

结果计数是可帮助用户了解为应用过滤器生成的结果数量,并查看它们所需导航数量的一种有用信息。

7. 空白结果

如果搜索结果不包含任何项目,就需要优雅地处理。

eBay显示空白结果的消息。但他所显示的项目更接近标准的搜索条件。

高级搜索设计:如何提升用户体验?  第35张

eBay:未找到匹配的结果。

Amazon显示空结果的消息。所有内容都显示在结果区域中,表示未应用过滤器。

高级搜索设计:如何提升用户体验?  第36张

Amazon:未找到匹配的结果。

Linkedin因为没有找到结果,会显示一条供用户再次检查标准定义的指令。

高级搜索设计:如何提升用户体验?  第37张

Linkedin:未找到匹配的结果。

Microsoft招聘显示零结果消息。它没有对用户显示任何建议列表或说明。

高级搜索设计:如何提升用户体验?  第38张

Microsoft招聘:未找到匹配的结果。

分析:

为用户提供一些回应空白搜索结果的建议。eBay似乎是最好的例子。它会给出的标准结果和几个已定义的参数相匹配。用户更改一个或多个参数查看更新的结果会更容易。六、过滤搜索结果

搜索结果通常包含很多用户信息。最好提供一些用户可以在结果上应用的逻辑过滤器。

排序选项帮助用户按所需顺序对结果进行排序。

用户还可以在首选布局中更改查看结果的视图方式。

eBay提供排序,更改视图,过滤和分组选项以缩小搜索结果范围。

高级搜索设计:如何提升用户体验?  第39张

eBay:提供排序,更改视图,过滤,分组等选项以缩小搜索结果范围。

Twitter搜索结果包含顶部的类型明智过滤器和左侧面板中的属性明智搜索过滤器。这些可以帮助用户进一步优化搜索结果。

高级搜索设计:如何提升用户体验?  第40张

Twitter:搜索结果包含过滤器和搜索选项,以优化搜索结果。

分析:

过滤器可用于进一步限制结果的数量。但在结果页面上提供大量过滤器并不是一个好想法,这会让用户对结果的搜索感到困难。确定一些帮助用户过滤结果的逻辑过滤器。七、如何保存并访问过滤器

保存应用的搜索过滤器,以便可以用于以后的搜索是一种常见做法。也可以选择已保存的过滤器并进行更改以创建新过滤器。

eBay中的搜索结果和用户点击“保存此搜索”选项,保存此过滤器。使用基于定义的过滤器的自动生成的名称保存过滤器。填充的心形图标和“已保存”文本显示已保存过滤器。

高级搜索设计:如何提升用户体验?  第41张

eBay:用户可以使用“保存此搜索”选项保存已定义的参数。

高级搜索设计:如何提升用户体验?  第42张

eBay:保存已定义的参数。

用户可以通过转到“My eBay”设置来访问此保存的过滤器。过滤器列表提供了用户可以在过滤器上应用的一些功能:排序,编辑搜索过滤器,查看结果。

高级搜索设计:如何提升用户体验?  第43张

eBay:可以根据要求执行和更新已保存的搜索。

ira在搜索页面上提供了“另存为”选项,用户可以单击该选项,命名搜索过滤器并保存。保存的过滤器显示在左侧面板中,用户只需单击过滤器即可执行。

可以对选定的过滤器应用不同的功能,包括重命名、复制和删除。

高级搜索设计:如何提升用户体验?  第44张

Jira:保存过滤器。

高级搜索设计:如何提升用户体验?  第45张

Jira:左侧面板中显示保存的过滤器。

Twitter在搜索结果页面的下拉列表中提供“保存过滤器”选项。过滤器以默认名称保存,可以再次单击菜单中的搜索框进行访问。

高级搜索设计:如何提升用户体验?  第46张

Twitter:使用下拉菜单中的选项保存搜索。

高级搜索设计:如何提升用户体验?  第47张

Twitter:在搜索菜单中显示保存的过滤器。

分析:

应在高级搜索页面上提供保存搜索的选项,方便用户可以定义过滤器并对其进行保存。用户应能轻松访问过滤器并在其上执行不同的功能,如执行、编辑或删除。八、如何退出搜索模式

提供一个退出选项以便用户返回到启动搜索的屏幕。

eBay,Microsoft招聘,Linkedin都提供清除所有应用过滤器的“清除”选项,此为退出搜索模式。

分析:

在高级搜索页面上需要显示简洁易懂的选项

九、技术用户的高级模式

查询式搜索适用于技术用户。

用户可以在搜索框中编写复杂的SQL查询(结构化查询语言)。

Microsoft Outlook提供查询式搜索。但当用户输入查询参数时,无法看到任何帮助。

高级搜索设计:如何提升用户体验?  第48张

Microsoft Outlook提供查询式搜索。

ira是提供即时帮助的高级搜索选项一个很棒的例子。

高级搜索设计:如何提升用户体验?  第49张

当用户编写搜索查询时,Jira提供即时帮助。

高级搜索设计:如何提升用户体验?  第50张

高级搜索设计:如何提升用户体验?  第51张

当用户编写搜索查询时,Jira提供即时帮助。

高级搜索设计:如何提升用户体验?  第52张

当用户编写搜索查询时,Jira提供即时帮助。

分析:

当用户编写查询时,需要提供正确即时的帮助。与用户的显式执行操作相比,查询格式的运行时评估更有帮助。结论

提供执行高级搜索的简化体验是一个挑战。可通过在设计高级搜索屏幕时遵循最佳实践来实现。

(编辑:成都站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!