模态对话框是一种重量反馈,通常用于用户的重要操作。模态对话框将中断用户当前的操作过程,如果用户未对弹出窗口进行操作,则无法使用其他功能。从这一点上,我们可以看到,模态对话框的优点和缺点非常明显:优点是它可以很好地获得用户的视觉焦点,缺点是它会中断用户当前的操作过程。使用模态对话框有什么注意事项呢?本文Pixso带你揭晓!

1. 对重要警告使用模态对话框

当用户的工作可能丢失或操作可能产生破坏性和不可逆转的后果时,请中断用户以避免灾难。

若要确定哪一个错误严重到可以使用模态对话框,请考虑以下内容:

  • 如果用户的注意力从任务中移开,问题是更容易纠正还是更难纠正?

如果可能的话,在人为错误发生之前防止它总是好的。但是,一旦发生错误,如果错误消息出现在主要内容中而不是模式对话框中,则可能更容易修复错误。

例如,表单中的错误应该在页面上报告错误的位置,以便用户在解决问题时可以参考错误消息。但是,通知用户其计算机将在10秒后重新启动可能会出现在模式对话框中,以确保用户注意到该消息。

  • 错误是不可逆转的吗?

不可逆转的错误通常会导致信息丢失,这对于复杂且耗时的任务尤其具有破坏性。

未能将商品添加到购物车对电子商务企业来说可能是一个不幸的错误,但如果用户没有注意到细微的通知,这对他们来说并不是不可逆转的。另一方面,覆盖文件或无法保存对数百张幻灯片的更改是不可逆的,因此需要中断这些更改,并且通常是受欢迎的。

如Pixso工作台的回收站清空提示,该行为属于重要警告行为,模态对话框有助于防止不可逆转的误删。

模态对话框

2. 提示用户输入流程的重要的信息

如果缺少信息导致系统无法继续用户启动的过程,则模态对话框可以提示用户输入此信息。

如下图所示,如果用户未输入团队名字而直接点击“创建团队”,则会出现“团队名称不能为空”的红字提醒。

创建团队

3. 将复杂工作流划分为更简单步骤

对于耗时且涉及精神和情绪化的任务,同时要求大量信息可能会让人不知所措。在这种情况下,可以使用模态对话框将复杂的信息分解为更简单、更容易理解的块。向导是这种使用模态对话框的常见示例。

然而,需要注意的是,具有多个步骤的模态只会延长主任务之外的时间,使用户更容易忘记他们实际做了什么。也就是说,如果它需要几个步骤才能开始,那么就有理由花一整页的时间来专门用于它。

如Pixso社区中的移动端点餐设计素材,用户需要筛选类别、评分、价格才能完成对话框的选择。

移动端点餐设计素材

移动端点餐设计素材

4. 询问信息,减少用户的工作量

当请求或呈现的信息相关或可以简化当前任务的执行时,模态可以有效地工作。

以房地产网站为例,用户可以在没有帐户或房地产代理的情况下浏览房地产列表。但是,当他们试图联系代理检索列表时,站点会显示一个模态对话框,询问他们是否已经有代理。这些信息对于下一步联系挂牌代理并不重要,但对于促进未来的互动仍然很有价值。该对话框使用渐进式分析,每个对话框代表一个易于回答的问题。这些问题是低承诺的,并且专注于相关细节。

渐进式分析的关键在于,它们遵循用户对工作流的期望,中断只有在与当前任务相关或有帮助时才有用。

对话框

5. 不要用于与当前进程无关的信息

如前所述,模态对话对用户来说有许多缺点和成本。为了使这些成本合理化,它们应该与任务非常相关且重要。与用户目标没有直接关系的模态对话被认为是具有破坏性的,会降低对公司的信任。

如果非必要信息以高优先级格式显示,例如模态对话框的形式,则用户将拒绝考虑该形式的其他实例。这类似于伊索寓言中的《狼来了》故事。小男孩通过说“狼来了”反复误导村民,当狼真的来时,小男孩已经失去了村民宝贵的信任。

与普遍的看法相反,邮件列表注册对于生成商业广告至关重要,但对用户来说并不重要。在最近的一项网络可用性研究中,我们听到了对与电子邮件通信注册相关的模态对话的强烈蔑视。

6. 避免中断高风险流程

对于用户和企业来说,结账是一个高风险的过程:用户希望确保这个过程是无缝的、安全的和无错误的,而企业希望确保用户遵循他们的购买决定。模态对话,如果没有根据,充其量只会分散用户的注意力,最坏的情况下会削弱用户的信任。

如下图所示,没有缘由的支付失败会让用户感到沮丧,因此需要“立即支付”按钮重新唤起用户的支付热情。

立即支付

7. 避免在复杂决策中使用

模态对话框应用于与用户进行简短、直接的对话。如果模态框要求用户执行复杂的研究或查阅其他信息源(模态框可能会阻止这些信息),那么它不是进行交互的正确UI元素。

如Pixso社区中的微信模态对话框,只需要突出获取手机验证码字眼即可,简短易理解。

Pixso社区

通过以上的分享,相信你对模态对话框已经有一个初步的认识。Pixso内置腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范,提供海量设计模板和素材,本地化字体资源,肯定能为你提供设计模态对话框的灵感。赶快来试试吧!