模态面板中的滚动条

时间:2010-02-02 18:39:38

标签: usability modal-dialog

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

模态面板中的滚动条是否存在可用性问题?我认为这是一种不好的做法,但我还是喜欢其他意见。

谢谢,

格伦

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

最初,用户被带到一个单独的页面,他们按照一系列页面。我们的客户觉得这很费时间,因此我们将页面更改为使用模态面板。

我不是百分百肯定使用模态面板是最好的设计,但这就是我们现在拥有的。我欢迎任何其他想法。

3 个答案:

答案 0 :(得分:2)

好吧,我得问一下,如果你的模态表格太长了,不应该把它写进自己的页面吗?

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

您说您的表单用于收集用户输入。如果这是用户必须在继续之前输入的内容(如结帐流程的一部分或类似内容),那么我会说最好将整个页面专门用于流程。

如果它更像是“在继续处理你正在做的事情之前登录这里”的事情,那么,我认为将它作为自己的页面让你回到页面会更有意义。一旦填写完表格,你在进入之前就已经开始了。这就是Stack Overflow人工验证页面的工作原理。

如果它像“向我们提供有关网站的反馈”一样令人烦恼,那么它根本不应该是模态的,而应该是一个容易被解雇的(我敢说它?)弹出窗口。

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

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


编辑:啊哈!你的客户感觉这很费时,嗯?在这种情况下,您应该进行非常快速和脏的实时可用性测试,以确定哪种方式实际上更好。从大厅里拿出一些人,向他们展示一些模式(用滚动)来做这件事,并向其他人展示做旧的(非模态)方式并看看他们要说些什么。

(理想情况下,您正在录制会话和屏幕,并且确保不会让您自己的个人偏好显示出来。只要让他们在您观看他们执行任务的程度时使用系统。使用录制对两种方法进行计时,以确定一种方法是否真的比另一种更快。)

你不应该做出违背规范的可用性决定(在这种情况下,规范是“大型表格值得他们自己的页面”),而不确定它实际上是否更有用的异常方式。在可用性方面,规范通常是常态,因为它是可用的(但并不总是,这就是你必须测试的原因)。如果客户反击,你至少会有证据表明他们反对经验证据证明他们想要的是愚蠢的。

但最终,客户是支付账单的客户。如果你不能让他们看到原因,那么你将不得不充分利用他们告诉你的东西。如果表单必须采用模态对话,那么您至少可以尝试隐藏折叠下的非必要字段(如果存在非必要字段),以便大多数用户永远不必滚动。

无论用户在哪里滚动,都要确保提交表单的按钮(或者您需要对表单执行的操作)。一个非常糟糕的想法是将所有必填字段放在顶部,然后强制用户向下滚动以点击提交按钮。那太粗鲁了。

答案 1 :(得分:0)

将模态窗口放在这里似乎是有道理的 - 我假设你在页面上做了一个图层。但它听起来像是变得拥挤,而且你正在寻找管理不断增加的UI元素的方法。

要回答关于滚动条的初始问题,不,它们不是禁止的。但是,正如另一个响应声明的那样,您不应该在滚动区域内设计动作UI元素。

听起来好像一些好的用户研究在这里很有用。哪些项对用户很重要。哪些项目是必需的,哪些是可选的?他们可以归类吗?

有些人建议,当UI项目的数量溢出对话框时,选项卡对于分类很有用。但在这种情况下,我认为这是一个坏主意。这不是对话框的设置类别,而是更多的确认/选择/输入对话框,用户将保存输入和选择的内容。用户可能会错过选项卡并错过输入信息的标签很有可能。如果需要“返回”选项卡上的某些内容并且用户没有去那里,那么您的错误体验非常糟糕。

关于滚动的一个问题是对于使用鼠标的用户来说很容易。他们可以选择单击滚动条或(对于许多人)滚动滚轮。

您可能没有考虑过的一件事,特别是如果用户可以输入或选择的某些内容是可选的,则可以在对话框中创建可折叠和展开的部分。默认情况下,将展开包含所需元素的节,并且默认情况下会折叠包含可选元素的节。如果某个部分的扩展添加了一个滚动条,那么对UI的添加对用户来说是显而易见的。

当然,您可能需要弄清楚这一切对于那些只有键盘,有残疾以及可能在移动设备上访问此键盘的用户的效果如何。

答案 2 :(得分:0)

我不认为选项卡式面板从根本上比滚动面板更好或更差。每种都有不同情况的优点。然而,在您的情况下更重要的是:如果您需要制表符或滚动,那么您的面板可能太复杂而无法进行模态化。在模态面板中输入的信息越多,用户就越有可能去其他地方获得答案,如果用户决定他们必须出于任何原因去其他地方,你扔掉的工作就越多。

解决方案是将尽可能多的信息移出面板并移动到父页面/窗口。让用户在搜索结果页面上输入“附加信息”,允许他们浏览结果以帮助他们决定信息。由于附加信息显然占用了大量空间,因此可以使其控件显示和隐藏,但始终保留用户在隐藏和显示之间的输入。我认为可以选项卡或滚动来保持足迹小。有关单个搜索结果的其他信息应该放在该搜索结果旁边的控件中,而不是单独的面板中。

模态“保存”面板应该只包含一些有助于保存的控件,例如文件名和位置,以及文件类型。如果所有信息都有助于保存,则使保存面板无模式。谁说你做不到?

将所有保存信息放在另一个页面上并不比模态面板好多少,因为这也是有效模态的,因为用户无法在不丢失输入的情况下去其他地方。即使您采取措施保留用户对页面的输入,如果他们转到另一个页面,大多数网络滥用的用户认为他们可能会丢失他们的输入,因此他们不会尝试。