Web表单设计 创建高可用性的网页表单PDF电子书下载

前言 什么是表单 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

第一部分 关系 11

第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

第二部分 对话 45

第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.23有多少选项 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

65善待错误 108

6.5.1验证有时可以提供帮助 108

6.5.2尽早验证 109

6.6结束对话时说“谢谢” 111

6.7小结：填表过程一气呵成 111

小插曲 和弹出窗口说再见 113

第三部分 外观 117

第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

第四部分 测试 165

第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