长HTML输入表单的最佳设计

leo*_*ora 7 html forms

我正在设计一个很长的HTML输入表单,并在几个设计选择之间进行辩论:

  1. 单页长表单,用户必须向下滚动
  2. 多个页面,您必须为每个新页面单击"下一步..."
  3. 使用一些选项卡AJAX界面来组织表单输入但选项卡.

这里有任何研究或最佳实践吗?

del*_*ego 6

美国政府的usability.gov网站上有一篇关于国家癌症研究所关于形式可用性研究结果的有趣文章,但它并没有完全涵盖您的选择; 它更侧重于表单元素本身的设计.

Alsol,Dey Alexander Consulting提供了一份表单设计可用性资源列表,可能对您有所帮助.

更新:看看很多其他答案,这里有很多"这是正确的,其他选项是错误的".最终的答案是这里没有一个正确的方法; 但是,一些上下文可以帮助指导您找到一个好的解决方案.例如,如果您需要进行大量的验证和决策分支,将表单划分为多个HTML页面可能是理想的(例如,表单第2页上显示的内容完全取决于用户对问题的回答在页1),因为这允许您保持100%服务器端的验证和分支代码.但即便如此,在您的情况下还有其他选择可能会更好,但如果不了解您的情况,很难回答.


DVK*_*DVK 5

首先,像往常一样,尼尔森(Nielsen)是一篇好文章。

这篇文章中也可以找到很好的分析。

我自己的想法(以多年的Web应用程序设计以及研究生UI设计和可用性研究为基础):

1.利弊

长HTML形式:

单击滚动条很难导航(非常狭窄),但是使用鼠标的滚轮却非常容易导航。

具有“下一个”链接的多个页面

两全其美。很难点击(“下一个”是一个很小的目标),不能随意访问表单的任何部分(应该有道理)。仅当您必须按特定顺序完成表单零件并且不选择返回时,此选项才有用。

标签界面

这是一个不错的选择,但有缺点。唯一的缺点是不能一次看到所有的表单信息(如果要后退,您必须记住哪个问题在哪个选项卡上)。

2.结论

因此,这取决于您的用户最简单的选择(滚动长垂直页面或点击标签),排名在#1和#3之间。

3.笔记

  • 请注意,Windows GUI几乎都普遍使用选项卡式表单,因此最有可能的研究表明,以可用性为佳,考虑到我目前没有对cie的引用。

  • 请注意,通过AJAX调用具有“机会进行验证/检查/保存/等...”与上述选择几乎没有任何关系-您可以在表单上选择的任何元素松散/获得收益后立即发起AJAX调用焦点。

    选项卡式界面的唯一好处是,它是用户驱动的信号“我已经完成了这套表单元素的制作”-可以通过JS智能地完成,而无需使用选项卡,并且无需用户明确地告诉您他已经完成了( e ..他专注于下一个元素)。

    您也可以禁用“尚未为您准备好”表单元素,直到100%填写了所有前面必须的元素。

4.附注

为什么您的表格这么长?可用性研究的主要要点之一是,填写任何表格对用户来说都是漫长,艰辛和可憎的。因此,除非您必须获取信息,否则请不要索取。这尤其适用于注册表格-请参阅Nielsen和其他参考资料。