用户体验 保守的使用下拉菜单
来源:yesky 发布时间:2008-01-15 20:00:00
摘要:下拉菜单经常带来更多的可用性问题,并且常常容易被混淆。这是因为网页设计师们往往会在不同的几种情况下使用它。同时,滚动的菜单降低了网页的可用性,因为用户无法在单一的一个扫视上看到他们想看到的所有选项。
很明显,下拉菜单在好的网页设计中有其自己的位置。但是,有限的交互式部件导致了网页设计师们滥用下拉菜单,这带来了可用性问题并且容易让人误解。设计师们会在各种不同的情况下使用下拉菜单,包括:
命令菜单:根据用户所选的选项,进行不同的操作。
导航菜单:把用户带到网站上新的位置。
表单填写:在填写表单时,让用户通过下拉菜单来选择某一选项。
挑选值:从一系列可用的值中,选择一个。
只有最后一种情况和传统的图形用户界面设计相一致。特别是,当使用下拉菜单来作为命令菜单时,看起来非常困难。命令菜单仅出现在标准的菜单工具栏上。尽管Mac和Pc使用两种不同的执行菜单,但两者都表明命令菜单不同于挑选值菜单。事实上,在“Macintosh Human Interface Guidelines”的87页,明确的说:“不要使用下拉菜单作为命令菜单。”
变革前景展望
网站的确需要一套更丰富的标准交互式部件-至少得像80年代由Mac公司提出的设计调色板一样丰富。给出更加具体的部件,设计者们可以为每种目的选择正确的表达方式,从而增加用户掌握环境的判断力。目前而言,相当多的设计师们混淆了这些动作的使用方法,因此很少有用户会在在给定的时间内明白它们可以做什么。
不幸地,短时间内还不会出现更好的浏览器。如果打算使用增强的设计部件标准,我推荐在两年或更长时间后使用,因为浏览器功能的突破,会非常缓慢。
因此,可以预见,我们还得使用这一易使人混淆的、单一的图形用户界面部件——下拉菜单。
避免使用的设计
下拉菜单是有它们的好处的。首先,它们节省了用户的屏幕空间。当它们仅显示一个正确的选择时,可以防止用户选择不正确的步骤。最终,由于它们是一个标准的部件(甚至是令人讨厌的部件),用户知道当他们碰到它时应该怎么办。
尽管它有以上的优点,但是如果设计师们尽量少用下拉菜单,那么网页的可用性会得到提高。下面举了几个在设计中应该避免使用的例子:
交互式菜单:当用户在一个下拉菜单中选择了相应的选项后,同一页面中的另一个下拉菜单自动改变。这会使用户感到非常迷惑。
很长的菜单:这意味着用户不能扫视所有的项,而必须拉动滚动条。通常,在这种情况下,使用正规的HTML的超链接列表会更有效。
州、城市缩写菜单:例如U.S. 寄信地址。用户直接键入"NY"会比在一个需要滚动的下拉菜单中进行选择,方便快捷得多。虽然让用户自己输入数据时,为了保证数据的正确性,必须增加数据校验脚本,但从可用性角度来说,这通常是一种最好的方法。
用户非常熟悉的数据菜单:例如,他们的出生年月。用户常常会键入这样的信息,让用户从下拉菜单中选择年份、月份,破坏了规则,你完全可以为用户创建更多的东西。正如下面的例子,所展示的:
在最近的在钮约召开的网络世界会议上,我和Kara Pernice Coyne介绍了一些网站可用性方法。在介绍中,我们为观众展示了一个小小的用户测试。在用户注册面面上,用户必须在一个表单的文本框中输入她的街道地址,在一个下拉菜单中选择所属的州。猜猜看,发生了什么?一开始用户在文本框中键入了完整的地址,因为以前她一直是这么做的。当看到下拉菜单时,她显然有点儿惊奇,然后她不得不重新回到输入地址的文本框,删除刚才她已经输入的州部分信息。
在这个小测试中我们得出,有时候对单一的用户进行测试,能够清楚反映一些问题。一旦你看到操作中的误解,你就会意识到,使用一个“有用的”下拉菜单以节省用户输入的时间所带来的害处远远大于它所带来的好处。
猜你喜欢
- 其中使用到一个分页类CPaging 代码如下:Class CPaging Public RS
- jQuery之父John Resig写过一篇《Sub-Pixel Problems in CSS》,一个50px宽的div中有4个float
- SQL Server查询速度慢的原因有很,常见的有以下几种:1、没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷)2、I/
- 今天运行程序时,在Oracle中输入SQL语句:select * from USERS as u ,程序报错输入select * from
- ASP+XML制作菜单管理!menu.asp 这个是前台执行部分<% '----------------
- 百度有啊2009年情人节logo——大纸袋GG给大纸袋MM送了枝玫瑰花,大纸袋MM奖励了大纸袋GG一个吻,好可爱!淘宝网2009年情人节lo
- 一. 10句话1.不要依赖register_global=ON的环境,从你刚懂得配置php运行环境甚至尚不明白register_global
- 看书笔记db file scattered read DB ,db file sequential read DB,free buffer
- gchart是基于google图表API的jquery组件。使用gchart可以方便地生成强大的各种图表和报表。基于google图表接口的g
- MSXML是微软非托管代码栈中最为核心的XML服务集合,不但适合基于COM的开发应用,更是微软AJAX解决方案和客户端XSLT解决方案的核心
- 一天不小心把ROOT的权限改到最小了(只能登录,什么都做不了),这可急死我了.重装的话太麻烦,而且里面有很多的用户,一个个重新弄不知道到什么
- 快照复制是在数据库之间对数据以及数据库对象进行复制并进行同步,以确保多个数据库之间一致性的一个法宝。简单的说,快照复制就是实现把一个数据库服
- 在新建数据库或附加数据库后,想添加关系表,结果出现下面的错误: 此数据库没有有效所有者,因此无法安装数据库关系图支持对象。若要继续,请首先使
- 如何让图片自动缩放以适合界面大小,拿出你的Editplus,打开c_function.asp文件,找到UBBCode函数,在第417行有如下
- 强大的group by 代码如下:select stdname, isnull(sum( case stdsubject whe
- 备份MySQL数据库的命令mysqldump -hhostname -uusername -ppassword
- 如何用ADO批量更新记录?是的,ADO有这项功能,不过好像用的人不太多(不了解还是不会用呢?):<HTML> &nbs
- 看过数据库的备份与还原。大多数都是用组件来完成的。其实可通过sql语句来完成。 由于时间关系,未对参数进行验证和界面美化。代码
- 实现了宽度、高度、透明度的渐变,还能以高度宽度中点为中心,还扩展成以任意点为中心渐变(实例中以点击点为中心)。<!DOCTYPE ht
- 超酷的js图片轮换/轮播 渐变效果··来自腾讯刚刚在腾讯女性频道上看到一个很酷的图片渐变轮换效果·····于是乎····抠下来了···分享·