前端开发

 首页 > 前端开发 > css教程 > 网站交互设计:下拉框和搜索输入框的二三事

网站交互设计:下拉框和搜索输入框的二三事

分享到:
【字体:
导读:
          下拉框和搜索输入框组合是页面常用的标配之一,是串起独立页面的一种纽带。下拉框和搜索输入框的组合较多出现在行业性比较强的网站或是各种后台系统,而且会在其页面的的重要...

 

下拉框和搜索输入框的二三事~

 

  下拉框和搜索输入框组合是页面常用的标配之一,是串起独立页面的一种纽带。下拉框和搜索输入框的组合较多出现在行业性比较强的网站或是各种后台系统,而且会在其页面的的重要位置显示,让用户能很容易找到查找产品的入口。撇开其行业内容不谈,下拉框和搜索输入框的组合顺序和其每个独立的下拉框的内部顺序对于是否能快速精确的定位用户想要查找的内容起着至关重要的作用,同时,也将左右用户的操作次数和思考次数。

  就简单的独立下拉框而言,其选项顺序不同,对于用户的眼球运动和鼠标移动以及点击次数也会有较大的影响。我们来看图A-一个简单的例子:

  

下拉框和搜索输入框的二三事~

  图 A

  此为公司广告后台中一个关于广告发布的部分表单,“部门”的选择有“研究中心、家装频道、广告中心”等等14个选项,设计师在选择时,如要选择“广告中心”,则要点击下拉框,然后浏览到第9条再点击选择。

  但是通过统计,80%以上的工作单都是由广告中心发出,如果我们将“广告中心”设为缺省选项,其他内容顺序不变,那么在这个下拉框的操作中,设计师将减少80%的操作量,同时也会减少更多的操作失误(下拉选项太多,失误率也高)。

  对于单个下拉框的用户体验优化相对比较简单,多个下拉框+搜索输入框的组合明显增加了优化的复杂程度。如果多个下拉框的前后选项顺序不同,可能造成用户的下拉点击操作次数和思考次数就不尽相同。同时,搜索输入框和下拉框的位置也因各种情况而异。我们来看图B,几大门户搜索新房的例子:

  

下拉框和搜索输入框的二三事~

  图 B

  各个下拉框的内容主要有“区属+物业类型+均价”。 三者的顺序基本是由用户对于新房的搜索心理以及其内部的部分逻辑关系所决定的。

  三个门户网站都将“区属”放在第一个,这是符合用户搜索新房的心理的,买新房首要条件是地段,同时地段决定了均价的大概区间。两个门户网站将“物业类型”放在其次,“物业类型”这个术语比较绕,实际上就是住宅写字楼商铺等分类。最后是“价格”,已经由区属决定了其大致区间,个人认为放在最后是合理的。个人有一疑问:将“物业类型”与“区属”是否可以调换位置?麻烦大家能给出专业意见~

  同时,三个门户中下拉框和搜索输入框的先后顺序有两种,一种将搜索输入框放在下拉框之后,另一种将搜索输入框在下拉框之前。下拉框一般是网站策划定位各种区间来引导用户搜索产品,而搜索输入框则是让用户自主进行产品关键字输入进行搜索。是先让用户主动还是先引导用户?这是网站策划必须要考虑的的问题,这是要根据用户对于产品的熟悉程度和自身对于产品的需求所决定。

  所以,在策划下拉框和搜索输入框组合模块时,对于用户的调研是必不可少的,这样,才能掌握用户的需求,进行用户需求的筛选、分析、总结,以最佳的模式来组合下拉框和搜索输入框模块。

分享到:
HTML 5 & CSS 3的新交互特性 网页能...
       本文标题的这副图片,是用Phosotshop制作的。但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字。并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新。那么,有没有一种新的方法可以避免这些缺点呢?   有的,HTML5和CSS...
浅谈织梦淘客系统的不足之处 何去何从? ...
  织梦CMS系统没得说,好的不得了。基于此CMS系统的强的品牌效果,再加上淘宝客的风光和热闹,织梦实时推出了织梦淘客系统,目前的最新版本是3.3。为此,笔者也打算用织梦淘客系统建一个淘宝客网站,尽管目前很多人推出了做淘客,但是笔者还是认为只要做好SEO,淘客还是可以做的。在选好了域名,关键词,买了空间后,就开...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……