第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

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

时间:2017-11-02 13:23来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
以前的表单经典原则是越短越好,不过随着技术发展,现在有些表单设计已经不适用了,想学到最新的表单设计方法,别错过这篇! 每天我们都使用表单进行基本的网上操作。网上购物、注册

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

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

  欢迎关注点融设计中心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,提示文字也不支持残疾人的辅助设计(如屏幕阅读器,见https://www.w3.org/WAI/tutorials/forms/instructions/),这使得这些残疾人用户更难准确填写表单。

  浮动的标签

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕