欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

表单经典原则是错的?来看这5个表单设计新规则

发布时间:2017:11:03 11:01:17 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1618个文字,预计阅读时间5分钟
导语
以前的表单经典原则是“越短越好”,不过随着技术发展,现在有些表单设计已经不适用了,想学到最新的表单设计方法,别错过这篇!

  以前的表单经典原则是“越短越好”,不过随着技术发展,现在有些表单设计已经不适用了,想学到最新的表单设计方法,别错过这篇!

  每天我们都使用表单进行基本的网上操作。网上购物、注册邮箱、社交网络甚至参与讨论、描述美味的午餐等等都需要我们填好表单。不夸张地说,表单是数字信息分享的生命根基。然而多年以来,表单的体验鲜有提升,仅仅停留在功能足够好却达不到体验上的优秀。然而现在,,在使用恰当技术的帮助下,我们可以设计出更快、更简单、更有成效的表单体验。

  欢迎关注点融设计中心DDC微信公众号:「微信ID:DR_DDC」

  在表单体验中一条经典的原则是“越短越好”。耗费用户更少的精力可以带来更高的转化率,这当然看起来符合逻辑,但是这条原则没有考虑到很多因素,比如应用场景,设计方式、表单体验的吸引力等等。

推荐阅读:表单设计的九个基本法则

  举个例子,我发现一个被引用的次数远超其它的报告,它的测试成果被多篇文章和言说提及并被当做“真理”,而可怕的是这个研究成果其实是相当有局限性的。这个报告是Imaginary Landscape(一个开源的网络开发机构)近十年前的一次实验,实验中当表单从11个字段减少到4个字段,转化率增加了160%。但这只是一个页面,一次测试,两个变量得到的实验结果,假设他们进行了多组4个字段的实验,或者做10个字段与11个字段的表单作对比,4个与5个字段表单做对比,也会令实验更加值得信服。然而他们没有,这只能说明仅在这一个特定的情况下,确实减少表单64%的字段能使表格更容易填写。

  在Call To Action 2015的演讲上,来自Unbounce 的Michael Aagaard分享了类似的案例。以提高一个特定表单的商业转化率作为任务,他首先将表单的字段数从9削减到6,转化率下降了14%。深入研究后他发现,表单中那些被删除的字段构成了一个不太引人注目的体验,而这恰恰是最吸引用户的部分。在第二次实验,他调整了原始表单的组织结构和清晰度,并保持9个字段不变,转化率增加了19%。事实证明,短的表单不总是更好。

  所以如果不是通过简单的使表单更短,我们怎样用现代技术来设计最好的表单呢?让我们来考虑一些新原则:

  优先保证表单的可浏览性

  提供更易填写的表单格式

  给予恰当的输入限制

  利用定位

  1. 优先保证表单的可浏览性

  很早之前Jakob Nielsen的研究告诉我们,用户通常只是快速浏览网页而不是细致地从上到下阅读。在填写表单的时候也是这样,尽管设计者希望填写者全心全意,用户也未必如你所愿。让用户能够高效的浏览表单,对避免错填漏填至关重要,尤其是当表单是用户只能填写一次的时候(比如电子商务地址表单,注册表单等等)。

  标签位置

  关于标签的位置已经有了很多研究,然而这场辩论还在继续。表单大师Luke Wroblewski在研究中确定,用户对标签顶部对齐的表单完成时间最短,因为此种方式减少了眼球运动的需要量。在通常意义的表单标签中,右对齐的方式能让用户第二快的完成表单,尤其建议在当页面高度有限时使用这种方式。虽然左对齐标签的表单用户完成的最慢,但是当表单需填写的数据不太常见时,这种方式能提高理解。

  提示文字

  如果将标签作为框内提示文字,帮助性也不大。一旦表单获取点击焦点,提示文字就消失了,用户不再能看见它。这会让用户产生短期记忆的压力而增加错误的机率。

  即使把标签分开,另外增加框内提示文字,用户乍一看上去也会觉得像已经填写了的样子。举个例子,Nielsen Norman Group曾做过的一项眼球追踪研究就说明,空的输入框比有提示文字的输入框更能引起用户的关注,而且与空的输入框相比,用户更容易忽略有提示文字的输入框。换句话说,被认为是有用的表单提示文本其实弊大于利,尤其是对习惯大致浏览的用户。

  

 

  △ 好的:空的表单字段

  

 

  △ 不好的:被提示文字掩盖的表单字段

  在某些情况下,提示文字比普通文本的颜色较轻,这可能缓解上述问题。然而这种技术产生了一个对比度的问题,在白色背景下配浅灰色文本通常不符合被普遍接受的网络可访问性指南(正常文本对比4.5:1)。此外,根据W3C,提示文字也不支持残疾人的辅助设计(如屏幕阅读器,见/2017/1102/1509599942546.gif" border="0" width="500" height="273" />

 

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:应用设计的流行手法——如何做引导流程

下一篇:设计的三个层次,帮你重开情感化设计的大门

  • 18900 文章总数
  • 2380183访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信