程序员在页面友好性上常犯的5种错误以及改正方法
2016-02-23 00:57
351 查看
我是一个性情乖戾的Web用户,但我想这也帮助促使我成为了一名优秀的Web开发人员。当我看到一个网站上有让人不爽的设计时就会非常的恼怒,一些很简单的东西为什么做不好?下面是5种常见的可用性方面的错误,以及如何纠正这些问题的方法。给自己方便,也与人方便,确保自己不要犯这样的错误。
使用表达
我不知道遇到过多少次,当我使用回车键提交一个表单时(或手机上用箭头/输入键),却什么都没发生。我只好又用鼠标点击提交按钮,表单终于有了反应。这是我最痛恨的一个网页可用性上的问题,一看就是业余人员做的。用鼠标点击提交按钮,或在手机上关闭键盘然后滚动到页面底部找到提交按钮,这都是讨厌的多余的动作,完全不需要这样做。你只需要使用
如果你在什么地方犯了这样的错误,请立即纠正。
我在我的网站上就是这样做的,用户在打开新标签页时就不会遇到类似的问题。不要迫使你的用户在你的网站上不停的点击后退键!
如果你不想把相同的内容输出两次,你可以使用Js动态的设置title。不管怎么实现,请为用户着想。
不要忘了
很多人在给页面元素设计样式时忽略了它们的状态,只考虑了用户使用鼠标操作,忘记了用户也许是用键盘操作。请用
给用户做一件好事吧:下次当你开发一个网站,请用tab键遍历页面上所有的元素;如果你按动tab不键后,页面没有任何聚焦点变化,请检查你的样式表,看看是否忘了给它们添加一些状态样式!
稍微修改一下,就能给你的手机用户带来巨大的便捷。
我们程序员常犯的错误有很多,以后我还会写更多这方面的文章,但可以肯定的是,大多数的这些错误都很容易纠正,只要你注意到了它们。如果你在使用某个网站或web应用时还遇到了其它友好性的问题,请告诉我,我会在下一篇文章里写出来,谢谢!
使用表达submit事件
,不要用click
事件;请用表单标签form
!
我不知道遇到过多少次,当我使用回车键提交一个表单时(或手机上用箭头/输入键),却什么都没发生。我只好又用鼠标点击提交按钮,表单终于有了反应。这是我最痛恨的一个网页可用性上的问题,一看就是业余人员做的。用鼠标点击提交按钮,或在手机上关闭键盘然后滚动到页面底部找到提交按钮,这都是讨厌的多余的动作,完全不需要这样做。你只需要使用submit事件,网页就会变得友好很多:
document.getElementById("myForm").addEventListener("submit", function(e) { e.preventDefault(); // ... Do processing here. Yay for "enter" key submission! return false; });
如果你在什么地方犯了这样的错误,请立即纠正。
不要阻止当有 [CONTROL] 或 [META] 键按下时的点击事件
我是一个非常喜欢在浏览器新标签页里打开网页的人,我最近在找一个新房子,我会同时打开很多网站页面,点击里面的图片观看,但不幸的是,打开的这些页面都进入了同一个标签页。很讨厌。在你对任何链接使用preventDefault方法前,请先检查用户是否按下了 [CONTROL] 或 [META] 键:
document.getElementById("myLink").addEventListener("click", function(e) { // e.preventDefault(); (不好) if(e.meta || e.ctrlKey) return; // 如果用户想新开一个窗口,请放行 e.preventDefault(); });
我在我的网站上就是这样做的,用户在打开新标签页时就不会遇到类似的问题。不要迫使你的用户在你的网站上不停的点击后退键!
在设置text-overflow: ellipsis的时候,请在你的网页元素上添加title属性,
有些新的CSS属性或属性值是非常的有用,例如text-overflow: ellipsis。程序员以前经常会使用什么方法来实现这种效果。我赞同使用
text-overflow: ellipsis,但是,当我用鼠标悬停在这个元素上时,你最好用
title属性显示出完整的信息:
<div class="ellipsizeMe lazy " title="I am some really, really long text that's going to be ellipsized"> I am some really, really long text that's going to be ellipsized </div>
如果你不想把相同的内容输出两次,你可以使用Js动态的设置title。不管怎么实现,请为用户着想。
不要忘了 :focus
和 :active
!
很多人在给页面元素设计样式时忽略了它们的状态,只考虑了用户使用鼠标操作,忘记了用户也许是用键盘操作。请用 :focus和
:active标明它们的状态:
a:hover, a:active, a:focus { /* 改变它们的样式 */ color: #900; }
给用户做一件好事吧:下次当你开发一个网站,请用tab键遍历页面上所有的元素;如果你按动tab不键后,页面没有任何聚焦点变化,请检查你的样式表,看看是否忘了给它们添加一些状态样式!
请使用search/email文本框类型
当在手机或平板等移动设备上填充表单信息时,我遇到了超级麻烦的问题,因为我必须切换键盘模式才能找到“@”字符。我希望Web开发人员都能成熟点,学会使用正确的文本框类型:<input type="search" value="" /> <input type="email" value="" />
稍微修改一下,就能给你的手机用户带来巨大的便捷。
我们程序员常犯的错误有很多,以后我还会写更多这方面的文章,但可以肯定的是,大多数的这些错误都很容易纠正,只要你注意到了它们。如果你在使用某个网站或web应用时还遇到了其它友好性的问题,请告诉我,我会在下一篇文章里写出来,谢谢!
相关文章推荐
- 对于求职的一些个人看法及总结
- iOS常见面试题
- 我的程序员生涯(一)
- .net面试题集锦(2
- 教你如何迅速秒杀掉:99%的海量数据处理面试题
- 面试趣闻,随记
- 为什么企业宁愿开高工资给新员工,都不愿意给老员工加工资?
- 优秀程序员的七大特征
- Java程序员面试中的多线程问题
- 职业方向
- php面试题
- 前端面试题总结(一)
- 系统设计面试题思路综述
- 程序员面试题精选100题(20)-最长公共子串[算法]
- 程序员面试题精选100题(17)-把字符串转换成整数[算法]
- 程序员面试题精选100题(16)-O(logn)求Fibonacci数列[算法]
- 程序员面试题精选100题(14)-圆圈中最后剩下的数字[算法]
- 程序员面试题精选100题(13)-第一个只出现一次的字符[算法]
- 程序员面试题精选100题(10)-排序数组中和为给定值的两个数字[算法]
- 程序员面试题精选100题(07)-翻转句子中单词的顺序[算法]