重置npm设置_密码重置用户流程4部曲

原文链接：https://blog.prototypr.io/ux-guide-password-reset-user-flow-bfa35a16e527

00-前言

伴随着五花八门的网站和应用而来的除了丰富的信息咨询还有长短不一形态各异的登录密码。就算是记性再好的人也是会有不小心忘记密码的时侯,尤其是对于那些不常登录的网站和应用来说。既然这一流程是无法避免的,那么作为设计师,我们应尽可能地将这一流程设计的更加流畅,且带有趣味性。撇开手机短信登录这个选项,今天跟大家分享下一个名为NPM的网站的密码重置的用户体验和交互流程，希望能为还在苦于找重置密码交互流程参考的同学带来些帮助。

01-重置密码页面

打开NPM网站点击忘记密码选项后,将自动跳转至重置密码页。不得不说NPM网站的重置密码页相当的标准：

页面标题清晰：重置密码
按钮文案非常明确：按钮文案应用「发送重置密码至我的电子邮箱」而不是含糊的「提交」或「发送」这类表述模糊不清的微文案。
多个重置密码方式选项：既可以使用电子邮件又可以使用用户名重置
最棒的一点是，在重置密码页面中，他有一段帮助用户减轻心理压力的文案：「别担心，我们都有过这样的经历」，瞬间使得页面充满人情味，而且不会对页面造成多余的混乱。

02-电子邮件

提交邮箱地址和密码后，系统将弹出页面提示「密码重置链接已发送」。

尽管说明很明确，但可以改进「确认文本」。最好说「如果存在帐户，将发送一封包含更多说明的电子邮件」，而不是「已发送一封电子邮件」。

这样不保证将电子邮件一定会发送到的行为即可不公开数据库中是否存在这个用户名，从而鼓励用户自己检查邮箱（以防未获得链接），另外添加了一道保险，可以阻止恶意钓鱼攻击。

这是收到的电子邮件：

03-临时密码链接

点击电子邮件中的链接将打开这个页面：

我最喜欢的是复制临时密码的功能。将鼠标悬停在临时密码上，密码就会被突出现实，然后点击后就可以立即复制到剪切板：

尽管这个改进不太重要，但是对于异常忙碌只想快点推进密码重置流程的用户来说，这简直是一个救星一般的功能（满足了用户的爽点）。因为真正的复制过程实在是浪费时间，要从头到位框选所有字符，右键唤出菜单然后点击“复制”按钮，这只可能更激怒用户。

在密码重置页面上点击“登录按钮”之后，您将进入常规的登录页面：

可爱的小熊，在输入密码时还会拉上帘子，谁会拒绝他？

04-设立新密码

使用临时密码登录后，将进入更改密码页面，即可创建新密码：

除了清晰的标题和必要的文本外，这个页面还提供了一个密码强度建议。值得一提的是，尽管大多数产品都有高强度的密码设定规则，但许多产品都无法将这个规则正确的传达给用户。这是造成很多用户设置密码时挫败感的原因，因此，让用户在编写密码前就知道哪些密码是可以通过规则的很重要。

但是即使我们提供了详细的规则，有时用户仍然会尝试创建一个不合规则的密码。在这种情况下，我们应该告诉用户，哪里出现了问题，以及怎样做密码能够更保险。NMP通过用户「确认更改密码」后的错误通知来解决这个问题。

如果密码太短，NPM会抛出错误消息并将输入框变为红色，从而指引你错误的位置：

错误通知：“在已知的已泄露密码的公共列表中检测到您输入的密码。请输入其他密码”。

如果密码太普通或已被泄露，NPM也会让您知道：

错误通知：“提供的密码太普通了。请选择一个更独特的密码”。

NPM还提供了两个列表的链接，这使您可以轻松快速地检查密码是否安全。

更改密码后，NPM会立即将您登录，因此无需重新进行身份验证并再次输入相关信息。这是另一个小功能，它表明NPM关心用户并希望他们尽快返回产品的正常任务流程。

摘要

页面应具有清晰可见的标题，例如「恢复密码」 要么 「更改密码」
按钮应具有特定的操作文本，例如「通过电子邮件发送给我恢复链接」或「更改密码」
如果提供临时密码，请提供快捷复制方法。
提供有关重置密码的详细规则指南。
如果用户密码不符合规范，请告知他们应该解决的问题。
创建新密码后立即帮助用户登录。

最后，值得记住的是，用户是有感情的。他们的心情可能会受很多因素的影响。例如，我忘记NPM密码的那一天就不好了。那一天都是出错的日子。

经过无数次登录NPM的失败之后，我最终放弃并决定重设密码，我预计这又是一个麻烦事。但是实际上这个过程使我心情舒畅，甚至使我剩余的时间都朝着积极的方向发展。

因为人在面对笑容时很难发火。