搜索图标那些优点和缺点列表

在对搜索界面设计的研究中,我们发现了搜索框的一个发展趋势:越来越多的设计使用一个纯粹的放大镜图标来替换传统的带有“搜索”二字的文本按钮,甚至有些还丢掉了文本输入框,仅仅留下了一个放大镜图标。今天哪一个版本的用户体验是最好的呢?

  之前的搜索框设计指南

  传统的搜索框设计已经很成熟,其主要原则是:

  在页面的右上角放置一个醒目的搜索框,搜索框的旁边放置一个搜索按钮。

  搜索框不需要文字说明,旁边的那个明显的搜索按钮告诉用户在这里就可以搜索,同时还告诉他们如何搜索。

  然而,今天的一些新兴的模式打破了这些基本准则. 放大镜图标更加节省空间,所以更多的网站使用它。更加灵活的使用设计准则是没有问题的,但是有一点是需要确认的,那就是用户的需求仍然是保持不变的。用户并不关心搜索区域看上去像什么,他们只是需要一个可以迅速输入搜索关键词的地方。如果设计惯例正在发生变化,但仍能允许用户轻松的实现这个目标,而不是减慢,那就不会有什么问题。可是在我们调查中发现,只有图标的搜索设计还是存在一些明显的缺点:

  


 

  (a):传统搜索按钮的搜索框;

  (b,c,d):新兴的带放大镜图标的搜索框设计模式;

  (e)受移动设计影响的只有图标无输入框的设计(我们并不推荐这种设计)

  图标的采用

  放大镜图标已经和搜索紧密联系在一起,部分原因是许多不同的网站、应用程序和操作系统使用它来提供一种查找信息的方法。 有了这样的贯彻执行,用户已经学会更快的识别这一图标。随着响应式设计的流行,仅使用图标的设计模式更加的流行起来(尽管好的响应式设计的站点在转换到大一点的屏幕时在图标旁边还会显示一个搜索框)。

  


 

  用于各种应用和操作系统搜索功能的放大镜图标已经让用户把搜索和放大镜仅仅的联系在了一起。从上到下:谷歌浏览器,我 Windows 资源管理器,IE浏览器和 Mac 上面的 Office Word。

  最新的研究结果

  我们最新的研究结果显示,在往放大镜图标的设计过渡过程中,设计师希望尽量平滑而且无风险,这里是一些用户在放大镜图标设计模式下可能会碰到的一些问题。

  只有放大镜图标的话,用户会不太容易定位到搜索的功能

  当没有搜索框的时候,放大镜图标占用更少的空间。视觉上,它不是太突出,因此将不那么明显。对于桌面网站,我们不推荐只有放大镜图标的设计。只有放大镜图标的设计在移动设备上会比较合理,原因是屏幕更小,可放置的图标和文字按钮也更少。但是在桌面上,单独的放大镜图标就会迷失在众多的图标和按钮中。

  当用户已经可以一眼从放大镜图标联想到搜索的时候,那么就不需要显示“搜索”二字了

  用户认识并了解放大镜的功能。当他们看到它的时候就会联想到搜索。如果图标很明显,而且有很强的隐喻说明它是可点击的,那么就不需要再显示“搜索”二字了。因为很多用户仍然有点击搜索按钮提交查询的习惯,所以点击放大镜图标提交查询就很有必要了。此外,对于国际版本的站点还有一个额外的好处,没有必要再翻译“搜索”这个词了。(然而,从可访问性的角度考虑,记得把“搜索”这个词放在放大镜按钮的alt字段中)

  当搜索被放置在一个意想不到的位置时,用户需要额外的帮助才能找到它

  用户首先会去右上角找,如果没有找到,他们就开始扫描页面的顶部。在那些搜索图标在左侧的站点中,那些使用了一个大的空的搜索框的站点让用户更容易找到搜索。虽然用户最终找到了搜索框,他们从一开始就不应该为了一个搜索功能就找遍了整个页面。

  只有放大镜图标的搜索增加了交互成本

  只显示一个放大镜图标的搜索的一个负面效果是用户必须等待一个搜索框显示出来,找到在哪输入,然后有时还需要点击多次聚焦在输入区域。这些额外的步骤拉长了搜索流程,本来是只需要点击搜索框立即开始输入的。

  大多数的其他图标仍然需要文字才能表达清楚

  清晰的文字帮助用户更快的做决策。文字可以提供更好的信息线索。对于较新的图标,应该辅以文字说明,比如三行的菜单图标。地图标记图标是另外一个仍然有着不清晰的含义而且使用不一致的图标,有时它意味着当前的位置或者是一个不同的特定位置,又或是一般的地方,又或者是附近的地方。

  


 

  用户还很陌生的新图标,包括三线菜单图标(左)和地图标记图标(右图)

  用户仍然在学习了解这些图标的含义和它的功能,所以最好有一个清晰的文字说明。此外,在桌面屏幕上有足够的空间,为啥不使用户更快更容易的找到他们想要的呢?

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值