我正在设计一个很长的HTML输入表单，并在几个设计选择之间进行争论：
这里有任何研究或最佳实践吗？
答案 0 :(得分：6)
美国政府的usability.gov网站an interesting article关于国家癌症研究所对形式可用性的研究结果，但它并不完全涵盖您的选择;它更侧重于表单元素本身的设计。
Alsol，Dey Alexander Consulting a list of form design usability resources可能对您有所帮助。
更新：看看很多其他答案，这里有很多“这是正确的，其他选项是错误的”。最终的答案是这里没有一个正确的方法;但是，一些上下文可以帮助指导您找到一个好的解决方案。例如，如果您需要进行大量的验证和决策分支，将表单划分为多个HTML页面可能是理想的（例如，表单第2页上显示的内容完全取决于用户对问题的回答在页1），因为这允许您保持100％服务器端的验证和分支代码。但即便如此，在你的情况下还有其他可能更好的选择，但如果不了解你的情况就很难回答。
答案 1 :(得分：5)
首先，一篇好文章像往常一样Nielsen。
也可以在this post中找到一个好的分析。
我自己的想法（多年的网络应用程序设计加上过去的毕业级UI设计和可用性研究）：
<强> 1。利弊
长HTML表单：
单击滚动条（非常窄）很难导航，但使用鼠标滚轮很容易导航。
带有“下一个”链接的多个页面
两个世界都最糟糕。难以点击（“下一个”是一个小目标），没有随机访问表格的任何部分（如果它有意义）。当必须按特定顺序完成表单部分并且不能选择返回时，此选项才有用。
标签界面
这是一个不错的选择但有缺点。唯一的缺点是没有立即看到所有表单信息（如果你想要来回导航，你必须记住哪个选项卡在哪个选项卡上）。
<强> 2。结论
所以这是＃1和＃3之间的折腾，具体取决于用户最容易找到的内容（滚动长垂直页面与点击标签页）。
第3。注释
请注意，Windows GUI几乎普遍使用标签形式，因此很可能研究表明它的可用性更好，我认为目前没有任何cie引用。
请注意，通过AJAX调用“有机会进行验证/检查/保存/等等......”几乎与上述选择无关 - 您可以在选择任何元素后启动AJAX调用在表格上失去/获得焦点。
选项卡式界面的唯一好处是它是用户驱动的信号“我已经完成了这组表单元素” - 可以通过JS智能地完成，而无需使用选项卡，也没有用户告诉你他是明确地完成（例如，他专注于下一个元素）。
您还可以禁用“尚未准备就绪”表单元素，直到所有前面所需的元素都100％填写完毕。
<强> 4。附注
为什么你有这么长的形式？可用性研究的主要观点之一是填写任何形式对用户来说都是漫长，艰难和仇恨的。因此，除非您必须获取信息，否则不要求它。这尤其适用于注册表 - 请参阅Nielsen和其他参考资料。
答案 2 :(得分：3)
作为用户，我绝对更喜欢选项1。
其他一切都是谎言。你认为你已经完成了所需的官僚作风，然后还有更多。
另一方面，作为网站所有者，您经常想要诱骗用户进入注册过程，使用表单的简单屏幕1诱惑他。
选项卡界面对于导航而言是无价的，但IMO几乎从不对顺序输入有用。
答案 3 :(得分：2)
让用户滚动。如果使用“向导”方法，用户将很难查看或修改已输入的信息。
答案 4 :(得分：2)
我最喜欢选项1。您可以在div或fieldsets中对内容进行逻辑分组，然后用户可以在表单中进行选择。
对于多页表单，必须单击下一步然后返回键入内容总是很烦人。
答案 5 :(得分：2)
对于用于整天进行数据输入的长格式，用户很快就会熟悉布局。那些精通键盘的人不喜欢用鼠标在控件之间导航。如果您设置Tab键顺序并使用长垂直滚动表单，这可能会使数据输入人员满意。他们将能够比使用鼠标在标签或下一个按钮中单击来更快地填写数据字段。
两全其美：我使用的一个有趣的混合版本允许用户选择显示风格。数据输入人员可以查看长的垂直滚动版本。刚刚查看数据（并且可能编辑所选字段）的其他用户可以看到避免垂直滚动的选项卡版本。我们使用个性化设置用户对默认视图的偏好。
答案 6 :(得分：0)
我见过的一些最好的在线表格一直都有：
我认为，这应该是最好的做法：）
答案 7 :(得分：0)
结合2和3.
通过带有下一个和后退按钮的页面引导用户，和设置一些界面元素（选项卡很棒，但也标记为面包屑..）让用户直接跳转到页面。
答案 8 :(得分：0)
就个人而言，我使用多页面方法，但它也可以适应标签。以下是我的一些原因：
也就是说，如果页数超过2-3，您应该注意确保用户了解用户取得了多少进展。您应该可以通过表单向前和向后导航。这对你来说肯定更有用，但我认为，对大多数人来说，这是一种更好的用户体验。
如果您决定使用标签表格。我会使用AJAX并在选项卡导航上进行验证。这样，您可以一次验证一个选项卡，并且可以更轻松地显示验证错误。如有必要，您可以通过仅启用标签来强制执行标签顺序，因为之前的标签已完成。我认为如果javascript不可用，你的选项卡式界面应该会降级为多页面。
答案 9 :(得分：0)
我更喜欢（1）使用明确定义的部分滚动html的简单性。
许多商业网站更喜欢（2）的愚蠢方法，可能有一点（3）允许客户审查他们的选择。 （2）将所有内容保存在屏幕上，确保用户正在阅读您希望他们阅读的内容。
答案 10 :(得分：0)
我们公司有类似的表格，我们最终得到2和3的组合，即显示屏幕顶部的标签，还包括下一个按钮以转到下一个标签。以下是一些原因/考虑因素， 1，使用ajax加载每个选项卡，使表单在客户端变小，通常用户每次只查看/编辑一个或两个选项卡。 2，我们可以在加载表单时根据不同的场景显示不同的选项卡。 3，类似于1，我们可以根据用户的权限显示/隐藏一些选项卡。 4，某些字段是相关的，因此当更新上一个选项卡时，我们会相应地更改另一个选项卡上的某些设置。 5，有时，如果你没有分成标签，那么表格太长了，不能使用。
答案 11 :(得分：0)
部分观看，我基本上建立了＃1和＃3，我将从我的用户那里获得反馈。我最初的感觉是，随着我添加越来越多的数据，＃3将更具可扩展性。
答案 12 :(得分：0)
我为此特定目的编写了一个插件 - 主要用于医疗保健和法律领域 - 但它适用于任何长的HTML格式要求：
答案 13 :(得分：0)
我不喜欢一页中很长的表格。我发现它们难以导航，因为当你试图检查你的作品时很难找到一个领域。我不喜欢的另一件事是，在某些情况下，可能需要一些时间来完成表格，如果你被打断你会怎么做？另一种可能性是如果会话被丢弃，或者浏览器崩溃或网络出现故障或核战争等等。
我更喜欢每个部分的标签以及下一个＆amp;以前的按钮。我添加的另一件事是当用户从一个部分导航到下一个部分时，它会保存数据。另一个选项是包含自动保存功能。
较短的表单更好，但有时您只需要数据而无法替代。