今天说的是
《Web表单设计》读书笔记之表单结构
先来个思维导图暖场
01
表单的设计
1、表单设计的重要性
打开你的手机APP，挨个看一眼，不需要表单功能的可能就是手电筒了。
我们每天都在与表单接触，发送一条微信消息，需要唤起输入框输入内容，订餐，购物，打车，都需要输入地址等联系方式。
可以说，表单就是连接用户和商家（或网站）的中介，而设计师需要做的就是，消灭“黑中介”，即那些体验不好的表单。
2、表单设计的影响
如果不让用户每天上传视频，那抖音可能也就不会存在，同样，外卖，打车，网购，支付等基于互联网的一系列行为都将不能进行。
正所谓
一夜回到解放前，唯有手电筒伴身边
表单的组织
1、选取问题
一般进行表单填写时，用户需要分析每个问题，想出答案，然后再填写表单。
加速该过程的最好办法就是完全不要提问题，先思考，这个问题一定要问么 ？能自动获得资料么？有没有更合适的时间或场所能得到答案？
用户真正关心的是问题内容和为何要问这些问题，更重要的是，所问的问题是否符合用户填完表单能获得的东西。
以街道地址为例，如果浏览网站前，必须把街道地址告诉用户，用户可能很反感，很多人会使用一套虚假信息或者随便输入asdfasdf，但是如果决定了要购买的东西，需要配送，而网站不问你街道地址，你会觉得很奇怪，你会小心，准确地填入真实地址。
而标签末端需不需要放置冒号，用户真的不关心
选取问题的原则可总结为以下4点：
保留： 问的问题与用户渴望给出的答案一致，正如上文中提到的购买商品过程，网站会询问配送地址，这与用户的期待是一致的
删减： 去除一切不必要的问题，如果一个购物支付表单中询问用户生日，这网站肯定是有毛病
延迟： 如果一个问题不需要马上让用户回答，那么就延迟发问，网站在购物时询问用户生日，可能是基于运营等因素的考量，但没有在恰当的时机做恰当的事，肯定会招人厌恶
解释： 个人数据（如电话号码）用户不想回答，需要给出清晰简短的理由，解释为什么问这些问题，要确保为用户带来好处，如“这个问题能帮助我们尽快处理订单”
2、构建对话
考虑如何以对话形式而不是盘问形式组织表单
假设有陌生人唐突地问你
“你叫什么名字”
“住在哪里”
“电子邮件地址是什么”
“生日是哪天”
你就会问自己：“这人是谁？”
你会感到不安，并希望该陌生人提供一些他的情况给你，而不是向你问个不停
如果表单中有个标签叫“发行卡”，你会疑惑这是在问什么？
如果改为“哪家银行签发此文件”，可能会更快得到答案。
而标签使用的术语也会对用户如何快速提供答案发挥举足轻重的作用，你真的能理解“签发”么？
你可能会理解为”哪家银行给的这份文件？
所以使用用户描述动作的术语有助于让问题更容易理解。
并不是把表单上所有的标签都变成句子，很多实例都表名简洁、单个词的标签远远胜于较长、描述更多的标签。
3、内容的组织
为保证对话流畅，可将问题分为有意义的组，根据问题数量和情境，可将这些组分到多个网页或者单个网页的不同部分。
表单包含大量问题，而只和一个主题相关，一般需要一个较长的网页来组织表单
Apple网站将注册分为4组
基本信息，账号密码，安全问题，相关公告
表单包含大量问题，同时有若干主题，需要多个网页来组织表单
若很多问题需要按顺序回答，否则回答就没有意义，为了回答每个问题，用户要看到所有问题，此时，一个较长的网页可能是最佳方案
在其他情况下，如果某些问题出现在表单填完之后，效果最好，比如类似“您如何知道我们”或“您想进一步了解服务么？”的可选性营销问题，
在表单填完之后再问这些问题，实际回答率会更高，侵略性较弱。这也就是上文中提到的延迟发问
4、归纳区别
每个内容组之间的区分不需要大量的视觉差异，对比太多往往会造成过多的视觉污染，会阻碍用户浏览表单，注意力分散，使用最少的视觉信息有助于保持焦点在表单内容，而不是表现形式上
03
完成之路
没有人喜欢填写表单，用户碰到表单的首要目标是填完之后的东西（购物，使用服务，管理信息等）
1、表单的命名
告诉用户在填什么表单，填完能干什么，用户 不会仔细阅读碰到的每一个表单，因此解释工作往往就落到表单名称上。
因此，表单名称与要求用户采取的行动要保持一致。
确保表单名称符合用户的期望，并简洁解释每个表单的用途。
电商网站中，我们把想要购买的商品放进了购物车，点击结算按钮，结果登录表单出现了，此时必会懵逼并气愤，我们想要输入信息，然后结算，并进行支付，而不是登录。
2、起始页
起始页的作用是提供额外的信息告诉用户如何开始。
如果表单要求用户提供大量的信息，而用户不可能有大量时间来填写，起始页就能提供宝贵的情境信息。
起始页说明了填写表单所需要的账户类型，驾照，银行账户资料及其他信息，还说明整个过程需要花10-15分钟。
但不是每个表单都需要起始页，特别是马上给出问题答案的表单
只有需要花费大量时间填写的表单才应当考虑起始页，比如在线调查，或者用户填写到一半时发现有些模糊信息阻碍着填写反而越来越感到沮丧等情况。
3、清晰的浏览线
确保视线在表单中舒适移动，不会错过任何重要信息。
空间间隔合适，很大程度上取决于表单风格，一般而言，最好采用输入框高度的约50%——75%作为问题之间的间隔。
要：遵循一条向下的直线，单一路径更容易处理表单所提问题，提升效率
不要：“之”字形眼球运动
4、注意力分散最少
为了让用户注意力集中完成表单，需考虑网站元素哪些会分散注意力
即使一致的导航，标题和横幅广告适用于大多数页面，但它们仍不适用于表单。
这些元素，会分散注意力。
注册页面只保留核心表单，剔除导航，foot等多余元素
剔除与表单没有直接关系的界面元素，有助于保持用户完成填写。
Amazon可在任何地方销售商品，但一旦进入支付过程，就没有任何可有可无的装饰。
5、进程指示
表单页数，所处位置，保存并返回进程
需要注意进程指示可能会错误地显示完成表单所需的网页页数和步骤，并不能准确反映表单所需要的页面
比如：进程指示表明要填写3项内容：发货、账单、下订单、选择收货地址，第一页是从现有收货地址中选择，如果没有想要的收货地址，就需要增加额外的页面添加新地址。步骤一突然变成楼2步。
第2部选择账单，验证在现在支付服务提供商，登录网站，选择资金来源，或者提供新账单地址。步骤二变了了4步。
已经用6步来完成原本告诉用户2步完成的事情，解决方案之一就是避免使用进程指示，而是让用户 尽快填完表单。两一个办法是使用更笼统的 ，没有明确设置期望值的进程显示。
清晰的进程指示，利于用户了解范围，状态，位置
6、Tab键跳转
在输入表单时，可采用Tab键进行跳转切换，比鼠标点击更高效。
但是从一栏底部移动到另一栏上方，体验会很糟糕。如果是小浏览器窗口，最后一个输入框会看不到，体验会失去方向。
