具体描述
网页表单无处不在——从注册表单到联系信息表,从商业领域到政府部门。成功的表单设计不仅能提高用户满意度,还能收集更加精确的数据并降低维护费用;而失败的表单设计不仅会收集到与需求相悖的冗余信息,还极有可能导致潜在消费者的流失。
设计具有高可用性的表单绝非易事。两位作者通过丰富的实例,明确阐述了如何从表单的关系、对话和外观三层模型出发,设计出具有高可用性的优质网页表单,并通过可用性测试及早发现表单的潜在问题。通过阅读本书,读者能够了解到如何定义需求,如何提出与用户期望相符且容易理解的问题,以及如何撰写说明文字、设置进度指示器和处理出错信息。
经实践检验的实用建议将帮助你远离设计失误,创建出美观、高效的表单。
可贵的设计方法和技巧是赢得数据准确性和顾客满意度的制胜法宝。
包含大量实例——从细节展现(如标签对齐方式、必填字段)到视觉设计(如创建整齐的网格、颜色应用等)。
作者简介
Caroline Jarrett经营着一家可用性咨询公司Effortmark Ltd。自1992年开始开发税务表单,从此迷恋上了易用表单设计。她每月在www.usabilitynews.com撰写专栏“Caroline’s Corner”,阐述关于可用性的理念。
Gerry Gaffney经营着一家可用性咨询公司Information & Design Proprietary Ltd。主编过几期《用户体验》杂志,还创建了广受欢迎的“用户体验播客”(uxpod.com)。他认为表单设计是个难题,但还是试图从客观的角度来分析表单。
目录信息
前言 什么是表单 1
0.1 表单牵动你和我 1
0.1.1 糟糕的表单后果很严重 1
0.1.2 优良的表单众人皆欢喜 2
0.2 煮酒论表单 3
0.2.1 只谈设计不谈技术 3
0.2.2 只谈网页不谈纸质表单 4
0.2.3 可用性:让表单更好用 4
0.2.4 制表流程:试试你就知道 4
0.3 一些定义,两种流程 4
0.3.1 表单,一看便知 4
0.3.2 三个层次:关系、对话和外观 5
0.3.3 一个混乱而典型的表单设计流程 6
0.3.4 系统化设计流程 7
第一部分 关 系
第1 章 说服人们回答问题 11
1.1 理解用户才能设计出好表单 11
1.1.1 人们对表单做出何种应答 11
1.1.2 读者、匆忙填写者和拒绝者 14
1.1.3 选择恰当的提问时机 15
1.1.4 关系随问题变化 16
1.2 影响反馈率的三条法则 18
1.2.1 规则1:建立信任 18
1.2.2 规则2:降低社交损失 19
1.2.3 规则3:增加奖励 19
1.2.4 一份小奖励:在必要时为用户提供表单 20
1.3 表单应该有多长 22
1.4 谁来回答问题 23
1.4.1 考虑身体差异 23
1.4.2 通过提问了解用户 24
1.4.3 了解用户如何理解表单 24
1.4.4 你是否足够了解自己的用户 25
1.4.5 通过创建人物角色,反映用户的现实情况 26
1.5 小结 27
小插曲 注册表单:如果不可避免应当如何应对 28
第2 章 获得正确的信息 31
2.1 为什么要收集信息 31
2.1.1 询问利益相关者 32
2.1.2 询问使用信息的人 34
2.1.3 运用问题协议研究信息使用方式 34
2.2 表单发布机构是否已经持有信息 35
2.2.1 使用表单发布机构已经持有的信息 35
2.2.2 避免重复 36
2.3 了解别人的问题 37
2.3.1 如果没有竞争对手该怎么做 37
2.3.2 一个观察竞争对手的示例 38
2.4 小结:获得正确的信息 38
案例分析 会议预定表:问题协议样本 39
第二部分 对 话
第3 章 提出容易回答的问题 45
3.1 要保证交流顺畅 45
3.2 问题要容易理解 47
3.2.1 用常见词汇提问 47
3.2.2 一次只问一个问题 49
3.2.3 将否定的问题转换为肯定的问题 50
3.2.4 谨慎的分组方式有助于明确含义 51
3.2.5 不要加入决策点 52
3.2.6 要知道文化差异 53
3.3 让人容易找到答案 54
3.3.1 插入式答案 54
3.3.2 搜集式答案 55
3.3.3 第三方答案 55
3.3.4 创造式答案 56
3.3.5 回答策略不匹配将产生问题 56
3.3.6 了解用户将在何处获取答案 58
3.3.7 清楚谁拥有你需要的数据 58
3.3.8 帮助用户找到答案 59
3.3.9 标签内容要符合用户获取答案的方式 61
3.4 让答案容易判断 61
3.5 让表单答案容易填写 63
3.6 小结:提出容易回答的问题 65
第4 章 说明文字 67
4.1 撰写实用的说明文字 67
4.2 5 条简明语言法则 68
4.2.1 法则1:以常见的方式使用常见词汇 68
4.2.2 法则2:使用简短、肯定、主动语态的句子 70
4.2.3 法则3:推翻文字的围墙 70
4.2.4 法则4:先选择,后行动 71
4.2.5 法则5:使用有帮助的标题 73
4.3 删繁就简 75
4.4 放置适当 75
4.4.1 贴切的标题 76
4.4.2 提前告知需要搜集哪些信息 76
4.4.3 将用户引导至不同的表单 78
4.4.4 用问题替代说明文字 78
4.5 一个“前后对照”的例子 79
4.6 小结:说明文字 80
小插曲 提供帮助 81
第5 章 选择表单控件 85
5.1 选择恰当的控件 85
5.2 符合用户对控件工作方式的预期 86
5.2.1 键入比选择更自然吗 87
5.2.2 答案很容易输错吗 88
5.2.3 有多少选项 89
5.2.4 是否允许用户做多重选择 90
5.2.5 选项是否在视觉上突出 91
5.2.6 用户理解问题是否需要参看选项 92
5.3 清晰地描述选项 92
5.4 合理的顺序 93
5.5 慎用专门控件 93
5.5.1 日历有助于显示相对日期 94
5.5.2 地图有助于显示地理信息 94
5.6 小结:选择表单控件 95
第6 章 填表过程一气呵成 97
6.1 让表单填写过程连贯流畅 97
6.2 按话题分解长表单 97
6.2.1 压缩字段(较少采用) 97
6.2.2 按话题分成多页表单(更好的方法) 98
6.2.3 每次只提一个话题 98
6.2.4 先提符合预期的问题,后提意料之外的问题 99
6.2.5 少提突兀的问题 100
6.2.6 解释多次出现的问题之间有何差异 100
6.3 使用进度指示器 102
6.4 勿因突变而让用户感到意外 105
6.4.1 避免不通知就改变页面 105
6.4.2 按照用户的要求改变页面 106
6.4.3 基于早期输入的信息创建自定义表单 106
6.4.4 不要将标签用作表单的导航方式 107
6.5 善待错误 108
6.5.1 验证有时可以提供帮助 108
6.5.2 尽早验证 109
6.6 结束对话时说“谢谢” 111
6.7 小结:填表过程一气呵成 111
小插曲 和弹出窗口说再见 113
第三部分 外 观
第7 章 关注细节 117
7.1 外观的细节 117
7.2 标签位置应当容易看到 118
7.2.1 眼动跟踪表明用户的视线集中在字段和标签上 119
7.2.2 用户会注意到位于字段上方和左侧的标签 120
7.2.3 用户只会查看觉得与字段相关的标签 120
7.2.4 把标签放在字段上方有时奏效 121
7.2.5 右对齐插入式答案的字段标签更有效 121
7.2.6 其他答案类型的字段慎用右对齐标签 122
7.2.7 询问个人资料的表单应左对齐标签 122
7.2.8 拿不准时最好左对齐标签 123
7.2.9 特殊考量因素:标签翻译 123
7.2.10 确保每个标签都与对应字段密切相关 124
7.3 标签末尾要加冒号吗 126
7.4 标签应该句子首字母大写还是标题首字母大写 127
7.5 标记必填字段 128
7.5.1 标记必填字段;若要标记不强制要求的字段,则用“(可选)”标识 128
7.5.2 说明选用的标记符 129
7.5.3 示例:必填字段的困惑 129
7.6 选择易读的文本:字体和词汇 130
7.6.1 选用具有良好色彩对比度的大号字体 130
7.6.2 版式不宜多变 132
7.6.3 应用空白让段落更容易阅读 133
7.7 小结:关注细节 134
小插曲 用衬线字体还是无衬线字体 135
第8 章 构造简约的表单外观 137
8.1 令表单外形美观的关键因素 137
8.2 用户知道你是谁吗? logo 和品牌风格 138
8.2.1 品牌信息过少妨碍建立信任 139
8.2.2 品牌风格元素应保持适量 140
8.2.3 谨慎配色 141
8.2.4 在标签、字段和按钮上应用少量品牌风格 143
8.2.5 用户何时会注意品牌风格 144
8.2.6 切勿改变用户的浏览器 145
8.3 网格:让表单整洁有序 146
8.3.1 对齐几根垂直的粗网格线 147
8.3.2 创建新网格线,而不是迁就现有的网格线 149
8.4 分组:让表单条理清晰 150
8.4.1 位置是表示分组最简单明了的方式 151
8.4.2 过多的线条会破坏分组 152
8.4.3 切勿改变样式 153
8.4.4 切勿在分组标识图案中掩藏文字内容 154
8.5 避免两栏表单 156
8.6 小结:构造简约的表单外观 159
案例分析 彻底改变外观 160
第四部分 测 试
第9 章 测试 165
9.1 我们热爱可用性测试 165
9.1.1 可用性测试方便快捷、立竿见影 165
9.1.2 我们如何对表单做专家评审 166
9.2 如何进行可用性测试 166
9.2.1 测试更多用户(通常5 位就够了) 166
9.2.2 设法找到“真实的”用户 167
9.2.3 测试参与者与目标用户有何差异 167
9.2.4 思考用户将在哪里找到答案 167
9.2.5 了解测试参与者的想法 168
9.3 最后的话 169
延伸阅读 171
参考文献 179
· · · · · · (收起)
读后感
* 1.蝶形选票butterfly wills * 2.表单的三个层次:关系relationship:提出问题的人和回答问题的人之间的关系;对话conversation:所提问题,说明性文字,问题分组;外观appearance:字段、输入框、图片的排列,颜色。 * 3.a.填表人和表单发布机构的关系会影响应答行为;b....
用了两周时间,在拥挤的地铁上,图灵的新书《web表单设计-创造高可用性的网页表单》看完了。 web表单在我们当今的互联网生活中无处不在。大到招聘网站当中的个人简历,小到用户登录,要想创造出高可用性的表单,除了重视这方面的公司外,我想大多数网站中的web表单易用性都很糟...
用了两周时间,在拥挤的地铁上,图灵的新书《web表单设计-创造高可用性的网页表单》看完了。 web表单在我们当今的互联网生活中无处不在。大到招聘网站当中的个人简历,小到用户登录,要想创造出高可用性的表单,除了重视这方面的公司外,我想大多数网站中的web表单易用性都很糟...
用了两周时间,在拥挤的地铁上,图灵的新书《web表单设计-创造高可用性的网页表单》看完了。 web表单在我们当今的互联网生活中无处不在。大到招聘网站当中的个人简历,小到用户登录,要想创造出高可用性的表单,除了重视这方面的公司外,我想大多数网站中的web表单易用性都很糟...
表单设计的层次 -关系:提出问题的机构与回答问题的用户之间的关系 -对话:表单提出的问题、附加的说明文字以及表单按话题排列的方式 -外观:表单看上去的样子:文字字段、输入框、排列方式以及颜色 表单设计的流程 1.说服人们回答问题 -选择在合适的时机让合适的用户填写...
用户评价
作为一个对细节有着近乎偏执要求的UI/UX设计师,我一直致力于让每一个交互元素都尽可能地完美。在接触到《Web表单设计》这本书之前,我曾花费大量时间研究各种平台上的优秀表单案例,试图从中提炼出共性的设计原则。然而,这些零散的知识碎片总让我感觉缺乏系统性。这本书的出现,恰好填补了这一空白。它以一种结构清晰、逻辑严谨的方式,系统地阐述了Web表单设计的方方面面。从最初的信息架构设计,到具体的控件选择、布局排列,再到后期的可用性测试和迭代优化,无不涉及。书中对于不同表单类型的优劣分析,以及在特定场景下应该如何选择最合适的设计方案,都给我留下了深刻的印象。我尤其欣赏作者在书中提出的“最小化原则”,强调在满足需求的前提下,尽可能地简化表单的复杂度,减少用户需要思考和操作的步骤。这不仅体现在字段的数量上,也体现在标签的清晰度、提示信息的时机和内容等方面。这本书不仅提供了理论指导,更重要的是,它给出了一套可执行的方法论,让我能够将其直接应用到实际工作中,并取得了显著的成效。
这本《Web表单设计》在我手中已经翻阅了不止一遍,每次都能从中汲取到新的养分。我原本以为对表单设计已经有了足够的理解,毕竟在多年的Web开发生涯中,也亲手构建过无数的表单,从简单的登录注册到复杂的订单填写,似乎都已经游刃有余。然而,这本书的出现,像是一束精准的光,照亮了我之前习以为常的盲区。它并没有罗列枯燥的HTML、CSS、JavaScript代码片段,而是深入浅出地探讨了表单设计背后的用户心理和交互原则。读完之后,我才惊觉,原来我之前所做的,很多时候只是“实现”了功能,却未能真正做到“用户友好”。书中关于如何减少用户认知负荷、如何引导用户填写、如何处理错误反馈的论述,都让我茅塞顿开。特别是关于“渐进式披露”和“情境化提示”的章节,让我对如何让复杂表单变得简单易懂有了全新的认识。它教会我,设计表单不仅仅是技术上的实现,更是一场与用户的深度沟通,需要站在用户的角度去思考,去预测他们的每一个可能的疑问和难点,并提前给予解决方案。这本书的价值,在于它能够帮助你从一个“实现者”转变为一个真正意义上的“设计者”,让你的表单不仅仅是数据的入口,更是提升用户体验、促进转化率的关键环节。
我是一名自由职业的Web开发者,通常情况下,接到项目后,我最先关注的就是技术实现的可行性和效率。对于表单这种相对“基础”的功能,我往往会套用一些熟悉的模式,然后快速构建。直到一次项目合作中,我与一位前端专家交流,他向我推荐了《Web表单设计》这本书。起初我还有些不以为然,觉得自己的技术能力足以应对,但抱着学习的态度翻开后,我才意识到自己在这方面的视野有多么局限。这本书的语言风格非常朴实,没有太多华丽的辞藻,而是直接切入主题,用大量的实例来佐证观点。它详细地讲解了如何根据不同的用户群体和业务需求,设计出既易于使用又具有高转化率的表单。书中对于“动态表单”和“响应式表单”的介绍,尤其让我耳目一新,让我明白了如何通过巧妙的交互设计,让表单在不同设备上都能提供流畅的体验。此外,书中关于“情感化设计”在表单中的应用,也让我开始思考,如何通过微小的细节,让用户在填写表单的过程中感受到被尊重和被关怀,从而提升整体的品牌形象。
作为一名长期从事用户研究的学者,我一直认为,理解用户是设计的基础。而《Web表单设计》这本书,恰恰是从用户出发,深入剖析了他们在填写表单时可能遇到的各种挑战和困惑。书中并没有简单地列举“应该怎么做”,而是深入探讨了“为什么需要这样做”。例如,在关于“标签位置”的讨论中,它不仅列举了不同位置的优缺点,还分析了其背后用户阅读习惯的差异。我非常赞同书中关于“错误处理”的理念,即应该尽量避免用户出错,而不是仅仅在用户出错后进行补救。它提供了许多创新的错误提示方式,比如“实时验证”和“预测性错误提示”,这些都能够有效地降低用户的挫败感,提高填写完成率。这本书的价值在于,它提供了一个坚实的理论框架,让我能够更有针对性地进行用户访谈和可用性测试,从而发现隐藏在用户行为背后的深层原因。这本书也为我提供了一些非常有启发性的思考方向,让我开始重新审视和定义Web表单设计的核心目标。
我是一位刚入行不久的网页设计师,对于Web表单的设计,一开始只是按照培训课程里学到的基本知识来操作,填塞一些输入框和按钮。直到我偶然发现了《Web表单设计》这本书,才真正打开了我的设计思路。这本书就像一位耐心且经验丰富的导师,一点一点地教我如何从用户的角度去思考问题。我特别喜欢书中关于“视觉层级”和“分组逻辑”的讲解,让我明白了如何通过合理的布局和视觉引导,让用户一眼就能看清表单的结构,并知道下一步该填写什么。书中还提到了许多关于“可用性测试”的方法,让我意识到,设计并不是一次性的工作,而是需要不断地进行用户反馈和迭代优化的过程。让我印象深刻的是,书中举了许多实际案例,分析了成功和失败的表单设计,并给出了具体的改进建议,这让我能够清晰地看到理论如何转化为实践。这本书的内容非常接地气,没有太多高深的理论,而是充满了实用的技巧和方法,让我感觉自己离成为一名优秀的设计师又近了一步。
这本书简约明了,既适合项目经理读、也适合网站设计师读,从关系、对哈、外观、测试四方面来讲解如何设计可以让用户可以一气呵成的填完的完美表单,很不错,值得一读,外观方面通过ebay的例子来讲解,很直观易懂
这本书简约明了,既适合项目经理读、也适合网站设计师读,从关系、对哈、外观、测试四方面来讲解如何设计可以让用户可以一气呵成的填完的完美表单,很不错,值得一读,外观方面通过ebay的例子来讲解,很直观易懂
“社会交换论”Dillman 2000 核心理念:人们只会回答那些让他们感觉良好的问题。 三条法则:建立信任、降低社交损失和增加奖励。
D4-5: 模式篇。2019-05-17: 从「用户认知」角度切入,作者从一个新颖的角度来理解表单,运用了我们说的「设计思维」:首先确定问题是什么,涉及的对象有哪些,他们的目标是什么,是什么关系,发生了什么,如何呈现。表单是用户产品之间「关系」的纽带,也是他们之间「对话」的表现,还需要考虑「外观」的呈现。【详见长评】
入门