用户体验 保守的使用下拉菜单

来源:yesky 时间:2008-01-15 20:00:00 

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


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

  • 命令菜单:根据用户所选的选项,进行不同的操作。

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

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

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

  只有最后一种情况和传统的图形用户界面设计相一致。特别是,当使用下拉菜单来作为命令菜单时,看起来非常困难。命令菜单仅出现在标准的菜单工具栏上。尽管Mac和Pc使用两种不同的执行菜单,但两者都表明命令菜单不同于挑选值菜单。事实上,在“Macintosh Human Interface Guidelines”的87页,明确的说:“不要使用下拉菜单作为命令菜单。”
  变革前景展望
  网站的确需要一套更丰富的标准交互式部件-至少得像80年代由Mac公司提出的设计调色板一样丰富。给出更加具体的部件,设计者们可以为每种目的选择正确的表达方式,从而增加用户掌握环境的判断力。目前而言,相当多的设计师们混淆了这些动作的使用方法,因此很少有用户会在在给定的时间内明白它们可以做什么。
  不幸地,短时间内还不会出现更好的浏览器。如果打算使用增强的设计部件标准,我推荐在两年或更长时间后使用,因为浏览器功能的突破,会非常缓慢。
  因此,可以预见,我们还得使用这一易使人混淆的、单一的图形用户界面部件——下拉菜单。

避免使用的设计
  下拉菜单是有它们的好处的。首先,它们节省了用户的屏幕空间。当它们仅显示一个正确的选择时,可以防止用户选择不正确的步骤。最终,由于它们是一个标准的部件(甚至是令人讨厌的部件),用户知道当他们碰到它时应该怎么办。
  尽管它有以上的优点,但是如果设计师们尽量少用下拉菜单,那么网页的可用性会得到提高。下面举了几个在设计中应该避免使用的例子:

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

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

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

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

  在最近的在钮约召开的网络世界会议上,我和Kara Pernice Coyne介绍了一些网站可用性方法。在介绍中,我们为观众展示了一个小小的用户测试。在用户注册面面上,用户必须在一个表单的文本框中输入她的街道地址,在一个下拉菜单中选择所属的州。猜猜看,发生了什么?一开始用户在文本框中键入了完整的地址,因为以前她一直是这么做的。当看到下拉菜单时,她显然有点儿惊奇,然后她不得不重新回到输入地址的文本框,删除刚才她已经输入的州部分信息。
  在这个小测试中我们得出,有时候对单一的用户进行测试,能够清楚反映一些问题。一旦你看到操作中的误解,你就会意识到,使用一个“有用的”下拉菜单以节省用户输入的时间所带来的害处远远大于它所带来的好处。

标签:菜单,设计,界面
0
投稿

猜你喜欢

  • 如何使用Git实现切换分支开发过程解析

    2022-07-03 20:57:06
  • javascript面向对象三大特征之封装实例详解

    2023-08-23 21:39:04
  • 关于vue3中setup函数的使用

    2024-06-05 09:16:16
  • JS版图片放大镜效果

    2024-04-30 08:50:57
  • python几种常用功能实现代码实例

    2023-03-11 07:10:14
  • 解决jupyter运行pyqt代码内核重启的问题

    2022-01-29 21:28:40
  • pandas按若干个列的组合条件筛选数据的方法

    2023-10-27 03:49:07
  • Python基础教程之异常详解

    2022-02-08 05:48:49
  • Python常见的pandas用法demo示例

    2022-09-16 12:55:04
  • mysql中explain用法详解

    2024-01-13 16:28:25
  • Coda 前端开发插件 F2E Tools

    2009-09-22 14:53:00
  • 初探MS SQL CE+Codesmith

    2009-05-11 09:03:00
  • Tensorflow 实现线性回归模型的示例代码

    2023-07-03 09:00:41
  • python模块shutil函数应用示例详解教程

    2022-09-29 02:07:36
  • 详解python eval函数的妙用

    2021-12-23 10:56:05
  • SQL Server 在Management Studio中使用Web浏览器

    2024-01-24 12:48:20
  • MySQL索引的基本语法

    2024-01-26 00:48:44
  • pandas读取excel时获取读取进度的实现

    2022-03-24 09:57:26
  • Django利用Cookie实现反爬虫的例子

    2023-05-11 19:48:01
  • python海龟绘图之画国旗实例代码

    2022-03-06 14:57:23
  • asp之家 网络编程 m.aspxhome.com