深圳网站制作专业品牌! 联灿科技-深圳企业网站专业服务商 加入收藏
用户名: 密码: 注册
深圳市联灿科技有限公司深圳做网站,找联灿! 深圳网站设计热线 深圳网页设计在线咨询
技术交流
网站设计
网站优化
行业动态
 
深圳做网站,找联灿!
深圳市联灿科技有限公司成立于二零零四年,是家专业提供深圳网站制作深圳网页设计深圳网页制作深圳网站设计深圳网站开发、域名注册、虚拟主机、企业邮箱等服务的正规深圳做网站的公司,迄今已累积客户逾千家,在业界具有相当的知名度,在深圳网站建设市场上树立了良好的口碑。
业精于专,值得您的信赖!
销售热线:0755-26955674
查看更多联系方式
网站设计
网站交互设计的小细节:表单必填项设计思考

  相信每个用户面对页面中洋洋洒洒的表单都会倍感烦躁,有的用户甚至直接选择放弃,那么该如何让用户面对表单时避开信息干扰,直接注意到他们的必填信息呢?

  如上图,表单信息的表现类别分为:

  41%的网站使用标签右对齐 (YouTube, Facebook, Metacafe)

  30%的注册表单使用顶端对齐(Behance.net, Wufoo, Tickspot, Mixx, DZone)

  29%使用的是标签左对齐((Digg, Ning, Wykop.pl, 43things, StudiVZ)

  表单中的必填项主要有以下几种表现形式:

  首先就是我们熟知的以*展现形式

  *在信息标签的左侧

  *在信息标签和填写信息的当中位置

  *在信息标签和填写信息的右侧

 

  *在信息标签右侧

  那么关于*的位置应该如何设定才能达到理想效果呢?

  从下面图片可以看出用户对于表单的视觉走向:

  上图表明对于表单类别的视觉走向是以左边标签为主向右延展。大部分用户集中在标签位置,通常用户填写顺序也是从上至下的,从左至右,较少用户会选择跳跃式的填写模式。

  从上图用户视线流可以看出,*的位置应该在标签附近,并且能够整齐排列,会更一目了然的展示出必填项。

  因此,标签左对齐的时候,*直接出现在标签前面,明显比较优,但是由于标签左对齐对于表单来说,标签项和填写项位置离开太远,可能会让用户搞不清楚到底哪个标签对应哪个文本框,因此此类标签方式不太赞成出现。那么标签右对齐的时候,*出现在标签与文本框当中,个人认为相对前一种来说要舒服很多了。不仅使得标签项和*标志和文本框等都离得很近,而且*的位置还可以成一直线对齐。如果*出现在文本框或者其他项的后方,会使得用户不得不跳跃视线,并且他们在填写完成时才意识到哪些是必填哪些非必填。标签顶对齐,此类方式,经常出现在宽度有限制的时候,也是目前经常看到的表现方式。按照之前的理论来说此类方式为了视线流更好的展示,个人认为标签前面带*会比较好,这样使得*、标签、文本框位置最近,也使得*能成直线展示。

  还有一类需要特别指出的,就是表单一行有多个填写项,这种方式*如果位置不当,很容易让人误解*的位置,如下图:

  姓名前的*很容易让人误解为是下拉框出的*。因此这时候*位置如果在标签和文本框当中可以很好的规避此类误解。

  其次,非*必选标志主要有:

  a)非*icon表现形式

  b)无必填项标志(都是必填项)

  c)标注非必填项

  d)暗提示

  *作为一个用户习惯已经存在了很多年,现在用户只需要看到文本框前面的*就基本知晓其为必填项,有些网站已经将“*为必填项”之类说明文字也直接隐藏了。那么对于这个用户基本不需要太多思考就知晓的图标,对于需要简化用户思考的表单来说确实要优于一些其他的非“*”icon的出现了。

  在决定如何标注必填项非必填项上,分享以下几个要点:

  1、 在没有必填项标志的时候,大部分人会有两种不同的理解,一类人会认为,这些均为必填项,而另一类人则会理解为此处均为非必填项,那么在这种情况下,如果标记了必填项可以满足不同人群的思考。

  2、 当一个页面大部分为必填项时,而只有少量非必填项时,非必填项如果做的太弱化会导致整页无法区分必填还是非必填;而如果非必填项做的太过突出的话又反过来突出了页面中需要弱化的信息项,用户反而会去焦点关注在他们可填可不填的项中,有点适得其反。因此笔者认为页面中的表单,无论是全部都是必填项还是大部分必填项,还是以“*”标出,这样也能使各类用户都不产生理解性的错误。

  3、 文本框内暗提示,也是一个比较清晰标志必填项的方式,并且还很节省空间。

  必填项看似是一个微不足道的细节,其实存在很多特殊问题。交互设计就是让我们思考页面中每个细小的环节,这样才能使用户在整体页面体验中获得最优最快捷的操作方式。


上一篇:采访Facebook设计师:设计有灵魂的网页界面
下一篇:企业网站的视觉设计应注意哪些要点

技术交流 最新上线
网站制作中关于图片优化的15个原则
网站进行改版时应该注意哪些方面?
多方面入手有效提升网站的用户体验
谷歌网站管理员博客:五个常见的SEO错误
揭示黑客在社交网站上的五大攻击手法
Dongguan Yicheng Innovation 网站设计完成
鸿翼能科技有限公司深圳网站制作完成
AGS technology limited 深圳网站制作完成
AGS plastic limited 深圳网站设计完成
浩源电子科技有限公司深圳网站制作完成
 
网站首页 | 公司简介 | 新闻动态 | 超值套餐 | 经典案例 | 常见问答 | 技术支持 | 联系方式 | 留言反馈
Copyright © 2004-2017 LINKCHANT TECHNOLOGY LTD, All Rights Reserved. 粤ICP备05037094号
联系电话: 0755-26955674  电子邮箱: sales@linkchant.com
联灿科技: 深圳网站制作公司 | 深圳网页设计公司 | 深圳网页制作公司 | 深圳网站设计公司 | 深圳网站建设公司 | 深圳网站开发公司 | 深圳做网站的公司