w3ctech

从网速慢看用户体验

F2e开发过程中我们大多数都是在内网环境, 或者"快速"的外网环境, 什么是快速的? 200Kb/s 以上都算快的, 但你试过在50Kb/s的网络里看自己的项目吗? 是不是在说哪还有这么慢的网速, 我明确地说, 我现在就是... 甚至于有时候还达不到50Kb, 当然这种情况常见于某些不良邻居在用 Qvod p2p加速看大片呢...

从网速慢的时候看用户体验, 你是否注意到有这些问题存在呢?

页面加载时间

你是否考虑到减少页面中的iframe数量, js代码后置, css前置, 图片延迟加载, 片段按需加载呢? 要知道在低网速的时候你的一个100Kb的文件(img,css,js)都要等老半天, 且这些加载的顺序不当会阻塞你的浏览器, 这就会让用户长时间的看到 "美白" 的页面...

所以合理的分配你的代码, 善用按需,延迟加载, 让用户能在"第一时间"看到页面的结构再说别的, 还有, 你要注意延迟加载带来的SEO问题哦...

合理的状态提示

如果你的页面有ajax异步请求, 好吧, 你中奖了, 比如一个登录表单ajax吧, 我是走这个模式, 你怎么看? 表单提交: 点击提交(或者center) -> 各种正则验证 -> 显示正在登录中并把提交按钮禁用 -> ajax发请求 -> 完成后把表示按钮解禁, 如果你不禁用按钮的请给个flag标识也行, 但如果这些都不判断, 你在网速慢的时候用户点一下没有反应, 会再点. 然后可能会多次发请求...

(ps:经试验测试表明, 把表单的submit按钮禁用, 整个表单就不能提交)

简单的操作: 比如weibo.com的添加关注吧, 添加后可以取消, 这些也要做标识, 不然你Y还一直猛点呢, 这个请求还没回来那个就又点了, 岂不是乱套了...

再比如增/删/改/查的时候是否有一些友好且不让用户重复失误操作的提示呢?

占位提示

页面中是否会有些需要占位的元素, 你是直接"砰"的一下出来, 还是平滑的淡入呢? 图片是否有默认背景呢? 失败/错误/空的提示加载失败或者错误的时候是否有一些友好的用户提示呢?

比如: 加载失败, 添加关注失败, 发表评论失败, 当前没有评论, 发表成功等...

事件绑定前

可能你会用js去给a连接绑定某些事件, 是否考虑到js加载前还没有处理事件用户点击标签而触发, 是让其跳转页面还是javascript:void(0);呢? 这你说了算

当然还不能忘记更为糟糕的表单, 如果你是用事件来阻止表单提交, 那事件没有绑定前该乍办...

比如: 某大公司的页面, 在页面加载完, 你点击某块的链接就直接跳转了, 而加载完js绑定事件后, 就整个是ajax异步请求, 是不是很帅气? 我想你也可以...

noscript

什么? 这么偏门的东东也要考虑? 哈哈, 只要你是大公司, 你想不做这个你会被炒鱿鱼的...

总结

总之一句话, 就是让用户能明白, 心里清楚现在的操作状态, 不能有"误会"...

要记住, 她好你更好...

注:博客同步的...

前端圈微信

扫码关注前端圈微信公众号

共收到1条回复

  • 看来今天去百度了啊,哈哈

    回复此楼