表单设计的首要目标:让人们迅速并且轻松地完成填写。
一、内容的组织
为了保证对话流程,可以将问题分成有意义的组。根据问题数量和情境,可以将这些组分到多个网页或者单个网页的不同部分。
例如 yahoo!注册表单将个人信息、正在创建的账号、访问账号的方式和若干信任及安全条目问题分成四个不同部分。这些部分用标题区别于网页中的其余元素。紫色粗体标题比其他的表单标签承载了更多视觉分量,你能浏览扫描表单,明白需要提供哪些信息
二、归纳区别
内容组之间的差异不需要大量视觉差异。事实上,内容组之间对比太多往往会造成过多视觉污染,会阻碍人们浏览表单。以图1.1为例,每个内容组都从视觉上区别于表单其余部分(紫色粗体)。
请考虑下图1.2和图1.3表单之间的区别。一个表单是黄色边界,黄色背景色,红色栏目标题,表格框合并归纳相关内容。而另一个表单只用一种弱背景色变化来区分表单中有意义的部分。使用最少的视觉信息有助于保持焦点在表单内容而不是表现形式。
但即使内容组之间的细微区别也会被滥用。有些设计师考虑到他们所认为的标签左对齐的缺点,会选择使用交替背景颜色来组织左对齐标签与右对齐输入框,如图1.4。但标签定位眼动跟踪研究表明,在标签左对齐布局中,人们一般能顺利将输入框和标签联系在一起,只是花费时间会更长。因此,这种做法并没有真正解决问题,事实上还会引发另一个问题。
两种不同背景颜色用来区分标签和输入框,水平线用来分隔每一对标签和输入框。这种做法增加了15种额外的页面布局元素:中心线、背景区和水平线。这些元素分散了注意力,焦点更难集中到布局的最重要元素:标签和输入框。信息由产生作用的差异构成,任何无助于布局的视觉元素都会损害布局。扫描左栏标签时说明了这一点。眼睛需要一再停顿,因为要考虑水平线和背景颜色组合构成的每对水平线和文本框。
当然,这并不是说表单布局绝对不能使用背景色和线条。考虑区分内容组时,应当考虑采用最少的视觉信息图1.6。 过多的视觉信息可能会导致注意力分散,弄巧成拙。