上周我们发表了网页表单设计调查报告的第一手资料的一部分。今天我们来一起看看第二部分的内容。
3. 表单的功能
在第一部份，我们探讨了注册链接和注册表单的位置以及视觉表现。但是，无论你的表单设计的多么漂亮，如果它缺乏功能性，无法正常运作的话，表单填写完整率还是会很低的。下面就让我们一起来探讨一下注册表单的功能性以及典型的问题及其解决方案。
3.1. Hover, active, focus —— 这些是否有效的使用了？
为了改善表单的完整填写率，设计师似乎都在尽量避免使用各种容易分散用户注意力的设计，而且更多的引入了简洁、不容易产生歧义的网页表单。这就是为什么网页表单的视觉效果都使用设计的非常合适的原因。
▪ 84%的网页表单没有使用任何hover, active或者focus效果。
▪ 16%使用了非常细致的hover效果。
3.2. 帮助，支持，工具提示：静态的还是动态的？
有时，输入区域的标签描述的并不具体，使得用户无法充分理解他们需要提供的充足信息。用户名允许使用哪些字符？密码可以设置多少位？所提供的E-mail地址是否自动成为登陆账号？
可以考虑使用工具提示功能帮助用户缩短填写时间。设计师们通常会使用一些不是很明显的但是描述很清晰的提示标记。
57%的网页提供静态帮助支持：这些提示标签出现在输入区的后面，在设计的时候已经针对输入内容事先设定好了。10%的网页工具提示是动态的，只有当用户需要的时候才会出现：通常用户需要点击帮助按钮或者在用户输入的时候才会出现。
3.3. 帮助、支持、工具提示：出现在什么位置？
当提供给用户支持的时候，有必要确认这些帮助是否可以被用户轻松的看到并且明白其含义。确认用户对于帮助信息不会产生任何误解是非常重要的。因此，到底什么地方应该放置这些提示信息呢？
如果网页表单提供帮助提示的话，它们会出现在：
▪ 在输入区域的下方 (57%)
▪ 输入区域的右侧 (26%)
▪ 输入区域上方 (13%)
▪ 输入区域左侧 (4%)
我们还对这些提示工具存在的位置趋势研究了一下，放在输入区域下面是一个大趋势，而且这些提示文字通常会使用比主要内容轻一些的颜色。
3.4. 输入验证:静态的还是Ajax?
尽管Ajax在过去几年成为了网络的新宠，提供了更为丰富的用户体验界面，但是，它并没有能够完全席卷很多流行网站。令人惊讶的是，我们在 这份调查中并没有看到Ajax的存在趋势。用户填写完表单以后点击提交按钮后进行信息验证的这种传统验证技术要比使用JavaScript设计的实时验证 技术更为流行。
▪ 30%的表单会在用户填写表单上方显示错误信息，并对未输入区域进行突出显示。
▪ 29%的表单会突出显示输入错误的区域，而不会在表单头部显示错误信息。
▪ 25%既使用了错误信息提示，也突出显示了错误信息的输入区域。
▪ 22%使用Ajax技术的实时验证技术。
▪ 14%使用JavaScript技术的错误警告。
▪ 1%使用带有“返回”链接的系统信息。
3.5. 错误信息设计
正如你所看到的，我们总结出了4种不同形式的错误验证。值得注意的是，14％的表单仍然使用了Javascript错误提示窗口（例如：YouSendIt, Mail.ru, Newsvine, Clipmarks, Yandex,看下方的屏幕节图），而只有22％部分使用了Ajax验证技术（通常只验证用户名是否可用）。还有一点令人惊讶的是，所有的注册表单都使用了验证。
Newsvine使用的JavaScript错误提示窗口
通常，设计师会通过以下两种方式设计错误报告：a)在点击提交按钮以后显示错误信息 b)在输入区域实时高亮“错误”字样。第一种方式通常通过列表方式在表单前显示。第二种方式通常使用将错误输入区域加一个颜色边框，并将改输入区域的标签 高亮（通常使用红色字体和红色背景）。
有时侯，设计师会同时使用以上两种方式，并且高亮错误信息和输入区域。例如，Ning的注册表单（详见下图）就同时使用了两种方式。
通常，红色用来标记错误。但是也不完全都是这样。Tickspot,Mixx.com 和 Furl使用黄色进行错误标记。
如果成功注册的话，会使用绿色进行信息修饰，这样使用的网站达到了97％。
3.6. 是否需要进行电子邮件验证？
仅有18％的网站使用了电子邮件验证（比如Odeo, Ning)。
3.7. 是否需要确认密码？
让注册用户确认没有显示出来的输入信息听起来是合情合理的（通常使用星号代替这些输入内容）。不过，很多网站还是减掉了重复输入区域以减少用户填写表格的时间。
72％的网站都需要密码确认。但是也有很多大网站不需要进行确认，比如：Facebook, Friendster, LinkedIn, Stumbleupon, Pownce 和 Twitter。
3.8. 是否需要验证字？
虽然用户不希望看到验证字，但是这个选项确实是很有必要的。因为网站需要通过验证字来过滤掉那些批量注册的账号。
调查显示：
▪ 52%的网站不使用验证字。
▪ 39％的网站必须重新加载全部表单才能够刷新验证字。
当时，我们无法预测注册表单是否需要验证字选项的趋势。不管怎样，如果你需要设计一个验证字选项，那么请确认这些验证字符容易被识别，以及 如果用户无法识别的话可以从新加载另外一个验证字段。一些网站没有提供重新加载验证字段的功能，但是也有一些网站提供收听验证字段的功能以便解决验证字段 无法识别的问题，比如Digg, AOL, Slashdot, Google以及Last.fm。
3.9. 是否使用“取消”按钮？
当我们在设计这些问题的时候曾认为，在设计表单的时候不应该加入取消按钮，毕竟用户已经填写完了，为什么要让他们取消呢？但是我们错了。
仅有8%的网站使用了取消按钮。其中有一部分将取消按钮放在了“使用条款”的右侧，例如（例如：Zoho Writer）。这样以来，如果用户不同意网站的使用条款，可以通过点击取消按钮放弃整个注册。还有一些网站在注册前提供了支付计划（例如Crazyegg）。如果用户选择了错误的支付计划可以通过取消按钮返回重新选择另外的支付计划。
另外，我们不明白为什么Dzone将取消按钮放在了注册表单的左侧。
在使用取消按钮的网站中，4％将取消按钮放在了提交按钮的右侧。在这些网站上，提交按钮和取消按钮设计的并没有什么不同，它们并排放在一起。
3.10. “提交”按钮的布局位置
根据表格布局的不同，提交按钮可能在左边，在中间，或者在右边。设计师更倾向于放在左侧(56%), 然后是放在中间(26%)。
右侧设计的提交按钮也很流行(17%), 不过通常使用在需要进行下一步注册的情况下。在这种情况，提交按钮通常被命名为“继续”或者“下一步”。
3.11. 感谢信息
几年前，设计师们通会在成功注册后提供一个简单的感谢信息（通常是提供一个登陆页面的链接）。现在，大多数网站都希望使用者在注册成功以后马上使用网站的服务。
▪ 45% 的网站会引导刚刚注册成功的用户继续完善注册信息，寻找网络上的朋友，向朋友推荐该网站，或者填写个人资料。
▪ 33% 的网站会使用非常友好的语气提示“现在就去”的字样以及列出各项服务功能。
▪ 4% 提供了基本的“谢谢”信息。
▪ 2% 返回主页。
总结
让我们简短的总结一下上面的研究报告：
▪ 注册表单没有使用任何hover, active 或 focus效果 (84%),
▪ 帮助提示信息或者是静态的(57%)，或者是动态的(33%)；有的出现在输入区域下方(57%)，有的出现在输入区域右侧(26%),
▪ 静态验证和动态验证一样流行，没有使用Ajax的趋势;
▪ 不使用电子邮件确认(82%),
▪ 使用密码确认(72%),
▪ 使用验证字段（48%），不使用验证字段（52%）,
▪ 不使用取消按钮 (92%),
▪ 提交按钮在左侧 (56%)，或者中间 (26%),
▪ 感谢信息采用引导用户继续使用网站的服务的方式(45%)。
博文
没有评论:
发表评论