本文翻译自Nadya Tsech的Search interface: 20 things to consider。作者是Ataccama的B2B产品设计师。本文全面分析了搜索界面设计前需要整理的问题,以及进行原型设计时应该考虑的元素清单,可以作为产品设计时的对照工具。希望对您有所帮助!
向用户提出什么问题?进行原型设计时要考虑什么?设计搜索界面的最佳方式是什么? 根据项目的不同,搜索可能是最复杂的功能之一。用户只看到一个搜索框,而设计人员和开发人员却必须要了解错综复杂的系统以及盒子后面的许多工作。 本文整理了在设计解决方案之前应该回答的问题,以及在进行原型设计时应该考虑的元素清单。设计师应在研究阶段回答8个问题,以了解用户为什么进行搜索以及何时以及如何形成查询。在点击搜索之前,用户正在做什么? 用户会与谁交谈? 在切换到搜索之前,他们在使用什么应用程序? 与搜索的互动就是对话。如果您知道用户如何开始对话,则可以为他们提供正确的答案。4.用户准确地知道他们在寻找什么吗?或者只是在浏览?例如,用户可能会研究友谊主题,并寻找任何书籍或一类书籍;或者正在寻找一本书。用户会期望这两个请求会得到不同的结果。用户可以描述搜索的期望结果是什么吗? 用户还能用什么方法找到此信息?
用户如何处理结果? 如果找不到要寻找的东西,用户会怎么做? 搜索如何适应用户的工作流程? 用户行为模式描述了用户与搜索的交互方式,期望的结果以及下一步的步骤。在重新设计现有接口时,模式尤其重要。在《搜索模式》和《搜索用户界面》两本书中,作者描述了以下常见的搜索模式和模型:最佳优先模式。用户键入查询>查看结果>打开第一个链接。 珍珠成长模式。用户键入查询>打开结果之一>打开文档内部的相关链接,或使用文档中的术语进行查询。如果您的产品是整个工作流程的一部分,那么其他工具可能会影响用户习惯和对用户体验的期望。了解更多关于他们如何在这些工具中与搜索交互,以及什么方式最适合他们。向您的用户询问他们的工具,以了解他们如何与搜索互动。搜索的内容比我们看到的更多。使用此清单有助于快速进行原型设计,并且不会让您有所遗忘。*声明:此列表仅包含交互元素,未考虑算法、搜索行为、速度或结果质量,仅考虑桌面搜索界面。移动搜索在许多方面都不同,可能需要专门的文章进行论述。您的网站上提供哪些类型的信息?哪些类型是可以搜索的?如何更好地在结果页上显示不同的类型?根据信息架构将搜索结果分为逻辑组,使浏览体验更加舒适。用户一次需要查看多少个结果?我们能否通过提供其他视图和排序让他们舒适地查看结果?这是界面中经过精心研究的部分。哪些部分应当包括在搜索结果中呢?确保每个用户都能舒适地使用我们的产品是我们的工作。文本语音转换服务是否可以扫描和读取搜索结果?字体大小和对比度可读吗?人们可以在晴天户外的手机显示屏上阅读它们吗?您使用的颜色是否所有人都能识别?一些公司将结果预览提升到了可用性的下一个层次,并在不离开结果页面的情况下为用户提供必要的最少信息量和功能。我们如何帮助用户更快,更舒适地完成工作?例如,让用户可以在不离开结果页面的情况下,开始处理他们的搜索结果。- 系统通知(例如,如果结果是对时间敏感的,用户可能需要刷新它们)
筛选器也需要有单独的文章来探讨。设计复杂的网站时,定义明确的筛选器非常重要。它们会使搜索体验更加流畅。如果搜索是应用程序中的关键功能,并且是用户工作流程中的重要组成部分,那么自定义对其将很重要。可以允许用户调整结果页面的布局,更改字体和颜色,定义页面上显示的结果数量,保存筛选器,自定义排序参数或添加对操作的调用。考虑一下用户设置,过去搜索的内容,首选项或有关用户的其他信息。思考如何利用它们改善搜索体验。根据内容的类型,结果的精确度以及结果相关性的差距有多大,相关性指标可以帮助您更快地做出决策。Franzen和Karlgren在2000年发现,更宽的向输入框会引导用户建立更长的搜索问题。——《搜索用户界面》自动补充填写功能可以成为一种强大而有效的工具,可以使搜索快速有效地进行交互。- 预定义的自动补充填写功能可能会建议最近或流行的查询,过滤器,标签或起到导航作用。
如果有很多用于搜索项目的参数,则可以考虑使用高级搜索选项和逻辑操作。示例:我想找到住在柏林并在上个月购物且年龄在45至60岁之间的所有客户。如果您要设计多个设备,这是设计过程中至关重要的部分。我不会在这里讨论这个主题,但是您可以在Tony Russell-Rose和Tyler Tate的《设计搜索体验》中阅读更多内容。搜索是一个复杂且昂贵的功能。技术约束将在设计中扮演重要角色。因此,从一开始(研究阶段)就让开发团队参与非常重要。该团队将了解用户需求并帮助找到最佳解决方案。- Swiftype(https:///enterprise-search)
- Jira Atlassian(https://www./software/jira)
- YouTrack (https://www./youtrack/)
- Skyscanner(https://www./)
- Google Drive(https://www.google.com/drive/)
- Spotify(https://www./cz/)
- LinkedIn(https://www.linkedin.com/)
- VW Model Lineup(http://www./models/)
- AliExpress(http://aliexpress.com/)
- Amazon(https://www.amazon.com/)
- Yandex Flights(https://flights./)
- 《Search Patterns: Design for Discovery》 作者:Peter Morville, Jeffery Callender。
- 《Search User Interfaces》 作者:Marti Hearst。
- 《Designing the Search Experience》 作者:Tony Russell-Rose, Tyler Tate。
- 《Information Architecture: For the Web and Beyond》第9章:搜索系统 作者:Louis Rosenfeld, Peter Morville 和 Jorge Arango.
- Designing Search(https://blog./designing-search-c96cc5d05ddf)
- 5 important things you need to consider when designing for search(https://blog./5-easy-and-effective-tips-to-get-more-out-of-your-search-f53d55d063de)
- Best practices for designing your web search pattern(https:///@justinmind/best-practices-for-designing-your-search-pattern-c2cbd0a63b5e)
- Design a Perfect Search Box (https:///design-a-perfect-search-box-b6baaf9599c)
- Best Practices for Search Results(https:///best-practices-for-search-results-1bbed9d7a311)
- Mobile UX Design: User-Friendly Search(https:///mobile-ux-design-user-friendly-search-51e5f78f5a1e)
- Search UI Patterns: Elements (https:///@ddsky/search-ui-patterns-elements-80ea9d241f97)
- [cz] Search UX best practices — relevance, rychlost, použitelnost(https://www./watch?v=sbuTVJiQyF0)
- UX for eCommerce- Lecture 5: Creating a Good Search Box(https://www./watch?v=AMwUsyQYlbk)
|