当你不再信任一个标签

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

当浏览器标签闲置太久,你不再信任回来后它是否还能按预期工作时,我们是否需要一个词来描述这种感觉?
我前几天发了一条推特,显然其他人也有这种感觉。

就是那种感觉,你只是知道你的会话已经失效了,如果你真的尝试执行任何需要登录的操作,它都不会起作用。如果你当时正在尝试做某件事,现在又不确定它是否已完成或保存,就会感到特别不舒服。

至于那个名字……以下是一些来自 该话题的好的建议:

  • 薛定谔的标签
  • 陈旧的标签
  • 标签异味
  • 过期的标签
  • 石化的标签
  • 标签休眠
  • 失效的标签
  • 孤儿标签
  • 标签腐烂

那么如何解决这个问题呢?

这实际上是一个用户体验问题。取决于具体情况。以下是一些选项。

关闭所有内容。

银行经常这样做。当你的会话过期时,它们会对时间进行严格限制,你不会只是停留在页面上,它们会将你注销并带回到登录页面,并显示一条消息。

它们可能会发出警告

然后你就被注销了

对于安全级别较低的网站来说,这可能有点过头了。但它确实很好地解决了(让我们选择一个)“失效标签”问题。你不会有任何疑问。它采取了行动,将你注销,并把你放在一个没有任何半成品状态的页面上。

停留在当前位置,但对操作发出警告。

许多网站希望让你保持登录状态。理想情况下,只要它是安全的,你就可以永远保持登录状态,直到你明确注销。登录是一个没有人特别喜欢的笨拙的过程,它会让你无法做你想做的事情。

我认为 CodePen 属于这一类。我们宁愿不强制你注销,但当然,你可以通过长时间不活动注销,或者自己注销。比如,你在另一个标签页注销了……这会导致你在所有地方注销,但目前我们没有对那些通常看起来像你已登录的其他标签页做任何处理。

这就是“失效标签”问题。但如果发生你无法执行的操作,我们会向你发出警告。

WordPress 在这方面有一个有点笨拙的流程。标签很容易失效,如果失效了,你根本不会收到任何警告。当你执行无法执行的操作时,你会看到这个

这是一个中间页面,它实际上会刷新你的会话,因此,如果你“重试”,它通常会起作用。不过每次都很吓人。即使它不起作用,WordPress 中最大的风险是丢失写作内容,但即使这样,自动保存通常也能解决问题。

以下是在 CodePen 上的一个示例,我登录时创建了一个 Pen,但在其他地方注销后,尝试保存。

我会给这里打 C-。至少你知道发生了什么,并且不会丢失任何工作,但从现在开始,它很尴尬。你必须在另一个标签页登录,可能需要将代码复制粘贴到其他地方进行保存,因为“失效标签”除非刷新,否则无法恢复。

如果我们要争取 A,我们会允许你无需刷新就能在该页面登录,并确保在成功登录后保存所有未保存的更改。如果登录失败,仍然要确保以某种方式获取未保存的工作副本。我们可能会称之为……

停留在当前位置,主动发出警告。

也许可以显示类似这样的消息:“您已被注销。您可以在此处重新登录。”

要了解这一点,你的网站前端需要定期或实时了解登录状态。例如,每 X 秒进行一次服务器 ping 以检查状态,如果你的登录状态已失效,则显示消息(无需任何其他操作)。或者也许是一个更现代的 websocket 连接,可以推送注销消息。

如果可以将所有这些连接起来,以便在网站的任何页面上都能发生,无需更改页面即可修复,并且永远不会丢失任何未保存的工作,那将是理想的。

真正失效的标签

最糟糕的情况是标签已失效,并且没有恢复路径。它不会告诉你它已失效,离开页面可能会导致未保存的工作或操作,并且没有警告或恢复步骤。

你见过针对这种情况的优秀用户体验设计吗?

这是一个重大问题,因为它会影响你可以登录的每个网站。令人惊讶的是,围绕这个问题没有更多讨论和最佳实践,也没有一些处理得特别出色的网站可以作为典范。

你是否知道一些特别好(或不好)的例子?