产品经理培训  交互设计培训
咨询电话:400-860-8198

网站建设优化细节致胜:表单项目的排列

http://51fair.com 2007-5-6 22:07 来源:学吧
文章来自于【学吧】http://51fair.com/pm/view.asp?ArticleID=265
  填写表单在网站上是一个非常普遍的应用,人们总要在网站上注册填写资料,这真是一件挺痛苦的事情,我就比较讨厌网站的注册系统,总是充满了不太想填写的东西,或者不合理的排序布局。在很多网站填写表单时发现,表单元素的排列甚至比让输入框默认获得焦点更容易让人忽略,如填写信息分类混乱、必填项目和可选填项目交叉放置、文本链接和输入项目交叉放置等。
  
  1、表单填写信息分类混乱
  
  对于一个设计合理的表单,让填写信息时肯定是有所取舍,不会让用户一股脑填写非常多的信息,如果必填信息很多,那么在页面给用户展现出来的也是经过精心布局分类的。在选择布局的时候要按照填写信息的类型,如把最相近的放置在一起,如“地址”下面应该放置“邮政编码”,我见过很多两者距离甚远的表单;公司信息要集中填写,不要在个人信息里面放置单位名称、公司主页,而在公司信息里面却需要填写个人手机号码。正确的把信息归类,让用户按照自己脑海中最相近、最熟悉的内容顺序进行表单填写是一件非常舒服的事情。
  
  2、必填项目和可选项目交叉放置
  
  这个现象是相当普遍的,有些是因为信息分类的问题,如用户注册表单中,个人的基本信息和联系信息中有些资料并不是必填的,但又要把信息归类布局。看起来是非常矛盾的事情,而解决这个问题的办法也只有尽可能罗列出必填内容,目前很多大型网站已经最大化的简化用户的注册信息填写量,只在需要某些信息时才让用户补充填写。必须项目和可选项目的交叉放置可能会影响用户填写表单的积极性,把必填信息放置在最前面,而把觉得必要而放置的可选填写项目放置在表单的下部,以加快用户对填写内容的判断,提高用户对表单填写的热情。
  
  3、文本链接和输入项目交叉放置
  
  有些网站,为了对填写内容做出举例说明,会在表单填写项目的右侧再加上帮助链接,或者增加一些宣传广告类的文字链接。而这种交叉放置对经常使用键盘操作的用户来讲就会出现一个不方便的地方:按Tab键切换输入项目的时候会转换到文本链接上。如果需要对填写项目进行说明,尽量使用简单的文本,很多填写项目都是非常简单明白的,只需要稍加注释就可以了。很知名的动网论坛的登录页面就存在这个问题,我比较习惯输入用户名后按Tab键直接切换到密码框直接输入密码,而在动网论坛的登录页面按完Tab键后是到“没用注册”,输入密码后却到了“忘记论坛密码”这两个文本链接,因为动网还要输入验证码,这两个文本链接无形中影响了我的使用,很多此输入完用户名按Tab键后就直接输入密码了,发现错误还得重新填写一次,感觉很是麻烦。如下图: