原文标题:Pitfalls to Avoid When Designing Forms
许多网络表单没有遵循可用性规则。了解这些常见问题能够让你在设计网站表单的时候避免它们。以下是一些一再出现的问题。
1. 危险的重置按钮。大多数情况下,没有必要出现重置按钮。如果用户碰巧点击了,它们几乎总是产生麻烦——因为这会清空表单,而没有任何确认框提示(至少在主流浏览器和主流表单执行动作中)。下图的德语表单虽然精心规划,但设计不佳。这张表单用来计算地铁路线中两地之间的距离:

请注意,这张表单已经是修正版,第一次设计得更糟。你知道右下方按钮写着什么吗(该位置按钮的通常是“OK”或“Submit”按钮)?这里的按钮是“Neue Faht”(新路线)……,点击该按钮会清空已经输入的全部内容。
快速补救:不使用重设按钮。(如果仔细权衡后决定需要重设按钮,一定谨慎使用。)
2. 能够选择很好,是吗?并非如此。至少对网站表单而言并不一定好。仅在用户要完成任务的场景中提供必要选项——其他都会让屏幕看起来杂乱、产生困惑,而且实际上用户无法花时间思考哪些选项是需要的,哪些选项是重要的。讽刺的是,大多数网站表单的功能比Google搜索简单得多,Google要搜索几十亿个网页,但这些表单依然比Google表单复杂上亿倍。
如果真的需要许多选项,考虑使用可展开的高级对话框将极少使用的选项隐藏起来。想想Wikipedia如何更改句法快速集成对话框(编辑页面时,可以点击编辑框下方的链接将其插入页面),避免全部或者过多显示,而是部分显示,并通过主题选项框进行分类。

3. 表格依然是网页和网站的一部分。由此,它们应当遵循网站可用性基本规则,比如字体应足够大以便于阅读,链接和非链接应明确区分。通常使用下划线或者蓝色标识表示链接可点击。但是,请看下图Hotmail登录表单——是不是仅仅查看就能辨别出其中的链接?

事实上,顶端的蓝色文字(“Have an MSN Hotmail…”)看起来可点击,但它仅仅是文字,不能引导到其他地方。另一方面,底部(“Use enhanced security”)是链接,即使没有任何视觉线索能表明这点。
提示表单成功和失败的信息没有使用明确的的配色方案,这是另一个常见问题。无论什么信息,都不要用红色标识成功信息,比如,“恭喜,表单提交成功!”——使用红色会引起一瞬间的疑惑。类似的,纯信息传递中,应当避免使用警告含义的标识。
4. 你在做算数,而不是用户。如果脚本能自动计算,就不要让用户来算。下图是时区转换表单,有个越洋朋友来看你,你可以用它来安排日程。

这张表单提供两个基本选项:转换当前日期,或者转换自定义日期。但是,使用列表中部的输入框自定义日期和时间,点击提交时该项值会被忽略……除非同时选择了“Use the following Date/ Time”(使用以下日期/时间)选项。只要输入自定义日期,系统就应当自动选择“Use the following Date/ Time”(使用以下日期/时间)选项(如果表单不能处理自定义日期,用户为什么还要输入?)。
5.不要让用户一定要点击单选框。而应该是点击单选框旁的文字也可以。这是Windows系统界面惯例,却被许多网络表单忽视……即使HTML提供了非常简便的方法(甚至不必使用JavaScript)。下图表单来自Google站点,点击“Put page under…”时,单选框并未被选中:

6. 不要迫使用户使用自定义日期控件或者其他小工具。日历工具表单中的日期控件的确不错,但有时候用户仅仅希望用纯文本形式输入日期(比如,输入:“2008-12-24”)。如果真的决定需要一个日历控件,那么不要迫使逼用户使用:比如光标移动到输入框中时,弹出日历控件。德国官方铁路路线计算表就是这么个例子——当选择输入框时,弹出日历控件,但即使手动输入后点击表单中的其他输入框,日历控件也不会自动关闭(因此总是需要点击关闭按钮)。

举个更有用的例子,我们来看一看Google Calendar的编辑器。编辑事件的日期或者时间时,会弹出控件。通常如果你不希望使用它时,它也不会产生阻碍,而是允许你自由输入文本。
7. Ajax变化过于细微。是的,Ajax是自从tag以来最伟大的网络产物,但这并不意味着它不会被滥用……因为它会以很多方式被滥用。一种滥用是提供表单反馈——比如,“您已登录”或者“表单输入有误”——用户很容易错过页面上细微的Ajax更新。这种情况下,重复点击Submit(提交)按钮也不会有帮助,反而会导致困惑。过于细微的版面布局对于重要信息来说很糟,但至少如果有页面转换和相应的可视化载入时间,用户也许能留心到该信息。
如果对表单出错或者成功增加Ajax反馈,确保易被查看。用户认为也许会花费一些时间才能提交成功,所以会在点击提交按钮后甚至会切换到其他浏览器窗口;返回原窗口时,用户是否能得到反馈信息或者用户是否会认为表单提交出了问题?
8. 输入框中的3D效果看起来过时,而且有时很难看,但不要移走它们或所有的3D色彩暗示,除非你发现它会增加困惑。若你正使用默认输入框,它会在当前窗口显示一些3D效果的内边缘线。如果在白色背景中使用白框,不要完全去掉3D效果,否则输入区域会不太像输入框。按钮上的3D效果外边缘线也存在同样问题,去掉它们,按钮会不太像可点击项。如果你使用明确的颜色暗示,表单又足够短的话,相信你能够去掉那么多3D效果——比如背景色较暗、白色输入框的搜索表单。虽然对此我有些拿不定注意,但你可以自己判断:

9. 如果数据没问题,就让其通过,而不要要求再次确认,也不要让用户提供的数据和数据库所需要的数据形式完全一致。一些网站表单会进行数据转换,比如将用户自由输入的地址格式转换为“正确的”数据库格式,然后将其用组合框形式呈现并要求用户再次确认。但是如果明确知道组合框选区的确是用户需要的,不需要再次确认来查看结果——相反,结果页面之前或之后应当少一些强加选项,允许用户选择其他,也许效果更好。
甚至有些表单会迫使用户使用精确的数据库格式。比如输入信用卡号码时表单不接受空格,去除即可,不要让用户自己动手去掉空格。
10. 是的,出售详细用户数据能迅速致富(至少我有所耳闻)。但这并不意味着网络服务收集大量信息是正确的事。例如你专门提供邮件服务,那么用户性别、家庭电话号码等等信息真的那么重要吗?最好的网络表单仅要求用户提供该项网络服务绝对需要的信息(此外,如有需要,会有法律、安全等输入框,比如可怕的验证码是现在表单可用性的重大问题)。
还有其他有用的可用性指南。比如保持文本简短,对界面来说有利无弊。同样,要求用户做选择时使用正面文字;用“do this”或者“show this”比“don’t do this” or “hide this”更容易迅速理解(更不要提“don’t hide”等其情况了)。表格一旦提交,将用户送至对现有任务(如果任务尚未完结的话)最合适的页面非常重要,而不是一个通用的感谢页面。无论做什么,需要知道用户在其他网站表单中花费了大量时间,因此有时候优化方案也许是只要重复用户习惯并且已经理解的表单就够了——同时也要考虑用户也许打开了多个窗口,你的网站表单仅是其中一个,用户会将表单当成次要任务,倘若
发现表单无法实现他们的期望,可能就会放弃填写。
最后,大多数设计优秀表单的要点都是常识,因此只是需要时间反省并以局外人的视角审视表单。尝试想像一个不了解(或者不关心)数据结构、众多考量或者产品历史的人会如何看待表单。对用户而言,表单本身可能并不是任务,而是达成任务的必要障碍。最好能像设计交通标志(时速100 km/h时能一眼看到)一样设计表单,而不能像设计书那样(躺在椅子里有很长时间阅读一本书)。

作者Luke Wroblewski,原文标题International Address Fields in Web Forms
网站表单作为企业与客户之间进行在线沟通的实现者,往往承担着收集关键信息的任务。例如收集电子邮箱地址便于进一步沟通,收集邮寄地址用于投递产品,收集账单信息用于处理付款等等。因此被问到网站表单设计最常见的问题——“如何设计国际地址”时,我并没有感到很惊讶 。
分析地址变化的细微区别之前,值得指出的是人们对地址结构拥有共识。经过多年通信经验及邮政系统的积累,人们对构成地址栏的要素形成了非常具体的概念。这种共识非常绝对。眼动数据表明,一旦人们开始在地址栏的输入框中填写信息,人们往往不再看该输入框的标签信息。人们对地址栏的基本结构很熟悉,并不需要标签提示。
考虑组成地址的输入框是很重要的一点。图1显示了美国地址中通常包括的条目的排列方式。图2是另一种方案,每个条目都分行显示,这种方法缺乏关联理解输入框的优点。因此,人们更倾向于相对独立的对待每个输入条目,而非将地址看作一个整体。
图1:网站表单中的美国常用地址结构
网站表单�的美国常用地址结构
图2:分割的美国地址结构
分割的美国地址结构
幸运的是,世界上组成地址的要素有着相当多的共性。大多数国家,地址栏中的目的地、收件人都是采用从具体到模糊的渐进结构,而俄罗斯、伊朗明显是例外。因此要给一家公司中的某人寄东西,地址栏中第一栏为收件人姓名,然后是公司名称,之后是街道、城市,最后一栏是国家。如图3。这种结构能用于所有国际地址。
图3:国际地址结构
国际地址结构
国际变化
地址栏的国际变化从最具体的条目开始——拥有地址的人。世界上的人名可能是一个、两个、三个或更多个字。Formulate Information Design的文章“The Name Riddle”描述了姓名中的可能变化,从印尼首任总统Sukarno到沙特第五任国王:Fahad bin Abdul Aziz bin Abdul Rahman Al-Sa’ud。
即使在一个国家内,街道地址也会有很大差异。美国邮政邮政地址标准描述了美国街道地址的差异——从1401 Main St to RR 9 Box 23A 到RR 9 Box 23A to 475 Lanfant PLz SW, Rm 10022。
姓名和街道地址差异很大,但是每个单一输入框只要够长即可。门牌号码在街道名之前?没问题。门牌号码在街道名后面?也不是问题。但是对于地址栏中的城市问题,就没那么简单了。
除了城市名称、邮编外,城市一栏同样可包括州、地区、省、或者国家。国家不同,每一项可能有不同的叫法、简称,在地址栏中的位置也不一样。不同国家的邮编形式也不同,包括空格、数字、字母以及长度。这些要素的顺序差异巨大。图4显示的是地址栏中城市项可能发生的变化。
图4:城市项变化样例
城市项变化样例
为解决这些国际变化,网站表单设计师采用了很多方法:特定表单、可变表单以及通用表单。
特定表单
若知道或可以确切推断客户的国家,采用特定表格的办法最为有效。用这种方法,可以为每个特定国家定制地址栏结构。图5显示的是法国、意大利的地址栏。请注意位置和标签的变化。
图5:法国和意大利的地址栏
法国和意大利的地址栏
如果能非常肯定客户的国家,特定表单能提供可快速理解的熟悉的地址结构,从而加速表格填写的完成时间。Frank da Cruz的Compulsive Guide to Postal Addresses是一个了解世界各地独特地址结构的奇妙网站,据此你可以制定针对特定国家的地址栏布局。
可变表单
和特定表单方式一样,这种设计利用可变化的格式,设计特定国家的地址栏。但是,这种格式是基于用户选择而非已知或者推断的位置。如图6所示,eBay的注册表单就使用了可变表单。如果有人更改了默认国家选项——该默认选项基于eBay对用户的访问位置判断——表单会显示被选择国家的地址框,以替代默认地址框。
图6:eBay 允许用户可更改注册表单中地址。
eBay 允许用户可更改注册表单�地址
这种情况下,若在地址栏下拉菜单中选择加拿大而非澳大利亚,“State/Territory”变为“Province”,“Postcode ”变为“Postal Code”。尤其值得关注的是,更改国家时,用户在通用地址结构的表单中输入的任何信息,比如名字或者街道地址,应当被保留。消除用户已经提供的信息极可能会惹恼用户。
通用表格
通用国际地址表单格式是另外一种保持多种地址栏变化以支持特定国家的解决方案。通用格式为组成地址栏要素的栏目提供单独的输入区域,让你能应付姓名以及街道地址的变化。为了适应地址栏布局以及城市项的变化,你可以使用一套通用的输入栏。Amazon.com的表格正是如此,如图7。
图7:Amazon.com的地址栏通过采用通用表单的形式支持不同国家的地址输入。
Amazon.com的地址栏通过采用通用表单的形式支持不同国家的地址输入
不同于根据国家显示不同的下拉菜单,单独输入栏被加上各种标签,比如州、省、地区,用户可以据此填写信息。类似的,“Zip/Postal Code” 标签同样包括了在输入框中针对邮编不同形式的邮编。该输入框可以填写字符、空格,长度不定。在多行项目中填写地址栏各项元素时,你可以应付邮编、地区、城镇,而无需暗示特定的地址结构。
这种通用表单能够为国际地址提供灵活的输入栏,但是错误检查会变得比较困难,因为一些字段会有多种表现形式。而且,由于其灵活性,通用表单没有对国家或文化进行真正优化,它通常有用,但非理想形式。
本文考虑了几种国际地址栏设计方案,但还存在其他类型或者问题。若有其他见解,欢迎发表评论。
———————————————————————
Luke Wroblewski的著作网站表单设计