好的搜索体验,就是好的用户体验

注:即使是如输入框尺寸的微小变化,或是改变搜索框内展示的关键词引导,都能提升搜索功能的可用性进而影响整个产品的体验。

一. 前言

搜索就像是用户与app或者网站之间的对话:用户通过提问表达信息需求,app或者网站通过展示结果来作为回应。用户期待流畅的搜索体验,并且基于搜索结果的质量用户通常会对一个app的价值形成一个快速的判断。

当我们设计搜索界面的时候有很多点是需要考虑的,不过为了方便阅读,我将这篇文章分为两部分来讲:搜索栏的设计和结果展示页的设计。尽管文中的某些具体建议对于你的设计需求和目标来说会显得比较主观,但还是有一些通用的设计要点是行之有效的,它可以适用于不同的app和网站。在开始整篇文章之前,我们先思考一个问题——什么时候需要用到搜索?

二. 什么场景下该用/不该用搜索

小的站点最好不要有搜索功能。当一个网站的内容有限时,其实没必要有搜索功能。

只有当网站的规模和复杂度都达到一定程度的时候搜索功能才会显得尤其重要。由于用户通常需要找到某一个具体的商品,因此电商网站或许是使用搜索功能最常见的案例了。在一些大型的电商网站,搜索栏甚至会独立于头部并且会在UI界面中占据视觉焦点的位置。高达30%的用户会使用网站内的搜索工具,而这一行为会极大地帮助商家搞清楚用户到底需要什么。

搜索功能对那些像订机票或者提供信息服务的网站来说也尤其重要。

三. 如何设计好搜索框

搜索框是输入区域和提交按钮的组合。也许有人会认为搜索框根本不需要设计,毕竟它就只有两个元素。但是由于搜索框在海量信息内容的网站是最常被使用的设计元素,因此其易用性不言而喻。下文将分为 8 各部分来说明如何设计好搜索框:

  1. 在视觉上突出搜索框

  2. 搜索框与放大镜icon配合使用

  3. 将搜索框置于用户预期的位置

  4. 提供搜索按钮

  5. 告诉用户他们可以搜索哪些内容

  6. 每个页面都要有搜索框

  7. 合适的尺寸

  8. 使用智能推荐/匹配机制

1. 在视觉上突出搜索框

搜索框设计最重要的原则就是让它变得很醒目。如果搜索在你的网站或者app里是一个很重要的功能,那么它应该被放在最醒目的位置,因为它是用户查找内容最快捷的路径。

通过点击单独的icon或者按钮来激活隐藏的搜索框有以下劣势:

  • 搜索功能不容易被用户注意到。相比于开放式的文案输入框,icon所占用的空间更小,因此在视觉上单独的icon和按钮更难被用户注意到。

  • 增加交互成本。换句话说在用户使用搜索框之前还得增加一步操作。

2. 搜索框与放大镜icon配合使用

Icon从其含义理解是某种事物、行为或者想法的视觉符号。拥有放之四海皆准的可识别的icon是少之又少,而放大镜却是其中之一,甚至不需要多余的文案标签用户就能知道放大镜代表的是“搜索”。

Tip:使用最简单的放大镜icon,因为越少的视觉细节越能减轻用户的认知负担从而提高认知的效率。

声明:本文转载自第三方媒体,如需转载,请联系版权方授权转载。协助申请

相关文章

相关热点

查看更多