usability - 模式面板中的滚动条

Question

我正在开发一个 Web 应用程序，其中有一个模式面板/对话框弹出窗口来收集用户数据。面板中的表单变得很大，我们建议将表单拆分为多个选项卡，但我们的客户建议在模式面板中添加滚动条。

模式面板中的滚动条是否存在可用性问题？我认为这是一种不好的做法，但我想听听其他意见。

谢谢

格伦

更新:我将更详细地解释该场景。我们有一个搜索页面，可以在其中保存搜索结果项(复制到系统的另一个区域)。附加信息可以与此项目一起保存(例如附加注释、分配给其他存储桶 - 我无法详细说明)。当用户想要保存搜索结果项目时，他们可以检查一个或多个项目并单击保存按钮 - 这时我们的模式面板会弹出。

最初，用户被带到一个单独的页面，并且他们关注了一系列页面。我们的客户认为这很耗时，因此我们更改了页面以使用模式面板。

我不能 100% 确定使用模态面板是最好的设计，但这就是我们现在所拥有的。我欢迎任何其他想法。

Answer 1

好吧，我想问一下，如果你有一个这么长的模态表单，难道不应该将其制作成自己的页面吗？

我的意思是，模态对话的重点是告诉用户他需要知道的事情(这些信息通常被忽视并且很烦人)，或者在继续之前从用户那里获取一些必要的信息。

您说您的表单用于收集用户输入。如果用户在继续操作之前必须输入某些内容(例如结帐流程的一部分或类似的内容)，那么我认为最好将整个页面专用于该流程。

如果它更像是“在继续您正在做的事情之前先登录”之类的事情，那么我认为它作为自己的页面将您带回到该页面会更有意义填写完表格后，您就可以在输入之前就登录了。这就是 Stack Overflow 人工验证页面的工作原理。

如果它是一些烦人的内容，例如“向我们提供有关该网站的反馈”，那么它根本不应该是模态的，而应该是一个很容易被忽略的(我敢说吗？)弹出窗口。

模态对话确实应该尽可能简短。如果简洁是不可能的，并且对话确实必须是模态的，那么我认为创建一个必须先填充才能访问下一个页面的页面流会更有意义。就像结帐一样:您需要在添加运输信息之前将产品添加到购物车，并且需要运输信息才能确定运输成本。诸如此类的事情。

但是，如果不知道模态对话的确切性质，我无法准确告诉您哪种方式最好。

<小时/>

编辑:啊哈!您的客户觉得这很耗时，是吗？在这种情况下，您应该进行非常快速且肮脏的实时可用性测试，看看哪种方法实际上更好。从大厅下面捕获一些人，向其中一些人展示模态方式(通过滚动)进行操作，并向其他人展示旧的(非模态)方式进行操作，看看他们会说什么。

(理想情况下，您正在录制 session 和屏幕，并且确保不要让您自己的个人偏好暴露出来。只需要求他们在您观看时使用系统，看看他们执行任务的情况如何。使用录音对两种方法进行计时，看看一种方法是否真的比另一种方法更快。)

您不应该做出违反规范的可用性决定(在这种情况下，规范是“大型表单值得拥有自己的页面”)，而不确保它实际上以异常方式更可用。当谈到可用性时，规范通常是规范，因为它是可用的(但并不总是如此，这就是为什么你必须测试)。如果客户反击，你至少会有证据表明他们正在反对确凿的经验证据，证明他们想要的东西是愚蠢的。

不过，最终买单的还是客户。如果你不能让他们明白道理，那么你就必须充分利用他们告诉你的内容。如果表单必须处于模态对话框中，那么您至少可以尝试将非必要字段隐藏在折叠下(如果有非必要字段)，以便大多数用户永远不必滚动。

确保无论用户滚动到何处，提交表单的按钮(或您需要对表单执行的任何操作)都是可见的。一个非常糟糕的主意是将所有必填字段放在顶部，然后强制用户向下滚动以点击提交按钮。这太粗鲁了。