智慧的使用web widget(1)

tyxiayu

智慧的使用web widget(1)

　　这是IBM关于web widget的一篇文章，尝试翻译一下：
　　智慧的使用web widget(1)-常用的可用性问题和解决方法
Jodi Bollaert (Jodi.Bollaert@compuware.com)
Compuware公司可用性专家
2002年1月1日
这篇文章是关于web widget两篇系列文章中的第一部分。Web Widget结合了网页表单、对话框并从用户获得信息的控件。这是第一部分，Jodi Bollaert定义了一些基本的HTML Web Widgets,以图形界面展示，并且讨论可用性问题和解决方法。下个月，Jodi会谈及更多可以用脚本开发的Web Widget。
什么是Web Widget?
　　
WebWidget是可以结合了网页表单、对话框并从用户获得信息的控件的昵称。虽然潜在的Web Widget列表随着新版本的HTML和丰富的脚本语言的增长而增加，这篇文章关注六种可以用最新版的W3C标准HTML4.01开发的Web Widget。它们包括文本框、单选按钮、复选框、下拉菜单、列表及其它。使用纯HTML的widget的美妙之处在于它们可以跨浏览器和跨平台使用，虽然它们显示会有些不一样。
我该使用哪种web widget?
要知道那种web widget在每一种环境下是合适的与下面的一些因素有关：
1.用户特征；
2.内容；
3.技术；
Saga服务有限公司的David Unsworth发现当你选择web widget的时候必须考虑用户的年龄。他说：“我可以告诉你们，从我在做下拉框设计时候的许多研究中，我发现中老年人（50岁以上）很少使用他，因为他们浏览的习惯是使用可见的链接。”
内容也会影响你对web widget的选择。如果用户可以从一系列已知结果中选择的话，作为开发者，你必须预先使用单选按钮、复选框、下拉菜单和列表把这些选项展示给他们，而不是让留一个空白的文本框让用户去猜测该填写什么内容。
最后，你必须考虑技术上的问题，比如运行平台，浏览器类型或者版本，显示器分辨率和网速。独立可用性专家Peter Picone建议考虑到web widget会在不同的分辨率下使用，列表和下拉框和文件放得太近的话，会使得用户没有办法看清楚列表内容。
事先了解用户特征、内容和技术有助于你更有智慧的使用web widget。更详细的信息和指导方针将在下面讨论。
文本框
文本框是最常用的web widget.同其他在本文中探讨的HTML widget一样，它们植入<form></form>标签当中。文本框通常在你不能预测用户将输入什么内容的时候使用(比如姓名)。它们可以以一行或多行的形式出现(见图1和图2)。
图1.单行文本框

图2.多行文本框

可用性问题
下面一小节描述和举例说明可用性问题：
过度使用文本框
最常见的文本框问题是过度使用。也就是在任何情况下都使用文本框，即使是使用其它web widget更有效和更直观的情况下。例如下图(图3)的皮萨订购的案例，当用户在每个分开的文本框中输入他们需要的皮萨的时候，他们面对的是大量的键盘输入操作，担心文本制约，可怕的拼写错误。更有效率的例子(如例4)用户只需将需要的复选框选上就可以了。在Jeff Johnson的《GUI Bloopers》一书中，他同时指出了他们(指开发者)没有提供什么是允许的。用户直到提交并得到错误提示的时候才会知道他们拼写错误。
图3.过度使用文本框

图4.选择框

消失的文本
文本的另外一种可用性问题是消失的文本。这种现象发生在当文本输入内容超过文本框的大小(没有最大文字输入限制)。问题是文本框不够长。当文本框设计合理的时候，用户很少会遇到这个问题。为了补救这个问题，文本框(由size属性控制)要与用户可能输入的最大字符相等(由maxsize属性控制)。在一些情况下，可以精确的估计输入字数，文本框大小可以固定(比如，开发者可以确定美国社会安全号码是9个字符)。在另外一些情况下，字符的长度不可以精确预测，这时候你必须合理的猜测。虽然多行文本不支持最大字符限制，你可以使用滚动条来避免这种问题。如果空间不限制的话，多行文本可以设计得足够大，尽量使用户不用滚动条就可以看到他们输入的内容。
格式困惑
文本框的第三种问题发生在当文本必须格式化输入要求不清晰的时候，用户对格式感动困惑。要避免这种情况发生，一种解决方法是事先设计好文本框，尽量减少输入错误。比如，美国社会安全号码可以用三条虚线分割成三组(见图5)。事先格式化的方法消除了用户猜测系统使用哪种格式的需要。事先格式化对多种文本输入值有效，包括电话号码、传真号码和美元总额。
图5.事先格式化的社会安全号码文本框

图6.事先格式化的美元总额文本框

图7.有示例的文本框


单选按钮
单选按钮是可以使用简单HTML开发的另外一种形式web widget。在用户需要从两个或多个选项中选择其中之一的时候使用单选按钮 (见图8)。单选按钮必须相关，但是不一定都是对立的。相对于下拉框和列表，单选按钮的一个优势是所有的值都是可见的并且只能选择一个。
图8.单选按钮示例

可用性问题
单个单选按钮
一个单独的单选按钮违背了单选按钮必须在两个以上的一组中使用的工业标准定义。在这种情况下，单个单选按钮更像是在模仿选择框(见图9)。虽然随着web发展和规则更像是过时的东西，但是它们是可用性web设计的基础。坚持工业标准会使你的网站和应用程序更加有效率和成功。
　　图9.单个单选按钮

没有空值
工业标准实践证明单选按钮必须包括一个默认选项。这个漠然选项必须是用户最可能选择的，或者当所有选项选择可能性相同的情况下，它是第一个选项。在许多时候，用户不喜欢任何选项。如果可能的话，别忘记了包括一个空值，比如"None".如果所有的选项都可以的话，使用"Any"(不吸烟/吸烟/任意)。
标签不清楚
如果单选按钮的标签不清楚的话，用户必须使用很多时间去选择。开发者必须花费时间和经历，沿着用户的需求去体验标签是否表述清楚。如果你没有接触过真正的最终用户，最好的方法是叫住经过你办公桌的一些人，与你的客户分享任何用户遭遇的问题，并且使用头脑风暴的方法集体讨论更好的标签。通常说来，单选按钮必须简洁。
太多选项
太多单选按钮要求宝贵的屏幕，并且用户要看好长一段时间。保持单选按钮在最小数目。如果你有很多的选项，考虑使用其它的widget，比如下拉框和单选列表。
单列
选单选按钮(和复选框)可以水平或者竖直版面设计。水平版面将使竖直滚动最小化。但是，这种方法显得有些拥挤。如果你使用竖直版面，确保选项之间有足够的空间用户哪个按钮是哪个标签的。虽然竖直版面需要更多的竖直滚动条去浏览，但是它容易浏览。
　　 复选框
复选框是为有明确的“开”或“关”的是非问题设置选项的。选中复选框意味着这个选项是“开”的。当然，没有选中就表明这个选项是“关”的。复选框能设置一个或多个选项的“开”或“关”(见图10和11)。
图10.单个复选框选项

图11.Yahoo.com的多复选框选项

　　可用性问题
是非不清晰
用户必须能够马上判断是否应该选择。为了避免用户的这种困惑，使用清晰的相反标签(例如是/否，开/关，同意/反对)。如果标签没有一个清楚的是非标准，使用选项是相关的，但是不一定是相反的的单选按钮代替。
互相依赖的复选框
一组复选框中的每个选项都可以进行选择。但是，如果改变一个选项的状态不应该改变组中其它选项的状态。这种实践违反了复选框选项必须能够独立控制的原则。
选项过多
复选框选项过多会导致很难浏览。为了提高可读性，把长长的选项列表细分成几个9个选项以下的小组是有必要的。给每个小组添加一个小标题。如果选项没有逻辑分组的话，可以考虑采用列表框。

下拉框
下拉框是在你想要用户从多个选项中选择其中一个的时候采用(见图12)。它比起单选按钮节省空间；但是，除非用户打开下来框，否则他只能看到一个选项。所以进行一个选择操作需要两次点击(单选按钮只需要一次)。如果空间允许的话，尽量避免更加费劲才能看到所有选项的滚动条。
图12.下拉框示例

可用性问题
过度使用下拉框
尽管下拉框开发起来可能更加有趣，但是在一些时候一个文本框看起来会更加有效率。在Sarah Miller 和 Carolyn Jarrett 的《Should I Use a Dropdown? 》(我是否应该使用下拉框)一书中，作者指出在一些情况下，用户在文本框中输入比在下来框中选择简单。在可用性领域，怎么样才能更最好的输入日期是一个经常争论的问题。在迅速的方法是直接让用户在有明确的年月日标签下直接输入数字。更加单调乏味的方法是让用户在三个下拉框中选择年月日。后一种方法的优势在于用户不可能输入不合法的数据。
导航栏下拉框
在微软windows中，工业实践中开始使用下拉框来进行选择。在网页中使用下拉框作为导航栏时候，尽量避免用户需要新的操作。如果你采用导航栏下拉框的话，那说明你的图形用户界面不够装载你的导航选项。这时你必须考虑重新设计你网站的结构，减少在高层的选项。不要采用下拉框来重复你的到导航栏选项。这种方法只会使你的网页混乱并且没有任何价值。如果你必须采用下拉框作为导航选项的话，不要采用这种选择后会立即把用户自动带到一个新的页面的下拉框。这种罕见的做法会使得降低用户的信任度。必须清晰的展示下拉框是一个导航栏的widget。并且要有一个“GO”的按钮选项(见图13)。
图13.下拉框示例

　　没有默认选项
下来框必须设计一个默认选项，并且打开后有其它选项。不要让默认选项空着或者任意的使用它。默认选项必须是用户最可能选择的选项。如果选项没有逻辑，那么设计例如提示用户选择的“选择一个”的默认值(见图14)。
　　图14.默认客户下拉框


没有逻辑关系
最后，调查用户，认清用户期望下拉框选项该怎么排列。最常用的逻辑顺序是数序，按字母排列，从最常用的到最不常用的，也要考虑到高级用户可能使用键盘快速定位到他们想要的选项。比如，在一个按字母排序的美国各州的列表中，用户可以输入“M”来定位到密西根(Michigan)。下拉框可能马上跳到缅因州(Maine).用户可以继续敲击“M”直到选中密西根。
列表框
列表框用于显示可以选择其中一个或多个的许多选项。小量的选项在列表框中显示，滚动条用了浏览更多的选项。如果有很多选择的话，一个单选列表框能够有效的节省屏幕空间。它们同时还可以作为下拉框的另外一种选择。使用多项列表框，用户可以选择至少一个选项(见图15)。
　　图15.Monster职位搜索多选列表框

可用性问题
没有提示
在列表框顶部可以用简单的提示用户可以选择一个或者多个选项。对于网络新手，你必须解释怎么样选择多个选项(在个人电脑上，使用CTRL+点击；在Macintosh上，使用APPLE+点击)。
不定长度的选项
跟所有的Web Widget选项一样，列表框选项长度必须相近，这样方便浏览。目的是使得选项越短越好，但是内容还是清晰的。
没有逻辑顺序
同下拉框一样，列表框的选项必须有逻辑顺序。同样的，最好的办法是直接问用户习惯什么顺序。同下拉框一样，用户可以采用键盘进行快速选择。
没有默认选项
在Monster职位搜索多选列表框中(见图15)，没有默认选项。为了节省用户的点击时间，可以设置一个最有可能选择的选项作为默认。如果网站是一个对用户个性化的，默认必须是用户的家乡或者上一次用户选择的选项。如果网站没有个性化，逻辑上默认应该是“选择全部”。
命令按钮
命令按钮用来触发一个事件。最常用的两种HTML命令按钮是提交和重置。提交按钮是提交内容表单给服务器端程序；重置按钮是清除表单内容。第三类按钮是被称作"推"的按钮，你可以执行多种事件(比如打印，删除和搜索)。(使用脚本将在下篇文章中详细介绍)。
可用性问题
使用重置按钮
充值按钮清楚用户输入的所有值。根据著名的可用性专家Jakob Nielsen，重置按钮没有给用户带来任何价值并且最好不要使用。在他的《Alertbox column》中，Nielsen指出用户可以有其它选择：编辑错误内容并且使用新内容代替旧的内容。在大多数情况下，Nielsen相信这个选择已经足够了。他还指出没有重置按钮可以消除用户不小心清除所有内容的风险。
矛盾的行为
这种问题发生在多种情况下使用按钮。太多的按钮会让人感到困惑。比如在My Yahoo中，命令按钮在很传统的在导航栏使用(见图16)。虽然“改变颜色”像一个命令，点击这个按钮确实有了新的页面。在网页上，标准的导航栏对话框是文本链接，图像链接和分页。在另外一方面说来，“隐藏的命令”文本链接
是一个命令并且必须以命令按钮显示。
图16.My Yahoo命令按钮

不一致的放置
　　
如果你的网站包含了多种表单、向导和对话框，不要让用户每次重新认识你的网页界面。把按钮放在相近的位置。提交按钮必须在屏幕的底部。重置按钮(如果使用的话)必须在提交按钮的旁边。你必须考虑为重置按钮找一个安全的地方防止用户错误操作。
关于widget标签的一些内容
每个web widget必须包括一个标签，这样保证用户明白使用widget的目的。Compuware产品部的可用性专家Sumanth Muthalya提供了使用web widget的一些指导方针：
1.所有的标签后使用冒号。冒号告诉用户这是标签的结束，widget的开始。冒号同时提高了读者理解标签内容的能力。
2.避免自我标签的文本框。如果用户开始进行文本输入的时候，随着文本内容的输入，标签会随之消失。
3.标签和widget之间必须有一个空格。处于对齐的需要，你可以使用更多的空格，例如Detroit News在线订阅表达(见图17)。
4.如果你的标签场地不定，选择一个短标签对齐点和一个长标签对齐点，使得空白边界最小化，提高可视性。
图17.Detroit News在线订阅表单

其它web widget可用性技巧
1.避免在每次在用户改变web widget值的时候刷新屏幕，以外的刷新令人担忧和困惑。
2.在界面上要保证用户清楚哪部分是必需的。 两种方法可以提示，一是给标签加粗或者标签空间后面加一个星号。The Society for Technical Communication (STC)在它们的在线会员应用程序创造了它们独特的符号来标识那些是必需的(见图18)。
图18.STC必填域

3.当用户遇到web widget的时候，他们有时必须得到一些关于如何使用的帮助。在这样的案例中，提供帮助文件可以解决所有的困惑。在Dodge.com的“Build Your Durango”帮助文件中，开发者选择在他们认为需要的web widget旁边提供帮助(见图19)。当用户点击帮助图标，另外一个包含帮助内容的窗口会出现。
图19.Dodge文件帮助

4.最好你必须让5-6个用户测试一下程序的可用性。结果可能会带来你不可能预测和消除的问题。
总结

WOW……对于一个简单的HTML web widget来说，在头脑中必须有许多的可用性指导方针。如果你认为这些问题很严肃，等到你读到脚本web widget。
资源(略)