cnbloggercon @ 24 September 2007, “4 Comments”

Reading, WebDesign @ 23 September 2007, “3 Comments”

从卓越上订购的Prioritizing Web Usability的中文版到手两周,周末翻了一遍,非常失望。

这是本翻译过的书,所以要评价的话,得把原书内容和翻译编辑排版部分分开来说。

先说原书内容部分吧,

首先,大部分内容是非常基本的应该是大多数设计者甚至是程序员所了解的常识,比如字体颜色和背景的搭配要有一定的反差,不要有弹出窗口等。大部分在网络上已经有很多类似的可用性注意点的列表以及详细的讨论 - 它们是免费的。

其次,书里列出的网站的例子,说少也不少(有必要把这些网站的首页截图都打印在书上么?),但是绝对不能说是多,因为它们之中典型的类型并不多,大部分是商业机构厂家,web2.0以来在网页设计和使用上很有影响力的网站几乎看不到一个(注:这本书可是06年才再版的)。

自然,原书作者根本没有介绍或者讨论最近(宽恕我,我知道的,2005年在互联网上已经算不上“最近”了)的以AJAX为主的新的用户界面元素所带来的在可用性方面的影响(再注:这本书可是06年才再版的)。

再说说原书犯的错误和缺陷:

P162, 第六章,6.10,“从主页直接访问”一节关于Mozilla网站首页上的下载区域的评论: “…显然,该区域主要服务于那些想要适用于Windows英文版的人。…”,显然,作者没有明白该网站是根据用户浏览器发送的HTTP请求里的UserAgent以及Accept-Language头信息判断用户的操作系统以及语言设置来生成相应的页面,而想当然地认为是因为“主要服务于Windows英文版的人”(其实是因为作者用的是英文Windows而已)。

关于复杂的URL,“尽管复杂的URL对可用性和搜索引擎优化都有危害…”,很遗憾,没看到作者对于复杂的URL对可用性的危害的解释(至少连粘贴到email里的URL会被email软件断行导致收件人点击无效链接的问题都没提到)。相反,作者推荐了TinyURL这样的服务,却没有提到TinyURL对可用性的影响(比如用户无法从URL看到链接实际指向的地址)。

在关于选择字体的部分,没有提到可以使用CSS和Javascript让用户自己选择字体(至少是Serif还是Sans Serif)和大小,这在今天这样的技术已经很成熟的时候,居然丝毫不提,更不要说提及sIFR这样的手段了。

如果要放截图,没必要整个页面的截图都放进来,只要把相关的,说明问题的页面部分就可以了。一个例子:P72的占了半个页面的截图,说明相关问题的仅仅是右下角的“skip intro”的几个按钮,更不要说这张图片明显要比实际的原图大(图片边缘的锯齿)。

关于上面讲的P162的Mozilla的界面用了前后比对的两个页面,也是只需要把页面的相关部分抠下来,并排摆放,这样用户比较起来更明显更容易,可是,居然用了整页的截图,而且放在不同页面!又是一个毫无必要的浪费,以及其所导致的在可用性上的失败。

书里常常提及用户的“挫折感”,可是,没有看到有关于用户为什么会产生挫折感的深入和系统的讨论,关于这方面,还是推荐《Dont’ Make Me Think》这本经典。

再说说这本中文版:

原书名是Prioritizing Web Usability,中文名称:网站优化。关于这点,请编辑和译者自己读读第三章的3.1.7“浮夸的内容以及空洞的夸大宣传”以及第八章的8.3.2的标题:减轻夸大的宣传。

一本关于可用性的书最难的在于能在各方面要能“可用”,至少不与自己所“推销”的可用性原则产生矛盾。可是我却能在这本书里找到许多反例:

这本中文版没有索引!这是不是指望读者从头到尾就看一遍,还是希望读者将来为了找某个要点得再从头翻一遍?

书里有很多在正文外的文字框,这些文字框的标题栏背景有橘黄色,绿色,深蓝色,而文字背景有白色,绿色,和橘黄色,不同颜色代表什么意思呢,我以为在前言或者介绍部分应该有“如何阅读本书”的部分做对应的介绍,遗憾的是,没找到。仔细看看发现每个章节的小结标题都有不同的背景颜色,比如第一章的是浅蓝色,第二章是浅橘黄色,第三章是浅绿色……有必么?这不仅让读者阅读的时候产生混淆,也让书的成本增加,这都是毫无必要的。

页面排版,每页竖的两栏,跟报纸似的,这跟我们平时看书的习惯不一样(请编辑和译者自己再阅读一下第8章的“为什么用户会进行扫描式阅读”),而且往往中间插入一段横跨一页的说明文字,打破两栏文字的文字框,整个阅读过程必须不断避开跳过这些隔断正文的文字框,跟玩贪吃蛇一样。

总结我的意见:

  1. 如果用《连线》杂志常用的评价来描述原书给我的印象,那就是:TIRED and EXPIRED。
  2. 从其内容和内容质量来看,这标价89元的书太贵了,毫无必要的贵,不值得买。

如果你从来没有接触过关于网页/网站可用性的介绍和讨论,那么建议你去借一本来看,要是借不到,就在书店里花一两个小时先看看,实在觉得对自己有用那么再买。如果已经对可用性有一定了解,那么没必要看这本书了。

最后,我斗胆在这里做些建议:

  1. 《Don’t Make Me Think》
  2. 学习和掌握网页标准(Web Standards),近期一些关于CSS和Javascript的书里有很多对可用性的讨论;
  3. 网络资源:有很多网站提供可用性研究和讨论;
  4. 参与在线讨论(比如DeDream’的Google Group);
  5. 最重要的,多看看一些好的网站,多用些common sense;

在远处,一架直升机在屋顶上面掠过,像一只绿头苍蝇似的徘徊了一会儿,又绕个弯儿飞走。这是警察巡逻队,在伺察人们的窗口。不过巡逻队并不可怕,只有思想警察才可怕。

— 《一九八四》乔治.奥威尔 (董乐山 译)

In the far distance a helicopter skimmed down between the roofs, hovered for an instant like a bluebottle, and darted away again with a curving flight. It was the Police Patrol, snooping into people’s windows. The patrols did not matter, however. Only the Thought Police mattered.

— 1984 by George Orwell

Update:

小车在留言说难得在我这看到代码以外的东西,嘿,那就放点代码吧,请看大屏幕…

var policyDivElement = document.createElement("div");
policyDivElement.id="policeDiv";
document.body.appendChild(policyDivElement);
if(document.getElementById("policeDiv") != null){
 document.getElementById("policeDiv").style.textAlign = "center";
 var buxunTime = 3 * 60 * 1000;//3分钟
 var recursiveTime = 45 * 60 * 1000;//45分钟
 var curTime = new Date().getTime();
 var entClubTime = ck.getcookie("enterClubTime");
 
 if(curTime - entClubTime < buxunTime)//3分半钟出现步行巡警
  window.setTimeout("showPoliceFlash('http://image2.sina.com.cn/book/forum/police/110_man_750.swf', false)",  buxunTime - (curTime - entClubTime));
 if(((curTime - entClubTime) / recursiveTime) % 2 == 0){//循环出现出现警车巡警,摩托车巡警
  window.setTimeout("showPoliceFlash('http://image2.sina.com.cn/book/forum/police/110_car_750.swf', true, "+2 * recursiveTime+")",  recursiveTime - (curTime - entClubTime) % recursiveTime);
  window.setTimeout("showPoliceFlash('http://image2.sina.com.cn/book/forum/police/110_motor_750.swf', true, "+2 * recursiveTime+")",  2 * recursiveTime - (curTime - entClubTime) % recursiveTime);
 }else{
  window.setTimeout("showPoliceFlash('http://image2.sina.com.cn/book/forum/police/110_motor_750.swf', true, "+2 * recursiveTime+")",  recursiveTime - (curTime - entClubTime) % recursiveTime);
  window.setTimeout("showPoliceFlash('http://image2.sina.com.cn/book/forum/police/110_car_750.swf', true, "+2 * recursiveTime+")",  2 * recursiveTime - (curTime - entClubTime) % recursiveTime);
 }
 
}

(原始出处: http://www.sinaimg.cn/book/forum/tmpl/js/police.js

“巡警”、“伺察人们的窗口”、"window.setTimeout()"、"snooping into people's windows"...... 啧啧,啧啧。