细节决定成败:分享下拉框与搜索框设计的那些小细节

  下拉列表框和搜索输入框是两个常见的页面搭档,我们可以形容过它是链接不同的独立页面的一条纽带,同时也是提高用户友好体验的关键点。下拉列表框和搜索输入框的组合较多出现在行业性比较强的站点前台或是各种系统后台,并且都是在一些很关键的位置,目的是为了让用户能很容易找到目标页面的入口。暂且不讨论站点行业的不同,下拉列表框和搜索输入框的排版顺序和其每个独立的下拉列表框中的内部信息顺序对于是否能快速精确的定位用户想要到达的目标页面起着至关重要的作用,同时,也将左右用户的操作次数和思考次数,深远的影响到用户的友好体验。

  下拉列表框中选项顺序不同,对于用户目光定位和鼠标移动以及点击次数也会有较大的影响。我们来看图一一个简单的例子:

  

  图一

  上如为笔者公司广告后台中一个关于广告发布的部分表单,在部门的下拉列表框中有14个不同的选项,假如用户要选择广告中心的话,则要点击下拉列表框,然后浏览到第8条再点击选择。

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

  对于单个下拉列表框的UEO(用户友好体验优化)相对比较容易,但是如果有多个下拉列表框,再加上搜索输入框的组合明显增加了优化的复杂程度。如果多个下拉列表框的前后选项顺序不同,可能造成用户的下拉点击操作次数和思考次数出现很大的不同。同时,搜索输入框和下拉列表框的位置也因各种情况而异。我们来看图二,三个大的房屋门户搜索的例子:

  

  图 二

  各个下拉列表框的内容主要有“位置+类型+价格”。 三者的顺序基本是由用户对于购房者的搜索心理以及其内部的部分逻辑关系所决定的。

  我们可以看到三个房屋门户网站都将“位置”放在第一个,这是符合购房者搜索房屋的心理的,购房者第一关注的主要是房屋的位置,同时位置很大程度上决定了价格的高低。我们看到两个门户网站将“类型”放在第二。最后是“价格”,位置和类型决定了房屋的大致的价格区域,个人认为放在最后是合理的。

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

  总而言之,在策划下拉列表框和搜索输入框组合模块时,对于用户的研究是必不可少的,这样,才能掌握用户的需求,进行用户需求分析与总结,以最佳的模式来组合下拉列表框和搜索输入框模块。本文由淘宝网女装http://www.ooonj.com/ 整理编辑,转载请保留出处。

时间: 2024-09-30 15:41:51

细节决定成败:分享下拉框与搜索框设计的那些小细节的相关文章

浅谈:如何通过百度下拉和相关搜索选择关键词

中介交易 SEO诊断 淘宝客 云主机 技术大厅 上两篇文章写到关键词密度和标题,描述的规则,关键词匹配度等,如没有看的兄弟姐妹们是否已经看了呢?那你怎么去选择标题关键词和描述呢?网站首页标题写得好与不好直接影响百度排名和用户引点,那如何写呢?在做任何事情先,都需要总结下前辈留下的经验. 百度数据 工具:百度下拉,百度相关,百度指数,百度推广端,还有本身装的百度统计.从这些工具中分析出来的数据,总结需要做的关键词,如何呢? 百度下拉和百度搜索相关 百度下拉和百度相关的数据是怎么体现出来,用户经常搜

30个下拉菜单和滑动菜单设计实例

30个很棒的下拉菜单和滑动菜单设计实例,值得参考. 每当为客户做网站的时候,我就不得不折腾一个水平菜单中的二级导航的最佳显示方式(而且不要让它看起来像10年前那样),然后我就开始去寻找一些灵感.我找到了很多网站,它们使用下拉菜单或滑动菜单,而且我想,你也可能会对我找到的这些实例感兴趣吧. 请告诉我你是如何看待这些菜单设计的,他们是好还是坏,有哪些优点或者缺点,或者,你发现了还有很多很棒的中文网站的菜单设计,请在评论中写出来,这样,对我,对大家都会有所帮助的:) Carreras Con Futu

设计上的小细节

设计上的小细节 1.http://www.aliyun.com/zixun/aggregation/7839.html">卓越亚马逊的首页轮换图片,每刷新一次,都是随机不同的顺序显示,这样的设计解决了对于较多图片轮换而靠后的图片信息很少被看到的问题,这点对于电子商务等时效性不是很讲究的网站来说尤其重要: 2.最初的时候是点击照片跳转到下一张,再然后是点击照片的左边是上一张,点击照片右边是下一张,当我们习惯了这样的照片浏览方式之后,似乎我们的鼠标就会被限制在照片的范围之内.百度空间里的相册浏

Safari6新功能畅想:整合地址框和搜索框

导语:国外媒体近日发表文章称,面对谷歌Chrome和微软IE浏览器的激烈竞争,苹果预计于今夏发布Safari 6.新版浏览器可能采用Webkit 2引擎,支持类似于iOS的手势功能,并将地址框和搜索框合二为一. 以下为文章内容摘要: 苹果去年夏季推出了Safari 5浏览器,到目前为止尚未进行重大升级.尽管Safari 5引入了不少新功能,但仍有提升空间. 由于谷歌频繁升级Chrome浏览器,微软也加快了IE浏览器的升级步伐,因此当前的浏览器大战依旧激烈.那么苹果的下一代浏览器Safari 6将

30个很棒的下拉菜单和滑动菜单设计实例

每当为客户做网站的时候,我就不得不折腾一个水平菜单中的二级导航的最佳显示方式(而且不要让它看起来像10年前那样),然后我就开始去寻找一些灵感.我找到了很多网站,它们使用下拉菜单或滑动菜单,而且我想,你也可能会对我找到的这些实例感兴趣吧. 请告诉我你是如何看待这些菜单设计的,他们是好还是坏,有哪些优点或者缺点,或者,你发现了还有很多很棒的中文网站的菜单设计,请在评论中写出来,这样,对我,对大家都会有所帮助的:) Carreras Con Futuro Apple Reviews Archer Gr

JS实现下拉菜单赋值到文本框的方法_javascript技巧

本文实例讲述了JS实现下拉菜单赋值到文本框的方法.分享给大家供大家参考.具体如下: 这里演示下拉菜单和文本框构建的介绍栏,将Select框中的值定位到INPUT文本输入框中,是下拉框赋值到文本框的实例,上网时候貌似经常见的功能,只是不知如何形容,或许叫做联动吧. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-to-input-val-codes/ 具体代码如下: <html> <head> <SCRIP

实例解说:百度搜索下拉框与百度相关搜索原理

每天跟百度打交道的站长们与百度产品紧密接触,尤其在使用搜索功能搜索某个关键词时,都会看到其相关搜索关键词与下拉框搜索关键词.通过百度这一功能,我们在筛选关键词时可以看到拓展出一些热门的相关关键词.那么,怎么理解这两个搜索功能的属性,今天给大家解析一下百度相关搜索和下拉框搜索的原理,也可以从中了解到所谓的刷百度搜索下拉框是怎么一回事? 先在百度中直接搜索"game",这时候在地址栏可以看到http://www.baidu.com/s?wd=game&rsv_spt=1&i

疯狂的百度下拉框-百度下拉和相关营销方案

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 什么是百度下拉 百度下拉的官方正式叫法是百度推荐词(Baidu Suggest Word),民间又称之为百度联想词或百度下拉菜单.是百度为了方便广大网民搜索,提高输入效率而推出的一项服务. 百度下拉的实现原理 百度从每天数以亿计的用户搜索词中,分析提炼出搜索量巨大的词条,生成百度推荐词数据库.之后,当用户在搜索框输入文字的过程中,百度动态就从

asp.net 如何让下拉菜单控件里的数据和文本框控件里的数据连接在一起

问题描述 asp.net 如何让下拉菜单控件里的数据和文本框控件里的数据连接在一起 string profilename=Workcella+bay+family+model; workcella与bay是下拉菜单控件的 family与model是文本框控件的 VS2010贴出的代码是 错误 1 运算符"+"无法应用于"System.Web.UI.WebControls.DropDownList"和"System.Web.UI.WebControls.Dr