Compuware公司可用性专家
2002年1月1日
都
说力量太大会产生危险。这也是说使用客户端脚本增强或创建web widget.正如第一部分所说，web
widget是应用于网页表单、对话框和为用户提供信息的控件。尽管脚本允许开发者去制作多种多样的web
widget和动作，但是与用户的期望太远会产生可用性问题。Jodi Bollaert描述了一些常见用脚本开发的web
widget的可用性问题，并且提出了如何避免这些问题的方法。
什么是客户端脚本？
脚本通常分布在两端-客户端和服务器端。顾名思义，客户端脚本运行在客户机(用户的机器)上，并且服务器端脚本运行在服务器机器上。脚本端是用植入HTML文件的<script></script>标签中。
客户端脚本可以增强HTML web widget的功能或者完全创建新的widgets.这包括今天最流行的一些客户端脚本。
1.Javascript
2.Java Applets
3.DHTML(结合了层叠样式CSS和Javascript)
4.Flash(Actionscript)
5.VBScript
开发者可以使用多种脚本开发出相似的功能。脚本的选择取决于开发者的习惯、目标客户端和目标浏览器的类型和版本。(更多的见下面。)虽然这篇文章没有告诉你怎么开发脚本，我会跟你分享一些能够增强而非阻碍网站的可用性。在网页和书上有关于这方面的丰富的信息。
客户端脚本的优点和缺点
开发者有很多理由使用客户端脚本，当然他们也有一些合法的理由不去使用它。
优点
客户端提供众多的优点，包括：
1.允许更多的用户交互
2.由于不用再获得服务器端的响应，执行速度更快
3.可以给开发者更多的外观和web widget动作控制(注意这可能带来优点，也会带来缺点)
4.如果用户端浏览器不支持脚本，它能够选择其它的(例如HTML)。
5.能够从Hotscripts.com和Javascript.com等获得免费资源
缺点
客户端脚本当然也会带来不必要的麻烦，包括：
1.不是所有的浏览器支持脚本，所以，如果没有可替代的选择，用户会很痛苦的体验到错误。
2.不同浏览器和浏览器版本支持不同的脚本，所以需要更多的质量保证测试。
3.需要更多的时间和精力(如果没有其它的脚本资源可以使用)。
4.开发者必须有更多的外观控制和web widget动作。尽管如此，如果web widget更像标准控件，但是产生不同的动作甚至相反的动作，可用性问题就会产生。
通常的可用性需要考虑的问题
在看利用客户端脚本的web widget的具体案例之前，这边要有一些考虑必须记在心里：
1.
研究什么脚本在你用户最可能使用的浏览器运行效果最好。JavaScript是现在应用最广泛的脚本语言。它兼容了当今最常用的两种浏览器-微软
Internet
Explorer(IE)和Netscape.除了Javascript,还有微软VBScript也可以运行，但是只能在IE上使用。
2.如果包括了PC和MAC的用户，必须保证脚本在两个平台上都能够运行。Mac平台上的一些浏览器版本不能向在PC上获得良好的支持。
3.
在你用户使用的浏览器的最新两个版本上进行测试。许多人缓慢的更新浏览器；所以最新的脚本可能在个别浏览器上不能够运行。在写这篇文章的时候，统计表明
57%的互联网用户使用IE5.0，而只有30%的用户使用IE6.0。诸如Netscape公司也在它们的网站上想它们的用户提供一些错误信息
(BUG)。
4.网站在没有脚本文件的时候也是可读的并且功能齐全。在这激烈竞争的市场中，网站所有者不能够放弃那些没有足够能力运行脚本的浏览器的用户。建立一个能够在最大客户端上运行的网站是网站所有者的责任。
使用客户端设计可用的web widget
扩展/折叠菜单
扩
展/折叠菜单，同时也称作树状浏览菜单，是允许用户扩展和收缩一系列浏览项列表的web
widget。它们同时也设计成类似PC和MACINTOSH平台的文件夹菜单。微软开发网络(MSDN)图书馆站点(见图1)是使用
Javascript脚本开发扩展/折叠菜单导航栏的案例。
图1.MSDN可扩展/折叠菜单
这些菜单可以提高网站导航栏选项的可用性，尤其是像MSDN图书馆这样具有深层次导航结构的网站。这些动态菜单允许用户只看他们最感兴趣的部分。一次浏览所有的MSDN图书馆对所有的用户是不可能的甚至令人讨厌的。
为了使扩展/折叠菜单可用性最大化，需要考虑这些提示：
1.预先模拟用户体验widget。微软在MSDN图书馆做了一个大胆而好的尝试。开发者由于知道他们大部份用户熟悉视窗Explorer，所以他们开发了相似的外观和动作。
2.尽量使保持导航栏标签简洁。这样可以避免用户扩大帧或者拉水平滚动条去看完全的标签。作为一个选择，去除长的标签。
3.如果操作没有反应的话，要提示用户。在MSDN中，一些用户认为可以像在视窗Explorer一样拖拽。但是在这个网站是不行的。当用户试图拖动菜单中的文件夹时，开发者使用了包括改变鼠标形状成手型提示。
4.避免菜单超过2或3层。经过多层次的展开，标签会展开太多甚至超过了可见区域。
5.当一些导航选项打开或者关闭时，用户能够得到清楚的指示。使用用户熟悉的GUI界面。在MSDN网站，加号表示关闭；减号表示打开-正如在视窗中显示的一样。
创建Flash Widget
Macromedia
Flash最著名的特点是使视窗变得生动——跳跃的图标、舞动的文字、图形和淡入淡出的相片等等。开发者可以使用Flash去开发基于网页的表单和大量的
web widget用这种形式开发。最近的版本-Flash
MX-允许开发者去创建复选框、下拉菜单、单选按钮等。在客户端创建Flash文件的脚本叫做Actionscript。
开发者有很多理由想要创建Flash Web Widget，而不是使用标准的HTML Widgets,包括：
1.Flash Widget可以自定义外观和站点感觉的设计；
2.Flash用户可以根据他们的输入无须等待一个新的页面加载即可立即得到反馈。多页面HTML导航因此可以动态响应用户输入而变成一个页面。
3.基于一个用户的要求，可以禁用Flash。
但
是，Flash并不像银色子弹。当我在Macromedia Flash: A New Hope for Web
Applications中Macromedia
Flash的评论时，我看到了大众公司亚太地区汽车制造程序(见图2)和它在美国/加拿大的相同程序的HTML版本。
图2.大众公司基于Flash汽车制作程序
下面的一个例子(见图3)说明了可能错误使用Flash的情况。在这里开发者选择使用脚本图像按钮(但是，使用更多的是标准的单选按钮)作为航空预订表单让用户选择单行或环形旅游。这个例子显示了使用flash至少存在的三个可用性问题：
1.用户可能不知道图像按钮的作用；
2.由于这设计得不像按钮，用户可能不认识到这些选项可以点击；
3.这种设计浪费了大部分屏幕空间。
图3.使用图像按钮代替单选按钮
单选按钮widget可以用flash MX开发，开发者更多的是使用直觉开发，尽管这可能带来更少的注意力。
要开发更多有效率的Flash Web Widget，要考虑到这些可用性技巧：
1.最小化flash电影文件大小，这样可以减少下载时间。可以考虑把大的flash 电影文件分为几个小部分，这样可以减少下载时间并且使它多个分段播放。
2.保持用户控制界面。不要在用户没有选择的情况下，自动把影片传到新的片段，这对用户不友好。添加诸如"Next"或"Go"的按钮在界面上，给用户更多的空间。
3.
如果你的网页全市用flash开发，当用户点击"Back"按钮，他们可能会体验不确定的浏览器操作。一些开发者选择去掉浏览器按钮，防止一些问题产生。
虽然这可以解决这个问题，它同时也带来了一个新的问题--用户不能使用导航栏！如果你选择隐藏浏览器导航栏按钮，考虑采用在flash界面上添加自定义导
航栏按钮。
4.仔细考虑采用flash开发web widget的成本。新的外观和操作是否可能增强了网站的可用性吗？用户能够得到什么利益？
5.使用例如Lynx的纯文本浏览器进行测试，确保你的网页在没有Flash脚本仍然是可读的。
同样，记得Flash可能要求插件。用户使用的浏览器可能没有预先装载flash的，就必须下载插件。为了观看Flash MX文件，即使浏览器事先预装Flash 5(Internet Explorer 5+和网景6+)也需要升级插件到Flash MX。
脚本图像按钮
在
应用程序图形用户界面中，按钮被使用成执行操作，例如“提交”和“重置”。使用简单的HTML，这些按钮和它们的操作也可以在网页中使用。开发者想要使用
按钮进行更多操作。使用脚本，开发者可以执行海量的动作和例如“添加”
、“删除”、“选择全部”等确认自定义按钮。脚本图像按钮可以用不同的图形和大小设计和多种状态(正常、滚动和点击等)。
可用性提示：
1.保留可执行事件的按钮；使用例如导航栏的链接；
2.认清下载图像按钮的时间。能使用HTML按钮的尽量使用HTML按钮。
3.当创建自定义按钮，尽量采用比如在MSDN图书馆(见图4)或Java外观手册上的标准的GUI图像。
4.不要想依靠一个图像，几种所有按钮的含义。包括一个清楚的文本标签或者按钮旁边。除了图像，文本标签可以在纯文本浏览器中可读。
图4.微软GUI命令按钮指导方针。
客户端文本框验证
在用户有采用多种输入格式时，开发者经常为如何进行格式化文本框而苦恼。图5显示用户在一个文本框中输入一个电话号码采用的多种格式。
图5.电话号码输入不同形式
开发者的一个解决方法是创建一个预先格式好的文本框，这样可以清楚的显示如何输入数据(见图6)。
图6.格式化后的电话号码文本框
虽然预先格式文本框可能使文本框输入更清晰，把输入分为多个文本输入肯呢个带来个令人讨厌的输入问题。同时，因为第一个文本域有标签，用户可能会为如何在第二个和第三个文本域如何输入而困惑。
一个更加人性化的解决方法是开发一个客户端脚本不仅仅是能够进行数据验证，同时可以移除不必需的字符。这样如何格式化文本框不再是一个问题了。
日期选择器
另外一个好的web widget可以用客户端脚本开发是日期选择器(见图7)。
图7.Expedia日期选择器
Expedia.com
的日期选择器是用javascript开发的。使用日期选择器的一个优势是支持浏览器脚本的用户可以看到哪一个日期是星期几并且允许他们用鼠标去选择日
期，而不用文本框输入。在另外一方面，对那些不支持脚本的浏览器的用户，开发者聪明的提供了一个文本输入选择。
弹出窗口
在
2002年1月26日SIGIA-L中，Jeff
Lash指出新的窗口可以使用简单的HTML的target=_blank；但是这种方法不能让开发者控制弹出窗口的大小和弹出位置。如果你想要控制弹出
窗口的大小和弹出位置，Jeff提示必须使用 Javascript 链接。但是在纯文本浏览器中，这种类型不能运行。
关于易用性，网页
应用程序开发者Protas
says在2002年6月30日的SIGIA-L中说：“我的经验是大部分的用户开始阅读正确的弹出窗口；问题是用户不知道如何返回他先前用的窗口。返回
按钮(在这个例子中，最可能的是通过热键和声音命令来激活)不可用了；用户就会停止并且考虑会发生什么情况，如何备份浏览器先前的状态。”
W3C建立了一个网页易用性标准手册。这个手册被美国联邦政府开发所有政府网站中采用。网页易用性手册状态：
“10.1直到用户代理允许用户关闭窗口，不要产生弹出或者其它新窗口。不要在不提示用户的情况下试图改变现有窗口的状态。”
可用性提示：
1.如果你的受众包括纯文本浏览器用户，遵守网页易用性手册。
2.通过易用性测试软件工具，测试你的网站。例如IBM主页采用的是应用特殊技术中心的Reader或Bobby程序。
3.考虑使用其它可以替代弹出窗口并且可以显示相同内容的形式。弹出窗口必需吗？同时，一个替代弹出窗口的选择是现在在OPERA和MOZILLA上运行的分页浏览。
滚动条
使用DHTML，开发者能在一个大的浏览器滚动条开发文本域。这种web widget允许你去开发无须用户拉动整个页面即可读整个文本的滚动可视文本域。
图8.Omnium滚动条widget
不过在你快速滚动浏览之前，问问你自己，为什么滚动条是必需的？把可滚动条的内容放在一个常规的HTML页面中可能该用户带来更少的麻烦。有什么好处？在决定使用滚动条之前，考虑这些可用性问题：
1.在使用浏览器滚动条，鼠标滚动不可用。
2.如果不支持脚本的浏览器中，又没有其它选择，滚动条在浏览器中可能退化。
3.滚动条可能在Internet Explorer和Netscape显示不一样。跨浏览器测试是必须的。
4.由于滚动条的空间是有限的，用户被迫滚动浏览所有文本。
5.一些滚动条不能够随视窗的改变而改变。
总结
这
篇文章描述了可以采用支持或增强脚本的web
widget的案例。最后一点要考虑的是一致性。当遇到有用性问题，一致性是一个非常大的问题。尽管客户端脚本允许开发者可以增强或者创建web
widgets,还要考虑标准的GUI手册和需要开发具体网站或者应用程序的内部手册。用户只需学习如何使用层叠浏览器菜单或者脚本提交按钮。为你的工程
开发一个交互设计样式手册，可以帮助你与团队其它成员沟通，帮助你保证你网站的一致性。
