当前位置:主页 > 网页教程 > 网页制作 > 制作技巧 > 内容欢迎大家投稿

如何让网页表单成为完美的友好用户界面

时间:2009-09-23 08:36来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

        上周我们已经给大家介绍了我们对于web表单调查研究结果的第一部分。调研的主要目的是提供给凭直接来判断有效性的设计师和开发人员一些理论依据。我们也介绍了一些如何让web表单成为完美的友好用户界面的指导方针。

  我们把更多关键表单单独开来(例如校验表单)从而关注注册表单。然后我们分别完成每个被选择网站的注册表单并且分析这些表单的设计方法。以下我们介绍这个研究的第二部分——关于100个流行网站web表单的调研结果。

  请注意这个文章不是关于校验表单——那是另外一个讨论的话题,我们把它独立开来看待成一个即将要讨论的文章。我们要感谢Wufoo为我们提供构架来引导我们的调查。

  3、表单的功能性

  在研究的第一部分里,我们已经仔细考虑过注册链接和注册表单的布局和视觉表现形式。但是如果表单不能正常工作的话设计的多漂亮都没有用,表单完成率依然很低。让我们现在来考虑一下注册表单功能性的典型问题以及设计时的方式方法。

  3.1.Hover,active,focus - 使用中的效果?

  显然地,为了提高表单的完成率,设计师试图避免各种各样的分散因素,并且提供一个清晰明确并且简单的web表单。这就是为什么任何视觉效果需要非常适当地使用的本质原因。

  • 84%的web表单没有任何种类的hover、active或者focus的效果。
  • 16%使用非常细微的鼠标上移的效果。

  3.2. 帮助,支持,工具技巧:静态还是动态的?

  有时候,输入区域的标签不够明确,但是用户却需要足够理解才能提供这些信息。用户名适用哪些字符格式?密码的字符数限制是多少?提供的Email地址会不会自动变成登录名使用?

  用户通过建议和技巧的帮助最小化地减少输入框重新考虑的次数。而且,没有比虽然输入的内容看上去完全正确,但是输入框却不接受的情况更恼怒的了。为了避免这个问题,设计师(通常)使用不引人注目但清晰的建议提示。

  调查报告中57%的web表单只有 “静态”的帮助提示,这些帮助提示只是之前假定好的一些和用户有关的提示信息;这些提示被明显地放在输入框的旁边。10%的操作提示通常是在一些帮助图标被点击之后或者用户输入信息时才会出现的。

  3.3.帮助,支持,操作提示:应该放在什么位置?

  当在为用户提供帮助时,一定要确定帮助是简单地提示,并且可以方便地被找到和理解。这是确保用户通过帮助提示不犯错误地完成表单的决定性因素。为了达到这个目标,你需要知道用户希望这些帮助在什么地方出现。所以,这些帮助和提示通常被放在表单的什么位置呢?

  如果帮助提示出现的话,它们会出现在…

  • 在输入区域下面(57%)
  • 在输入区域的右侧(26%)
  • 在输入区域的上方(13%)
  • 在输入区域的左侧(4%)

  我们注意到提示信息直接放在输入框下方是一个强烈的趋势。通常这类帮助提示会有稍微不同的色彩,大部分情况比主要内容要浅一些。

  3.4.输入确认:静态的还是Ajax动态?

  去年一整年,很多网站为了和用户进行互动,看上去似乎确实充满了Ajax的应用,但Ajax在流行网站服务中仍然还没有设法达到临界点。令人惊讶的是,我们不能认清Ajax的趋势。用户在输入完所有信息点击提交按钮的“经典”确认技术依然比Javascript的实时确认要来的流行。

  根据我们的研究:

  • 30%的表单只在表单顶部显示一条错误信息。(没有提示哪个输入框有问题)
  • 29%的表单会在输入框旁边提示相应的操作帮助(顶部没有提供错误信息)
  • 25%的表单同时使用错误信息和输入框提示。
  • 22%的表单利用Ajax的实时确认来进行提示。
  • 14%利用Javascript的错误提醒。
  • 1%的表单是用系统信息提醒,并且给出“后退”链接。

  3.5.错误信息的设计

  正如你所看到的,我们已经识别出6种不同类型的错误提示。显而易见,14%的表单仍旧使用Javascript错误窗口来传达问题(例如,YouSendIt, Mail.ru, Newsvine, Clipmarks, Yandex,看下面的截图),然而只有22%使用Ajax确认(通常用来确认用户名的有效性)。当然也显然的是没有一个网站是没有任何确认的。

  Newsvine使用Javascript错误窗口来传达问题。

  通常设计师试图报告错误的使用方法。a、在点击提交按钮之后显示错误信息;b、在视觉上高光“不正确”的输入框。第一种错误情况通常会作为一条信息在页面的顶部(表单之前)显示出来。第二种情况通常是把错误的输入框的边框色彩和输入的标签进行高光(大部分情况是红色的字体以及红色的背景色)。

  有时候设计师合并两种技术并且利用输入区域高光错误信息的方法。例如,看一下Ning结合两种技术的注册表单(请看下面的截图)

  通常,红色被用于标示错误;但是在这种情况下就没有必要了。当表单完成时,Tickspot, Mixx.com和 Furl使用黄色来表示遇到的问题。

(责任编辑:大宝库)



------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接