程序员在页面友好性上常犯的5种错误以及改正方法

标签: 技术技巧 html 友好性 界面设计 错误 | 发表时间:2014-04-04 11:45 | 作者:santiago
出处:http://www.webhek.com

我是一个性情乖戾的web用户,但我想这也帮助促使我成为了一名优秀的Web开发人员。当我看到一个网站上有让人不爽的设计时就会非常的恼怒,一些很简单的东西为什么做不好?下面是5种常见的可用性方面的错误,以及如何纠正这些问题的方法。给自己方便,也与人方便,确保自己不要犯这样的错误。

使用表达 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" 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应用时还遇到了其它友好性的问题,请告诉我,我会在下一篇文章里写出来,谢谢!

(英文: 5 Common Usability Mistakes and Solutions For Avoiding Them.)

相关 [程序员 页面 友好] 推荐:

程序员在页面友好性上常犯的5种错误以及改正方法

- - WebHek
我是一个性情乖戾的web用户,但我想这也帮助促使我成为了一名优秀的Web开发人员. 当我看到一个网站上有让人不爽的设计时就会非常的恼怒,一些很简单的东西为什么做不好. 下面是5种常见的可用性方面的错误,以及如何纠正这些问题的方法. 给自己方便,也与人方便,确保自己不要犯这样的错误. 使用表达 submit事件,不要用 click事件;请用表单标签 form!.

如何用“友好”的方式告诉经理:拥有一个好程序员是你的幸运?

- - 外刊IT评论网
我有一个朋友,他在一家小公司工作,这家公司最近换了经理. 老经理由于资深程序员的辞职且无法招到替补而被派去顶替空缺的开发角色. 这位朋友最近被新经理单独谈话,是因为他每天只在办公室里待6-7个小时,上班时间喜欢外出,然而,如果是能独立完成的工作任务,他从来不拖后腿,但如果是需要和同事相互协作的任务,那就另说了.

普通程序员、文艺程序员、2B程序员

- 可可 - 宇宙的心弦
希望能引起广大苦逼的正在学或者已经学过c++人的共鸣和会心一笑吧. 如何辨别自己在现实还是虚拟世界.

如何面试程序员?

- bluesnail - 阮一峰的网络日志
你要面试一个程序员,应该问他什么问题. 有人在Hacker News的讨论区里,请求指点,怎么才能在面试中发现合格的人. 众人纷纷出主意,有很多高质量的回帖,我觉得挺有启发,就整理出了下面这篇文章. 首先,最重要的是,你自己一开始就应该想清楚:. 哪些途径和方法可以发现这样的人. 只有明确这些根本性的问题,才能正确高效地完成面试.

程序员的本质

- Allen - 译言-电脑/网络/数码科技
来源What do programmers really do?.   很多人(包括我岳母)认为计算机变得如此智能,所以在不久的未来将不再需要程序员. 另外一些人认为程序员是天才,他们在电脑前能不断地解决复杂的数学难题. 甚至不少程序员对他们是做什么的都没有清晰的概念.   在这篇文章中,我想给不知情的人解释一下程序员到底是做什么的:.

程序员人生之路

- myartings - 博客园-首页原创精华区
   程序员人生之路(强烈推荐,分析的透彻. ),某程序达人的人生感悟,估计没有半个甲子的时间,是绝对不可能感悟出来的.    相对同时刚出校门同学从事其它行业而言优厚的薪水,以及不断学习更新的专业知识不仅仅让你感到生活的充实,更满足了你那不让外人知的虚荣心. 在刚出校门的几年中,你经常回头看看被你落在后面的同学们,在内心怜悯他们的同时,你也会对自已天天加班的努力工作感到心里平衡:“有付出才会有回报”这句话在那几年中你说的最多,不管是对自已的朋友们还是自已的爱人.

程序员装B指南

- Qing-Run - 博客园-首页原创精华区
1.电脑不一定要配置高,但是双屏是必须的,越大越好,能一个横屏一个竖屏更好. 一个用来查资料,一个用来写代码. 总之要显得信息量很大,效率很高. 2.椅子不一定要舒服,但是一定要可以半躺着. 3.大量的便签,各种的颜色的,用来记录每天要完成的事务,多多益善. 沿着电脑屏幕的边框,尽量贴满,显出有很多事情的样子.

程序员收入报告

- diaoxsh - cnBeta.COM
最近,波兰的程序员Chris(也叫KreCi)公布了他的第十四期程序员收入报告. 数据显示,上月是目前为止他收入最多的一个月. Chris的收入并不是指他的工资或薪水,Chris是一个自由职业者. 他的收入也不是来自个人承包软件工程的收入,他更像是一个果农,种了优良的果树,只要不断的给这些果树施肥浇水,这些果树会给他带来源源不断的财富.

程序员的利器-SourceInsight

- Alex - 博客园-首页原创精华区
作为程序员,大部分时间是在已有的代码上代码工作. 要对已有的代码进行调整,首先就要搞清楚当前代码中蕴含的逻辑关系. 所以常常有程序员调侃说花了大半天时间看代码,最后写代码的时间只有几分钟. 所以,对已有代码的分析质量将影响(甚至会决定)最终代码修改的质量. SourceInsight在代码分析上给予程序员极大的帮助.