Web表单设计 -- 读书笔记

Web表单设计读书笔记


表单总体来说是横在用户和企业之间的一道障碍， 没有任何人喜欢填写表单，不合时宜的表单往往会让用户反感，从而终止我们给设定的任务，比如说购买。而设计表单就如同设计模式一般，有规律可循。尽量减少用户填写表单时候的反感是每个表单设计人员必须首要考虑的因素。


表单组织结构：

1. 表单的问题，能够不问问题，就不要少问，精简问题。

2. 怀着面对面交流的心情来设计表单，就像日常谈话一样，把用户填写表单的过程设计成一次对话，你说出标签，能够让对方反应出需要做什么。

3. 将问题有逻辑的组织起来， 比如 个人身份信息， 安全条款， 邮寄地址 等，在表单里面用不同区域分开， 每一块专注一个逻辑，就像谈话一样。

4. 可选问题，可以在表单填完后给出，这样减少侵略性，这些问题可能会得到更多照顾。



表单的路径：

1. 进程提示，比较大的表单，分页的表单，要有识符，当前填到哪一步，是否完整，要标示出来。 二级进程提示，把表单里面的逻辑表单块也列出来。 如果进程提示没有固定的步骤，那么可以采用笼统的，没有明确期望的进程提示。

2. 表单命名，链接上的名字和表单实际页面上的名字要保持一致

3. 表单起始页，当有大量东西要填的时候，在起始页提示用户要做什么准备，比如ID，驾照，护照，银行卡等，不要等到花不少精力之后，发现缺失必要物品而无法继续。

4. 建立视觉线，清晰完成路径，标签，输入框，主要动作按钮形成一个垂直轴

5. 填写表单的界面，应该减少噪音，减少其他任务路径，用以减少用户退出表单填写的几率。




表单元素：

1. 对其方式， 如果垂直空间够，顶对其最好，这是最快，最清晰的方式。 如果垂直不够，且想让用户快速填完，则右对其，  如果想让用户充分思考放慢速度填写，那么左对其。

2. 输入框内部嵌入标签，确保标签和内容能够区分，填写内容的时候能够立刻隐去标签。 下拉菜单里面，可以加上标签。另外，不应该有太多的嵌入标签。 嵌入标签应该只在空间极其有限的条件下使用。



输入框：

1. 采用合适的长度，不要所有长度都一致，不利于暗示用户输入内容。 如果长度不能起到暗示的作用，那么就尽量一致。  比如postcode 6位

2. 必填项和可选项需要明确标示。 required * 显示图例， 或者写上required,  或者 optional. 

3. 采用视觉分割对齐的方式，对输入框进行分组：   组合行生日的年月日， 相关型， 包含型（checkbox里面包含细节的输入）



帮助文字：

1. 帮助文字应该非常简单，如果需要大段的说明来进行帮助，那么也许这个问题的问法存在一些不妥的地方

2. 帮助旨在消除用户疑问，比如隐私保密方面，安全方面

3. 帮助文字适时弹出，自动显示帮助文字。  需要能够让用户控制打开，或者关闭。 另外弹出的帮助文字的位置也要考究。 体现相关性，另外不能遮盖其余的表单元素。

4. 用户激活的帮助，采用可点击的图标，点击之后才显示帮助。

5. 帮助面板，页面中特意留出一览用来显示帮助，帮助信息会随着用户的活动而变化。 适合于比较复杂的，难以理解的系统。 面板可以按需要打开或者关闭



错误提示信息：

1. 如果我们有一个错误消息弹出来，那么就有一个地方值得改进，看看是否能够避免用户出错。

2. 错误消息的表现形式应该和其重要的程度相匹配。错误消息可以说是界面上最重要的部分。

3. 错误消息包含三大要素：  错误的提示， 出错位置的指引， 解决错误的方法

4. 错误消息显示方式： 图标，突出的位置，颜色采用红色。 错误表单元素采用特殊css标记

5. 消息处理模块在系统中的重要程度应该和其它模块比如日志，安全等同样重要。

6. 一个表单中多个元素出现了错误，那么需要在错误消息里面全部显示出来，但最好的方式是及时验证，不要等到提交的时候再一次性验证

7. 提交时发生错误，需要跳到发生错误的第一个表单元素。同时在表单顶部列出所有的错误列表。 长表单需要，短表单就没太大必要，但有总比没有好。   



成功提示信息：

1. 成功的消息可以考虑给与用户一定的赞扬。

2. 成功消息的页面不应该成为死胡同，成功之后该做什么，这也是需要提示，或者设计的。

3. 新成功增加的记录，可以采用不同的颜色标示，暗示已经成功。但要确保这种区别的背景能够在不需要的时候，自动退去。不要成为用户的负担。



表单交互：

1. 及时验证输入内容，用户名（重复），密码（是否符合安全级别）， 电子邮件。  注意验证的时机，需要等到输入完成以后再验证。

2. 多页表单，多模块表单输入的时候，需要采用正确以及错误的图标，标示已经完成的模块的正确性。

3. 及时反馈还可以提供一系列的正确答案给用户选择，这种体验会更加舒适。

4. 格式转换， 当用户输入的数据与预期的格式不一致的时候， 等用户输入完，立刻进行格式的转换，然后再验证输入是否正确，给出提示。

5. 限制的交互，比如某些输入框有长度限制，超出长度的输入，则给出红色的提示，并警告会截断多下的字符。 而不是简单设置一个文本长度，让之后的输入都无法进行。



减少输入框：

1. 注册界面只保留操作关键路径上的必须信息收集框，其他部分全部去除，即使有些部门需要。
2. 当然也不能因为去除了一些问题，从而导致另外一些问题变的很复杂。
3.



默认选项：

1. 选取默认选项的值，应该从用户体验的角度去设计。不能随机，更不能从利益出发，默认选好用户不希望的选项。这样只能损害自己的长期利益。
2. 单选按钮最好都有默认值
3. 为个性化默认选项设计好黏性，默认选择用户上次的选过的选项，或者多次选过的选项。



即使增加输入框:

1. 采用措辞明确的链接来实现，尾部打...， 表示这是可以点击的。

2. 可以放置在显眼的地方，或者相关输入框下面。

3. 有增加的链接，同时还需要有Remove的链接

4. 对于单一的表单，应该在增加输入框的方式上保持一致。




页面级选项布局：

1. 布局方式有以下几种：  通过页面跳转， Tab， 垂直Tab， 选择框， 所有单选按钮下方， 单个单选按钮下面。

2. 核心思想原则就是在不需要填写的时候，隐藏起输入框， 而不是采用变灰或者所谓的Read Only

3. 选择框，水平卡和垂直卡在每个页面输入框数量很多的时候，能够有非常友好的体验效果。 在页面选项不多的情况下用Tab， 页面选项很多，就用Select

4. 如果每个选项的输入框很少，2~3个左右，那么在选项下方显示这些输入框也是不错的选择




注册表单：

1. 为你的网站或者系统考虑，是否真的需要一个注册表单。 因为这个表单很可能让用户放弃你提供的服务。

2. 采取循序渐进的方式，让用户在操作期间完成账号的填写。发送邮件，生成密码等。

3. 自动给用户生成账号的时候，确保用户知道清晰访问账户的方式。