翻译：october
校对：toMMy
原文：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时能一眼看到）一样设计表单，而不能像设计书那样（躺在椅子里有很长时间阅读一本书）。
Posts
No comments:
Post a Comment