标签归档：表单

Luke Wroblewski的著作《互联网表单设计》（Web Form Design: Filling in the Blanks）发表后，网上对表单设计的讨论似乎一下子多了很多。 Luke的第一份工作是在国家超级计算机应用中心(NCSA)，那里诞生了互联网第一代图形界面浏览器Mosaic，也就是在那个地方，Luke意识到设计和技术之间的平衡问题。之后，他去了伊利诺斯州大学教授界面设计，并出版了Site-Seeing: A Visual Approach to Web Usability（可视化可用性）。之后，他开始在ebay工作，领导组织了ebay网站的多项改进工作，包括他在书中提到的ebay注册表单。Luke现在在yahoo领导产品理念及设计方面的工作。 Luke在书中称，《互联网表单设计》一书收集了他12年来从事网站设计的经验。的确如此，书中实例很多，非常有代表性。几个月，我购买了此书，基本上一口气读完，非常实用。在几位同事的无私帮助下，October和我翻译完了全书，本以为可以发给同事阅读，结果在检查过程中发现很多问题，理解原文的意思问题较少，更多是中文功底太差，无法很好表达原文，虽然心中明白是怎么一回事。见过一段时间的修改，现在的翻译版本比以前好了很多（自认为^__^)。 这本书例子丰富，讨论了多种表单形式在多种情况下的优缺点，不是简单告诉读者应该这么做或者那么做，用Luke的原话“It depends”。Luke非常强调context。 受版权影响，在没有得到原作者同意的情况，我不能在这里在这里贴出原书。不错，我想贴一些书中的实用指南（Best Practices），Luke应该不会反对。 顺便说一句，系统研究表单设计的并不止Luke一人。Caroline Jarrett和Gerry Gaffney合著的Forms that Work: Designing Web Forms for Usability同样是本好书，其中一位作者还参加了深圳UPA 2008。 以下是 《互联网表单设计》第二章表单组织的实用指南，请注意，这些指南都基于一定条件，请勿任意推广： •花时间评估表单包括的问题。提高警觉，去除一切不必要问题。 •表单问题（即标签）简洁化。 •如果人们会误解简洁标签，应当使用自然语言，阐明表单要求人们回答的问题。 •尽管表单包含的问题来自多个不同人或部门，确保这些问题的一致性。 •将表单内容组织逻辑组，帮助用户扫描和完成填写。 •如果可能，以对话形式构建表单。主题间的自然间断能帮助组织表单。 •如果表单可自然分成若干主题，一个网页就可能足以组织表单。 … 继续阅读 →

原文标题：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”）。如果真的决定需要一个日历控件，那么不要迫使逼用户使用：比如光标移动到输入框中时，弹出日历控件。德国官方铁路路线计算表就是这么个例子——当选择输入框时，弹出日历控件，但即使手动输入后点击表单中的其他输入框，日历控件也不会自动关闭（因此总是需要点击关闭按钮）。 … 继续阅读 →

作者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 … 继续阅读 →