菜单

网站表单可用性:十大建议

通过 凯瑟琳怀特顿2016年5月1日

摘要:Follow these well-established — but frequently ignored — 万博官网manbetx下载 manbetx官方网站手机版 guidelines to ensure users can successfully complete your website forms.


运输安全管理局(TSA)帮助保护航空旅行者的安全但是,由于被推迟或被迫在公共场所取下衣服也可以保证让很多人烦恼,你期望TSA获得相当健康的投诉量。

所以,当我第一次看到TSA的投诉表时,manbetx官方网站手机版错误似乎很明显,我想知道它是否可能是故意的表单底部包含2个按钮:预习清晰表格。预习标签不太理想,因为大多数用户都会期望提交或至少一个下一个按键但真正的问题是清晰表格按钮,实际上删除输入到表单中的任何内容。

Intentional or not, this arrangement undoubtedly reduces the volume of complaints! However it also violates a form-manbetx官方网站手机版 guideline we first wrote about more than 15 years ago: to避免重置按钮在网络表单上。

TSA投诉表格有一个清除表格按钮
TSA的网络表格包括一个清晰表格 按钮,违反了超过15年的可用性指南加上侮辱伤害,清晰表格 按钮的位置比输入字段更近预习 按钮,因此人们更有可能错误地击中它(并违反了附加指南) 对象之间的距离和他们的主要措施 )。

我最近得出的结论是,这种形式的manbetx官方网站手机版不是故意坏,因为TSA实际上有第二个正确使用单一的投诉表格提交按钮下面的形式由于一种形式遵循指南,似乎其他版本的穷人manbetx官方网站手机版只是偶然的。

作为一个纳税人,我觉得我的政府机构并没有故意使用糟糕的manbetx官方网站手机版来避免听到我的评论,这让人感到欣慰But from a 万博官网manbetx下载 perspective it’s a painful reminder that despite the buzz and popularity of “万博官网manbetx下载” in recent years, basic understanding of usability is often still lacking即使是应该很好建立的简单指导方针通常也是未知的或被忽视的。

小心的形式manbetx官方网站手机版对用户理解和准确填写表格的速度产生巨大影响事实上,一个最近由塞克勒及其同事在CHI上发表的论文表明,当表单遵循基本可用性指南时,完成时间会显着减少,用户也会如此几乎两倍提交表单从第一次尝试没有错误(78%一次性提交符合可用性指南的表单,而不仅仅是42%以违反它们的形式提交的一次性提交)如果您想知道为什么您的转换漏斗在表单页面上有大幅下降,本研究可能会给您一些线索:表单上的可用性问题确实会对业务造成影响。

Do your website forms follow usability best practices?

Best Practices for Web Form manbetx官方网站手机版

最好的manbetx官方网站手机版的解决方案对于任何给定的形式取决于许多因素:表单的长度,使用的背景下,数据被收集在某些情况下,您应该使用的确切实现可能会有所不同,但这并不是完全忽略准则的借口相反,使用这些建议作为起点,如果你偏离这些最佳实践建立确保你有充分的理由这样做。

  1. 保持简短The mathematician Blaise Pascal famously said: “I have made this longer than usual because I have not had time to make it shorter.” This principle applies to web forms as well as prose writing消除不必要的字段需要更多时间,但减少用户工作量和提高完成率使其值得收集信息,可以删除字段(a)以其它方式,(b)收集更加方便在稍后的日期,或(c)简单地省略(我们最近将这种技术应用于我们自己的一种形式,并将其从6个字段缩减为仅2个字段。)每次从表单中剪切字段或问题时,都会增加兑换率- 本指南的商业案例就是这么简单。
  2. 可视化地分组相关标签和字段标签应该靠近田地他们描述(上方的移动和桌面短形式,或者旁边的超长桌面形式)避免模棱两可的间距,标签等距从多个字段,并确保包括label属性对于屏幕阅读器如果表单询问两个不同的话题,部分为两个单独的字段(和组标记组屏幕阅读器)。
  3. 字段显示在一个列布局多个列中断垂直向下运动势头表单Rather than requiring users to visually reorient themselves, keep them in the flow by sticking to a single column with a separate row for each field(例外规则:短和/或逻辑等相关领域城市,,邮政编码 可以在同一行)。
  4. 使用逻辑排序坚持字段的标准序列(例如,信用卡号码,过期 日期,安全 (如)和价值选择。,标准送货,2天送货,1天送货)但对于字段值,也可以考虑使用频率,尽可能先最常见的值列表通过测试帮助键盘用户标签-key导航以确保其遵循正确的字段顺序。
星巴克iPhone应用程序屏幕脱咖啡因的选项
星巴克iPhone应用程序,包括一个移动表格,让您自定义您的饮料订单,不幸的是隐藏了全部'无咖啡因” 选择屏幕右边,需要水平滚动如果满了'无咖啡因” 是更频繁地选择其他选项,它应该显示第一位。
  1. 避免使用占位符文本manbetx官方网站手机版ers like placeholder text because it eliminates visual clutter但占位符文本会导致很多可用性问题,最好避免。
  2. 将字段与输入的类型和大小匹配当只有2或3个选项可以显示为单选按钮(只需要单击或点击)时,避免下拉文本字段应与预期输入大小相同,因为当用户无法看到完整条目时,它非常容易出错例如,最近2130年的参与者万博官网manbetx下载 Conference,用户的居住城市范围在3个字符(Leo,Indiana)到22个字符(San Pedro Garza Garcia,墨西哥)99.9%的城市名称是19个字符或更短,使19个字符成为城市场地的合理宽度。
  3. 区分可选的和必需的字段首先,消除尽可能多的可选字段(参见上面的第一个推荐)如果某些字段确实是必要的,但仅适用于用户的子集,请不要让用户通过反复试验找出将表单限制为仅1或2个可选字段,并将其明确标记为可选。
  4. 解释任何输入或格式要求如果字段需要特定格式或输入类型,请说明确切的说明不要让用户猜出你不明智的密码要求这同样适用于语法规则,例如电话号码或信用卡的标点符号或间距(尽管你应该尽可能地消除这些任意格式化规则:电话号码区域代码的括号死!)
Netgear网站屏幕,密码重置错误
Netgear的重设密码 形式解释其密码要求…但只有考试不及格后一条错误消息不要使用机密规则设置用户失败。
  1. 避免重置清晰的按钮意外删除的风险超过了可能需要“重新开始”的web表单在收集极其敏感的输入(如财务信息)的表格中,提供'取消'按钮,以支持放弃该表单并希望删除其信息的用户但要确保取消按钮大大不如的视觉感受提交按钮,以避免意外点击。
  2. 提供高度可见且特定的错误消息应该发出错误信号通过各种提示,而不仅仅是通过颜色:概述字段并使用红色文字并使用较重的字体,以确保用户不要忽视这些关键信息现在不是时间是微妙的。

应保留错误的输入,以便用户对其进行纠正,并附带对问题的具体解释。

结论

Web表单的可用性绝不是一个新主题它已包含在一般可用性参考中(包括两本NN / g书籍)一般可用性指导方针,eyetracking可用性研究和手机可用性)许多人114 万博官网manbetx下载 guidelines for e-commerce shopping carts专业问题形式manbetx官方网站手机版吗也有专门写整本书形式manbetx官方网站手机版,以及证明遵守指南的有效性的学术研究。

这个简短的总结并不打算取代其他资源的深入分析发现:如果你工作和形式广泛manbetx官方网站手机版,在各种情况下吸收最佳实践的复杂性是值得你的时间。

但是许多糟糕的网络形式存在不复杂或复杂的问题,而且可以通过简单提醒我们已经知道的内容来避免这种问题。查看您网站上的表单,确保它们不会出现这些众所周知的错误谁知道,你可能会加倍你的兑换率

 

引用:

Mirjam Seckler,Silvia Heinz,Javier A.克劳斯Opwis Bargas-Avila,亚历山大·N第一个2014年manbetx官方网站手机版ing usable web forms: empirical evaluation of web form improvement guidelines在SIGCHI计算系统人为因素会议论文集(CHI的14)。DOI = HTTP://dx.doi.org/10.1145.2556288.2557265