菜单 关闭

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

通过 凯瑟琳·怀特顿5月1日,二千零一十六

总结:遵循这些建立良好但经常被忽视的用户体验设计指南,以确保用户能够成功完成您的网站表单。万博官网manbetx下载manbetx官方网站手机版


运输安全管理局(TSA)有助于确保航空旅客的安全。但是,由于被耽搁或被迫在公共场合脱衣服,也保证会惹恼很多人,你会期望运输安全管理局得到相当健康的投诉量。

所以当我第一次看到TSA的投诉表时,设计错误manbetx官方网站手机版似乎很明显,我想知道它是否是有意的。表单底部包含两个按钮:预览形式清晰。这个预览标签不理想,因为大多数用户都希望提交或者至少接下来按钮。但真正的问题是清晰形式按钮,它实际上删除了表单中输入的任何内容。

不管是有意还是无意,这种安排无疑减少了投诉的数量!然而,它也违反了我们15年前第一次写的表单设计准则:tomanbetx官方网站手机版避免重置按钮关于Web窗体。

TSA投诉表有一个清晰的表格按钮
TSA的Web表单包括清晰形式 按钮,这违反了15年前的可用性准则。为了增加对伤害的侮辱,这个清晰形式 按钮的位置比预览 按钮,从而使人们更容易误伤它(并违反了 对象与其主要动作之间的接近度

我最近得出结论,这张表格的设计是manbetx官方网站手机版不是故意不好,因为TSA实际上有第二份投诉表,正确使用了一份提交窗体下方的按钮。因为有一种形式遵循指导方针,另一个版本的糟糕设计似乎是偶然的。manbetx官方网站手机版

作为纳税人,想到我的政府机构并没有故意使用糟糕的设计来避免听到我的评论,我感到很欣慰。manbetx官方网站手机版但从用户体验的角度来看万博官网manbetx下载,这是一个痛苦的提醒,尽管近年来“用户体验”的流行和流行,对可用性的基本理解仍然是缺乏的。即使是应该建立良好的简单指导方针,也常常是未知的或被忽视的。

仔细的表单设计对用户理解和manbetx官方网站手机版准确完成表单的速度有很大的影响。事实上,一Seckler及其同事在Chi发表的最新论文表明:当表单遵循基本的可用性准则时,完成时间明显缩短,用户提交表单的可能性几乎是提交表单的两倍第一次尝试没有错误(78%一次性提交符合可用性准则的表格42%一个尝试以违反它们的形式提交。如果你想知道为什么你的转换漏斗在表单页面上有很大的下降量,这项研究可能会给你一个线索:表单上的可用性问题确实损害了业务。

您的网站表单是否遵循可用性最佳实践?

Web窗体设计的最佳实践manbetx官方网站手机版

任何给定表单的最佳manbetx官方网站手机版设计解决方案取决于许多因素:表单的长度,使用环境,以及正在收集的数据。在某些情况下,您应该使用的具体实现可能会有所不同,但这并不是完全忽视指导方针的借口。相反,以这些建议为起点,如果你偏离了这些既定的最佳实践,确保你有充分的理由这样做。

  1. 保持简短.数学家布莱斯·帕斯卡(BlaisePascal)曾说过一句名言:“我做这个的时间比平时长,因为我没有时间去缩短它。”这一原则适用于网络形式和散文写作。消除不必要的字段需要更多的时间,但是,用户工作量的减少和完成率的提高使它值得。删除收集可以(a)以其他方式派生的信息的字段,(b)在较后日期收集更方便,或(c)简单省略。(我们最近将此技术应用于我们自己的一个表单,并将其从6个字段减少到只有2个字段。)每次从表单中剪切一个字段或问题时,你增加了它转化率-本指南的商业案例非常简单。
  2. 可视化分组相关标签和字段.标签应靠近字段它们描述了(移动和较短桌面窗体的字段正上方,或者在字段旁边显示非常长的桌面窗体)。避免间距不明确,如果标签与多个字段等距,确保包括标签属性屏幕阅读器。如果您的表单询问两个不同的主题,将其分为两组单独的字段(和标记组对于屏幕阅读器)。
  3. 在单列布局中显示字段.多个列中断了向下移动窗体的垂直动量。而不是要求用户在视觉上重新调整自己,通过为每个字段粘贴一个单独的行的单列,使它们保持在流中。(此规则的例外情况:短字段和/或逻辑相关字段,如西蒂状态,和拉链 代码可以显示在同一行。)
  4. 使用逻辑排序.对于字段(例如,信用卡号码到期 日期安全性 代码)对于价值选择(例如.,标准运输,2天装运,一日航运)但是对于字段值,还要考虑使用频率,如果可能,首先列出最常见的值。通过测试帮助键盘用户标签-键导航以确保遵循正确的字段顺序。
带贴花选项的星巴克iPhone应用程序屏幕
星巴克iPhone应用程序,其中包括一个移动表单,可以让您自定义饮料订单,不幸的是,隐藏了完整的'无咖啡因的 右侧屏幕外的选项,需要水平滚动。如果满了无咖啡因的 其他选项,应该先显示。
  1. 避免使用占位符文本.manbetx官方网站手机版设计师喜欢占位符文本,因为它消除了视觉混乱。但是占位符文本导致许多可用性问题,最好避免。
  2. 将字段与输入的类型和大小匹配.如果只有2个或3个选项可以显示为单选按钮(只需单击或点击一次),请避免下拉。文本字段的大小应该与预期输入的大小大致相同,因为当用户看不到其完整输入时,文本字段极易出错。例如,对于2130名最近参加万博官网manbetx下载UX会议,用户的居住城市范围为3个字符(leo,印第安纳)到22个字符(圣佩德罗加尔萨加西亚,墨西哥)99.9%的城市名称为19个字符或更短,使19个字符成为城市字段的合理宽度。
  3. 区分可选和必需字段.第一,删除尽可能多的可选字段(请参阅上面的第一个建议)。如果确实需要某些领域,但只适用于用户的一个子集,不要让用户通过尝试和错误来发现。将窗体限制为1或2个可选字段,并清楚地标记为可选。
  4. 解释任何输入或格式要求.如果字段需要特定格式或输入类型,详细说明。不要让用户猜测您模糊的密码要求。同样适用于句法规则,如电话号码或信用卡的标点或间距。(尽管您应该尽可能消除这些任意的格式规则:电话号码区域代码括号的死!)
NETGEAR网站屏幕出现密码重置错误
网件重置密码 表单解释了它的密码要求……但只有在测试失败后才会显示错误消息。不要将用户设置为使用秘密规则失败。
  1. 避免重置清除按钮.意外删除的风险大于不太可能在Web表单上“重新开始”的需要。以收集非常敏感的信息的形式,如财务信息,提供一个取消按钮以支持放弃表单并希望删除其信息的用户。但要确保取消按钮的视觉突出度明显低于提交按钮,以避免意外点击。
  2. 提供高度可见和特定的错误消息.应发出错误信号通过各种线索,不仅仅是通过颜色:勾勒出字段的轮廓,使用红色文本和较重的字体,以确保用户不会忽略这些关键信息。现在不是微妙的时候。

应保留错误的输入,以便用户更正,并附有问题的具体解释。

结论

Web表单的可用性决不是一个新话题。它已经在一般可用性参考(包括两个方面的几个nn/g书籍)中介绍过。通用性指南,眼睛跟踪可用性研究,和移动可用性)许多114电万博官网manbetx下载子商务购物车用户体验指南是表单设计中的专门问题。manbetx官方网站手机版还有专门写的整本书形态设计manbetx官方网站手机版,以及证明遵守指南有效性的学术研究。

这个简短的总结并不是为了取代其他资源中的深入分析:如果您广泛使用表单设计,manbetx官方网站手机版在各种情况下吸收错综复杂的最佳实践非常值得你花时间。

但是,许多不好的web表单都有一些不复杂的问题,这可以通过简单地提醒我们已经知道的事情来避免。看看你网站上的表单,确保它们不会犯这些众所周知的错误。谁知道呢,你可能会加倍转化率.

参考文献:

Mirjam SecklerSilvia Heinz哈维尔ABargas AvilaKlaus Opwis和亚历山大N。Tuch。2014。manbetx官方网站手机版设计可用的web表单:web表单改进指南的经验评估。在计算机系统中人为因素的西格奇会议记录(χ14)。doi=http://dx.doi.org/10.1145.2556288.2557265