窗体是Web站点中最具交互性的方面。无论是登陆窗体中的用户ID和密码还是申请表格中的个人信息,窗体完成收集访问者的信息的功能。与简单的单击超链接以显示另一个Web页面相比,请求用户在文本框中键入信息或通过单选按钮或复选框进行选择要大大增强了用户的参与程度。对Web开发者来说,很大程度上由可用性产生的访问者交互成为了一个非常值得关注的问题。
从可用性观点看,最坏的情况莫过于访问者填写并提交表单却不能达到预期目的(如登陆失败、应用被拒绝、数据未更新等)。通常这种失败的原因是来自用户输入的数据不完整或不合规定。然而,不应该把此看作是用户的失误,反之,应将其看成是可用性的失败并应采取措施来解决系统缺乏可用性的问题。其目标是使每个用户第一次处理表单时就可以成功。
好的表单设计包括很多方面。它从决定表单需要收集什么数据,以及表单数据从头到尾的后台处理过程开始。本文着重论述为确保正确和完整的数据输入你能做些什么。
提供清晰的说明
第一步是向访问者给出清晰完整的说明。说明应当准确无歧义的定义用户需要输入到表单中的信息。然而,无需在每个文本框或其他表单元素旁放上一段说明,在绝大部分情况下,一个简单的标注(如“姓”)就足够了。
另一方面,一些表单元素需要更详尽的说明。要么确定被请求数据,要么帮助访问者以正确的格式输入数据。例如,访问者可能需要关于如何找到并在信用卡背后的签名条上输入安全代码的特殊说明。相对而言,这是一些信用卡的新特性,信用卡公司和Web站点描述此特性的术语多种多样。所以,一个文本框旁的简单标注是不够的。为使事情更复杂,代码常有四到六位,不过即使如此也仅有最后三个数字是重要的。对于这样特殊的要求,一个好的解决办法是创建单独的关于如何寻找并输入安全代码的说明页面。然后在表单区域旁边放置到此说明页面的链接。这样可以使说明完整并可包含示例图片而无需打乱表单。
确定必填区域
提交一份表单却遭到拒绝仅仅是因为有一处必填区域留了空白——这对用户来说的确是令人沮丧的经历。这也正是为何清楚标记出表单上的任何必填区域非常重要的原因。星号或如红色的醒目颜色(甚至二者兼备)常常用来标记这些区域。如果使用星号,应当在页面顶部放上一段关于星号代表什么的说明,以防止访问者忽略此标记。同样,不要指望仅靠颜色来标志必填区域。一些用户或许是色盲,或者正从单色显示器上查看你的表单。
帮助访问者输入数据
要使数据输入尽可能简单。通常,这意味着最小程度的使用要求用户输入信息的文本框,而用允许用户选择选项的列表框代替。列表框消除了用户犯拼写错误的可能性。
下拉列表框的一个很好的实例是在填入美国邮政地址时选择一个洲的两字母缩写。更精巧的例子是弹出日历,以允许访问者单击日历上的一天然后日期便以正确的格式填入到表单中。
相反,失败的例子是需要访问者使用正确的空格和标点输入城市、洲名、邮政编码到一个单独的文本框。如果数据库或其他应用程序需要这些以此种格式输入的地址,你必须试图就如何填写表单给访问者以清楚的说明。更好一点的解决方案是对城市、洲名、邮政编码分别使用单独的表单区域,然后在后台表单处理种将其合并为单独的字符串数据。这意味着要编写更多的代码,但提供了更好的使用性和更少的错误,相对而言是划算的。
对输入数据的有效性检查
即使你设计了一个具有很好标识和说明的表单,并非所有用户每次都会以准确完整的信息提交表单。一段确认脚本可以在表单数据真正提交到你的数据库或应用程序前检查是否存在信息不全或格式不对的现象。
典型情况是,一段脚本在点击表单的提交按钮时被激活,并处理表单的有效性。有效性脚本检查表单以证实必填区域的确含有数据,并根据脚本的完善程度有可能会检查区域内容是否符合正确格式。例如,脚本可能会检查在电子邮件地址中是否存在“@”字符。如果脚本发现了有问题,它将中断表单提交并显示一个错误信息。
你可以使用javascript或自己喜爱的脚本语言创建自己的表单有效性脚本,或使用一个已存在的预制脚本。Dreamweaver用户可以通过几下鼠标单击来选择多种扩展脚本之一以加入表单有效性检查动作。从可用性立场出发,你所使用的确认表单数据的代码并不重要。前提是你对表单使用某种确认机制,以防止可察觉的错误造成你的应用程序拒收表单。如果表单数据在提交后被拒收,访问者很可能不得不从草稿开始重新填起。通过中断表单提交,一段有效性脚本允许访问者返回到表单页面来更正错误,并以尽可能少的麻烦重新开始。
设置有意义的错误消息
为使表单可用性脚本工作,当其发现问题时脚本显示的出错消息必须对用户有意义。消息应当清楚地指示出含有错误的表单域,并对如何解决问题给出提示。
一个常见问题是错误消息使用HTML ID属性来标志出问题的表单元素。不要让用户来猜那个区域是文本框。错误消息应当像这样说明:“名字字段缺少数据。”
使表单易于使用是你的责任。大部分的表单通过采取措施以减少用户在与表单交互时可能犯下的数据输入错误来实现其可用性。控制差错的办法应当包括好的表单标签和避免错误的说明,以及在把错误提交到Web应用程序前能找到错误的表单有效性机制。
本文作者:佚名 来源:Builder.com
CIO之家 www.ciozj.com 微信公众号:imciow