修改密码的表单设计及整体体验

  • 来源:84tt.com
  • 更新日期:2018-05-11

摘要:同样是表单,注册表单的产品设计大家常讨论,那么修改密码的表单设计及整体体验又是如何?本文集中讨论的是修改密码这一常用操作在交互设计及用户体验的实践。

2011年岁末先后爆出CSDN、天涯等站点的用户明文密码泄漏,大家纷纷忙着修改密码,不少网站也通过在网页醒目位置发布公告或发送邮件提醒告知用户及时修改自己的密码以确保账户安全。对网站而言,希望用户能够定期主动去修改密码并保证一定的复杂度;但对用户来说,一般不到万不得已,通常不会经常修改密码。同样是表单,注册表单的产品设计大家常讨论,那么修改密码的表单设计及整体体验又是如何?

一、大型门户

1. 网易通行证

NetEase

表单中的每个输入框均会给出有效性反馈,新密码的复杂度要求一直显示在输入框下方,并需要填写验证码(英文+数字,不区分大小写)。

另:界面上有一处“>”字符漏出,应是缺陷。

2. 搜狐通行证

Sohu

界面中提示了当前用户名;当焦点在输入框中时,跟随输入框在其后提示密码复杂度要求的说明信息;验证码为小写英文+数字。

二、SNS社区

1. 人人网

Renren

在本次观察中人人网的密码修改流程相对显得比较特殊,它在修改密码之前,给出了“身份验证”的这一步,提供了验证旧密码、向注册邮箱发送密码重置邮件、账号申诉三种方式。它对用户的指引更为明确,当用户在长时间记住密码后遗忘了密码,则能直接通过发送邮件的方式进行密码修改,而不必退出登录后再走取回密码的流程。

2. 天涯社区

Tianya

输入旧密码后,会实时检查是否正确;焦点从输入框中移开后会检查有效性;焦点在新密码的输入框中时,会提示密码的复杂度要求(强制要求字母与数字组合);比较奇怪的是,为何这句“输入6-16位的字母和数字的组合,密码区分大小写”会始终显示在验证码输入框的下方——这句话所针对的表单项对象究竟是新密码还是验证码?这是一处不必要的困扰。

3. 豆瓣网

Douban

豆瓣网的密码修改界面很简单,甚至有些简陋——没有表单项的有效性验证,甚至连密码长度的说明都没有给出。“当前密码”与“新口令”的文案区别不知是否可以为之,个人认为还是统一为密码比较好,虽然口令更显Geek。

4. Facebook

Facebook

Facebook在界面中并未给出密码输入的说明;对当前密码项的为空时没有提醒;当新密码太短或太简单时会给出提醒;也会提示重复输入密码与新密码是否匹配。

三、微博

1. 新浪微博

Weibo

提醒界面上以红色高亮的方式告知用户密码安全的重要性;焦点移开时表单项会进行有效性验证;特别给出安全强度标尺再次提醒用户使用高强度的密码;焦点选中时,会提示用户密码的长度说明。

2. Twitter

Twitter

当表单项为空时不会给出提示;同Facebook一样,在新密码太短或过于简单时会给出提示;旧密码如果错误,点击“Change”后会在页面顶端显示,与全站的统一反馈提示一致;需要留意的是,Twitter在修改密码的界面给出了取回密码的入口,点击后会进入输入邮箱取回密码的页面,这一点与人人网相类似。