Web表单设计

这是我对这本书的最后一部分小记了，这部分主要是关于Web表单交互方面的。总体来说，这部分内容很基础，我们在使用表单过程中可能都会有这些总结。毕竟Web表单也只是网站设计中的一个功能控件而已，作者用一本书的容量来承载它，着实有点过于详细，也有其啰嗦细致之处。下面只是一些重要又容易忘记的设计点，对具体的表单设计应该会有很多的帮助：（一）即时验证确认：对输入的账户或密码，即时显示错误，以免表单填完才发现有错误，增加不必要的操作。如：有效账户名、密码格式和密码安全条显示等。 建议：当用户输入错误或没有明确的意图时，给用户以适当的建议。如：有效的相似用户名和相近的地址。 限制：如有输入限制，应实时、动态更新的方式传递输入限制。 （二）减少用户操作去除多余的问题，这在第一部分已经讨论过 智能默认，掌握用户的操作习惯和选择意向，对一些有把握的选项（了解大多数用户会选择的选项）设置成默认选项，避免用户多余的操作。如：买家下订单的寄货地址可以采用默认上次地址。但是，如果没有把握，就不要随便设置默认，这样会给用户带来不必要的困惑。 （三）基于选择的输入根据对初始问题的回答要求人们继续回答，我的理解是，就像是调查问卷中的选择型问题，如果你早期回答是你使用过人人网，那么你后来的问卷就是针对人人网设置的一系列问题。几种展示方式：3.1 水平选项卡：点击每个水平选项卡，选择性输入会显示后续问题。问题1：很多人自上而下填写表单，会忽略水平选项卡问题2：水平选项卡之间不能表现明显的互斥关系问题3：眼部热点图显示，人们眼睛阅读选项卡时需要经常从屏幕左侧移动到右侧。违背了“清晰的浏览线”原则。3.2 垂直选项卡：选择性输入后，后续问题会显示在初始选择的右侧。优点1：单选项表明了选项之间的互斥关系优点2：隐藏了无关的非选择后续问题，提高了用户完成速度优点3：清晰的浏览线3.3 下拉列表：允许人们在潜在初始选项的长列表中选择后续问题，不占用大量屏幕区域3.4 下方显示后续问题：将后续问题显示在初始问题下方的一致位置

原文地址：http://blog.sina.com.cn/s/blog_633a026d0100pp9e.html （因无法传图，可参考原文）PS:对于一个电子商务网站，一个社区网站，或者一个生产力网站来说，Web表单设计是如此重要，关系着网站的生死存亡。我看完这本书，发现介绍的设计原则和研究理论其实很简单也很容易理解，但却不容易被我们发现和总结，这是一个值得我们深思的问题。在可用性研究、认知心理学、交互设计理论和视觉思维研究的共同基础上，Luke Wroblewski归纳出了这些易用和好用的web表单设计理论。我试图怀着一颗感恩的心去读完这本书。对于一个网站来说，用户体验的五个要素是：战略层（网站目标和用户需求）、范围层（功能规格和内容需求）、结构层（交互设计和信息架构）、框架层（界面设计、导航设计和信息设计）和表现层（视觉设计）。对于一个Web表单来说，用户体验的三个主要因素是：表单结构（框架层）、表单元素（范围层）和表单交互（结构层）。这本书正是从这三个方面来分析Web表单存在的一些可用性问题，并阐述如何更好地设计Web表单。表单设计的重新设计用户体验和设计团队通常通过搜集可用性数据、客户支持记录、网站日志和网络惯例，来提出重新设计表单的建议。这些数据的分析如下（个人很期待使用方法2和3，挖掘定量的数据，分析定性的结论，说服力很强）：1. 可用性测试——得到定性和定量信息•错误或问题的数量和位置•错误或问题的严重程度•完成率•完成整个表单或部分表单的时间•满意度评分•任务主观评论2. 网站跟踪——量化用户的操作数量•完成率•人们访问表单的方式，从哪进入表单的•如未完成表单，在哪个位置放弃•已使用表单哪些元素•已输入哪些数据•人们浏览器和操作系统的信息3. 眼动跟踪——记录人们如何理解表单的表现形式•人们在表单上看到了什么•眼球固定次数越多，说明解析表单越困难•眼球固定在一个元素的时间越长，说明人们看这个元素花费时间越长4. 客户支持——了解用户问题•最多的问题•解决这些问题的常见办法•报告人的统计信息•报告人使用的浏览器设置及操作系统5. Web惯例调查——比较相似网站的设计方案，找出网上通用的模式或独特的设计解决方案6. 实地测试——从人种学角度出发•表单填写环境：吵闹的办公室或...•任何说明表单完成或错误率的额外情境第一部分的小记先从表单结构方面开始吧...（一）表单组织对于表单设计至关重要，一个好的表单组织要做到以下三个方面：1.尽可能选取少且合适的问题。设置问题前要问自己两个问题，这个问题一定要问用户吗？这个问题是否符合情境，是否与用户填完表单能获得的东西符合。“保留”必需的问题，“删除”不必立即得到答案或不符情境的问题，“延迟”那些营销性的问题，比如你对我们网站印象如何等，“解释”那些有点过分的问题，比如填写用户的身份证号码。2.合理设计标签和输入框，构建自然的对话。其一，输入框作为提问的一部分，限定了回答的范围，使用户更容易填写，如*月*日等；其二，标签可使用询问的语气或模仿自然对话的方式；其三，标签应避免非用户用语。3.清晰合理的内容组织。将问题分成有意义的组，分到单个或多个页面。同时，可选性营销问题放在表单填完之后，回答率会增加，因为人们觉得这样侵略性较弱。分割内容组的方式尽可能简单：细线条、粗体字或浅背景+粗体字等。（少点视觉信息有助于保持焦点在表单内容，而不是表现形式，避免不必要的视觉噪音。同时，无助于布局的视觉元素都会损害布局的。）（二）表单结构方面的细节设计也同样重要：1.表单的命名，应使用户明确填完表单能获得什么。（因为获得毕竟是用户最关注的）2.起始页对表单的说明。如果填写时间较长或填写信息比较特殊而可能会影响到用户完成表单，那么设计者就应该在起始页对这些进行说明：填写完成时间、哪些信息、账号类型等。3.浏览线要清晰。从尼尔森的一篇研究报告中，我曾了解到人们浏览信息和仔细阅读信息的方式是不一样的。尼尔森研究结果显示，人们在浏览信息或菜单时，倾向于垂直式浏览，然而，人们在仔细阅读大篇幅的信息时，则更倾向于从左到右浏览。根据这个研究结果，我们可以推断出人们浏览表单应该和菜单一样，习惯于垂直式浏览，因此为人们提供垂直式的浏览线将能提高用户的填表效率。本书的结论也刚好与这个推断相吻合，我想Luke Wroblewski也应该是建立在这种视觉思维规律的基础上进行总结的吧。4.剔除无关的界面元素，减少注意力分散，消除因此放弃路径的可能。以前，我曾看到过一个“网站二级链接导致用户流失”的案例，这个案例充分显示了此设计原则的强大魅力。这个网站的原版图如图1，改版后如图2，经过改版，该网站的用户流失比例大大降低。很显然，图1中标示的一系列链接分散了用户的注意力，当用户尝试点击它时，却不小心退出了原来的提交流程，造成用户的流失。5.如有多个有序的网页时，表单应有进程指示。如支付流程的下订单——支付——确认收货等进程指示。

每个表单至少有三个基本要素：标签、输入框和动作标签标签应当顶对齐，右对齐，左对齐还是输入框内？顶对齐优点：减少表单填写时间；表单完成率较高；标签名可以很长（考虑不同语言时）；可多种方式组合输入框缺点：占用额外的垂直空间右对齐优点：标签和输入框相邻，能快速填完；垂直空间小缺点：可读性较低；多行文字时左对齐优点：可读性较好；垂直空间小缺点：填写速度最慢（如果希望人们阅读速度放慢去仔细考虑答案）；标签和输入框间距大；针对长标签不容易发现输入框和标签之间的联系输入框内 - 更适合只有一个问题（比如搜索框）或者几个输入框的表单或者问题非常熟悉的表单（比如登录）优点：节约屏幕空间缺点：填完之后标签会消失输入框1. 类型：文本框，单选按钮，下拉列表，列表框，复选框，（书中没有的模式）复合模式 - 加减号加输入框2. 输入框的长度：与所要填写的大致内容长度保持一致；若无法受益于暗示，就应当采用一致的长度3. 标明必填项：一小部分是必填的时候标明可选项：一小部分是可选的时候注意保持一致不应按照这个维度对表单分组动作1. 视觉上区分主要动作按钮与次要动作按钮（后退，保存，预览，导出等）2. 按钮位置：左对齐排列，与上方输入框和标签对齐3. 点击按钮之后的反馈：正在处理中4. 表单未填写完毕时对主要动作按钮置灰5. 把确认服务条款和完成表单整合成单一动做帮助文字1. 哪些情况需要在输入框附近放置简洁的帮助信息？人们不熟悉表单要求填入的数据：什么是PAC代码？人们质疑为何要填入特定数据：为什么要知道我的出生日期？人们可能会关心数据安全或者隐私：填写信用卡号码安全么？系统推荐数据填写方式：请用逗号分开某些数据输入框可填或者必填项，而表单的大部分内容都相反2. 输入框中显示概括回答方式的帮助文字 3. 一直显示帮助信息 / 激活输入框出现帮助信息 / 点击或移动到“问号”按钮出现帮助信息（悬浮）错误与成功1. 显示错误消息的原因：顾客输入了系统无法接受的内容，因此顾客无法继续下去（如用户名和密码不匹配）。这种错误应当明确、简洁地告诉顾客发生了什么，如何修复，然后继续前进；系统发生了非常糟糕的事情，导致顾客无法继续下去（如基础服务器刚刚遭到电击）。这种错误消息应当致歉，并向顾客提供替代的联系方式2. 解决错误：让人们知道发生了错误，如何解决错误（包括指示出错误的输入框位置，并突出显示），不要使用弹出对话框3. 长表单中的出错，如何让用户能知道第一屏及第二瓶中均有错误？在页面最上方用文字提示框标明？4. 成功消息：确保人们知道成功填完表单，并快速给予人们应得的表扬5. 成功消息不能阻碍人们的进程——而是鼓励人们采取更多行动

1、标签 * 填写速度：顶对齐＞右对齐＞左对齐（与便签和输入框的距离有关） * 可读性：左对齐＞右对齐 * 若故意让用户慢下来仔细填写陌生重要的数据，可使用左对齐； * 另，如果屏幕空间有限，可以采用表格内放置灰色标签加省略号的方法，但要确保交互和答案情景（区分标签和默认数据）；2、输入框 * 根据需求类型，判断设计目标侧重点，是易学、不易错or高效、高频操作？ * 下拉框是最复杂的操作，隐藏选项、容易被忽视、容易选错，唯一的好处是节省空间； * 单选，能看到所有答案，方便操作，但数量较多时，布局很乱，效率和准确性下降； * 必要时需注明或暗示输入内容的类型为数值还是文本； * 关键词——有效暗示：输入框长度、默认值暗示； * 输入框长度一致，美观但不实用，无法暗示输入长度，若没必要暗示，则最好保持长度一致； * 必填和非必填（尽量避免选填项）的标识，只标识少数项，可在顶对齐标签后面（灰字说明）； * 保持输入框有足够弹性，接受多种输入形式，用脚本检测答案形式符合要求之一即可；3、动作1）区分主动作和次动作（尽量避免）： * 主动作——提交、保存、继续等有意义的操作；（强化按钮） * 此动作——取消、返回、重置等有风险的操作；（弱化为链接）2）主动作-规避误操作： * 防止连续点击，点击后，立刻给出动画展示说明操作已生效正在处理中且按钮变为不可点状态； * 防止未完成即提交，可让系统检测每个字段是否已填入数据或已填入特定的数据，确认OK后，主动作按钮由不可点状态变为可点；4、帮助提示1）自动即时提示，交互后在合适的时机和位置提示；——缺点：填写前用户有疑惑，并不知道这里会有帮助；——解决方案：输入框内置提示或给出例子（e.g 13523212343）；2）鼠标指针触发悬浮提示，不影响页面布局；