📖 Web 表单设计

Web 表单设计：点石成金的艺术, Luke Wroblewski, 清华大学出版社, 2010

表单的重要性 (p5)

多数人不喜欢填写表单,这个事实已足以说明应关注优秀表单设计,但还有很多其他原因可以说明表单的重要性,尤其对于互联网.表单在网上是电子商务、社交互动和大多数基于生产力应用类型网站的关键.

设计原则 (p20)

尽量减少痛苦. 人们要的是填写完表之后的东西,所以填写过程应尽量简洁、容易.
说明填写完成路径. 几乎每个表的目标就是填完,表单应清晰的告诉人们如何完成这一目标.
考虑情境. 表单并非凭空存在. 它们几乎都是更广泛情境(受众群体、应用、业务)的组成部分,这些情境决定了如何使用表单.
确保一致沟通. 表单事故科和公司之间对话的中间人.多个团队参与对话(市场营销、隐私部门、工程部、设计部、商业部分等),但表单只能用一种声音说话.

用户真正关心的是问题内容和为何要问这些问题 (p25)

用户关心问题内容和所问原因,而最重要的是,所问的问题是否符合情境,也就是说是否符合用户填完表单能获得的东西.

构建对话 (p27)

考虑如何以对话形式而不是盘问形式组织表单,试着讨好新客户还有很长的路要走.

比如: 盘问形式, Preferred content; 对话形式, I prefer content ….

内容组织 (p29)

为了保证对话流畅,可以将问题分成有意义的组.根据问题的情境,可以将这些组分到多个网页或者单个网页的不同部分.

归纳区别 (p34,p35)

…内容组之间的区别不需要大量视觉差异.事实上,内容组之间对比太多往往会造成过多视觉污染，会阻碍人们浏览表单.

背景色柔和变化或者细线条常常足以有效组织表单中相关内容组

注意力分散最少 (p45)

为了使人们将注意力集中于完成表单,还应当考虑网站元素有助于说明清晰的填写完成路径,而哪些会分散注意力….剔除与表单填写没有直接关系的界面元素,有助于保持人们完成任务,并消除放弃路径.

进程指示 (p46)

如果完成表单之前要回答的问题分散在多个网页,那么通过表单来显示填表进展情况是很有用的.

输入框的长度 (p77)

eBay Express 表单采用不同长度的文本框提供暗示,帮助人们了聊如何回答问题

比如: 为邮政编码和电话提供不一样的长度.

表单结构的设计 (p85)

强大设计源于重复运用一些简单模式….交互设计师已经开始使用一致的交互模式来简化设计决定,并提供连贯性.

主动作和次动作 (p98)

如果无法移除表单中的次动作,我仍然推荐从视觉上区分出次动作….

比如: 用绿色标识提交按钮, 用红色标识取消按钮.

提供帮助的时机 (p108)

如果帮助文字过多,可能说明是时候回到制图板,确保所提问题都是该问的问题.

成功消息 (p137)

Pownce 采用简短的成功消息,这不仅不会阻碍人们采取进一步动作,还能清晰解释动作的结果.