保守的使用下拉菜单

时间:2012.07.11频道:Dreamweaver

摘要: 下拉菜单经常带来更多的可用性问题,并且常常容易被混淆。这是因为网页设计师们往往会在不同的几种情况下使用他。同时,滚动的菜单降低了网页的可用性,因为用户无法在单一的一个扫视上看到他们想看到的任何选项。 很明显,下拉菜单在好的网页设计中


  下拉菜单经常带来更多的可用性问题,并且常常容易被混淆。这是因为网页设计师们往往会在不同的几种情况下使用他。同时,滚动的菜单降低了网页的可用性,因为用户无法在单一的一个扫视上看到他们想看到的任何选项。

  很明显,下拉菜单在好的网页设计中有其自己的位置。但是,有限的交互式部件导致了网页设计师们滥用下拉菜单,这带来了可用性问题并且容易让人误解。设计师们会在各种不同的情况下使用下拉菜单,包括:命令菜单:根据用户所选的选项,进行不同的操作。

  导航菜单:把用户带到网站上新的位置。

  表单填写:在填写表单时,让用户通过下拉菜单来选择某一选项。

  挑选值:从一系列可用的值中,选择一个。

  只有最后一种情况和传统的图像用户界面设计相一致。特别是,当使用下拉菜单来作为命令菜单时,看起来很困难。命令菜单仅出现在标准的菜单工具栏上。尽管Mac和Pc使用两种不同的执行菜单,但两者都表明命令菜单不同于挑选值菜单。事实上,在“Macintosh Human Interface Guidelines”的87页,明确的说:“不要使用下拉菜单作为命令菜单。”

  变革前景展望

  网站的确需要一套更丰富的标准交互式部件-至少得像80年代由Mac公司提出的设计调色板相同丰富。给出更加具体的部件,设计者们能够为每种目的选择正确的表达方式,从而增加用户掌控环境的判断力。现在而言,相当多的设计师们混淆了这些动作的使用方法,因此很少有用户会在在给定的时间内明白他们能够做什么。

  不幸地,短时间内还不会出现更好的浏览器。假如打算使用增强的设计部件标准,我推荐在两年或更长时间后使用,因为浏览器功能的突破,会很缓慢。

  因此,能够预见,我们还得使用这一易使人混淆的、单一的图像用户界面部件――下拉菜单。

  避免使用的设计

  下拉菜单是有他们的好处的。首先,他们节省了用户的屏幕空间。当他们仅显示一个正确的选择时,能够防止用户选择不正确的步骤。最终,由于他们是个标准的部件(甚至是令人讨厌的部件),用户知道当他们碰到他时应该怎么办。

  尽管他有以上的长处,但是假如设计师们尽量少用下拉菜单,那么网页的可用性会得到提高。下面举了几个在设计中应该避免使用的例子:

  交互式菜单:当用户在一个下拉菜单中选择了相应的选项后,同一页面中的另一个下拉菜单自动改变。这会使用户感到很迷惑。

  很长的菜单:这意味着用户不能扫视任何的项,而必须拉动滚动条。通常,在这种情况下,使用正规的HTML的超链接列表会更有效。

  州、城市缩写菜单:例如U.S. 寄信地址。用户直接键入"NY"会比在一个需要滚动的下拉菜单中进行选择,方便快捷得多。虽然让用户自己输入数据时,为了确保数据的正确性,必须增加数据校验脚本,但从可用性角度来说,这通常是一种最好的方法。

  用户很熟悉的数据菜单:例如,他们的出生年月。用户常常会键入这样的信息,让用户从下拉菜单中选择年份、月份,破坏了规则,您完万能够为用户创建更多的东西。正如下面的例子,所展示的:

  在最近的在钮约召开的网络世界会议上,我和Kara Pernice Coyne介绍了一些网站可用性方法。在介绍中,我们为观众展示了一个小小的用户测试。在用户注册面面上,用户必须在一个表单的文本框中输入她的街道地址,在一个下拉菜单中选择所属的州。猜猜看,发生了什么?一开始用户在文本框中键入了完整的地址,因为以前她一直是这么做的。当看到下拉菜单时,她显然有点儿惊奇,然后她不得不重新回到输入地址的文本框,删除刚才她已输入的州部分信息。

  在这个小测试中我们得出,有时候对单一的用户进行测试,能够清楚反映一些问题。一旦您看到操作中的误解,您就会意识到,使用一个“有用的”下拉菜单以节省用户输入的时间所带来的害处远远大于他所带来的好处。

相关阅读Readings
  • Dreamweaver中使用CSS(样式表)的一个小问题

    Dreamweaver中使用CSS(样式表)的一个小问题http://www.sucai123.com 资料教程 2004-10-4 20:24:31 Dreamweaver应该大家都知道吧(以下简...

    04.17
  • Dreamweaver 中使用CSS的一个小问题

    Dreamweaver应该大家都知道吧(以下简称DW),这是著名美国MacROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。由...

    04.20
  • Dreamweaver使用CSS样式表设置网页

    本文介绍如何在Dreamweaver 中使用层叠样式表 (CSS) 设置页面中的文本格式。您可以使用 CSS 以 HTML 无法提供的方式来设置文本格式和定位...

    04.20
  • 教你Dreamweaver中框架的使用技巧

    在Dreamweaver中应用框架是非常容易的事情,下面我们就来看看具体的应用。 增加新框架 要给框架页面增加新框架,就是像拆分表格的单元格...

    04.20
  • 使用Dreamweaver MX表格排序功能

    教育信息化时代,考试成绩也要求上网公布。一次我将考试成绩制作成一个HTML文件,如图1所示,领导审查的意见是“将成绩按名次排列”,可...

    05.30
留言评论Comment
精彩推荐Recommend
Copyright © 2010-2017 XPlaySoft.com 软件玩家 All Rights Reserved 粤ICP备12021207号