一篇文章,搞定五种类型的UI通知栏设计

CSS/设计
443
0
0
2022-12-11
标签   网页设计

img

通知是许多产品不可或缺的一部分。我们今天设计的几乎所有产品都需要一些系统来与我们的用户共享更新。

本文将讨论五种类型的 UI 通知,以及何时以及如何使用它们的基本规则。

什么是通知?

通知是我们希望与用户共享的任何系统更新。通知提供有关某些事件的相关且及时的信息。

通知可能因以下情况而异:

  • 重要程度。通知范围从用户必须查看的重要更新到用户可能容易忽略的低优先级更新。
  • 渠道。通知可以是产品的一部分(应用内通知)或使用外部通信渠道(即电子邮件通知)。
  • 用户触发或系统触发。用户触发的通知是由用户的操作触发的通知(例如,用户在网站上购买了产品并收到了有关订单的更新)。系统通知是系统发送给用户的通知(即有关计划的系统维护的通知)。

通知永远不应成为与用户交流的主要方式。

通知剖析

通知应针对快速扫描进行优化。快速浏览一下就足以了解通知的全部内容以及您可以做些什么。

以下是通知容器的四个构建块:

img

  • 标题(标题区域)。标题应该是通知中最突出的元素。它为通知用户有关事件的通知创建上下文。您必须编写一个简短的标题,为通知内容提供上下文。
  • 描述(身体区域)。描述包含有关事件的更多详细信息。它可以包括用户认为有帮助的附加信息。撰写描述时,尽量使其长度不超过 40 个字符,并且不要重复内容标题中的内容。
  • 操作区域(号召性用语按钮)。按钮让用户立即采取行动。如果通知需要操作,按钮的标签应该是可操作的。它应该显示“创建”、“完成”或“发送”。确保可点击区域具有足够的对比度,以便用户轻松发现它。操作区域可以显示在通知容器的右侧或底部。
  • 图标(可选)。有意义的图像可以强化通知的内容。例如,如果您将收到的消息通知用户,您可以包含发件人的头像。

现在让我们讨论四种流行的通知类型以及如何使用它们的规则:

1. 带有徽章的图标

徽章是一个小的填充椭圆形,可以出现在应用程序图标上并指示未看到的更新。徽章可以有一个数字,用于通知用户未读通知的数量。用户检查更新后,徽章会从应用程序图标中消失,并在新通知到达时再次出现。

img

右上角带有圆点的铃铛是此类通知的常规设计。

优点:

徽章不需要用户过多关注。徽章不会阻止用户与产品交互。

它可以对用户产生积极的影响。在某些情况下,用户可以将徽章视为有价值的奖励。例如,徽章会通知用户他们在社交网络上收到的新点赞。Nir Eyal 在他的书“Hooked”中描述了这种心理效应。

缺点:

需要用户采取额外的行动。徽章本身不是通知;这是通知的警报。它只是说明了用户有新更新的事实。用户必须单击或点击带有徽章的图标才能看到实际消息。

何时使用:

徽章可以是具有中等重要性的通知的完美解决方案。

小技巧:

考虑提供声音来补充您的通知。声音可能是在不看屏幕的情况下吸引某人注意力的好方法。独特的声音还可以帮助您区分应用的通知。

2.推送通知

推送通知是出现在移动设备的锁定屏幕上并引起很多关注的通知。

img

在 Apple iOS 中推送通知。图片来自苹果

优点:

很难忽略推送通知。用户很可能会注意到推送通知。

缺点:

需要太多的关注。推送通知强制用户阅读它们。

它可能会被产品创建者过度使用。频繁的推送通知,即使它们很有价值,也可能会惹恼用户。

何时使用:

推送通知适用于重要且时间敏感的更新(即用户设置的日历提醒或警报、航班延误或已交付订单的更新)。在您发送推送通知之前,您需要确保您将与用户共享的信息是有价值的和时效性的。否则,最好使用其他类型的通知。

提示:

  • 不要使用推送来提示用户对您的应用进行评分。
  • 请勿将推送通知用于促销或广告目的。
  • 不要使用推送通知来鼓励用户返回应用。“我们有段时间没见到你了”通知不会为用户提供太多价值。向用户明确说明他们应该返回应用程序的原因。
  • 允许用户更改通知行为。用户应该能够微调推送通知首选项。
  • 创建通知摘要。通过对推送通知进行分组来最小化推送通知的数量。Android 和 iOS 允许创建一个汇总几个通知的通知。您可以显示摘要,而不是显示多个通知。

img

多个通知汇总并显示在折叠视图中。图片来自谷歌。

3. 电子邮件

用户会收到一封电子邮件,其中包含有关更新的详细信息。

优点:

给用户更多的控制权。由用户决定是否要阅读电子邮件。如果电子邮件标题足够好,用户可能无需阅读电子邮件就可以理解上下文。

缺点:

反应时间长。用户可能需要更多时间才能看到电子邮件通知。此外,电子邮件可能会在用户收件箱中丢失(即转到垃圾邮件文件夹)。

它需要切换上下文。当应用程序发送需要用户操作的电子邮件通知时,用户必须切换到电子邮件应用程序才能完成操作。这可能不是很方便,尤其是当您与移动设备上的应用程序交互时。

何时使用:

您想要使用电子邮件通知有两个原因。首先,出于安全目的,您可能希望将电子邮件用作单独的通道(即,当用户尝试登录服务时,应用程序会发送一封电子邮件,其中包含有关新登录尝试的通知)。

img

其次,您可以使用电子邮件通知不需要用户操作的系统更新(即,通知用户订单更新)。

4.Toast

Toast 是一个矩形块,显示在用户屏幕的顶部或底部,用于通知用户更新。Toast 会在短暂的超时(最多十秒)后自动从屏幕上消失。

img

Android 中的 Toast 通知

优点:

Toast 是上下文相关的。用户不必切换上下文来阅读信息。

不要中断用户体验。它们暂时出现,不需要用户输入即可消失。

缺点:

丢失信息的风险。默认超时可能不足以让某些用户阅读通知。当吐司在用户阅读消息之前消失时,这是一个糟糕的用户体验。

何时使用:

Toast 是一种很好的操作状态。例如,消息发送应用程序可以在消息发送成功时显示吐司“消息发送”。

提示:

  • 不要使用 toast 来显示与当前用户任务无关的信息。如果您在任务中间打断用户告诉用户您的产品具有的新功能,那就不好了。
  • 不要将 toast 用于错误消息。由于 toast 会在短暂超时后消失,因此某些用户可能无法阅读错误消息。
  • 不要使用 toast 通知来提供有关如何使用应用程序的随机提示。关于如何使用应用程序的随机建议具有较低的用户价值,因为它与上下文无关。

5.全屏覆盖/模态窗口

全屏覆盖/模态窗口是出现在应用内容顶部并要求用户做出决定的对话框窗口。这种类型的通知会在所有应用功能出现时禁用它们并保留在屏幕上,直到用户完成所需的操作。

img

YouTube 使用完整模式来提示移动用户购买其高级订阅

优点:

用户在访问应用程序时将 100% 看到通知。无法避免此通知。

缺点:

它充当路障。这种类型的通知会中断用户流程并迫使用户采取行动。

它仅在用户访问应用程序时有效。这是一个应用内通知,这意味着如果用户不访问应用程序,他们将看不到更新。

何时使用:

全屏覆盖/模式窗口应仅用于需要用户操作的最关键的系统更新。例如,它可能是阻止应用程序正常运行的错误或需要特定用户决策的关键信息。

小提示:

不要对促销消息使用全屏覆盖/模式。

如何创建通知策略

现在您已经熟悉了不同类型的通知,是时候分享一些有助于您创建有效通知策略的基本规则了。

1. 同一主题的分组通知

对您要发送给用户的所有通知进行内容清单,并将它们分组到具有相同主题的集合中。例如,“订单更新”通知。

2.为每个通知设置级别重要性

瞄准四个重要性级别(低、中、高、关键)。应该从用户的角度选择重要性级别(基于通知提供给用户的价值)。您可以将推送通知用于具有关键级别和高度重要性的事件。当涉及低重要性时,如果要发送此类通知,则应三思而后行。

3.允许用户自定义通知偏好

练习选择加入方法——询问用户是否想接收特定类型的信息。当用户明确选择接收某些类型的通知时,他们更有可能很高兴看到它们。

img

4.避免为同一件事发送多个通知

即使用户没有回复,也不要发送后续通知。人们应该在方便的时候关注通知。当您为同一件事发送多条消息时,用户更有可能关闭您应用的所有通知,甚至删除该应用。

5. 小心敏感信息

不要在通知中包含敏感信息。您无法预测人们在收到通知时会做什么,因此最好避免在设备屏幕上包含其他人可以看到的机密信息。

原文:https://uxplanet.org/5-types-of-ui-notifications-dbfbda284456