WEB表单设计思考

作为产品设计人员,对于表单的设计肯定是再熟悉不过了,几乎每次设计都会涉及到表单,由此也可见表单在WEB产品当中的重要地位和作用。在设计过程当中,随着设计经验的积累,表单的设计也越来越有讲究,以致可以形成一套设计准则或者规范,可以供他人参考。这里推荐大家阅读一下《WEB表单设计:点石成金的艺术》(清华大学出版社,Luke Wroblewski著)这本书,里面有很多的设计经验可以参考借鉴,至少我自己看了是受益匪浅的,觉得以前那种简单的将一堆信息堆叠在表单上的设计方式简直太弱了,有时候虽然觉得某些设计模式是不好的,但也说不出个所以然来,也就听之任之了,现在发现大错特错了,表单设计真的很重要,有时候会影响一个产品的成败。

首先是表单内容的组织上,并不是把所需要用户填写的信息简单组合就完事的,从用户的角度出发,我们要承认其实用户是很不愿意填写表单的,最好是什么的不用输入就可以完全来使用产品和服务,这样用户所付出的成本相对较小。基于这点,为了让用户不得不愿意去填写表单,就要在表单内容的组织上下功夫,以减少用户填写表单的抵触情绪。好的表单可以吸引用户去填写,并且整个填写过程是让人愉悦的,以尽量简洁的信息完成所需的达到的目的,这就是表单设计所需要注意的。

表单内容相信所有的产品设计人员都明白,都是筛选出来必要的信息来做展示,不必要的内容还是尽量不要显示的好,对于一些容易引起用户反感的填写项,最好不要放在一开始填写的页面,而是放到必须要填写的地方,比如注册页面就让用户填写手机号码,很多用户就会随便填写一个或者直接放弃注册,但是在电商网站的收货信息填写页面,让用户去填写手机号码却不会有任何问题,反而用户会觉得这里如果不让他填写是有问题的。

接下来就是要将这些内容进行组织,这是块需要深究的地方。举个例子来说,标签后面要不要带冒号的问题,一般的设计都会习惯性的带上一个冒号,以示这个标签后面的输入项是与之对应的,但其实用户根本不关心有没有冒号,他们是看排版的,默认会将紧跟着标签的输入项作为该标签的对应项,因此冒号也就成了可有可无的元素了。还有就是对齐方式,现如今各种对齐应该都是可以的,一是看内容的多少,二是看填写空间的多少,比如内容很多,就适合横排的,标签右对齐,输入项左对齐;填写空间小的,如手持终端,就适合竖排的,标签和表单都左对齐。

再就是内容的分布,相似、相近或者相互间有关联的信息要放在一起填写,比如填写用户的银行账号信息时,有开户行、开户人、银行网点、银行账号等多个字段,这些字段就最好放在一起,用户可以一口气输入完毕。再比如用户名、密码、邮箱等字段一般是相互关联的,也需要放在一起。对于按内容归类后,各区块添加背景色的设计,以前我也深以为然,但是书中说这种方式有时候会造成视觉噪音,会分散用户对表单内容的注意力,还会中断用户扫描表单的视线,因此最好还是别用,应当采用最少的必要的视觉信息来区分内容组。

还有是关于填写内容的引导,tabindex功能非常重要,很多时候会忽略这块的设计,按TAB键按一定的引导顺序切换肯定比用户每次都要用鼠标点击去定位来的快。必填项和可选项的填写指示也是必不可少的,这里可以先引导用户填写必填项,后填写可选项,一般来说在表单结尾处放置可选项,效果会好很多。对于填写内容页面有多个的情况,要有清晰的指示,如时间轴、浏览线、进程条等等就是非常不错的设计,最常见的就是电商网站的收货信息填写页面的引导条,清晰的告诉用户先填写什么后填写什么,最后才是支付。

对于一些约定俗成的表单设计规则,还是务必要遵守,因为这样的设计已经被用户普遍接受了。比如大家都用星号来表示必填项,你的设计却用来表示可选项,这会造成用户的理解误差。还有一些常见填写项的控制,如用户名、密码、邮箱,至少要和大家保持设计上的一致,只能更好不能更差,否则给用户的印象相当不好。

其次是表单上的交互,相对来说,表单上的交互因为不涉及到页面间的跳转,显得就相对比较少,大致有默认输入、帮助提示、即时验证、弹出框等几种。默认输入常见于输入框、单选框、复选框、下拉列表框、列表框等元素,当用户不做任何操作时,需要有一个默认的输入值,如输入框的输入提示,单选框和复选框的默认选中项,两种列表框的选择提示等。通过恰当的设置满足多数人需求的默认选择,智能默认可以帮助用户完成表单的填写,有的用户会忽视默认选项,所以要尽量确保默认选项符合大多数人的选择。不过有的地方也不适合设置默认选项,比如说性别,这个选项就最好是空的。还有一种情况就是出错后的数据保留,就是当用户填写完成提交,系统发现出错了,表单上要记录下用户原先所输入的内容,这也算是一种默认输入,如果再让用户输入一次,体验就很差了。

帮助提示现在应用的越来越多,简单来讲就是告诉用户每个输入项该如何去填写,有的是即时提示的模式,有的是放置一个问号,让用户自己选择去点开查看提示,这两种方式各有好处,取决于设计思路和场景,看是主动推送的好还是被动显示的好。前者有一定的脚本运行性能成本,但好处是用户每切换一个输入项都会提示;后者的主动权掌握在用户手上,对于那些已经知道如何去输入的选项当然不再需要提示。以前流程一种设计理念就是,所设计出来的产品要让傻瓜也能用,这样来说就是前者好。但有一定使用经验的用户肯定不需要这样去提示,但估计也不反感。

即时验证是非常好的一种提升用户体验的方式,能实时的给用户反馈其输入内容的正确性,降低了用户自身验证的成本。比如说注册的时候,提示用户所输入的用户名是否已经被注册就是很好的一个设计,如果等到用户全部填写完提交的时候才验证,就有点晚了。即时验证最适合用于错误率较高或者有特定输入格式要求的地方,可以帮助用户在有限的范围内输入正确的选项。有验证功能了最好还可以给出填写建议,比如给出一些供参考的答案,可以更好的帮助用户理解验证的逻辑和如何去输入正确的答案。

弹出框的设计最常见于一些扩展内容选择上,额外输入可以提供更多的选项或者高级选项,满足有需要的用户,同时不妨碍不需要的用户。比如日历,一般的设计都是弹出一个小的浮动层来给用户选择,但这里也是有讲究的,以前我也只是简单放个日历选择框在那里就可以了,一般只显示一个月,后来发现当需要选择时间区间时,或者需要夸周期安排的地方,就显示两个月出来选择会更好。这里可能叫浮动层更为合适,设计的时候要注意,一定要有可以关闭浮动层的地方或者方法,因为用户也不是每次触发都要输入的,有的只是试验。

还有就是表单上各个元素之间的联动交互,比如选择了第一个下拉列表框之后,第二个列表框的值就变化了,选好第二个,第三个就变化了,类似于这样的交互,表单间的这种联动效果,也能减少用户填写表单的判断成本和输入成本,有些联动可以直接帮助用户把下一项填写好了。

最后就是表单上元素的选择,这部分感觉是仁者见仁智者见智的,大家都有各自的看法,关键还是应用的场景不同,很难说出某个输入点是用下拉列表框更好还是单行输入框更好,只能说是在合适的地方放置合适的输入框,使之看起来自然,用户用起来方便,传达出清晰的结果即可。

表单设计上的这些设计思路,其实很多大家在平时工作当中都用到了,只是没有总结出来,所以在看的时候非常明白,但一定要在用的时候也非常明白才行。总的设计原则就是:尽量减少用户填写表单的痛苦,清晰的告诉用户如何完成填写表单,考虑表单使用的情景,确保表单所表达的意思与用户看到所理解的是一致的。

《WEB表单设计:点石成金的艺术》这本书里面很多例子都是通过对多家网络公司和用户的实时网站、眼动实验及可用性测试进行说明的,还是很有参考意义的,推荐大家看一下。



无觅相关文章插件,快速提升流量

“WEB表单设计思考”3 条评论

fuwu | 2012-10-14 23:02 |

不错,很有借鉴价值

依教奉行,必有所成

qifu | 2012-11-20 23:04 |

学习了,精简的很到位