Web Form设计（一） - Arslanyard - 博客大巴

Web Form设计（一）
2010-09-01
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://arslanyard.blogbus.com/logs/74134946.html
最近读了三本书，全部关于Form设计。如果你觉得Form设计怎么可能写成书，而且没有一行代码，我很理解。两年前当我在Amazon上看到那本Web Form Design时，也是同样的惊讶。学过HCI再回头看终于也能理解了，不过他人的研究还是“刺激”了我，往往在看到他们对细节的关注程度，才会深刻的感到自己做事的粗浅与浮躁。
SitePoint出版的Fancy Form Design Caroline的Forms that Work Luke的Web Form Design
对于这三本书，我个人的建议是：无论你是否设计Form，从UCD实践来说，Luke的这本书都是值得一读的（而且现在也有中文版上市）；如果你偏重代码实现，无论是HTML，CSS 还是JavaScript（特别是jQuery），SitePoint出版的这本书能给你很多帮助，对Accessibility的讨论也相当实用；如果你需要设计非常复杂的Form，例如政府机构、企业报表等，无论其是否基于Web，Caroline的书都提供了方法步骤帮助你整理思路，更好地处理大型Form的设计。
允许我在这篇文章粗略的结合这三本书讨论一点Form设计，一方面是对自己所读内容的小结沉淀，一方面也是希望能分享出来提供思考与讨论；做出这篇文章内容的延伸，在下一篇文章里，将把这几天对105个网站注册Form的一点小小的调查和分析的结果呈现出来，并讨论一些细节。
Form的定义与历史
Wikipedia对Form（广义）的定义是：一份文档，其拥有空间（域），可以针对一系列有相似内容的文档进行填写、选择。
Form的历史有多久？Wikipedia从法律历史的角度追溯到18世纪早期，由Charles Babagge构想出来。出于我国教育里对所有事物都必须有中国人身影出现的深刻影响，在全力挖掘自己脑海里自从高中毕业后就开始退化的历史残渣，终于想到我国古代的“画押”仪式：一系列文本，加上可以按压“指纹”的输入空间，看似完全符合Wikipedia对Form的定义。
Caroline将Form抽象出三项属性。这里以宋代的林冲同学被发配到沧州的画押过程为例：
关系（relationship）：提出问题的组织（北宋王国中央政府）与回答问题的用户（朝廷钦犯宋江）之间的关系； 对话（conversation）：提出的问题（画押人宋江同学的指纹），相关的指导内容（犯罪“事实”，罪名，罪刑，压印处等），以及不同话题的组成方式（不详）； 外观（appearance）：文本的组织方式（猜测是标题居中、正文左对齐？），输入域（按压指纹处）和图形图案的使用（政府官印？）以及色彩的使用（我估计是白纸墨字，质量差点）等。
当然，这三本书以及这篇文章谈到的是Web Form，还不至于需要一位考古学家或者博物学家来探究它的历史。当Tim Berners-Lee在1992年提出首批HTML Tag时Form还不见踪影，直到1995年HTML 2.0时才进入开发者的视野，如果从这一年算，它的年龄可能比我们大多数人都要小很多。
Form的组成（非HTML元素）
Web Form与生活中的纸制Form对比是件很有趣的事情，因为这个过程可以帮助抽象出共同的特征元素。综合这几天的阅读擅自改编为以下“版本”：
在我国轰轰烈烈的伟大拆迁运动中，花了大把银子向政府买地的房地产企业甲方要与无知善良的草民乙方建立某种联系，Form此时做为一种媒介，同时也成为一个建立联系的过程。作为媒介，有组成它的元素：
标题（Title），说明Form的目的，拆！ 介绍（introduction），说明甲方的“情况”和想要建立联系的性质，我要拆你房，你不许找我要合理赔偿； 问题（questions），甲方需要对乙方的哪些“情况”进行了解，姓氏名谁，家在何方，同意补偿条款，等等； 输入域（input field），乙方对自己情况的回应区域（钱不够而无其它，不同意；钱不够但有黑社会时常光顾，同意） 注释（notes），例如对问题的说明，法律层面的权责； 行动（action），Form被提交的方法。
说它也是一种建立联系的过程，因为双方需要完成一系列交互：
如果是纸制Form，例如一份街头的市场调查，可能是一位调查人员（甲方）拿着一份调查表与路人（乙方）交谈并记录。调查人员与路人握手，问候，自我介绍（introduction），告知调查目的（Title），路人根据与对方所属组织选择同意（或拒绝），调查人员提问（questions），路人回应，调查人员记录回答（input field），告知相关数据的用途和隐私保护政策（notes），将调查表收起整理归类（action），感谢路人，赠予两张优惠券（也许吧），等等。这个过程中，眼神、表情、语气、肢体语言等等都是交互过程的一部分。
Web Form呢？企业利用互联网向访问者呈现Form，用户扫描（标题、介绍、问题），输入（回答）...鼠标点击（行动），HOORAY！搞定！缺少了什么呢？眼神、表情、语气、肢体语言吗？或许...
语气可以对应Web Form的标题、介绍、问题的用语与组织；
眼神、表情、肢体语言可以对应Web Form的初始视觉呈现，以及交互过程中帮助、错误提示信息的呈现方式。
举个例子，一个在Layout和分组（grouping）上混乱的Web Form就好像一个衣冠不整，无精打采，逻辑混乱调查人员出现在眼前，要么他手里铐着一黑色手提箱，内有百万美钞，钥匙已经交给你，就等着你回答完他的问题；要么，还是用一句“我很忙”搪塞过去吧。
这样或许算我牵强的将Web Form与纸制Form都统一对应起来。
至此大概阐述完毕我对Form的定义、性质和组成。谈谈Web Form的设计吧。
Web Form的设计原则
Luke列出这样的四条原则：
痛苦最小化（Minimize the pain）：没人喜欢Form，他们想要的是完成Form后得到的服务，所以越简洁容易的完成越好； 阐明完成路径（Illustrate a path to completion）：既然目标就是完成填写，那么就尽可能清晰的表明要如何完成这一任务； 考虑情境（Consider the context）：Form不可能独立存在，总有它所处的应用、商业等考虑，它是产品或服务的一部分，就需要融入其中； 确保交流一致（Ensure consistent communication）：虽然Form的发起可能包含各个不同部门自身的考量和需要，但Form必须以一种声音呈现。
Caroline将Form设计建立在Social Exchange Theory上：
规则1：建立信任（Establish trust）:
表明Form是由一个真实存在的组织发布； 简化与该组织的联系方式； 确保Form有明确的目的； 确保Form的设计看起来由专业人员完成； 远离广告； 检查Form能正确工作，杜绝任何缺陷。
规则2：减少社会成本（Reduce social cost）
请求得到用户的回应，而不是要求他们回应； 保持Form的简短容易； 给用户进度提示或标题列表让用户感觉Form在他们的控制之下； 将对用户敏感、私人信息的请求数量最小化； 设计用户确实“能够”回答的问题； 错误提示信息要尊重用户已付出的努力了； 如果用户确实出现错误，尽量保留用户已完成工作。使重新输入的工作量降到最低。
规则3：增加奖励（Increase rewards）
及时、小额的奖励，比延迟、更大的奖励更有效。
Luke和Caroline的思路很大程度上一致而在一些细节上互补。实际上，如果将Form换成交互产品的任何一种，这些原则基本上同样成立。这里我不打算纠结在这些原则上，你可以把这些作为设计时的guideline，尽量使每个细节都能与之对应，然而，真正决定你的设计优劣的，总是最终用户，所以，更重要的，还是了解目标用户，将他们作为核心融入到设计过程中去。
因为BlogBus系统在我终于结束文章后提示超长，所以只好在此将文章一分为二。第二部分“Form设计细节”，请移步到Web Form设计（二）