云社区 博客 博客详情
云社区 博客 博客详情

【Chrome web.dev Live 2020总结】第3天第12集:登录最佳实践

华为云官网技术团队 发表于 2020-07-22 17:40:42 07-22 17:40
华为云官网技术团队 发表于 2020-07-22 17:40:42 2020/07/22
0
0

【摘要】 本文主讲了一个好的登录系统应该如何设计和编码

先问问自己,用户真的需要登录才能使用你的系统吗

用户其实并不希望被强制上传自己的个人信息,而且上传后的个人信息,会变成你的系统责任和负担。

The best sing-in form is no sing-in form,这位爷如是说。

好的HTML结构

好的html结构是一个好的登录体验的基础。

用<form>、<section>、<label>、<button>这些基础的标签就可以完成我们的功能。

也许会有人将input放在复杂的<div>中进行数据提交,不要这么做!!永远优先使用<form>表单,这对于不同设配和网络状态下的兼容性很重要。而且,即使js运行失效,表单依然可以正常上传,可以保证功能的正常运行。

 label

使用label有两个主要原因

label 有 for 属性,和input的id相同的时候可以将二者进行绑定,这样点击label的时候会自动聚焦到绑定好的input上,使用很方便;

对于无障碍访问来说也很重要,因为点击label的时候可以自动发声,残障人士也可以顺利的访问我们的页面

placeholder

placeholder可以使用,但是不能替代label的作用,因为用户一旦开始输入,就无法看到placeholder的内容了,很容易就会忘记输入框的内容应该是什么

如何摆放

根据谷歌AI的统计,将label放在输入框的上面会加快浏览者的浏览速度

而且也可以保证输入框长度的一致和完整性

重复输入

有些网站会要求用户重复输入邮箱、电话、密码等信息,确实可以减少部分用户出错的几率,但是会增加所有用户的工作,并且会增加用户放弃注册的概率。

允许用户验证邮箱并提供简单的密码重置方式就好了。

button

理由

button 提供了极其便捷的表单提交方式,并且样式也很容易修改,完全没有任何使用其他标签假冒button的理由哇!

命名

使用用户可以理解的命名,比如sign in 或者 create account,不要用go submit等,会给人造成很大的困扰

防抖

表单提交肯定不能连续提交多次,然而很多用户都会习惯性的连续点击多次按钮,这个时候一定要做好按钮的防抖处理,避免表单的重复提交

合理提示

用户有部分内容没有填写好的时候,不要对按钮不响应而已,要给出合理的错误提示,告知用户还要做什么。

而且,大部分判断无需js处理,html自带了很多输入框的属性,使用就好了:

image.png

 合理的布局

我们都知道,默认的html标签样式很丑,在移动端显示的也很小,一定要将表单调整到用户在pc和手机端都能够正常使用的程度。

attributes

有一些属性是我们需要特别注意使用的:

autofocus

type=‘password’|‘email’|‘tel’

inputmode=‘numeric’

合理的name(比如登录和注册表单的password输入框name就不能相同)

required

aria-describedby

注意键盘不要遮挡按钮

解决防范有很多,比如说修改布局,或者像亚马逊、eBay一样,每页只有一个输入框:

 增加用户行为的分析

埋点信息上报可以有效分析用户的行为,比如何时放弃登录,何时点击登录等等。

总结:

总之,老哥今天的重点在于用户体验至上,我们一定要把页面性能、合理布局、使用便捷程度、无障碍访问、减少用户操作、减少可能引起疑惑的点、重置和用户隐私等入口放置在显眼的位置等细节问题抠好。


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消