大家好,我是IT修真院西安分院第2期的PM学员张建兴,一枚正直纯洁善良的产品经理
今天给大家分享一下,注册登录要注意的细节
一、分步注册
1、分步注册适合移动端设计
移动端屏幕小,加上弹出键盘,假设将多个输入项放在一个页面,会给用户造成拥挤感,然而分步注册则可较好的解决该问题。
2、分步注册可减少用户点击输入框的次数
几乎所有的注册关键步骤中都有:输入手机号、获取验证码、设定密码这3个步骤。在一个页面中时,需要手动逐项呼出键盘来填写。若遵循分步注册,分成3个页面的话,进入每个页面都会自动置入焦点并弹出键盘,将减少用户手动点击输入框的次数。
二、弹出相对应的输入键盘
- 点开邮箱输入框,弹出带有@的英文输入键盘。
- 点开手机号输入框,弹出九宫格数字输入键盘。
- 点开密码输入框,弹出英文输入键盘。
这是很小的细节,虽然用户可能不知道哪里不对,但是他能体会到好不好用。一个APP注意了这点,那用户就会觉得这个APP好用。而另一个APP没有做到这点,无论点击哪个输入框弹出的都是九宫格中文输入键盘,用户就会觉得这个APP不太好用。
三、对手机号码进行3 4 4的分布
这个规则不仅适用于手机号码,包括银行账号、转账金额等等。这是因为人的短期记忆是有限的,即一次只能记住有限的东西,如果强制记住很长的东西,短期记忆就很容易出错。所以将数字以4或者3为单位分组,有利于用户阅读、编辑、校对手机号码。
四、登录时增加一键清空icon
在登录的时候偶尔会出现输入错误,如果没有这个清除的icon,用户只能按键盘中的清除按钮,需要一直按住直到输入框为空。
五、清晰的错误反馈
实时数据验证实时验证可以立刻通知用户数据的正确性。这种方法允许用户纠正错误,而无需等待他们点击提交按钮才能看到错误。当用户输入错误信息时,最好利用临时框的形式提示用户。而不是不做反应让用户自己去猜到底是怎么回事。
临时框也有两种形式,一种是下图左侧的对话框形式,这需要用户点击确认才能进行下一步操作。一种是toast的形式,弹出一两秒后自动消失。第一种形式相当于强制中断了用户的操作,用户需要点击确认才能回到原来的操作流程。而toast则起到了提示的效果,并且没有打扰到用户。
下图右侧的airbnb,在用户输错密码时,不光有底部的临时框提示,还将整个登录页面的背景色油绿色变为醒目的橙色,这种设计在提示用户的前提下,还做到了赏心悦目。
发生错误时,提醒方式,“请输入正确的XXX”,而不是提示“输入XXX有误”,更好的引导,把握用户心理,用户在注册表格的时候更加有信心;
六、禁用该按钮,直到所有必需的输入已完成
当input为空时,关联按钮为disabled的状态,这是采用了防错的原则:如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免误按,这是在提交之前的视觉验证输入的另一种方式。
七、浏览视线
第一版视觉线:写手机号-看一眼验证码输入框-点击验证码按钮-回来输入验证码-点击注册。在这个过程中,验证码输入框被2次阅读;
第二版视觉线:输入手机号-点击验证码-输入验证码-点击注册,但是从手机号到验证码跳了一行,思路会突然断一下,再着一按钮直接冲在最前吗有点突兀;
第三版视觉线:将验证码按钮上移到输入手机一行,这样在用户输完手机号码时,看到验证码很自然就会点击,然后输入完成操作。保证视觉线与思路线保持一致。
八、其它
- 在输入框中,提示你所需要输入内容;
- 能够自动判断手机(帐号)的格式,在输入11位数字之后无法再输入;
- 60秒重发,且所收到的验证码固定时间内有效(在未验证前,且后台没有退出)。如果操作频繁,将提示“已超出限制次数”;
- 让用户密码可视化:使用“显示密码”复选框方式去预防用户输入错误密码;
- 当图形验证码正确时,自动发送短信验证码,减少用户点击次数。
九、参考文献
- 人人都是产品经理