【表单设计的新规则】
每天,我们都会在网上使用表格。我们填写完整的购买流程;注册邮箱的列表;社会网络或者更多其他;去参加讨论;去描述看起来非常美味的午餐照片。一点也不夸张去说数字信息分享是他们的生命根源。多年来,表格却很少有改进,它的使用仅仅是满足工作但体验不是特别的优秀。如今现代的技术-在正确的使用情况下-允许设计师们去生产更快,更简单,更有效率的体验形式。
表格的使用体验形式是更短才更好。尽管这个是看起来合理的,但这个指导方针没有考虑其他的因素,例如,使用了哪些字段,他们是如何设计的,如何参与表格体验。
在2015年Call To Action 的展示活动中,Michael Aagaard of Unbounce 分享类似关注的研究。有一种特殊形式提高潜在客户转化的任务,他第一次把表格从9减到6减少了大量的字段.转化率减少了14%。深挖研究,他发现大部分参加的用户会删除字段,导致更少吸引力的体验。在第二轮中,他调整了清晰度和组织原来的形式,但保留所有9个字段。转换率增加了19%。所以不是表格越短越好。
所以,不把表格变的更短的基础上,我们如何使用现代的技术创造更好的表格?让我们考虑下新的规则:
·浏览优先级
·提供方便的格式化
·减少输入
·地理位置
浏览优先级
Jakob Nielsen很久之前就告诉我们用户是从上到下的浏览网页而不是仔细的阅读网页 。甚至当填写表格的时候-尽管他们的创造者可能更希望充分关注-用适用相同的规则。根据效率,有效的浏览是决定性限制错误和失误的字段,尤其是当表格只能一个人填写一次(填写地址表格, 登录表格,等等)。
本地标注
很多搜索被保存为本地标注,但这个是有限度。表格大师Luke Wroblewski 研究过 确定对齐的标签使用户能够最短时间的完成,因为可以减少眼睛移动的时间。对于通常理解的标签形式,右对齐是建议在页面被高度限制的情况下最快的选择。左对齐标签能够减少浏览完成的时间,并且这样的形式能够在数据请求很少的情况下让用户快速的理解。
提示
占位符文本(也称提示文本),从另一方面讲,被普遍认为是无用的。一旦在这个领域获取焦点标签里的提示文本就会消失,也就意味着用户再也看不到提示文本了。这将导致加重短期记忆的负担,增加错误的几率。
如果提示建议和标签是分离的,乍一眼看上去,这个领域是可以填写的。NN集团眼动研究已经说明了空白领域比有文本在里面的领域更能抓住用户的注意力,并且用户更喜欢跳过有文本提示的领域。另一方面,所谓有用的提示文本确实是弊大于利,并且会对浏览者造成困扰。
在一些例子中,文本提示的颜色比正常文本的颜色要浅一些,这样也许缓和了上面提到的问题。然而,这样的做法产生了新的问题:白底上的浅灰色文本通常不符合无障碍网页(4.5:1的正常文本)普遍接受的准则。此外,根据W3C,提示文本没有被广泛使用的辅助技术支持,使之给这些用户准确地填写表格造成了困难。
浮动标签
这有个新的交互设计风格—浮动(自适应)标签迅速普及开来。在这些设计中,标签文本刚开始和占位文本一样,一旦用户开始输入提示就会移到输入框的上方。尽管这样可以有效的减少页面的长度,尤其在手机上使用非常有用,但是没有解决上述的关于文本提示已经填写的问题。因此,NN集团建议,除非页面的长度是主要关心的部分才保持以上的标签,否则就要避免这样的体验。
提供方便的格式
在过去,很多参与者填写表格是靠猜测。比如说,我忘记了自己的信用卡号码怎么办?在键盘上的@标识在哪里?新的技术能够使我们不用寻找就可以做出选择,带来更简洁的体验。
输入掩码
尽管在外观上相似,领域隐藏的技术帮助用户入门格式的文本比占位符文本明显不同。首先,当用户集中在一个场景,防止上述浏览的问题只出现一个隐藏文本。其次,当填写表格时,掩码能够自动的格式化文本,使用户更关注所需要的数据,更容易避免错误。在下面的例子里,当输入号码时,括号,空格,破折号都会自适应。
这个简单的技巧为填写电话号码,信用卡号,货币等节省了时间和精力。
输入区域为HTML
现在许多设计者知道,手机键盘显示一些正确的主要数据,但是会产生有一些哪种是正确的键盘类型的困惑。
现在通常使用的数字键盘,例如,不带字母的键盘。这显示了常规键盘和数字键的显示,包括比按键更小的数字键盘。
对于只是用数字的领域,比如,电话号码,信用卡等,电话式键盘的按键范围较大是为了确保用户准确的输入。全键盘设置数的状态,依旧是混合字段通常以数的字开头就像一个街道地址非常有用。
这有几个可以添加其他文本和消除错误等的属性。
·自动完成:浏览器功能展示先前输入的列表。
·自动完成:更改过程中显示错误的单词。
·自动大写:使第一个字母大写。适用于名字,不适用于电子邮箱地址输入。
·拼写检查:用红色下划线标注拼色的单词。
减少输入
随着越来越多的人使用小屏手机,不管做什么要防止不必要的打字以提高用户的满意度,降低错误率。
地址预填
填写地址是线上注册中最繁琐的部分。各种领域,很长的名字等等。通过调整这个单一领域,消除了巨大的输入量。
输入地址(街道,城市,州,邮编,国家)到谷歌的总部,完整的形式可以用10个按键完成,与潜在的50多个手动输入。
电子邮件的预先填写
减少打字输入的另一种方式是电子邮件领域内提供常用的域名列表。Staples使用预先填写解决了当用户一旦开始输入@键,会出现高达12项的水龙头的方案。
地理位置
尽管地理位置数据的移动应用经常使用,我们不能忘记在整个平板电脑和台式机的利用方式。特别是触屏打字比较麻烦,如果基于位置预填写信息,可以节省宝贵的时间,提高转化率。
这有一个比较好的例子,Nordstrom的网站产品就是要求知道用户的邮政编码,根据用户所在的产品详情页面的位置自动在用户周围最近的商店查找该产品。
尽管预先填写地址可能会带来准确性不够的问题。谷歌Places API提供了一套两全其美的解决方案:同时使用地理位置和地址预填充对用户的确切的位置提供准确的信息。
当然,由于不精确性,任何操作都允许用户手动编辑数据。
形成更好的表单
简而言之,遵循下面这些规则是一种成功的方式,也会给用户带来快乐。
·优先级浏览:通过设计易读的标签,可以避免外来的内容使浏览者产生困惑。
·提供方便的格式化:对每个条目类型输入的掩码和适当的键盘提供格式化
·减少输入:提供预填写
·地理位置:不添加点击的地理位置