关于密码设计的 8 个 UI/UX 技巧

随着近年来 saas（服务即软件）的激增以及与每个服务使用相同密码相关的安全问题，我发现自己比以前更频繁地使用“忘记密码”页面。

如果可以借助 1Password 或 LastPass 等密码管理器提前纠正这个问题，并使用 Slack 或社交登录等工具实现的“无密码”方法，这里有一些 UI/UX 技巧可应用于您的“登录”和“忘记密码”页面的设计。

尝试登录、创建新密码或重置密码的用户将永远感激您。

1. 添加提示密码按钮

为了避免错误，首先要让用户能够看到他们刚刚在密码输入框中输入的字符。此功能通常由输入框右侧的“眼睛”图标表示。

正如我最喜欢的歌手所说，它很简单、很基础，但它并不总是可用。

对于那些了解浏览器控制台的人（现在按 F12 进入一个奇妙的世界），您可以简单地将密码字段的 type= »password » 更改为 type= »text » 并查看您所写的内容。

告诉您的用户在输入密码时 Caps Lock 键是否启用。

但如果不是，也不用担心，没有必要显示“Caps Lock 已关闭”的字样。很少有用户会看到这条消息并采取相应的行动。

相同的 UI/UX 设计实践可以应用于 Num Lock 键

创建密码时显示精确的解释，不要将其隐藏在工具提示中，只在用户输入错误时才显示。这样可以节省用户的时间和精力。实时验证也是一个很大的优势。

记住...那是 6 个月前，为了创建他的密码，您要求用户添加：

是安全措施、时尚效应、因为竞争对手在做同样的事而模仿，还是纯粹浪费时间？没关系，你做到了。而今天他却不记得你设置的这些限制。所以，如果他登录时出错，请提醒他，让他更容易操作。提醒他几天、几周、几个月甚至几年前的登录条件，我保证这对他有帮助。

如果您遵循上述步骤，尤其是允许用户查看自己输入内容的步骤，那么密码确认字段（很久以前在遥远的星系中）这一避免错误的安全功能将变得过时。输入一次密码已经很麻烦了，不要再输入两次了。

当用户意识到自己忘记了密码时，过程通常是这样的：

这就是奇迹发生的地方，因为在用户旅程的这个阶段，你已经知道了他们的电子邮件地址。没错，他们几秒钟前才输入的。你只需要在当前页面上填写，这样他们就不用一遍又一遍地输入相同的内容了。记住，在设计中，每一秒的节省都至关重要。

谁会记住你那冗长复杂的机器生成的密码？剧透警告：没人会。无论是出于安全考虑，还是为了让用户使用自己的密码管理器，最好让用户自己创建新密码，而不是在他们收到的邮件中随机生成一个。

这里有 8 个 UI 技巧，能让用户在忘记登录名和密码的页面上体验更轻松。记住，更少的摩擦意味着更高的转化率。你不想花时间与糟糕的界面作斗争，你的用户也不想。

👋🏻 感谢阅读我的文章，本文最初发布在Jimmy Lollipop上。