Thinkjam Labs tag:labs.thinkjam.org,2008-11-29://5 2009-11-26T08:39:55Z What we think and what we do. Movable Type Open Source 4.31-zh-cn CSS Hack实现IE6、IE7、IE8兼容 tag:labs.thinkjam.org,2009://5.1285 2009-11-26T09:02:41Z 2009-11-26T08:39:55Z 记得去年年底主页改版时，据Google Analysis对网站的监测，当时的主流... 墨神 http://www.thinkjam.org/mercury/ （IE6 IE7 Firefox兼容性问题）中已经有所提及，此外CSS导航菜单，JS菜单等也同样存在浏览器兼容性问题。

今年，随着IE8的强势出击，越来越多的用户使用IE8，网页在IE8下的显示问题不可忽略。简单的方法是可以在页面文件中加入;



]]> meta http-equiv="x-ua-compatible" content="ie=7" /> 
将IE8转为IE7的问题，对于旧版本的暂时方略还尚可，如果是新制作的页面，就不得不把IE8的问题提上来，
而且此代码对有些复杂布局，未必得效。
解决方法还是CSS Hack，如下：
#example { background: red; } /* Moz FF */
* html #example { background: green; } /* IE6 */
*+html #example { background: yellow; } /* IE7 */

#example {
background: yellow; /* Moz FF */
background: red\9;  /* IE(6/7/8) */
+background: blue;  /* IE6 */
_background: green; /* IE7 */
background:/*\**/ white\9; /* IE8 */
}

此外，IE八对空格的解析与6/7不同，也有人提出网页空格引起CSS问题的解决对策，杜宇空格占位的做法，本人认为还是使用<font style="pading-right:20px;"></font>的形式更为合适。

顺便讲一个CSS Vs.表格的案例。

三年多了，至今还在使用DIV+CSS设计网页，虽然有越来越多的贡献者令这项工作似乎简单了，可是最近参加的一个项目令我重新开始反思CSS还是表格的问题。CSS对于浏览器的兼容始终是个不大却令人头痛的问题，表格是否更优？是否更省时省力？

表格是否也存在兼容性，我发现的也就是对百分比，边框等的解析问题，但基本不影像浏览。毕竟现在的宽带速度下，冗码都不是问题了，而且表格在定位上反而更简单快捷。但是考虑到内容对搜索的友好，SEO优化，内容显示的逐步性（边下载边显示），以及后期的维护和更新，尤其是页面数量庞大的网站，模板样式种类繁多的情况，CSS的调控会相对简单许多。
]]> 公交站牌的演化 tag:labs.thinkjam.org,2009://5.1269 2009-06-18T09:50:50Z 2009-06-18T09:21:36Z 最近发现上海街头出现了一种新的公交站牌，样子和香港的公交站牌很相像。虽然不知这是... 墨神 http://www.thinkjam.org/mercury/ 最近发现上海街头出现了一种新的公交站牌，样子和香港的公交站牌很相像。虽然不知这是第几代的公交站牌了，但是从UCD的角度来看，似乎比记忆中的老式站牌前进了一大步。 从小到大，记忆中的公交站牌都是这个样：

高高的金属柱，辐射状伸出，大约40-50cm，一面为到站，背面为线路站点。但是一般观看距离为距立柱30-70cm，感觉高度略高。但是，站位距离稍远，则背面的线路站名看不清楚了－－我不得不承认，本人戴镜视力貌似不足1.2。


根据人体工学原理，人体的最佳视觉区域是在人的水平视线高度以上20cm、以下40cm之间的60cm宽的区域内，当然一些大型的展示设计会将范围调到高度在80cm～250cm之间的区域，但是考虑到站牌的大小和字体大小限制，又不适合250cm的高度对于一个165cm的人而言，仰头的动作将会非常吃力。但是一旦高度降低，伸出的铁牌尖角对于经过的路人也是很危险的。

后来大量灯箱站牌的出现对视觉高度是一种改善。灯箱正面背面分为两个区域，上面是站名，下部区域是同站的所有公交线路列表。每条线路各占一行，依次自上而下排列。在各自的行中，有线路站名，其中本站名以红色带背景色标示。最下部有文明公约之类的作陪衬。

这种灯箱站牌有几个好处，不仅解决了仰视辛苦的问题，尤其是夜幕光线不佳的情景。站牌背面有些安装了液晶电视，播点新闻、娱乐、生活、甚至广告。此外，灯箱的正面就是一广告，经济头脑可见一斑。有些线路还曾开通了目前到站的红灯指示，乘客可以知道等候的车最近一辆到达了哪一站，估计还需等待多长时间，不过这些高端服务开通的少，被破坏的多，遗憾。当然，最主要的问题是，一旦某个站点只有一辆公交线路，这么大的站牌，占地较多，相对成本就高了。



最新的站牌也是围绕一根立柱，不过是封闭包裹着立柱，而不是辐射伸出。目测最大半径约为20cm左右，不影响行人，也没有安全隐患。高度相对降低，从不足人身高到高出一头半，约高90cm，从100cm-190cm之间吧，查看站牌只用轻微抬头，而不需费力的扬头。最最主要的是线路站名的排列是自上而下，而站名则从左到右。这和老站牌的差别仅在于线路排列和站名文字排列的方式做了调换。其实，在设计上，自上而下和从左到右的阅读习惯都是最常利用的，老站牌的线路从左到右就造成了单个站名变成了自上而下－－竖着阅读，优点竖版的古文阅读的感觉。而新站牌将站名－－一个有意义的词－－横向排列，则非常符合现代人的阅读习惯，这就是UCD体现之处。



此外，立柱比长方灯箱占用面积少，成本低，一根立柱四面包围最多可以放置8个站－－当然，如果有三面柱、四面柱、五面、六面的话，则可容纳的内容更多。当然，包裹起来了也可以做灯箱，比起简单的老式铁站牌，进了一大步。




对比香港的站牌和上海的新站牌，不难发现设计中的差距。


  1. 香港站牌四面包裹的铁质边缘颜色鲜亮，而上海的选择马路色－－青灰黑，鲜亮的红色则可以起到警示作用，避免行人不注意撞上去而发生危险；
  2. 线路图都是自上而下，香港站牌选择了两面放置站点，而上海新站牌则呆板的统一排列，两侧交错，产生变化，也增大了文字行间距，可以增加信息的有效辨识度（英文的自动成行的特性优于方块字的中文，效果会更好）。整齐排列的方块字在行间距不够大时，视觉搜索会较为吃力；
  3. 此外，香港站牌减小了字体大小，流出右侧一部分空白区域提供本站和周边更多的信息，对游客是很有帮助的。就像看到某线路路径陆家嘴，对于一个不了解上海的人来说没有丝毫价值，如果在旁边的空白处说明，陆家嘴附近有国际会议中心、东方明珠、上海科技馆、艺术中心、海洋馆等，这样，"陆家嘴"三个字对于人们就具有更多意义了。



做设计是一个不断体验和学习的过程，无可否认，对生活的观察是设计的源泉，我喜欢这种润物细无声学习。

说明：原谅我的懒惰，图片均来自盗链，不能保证有效期哦～
]]> 网络调查的价值 tag:labs.thinkjam.org,2009://5.1262 2009-05-11T10:52:24Z 2009-05-11T09:25:33Z 准备做个站点手机版，虽然是工作任务还是很想知道用户到底有什么需求和意见，这次进行... 墨神 http://www.thinkjam.org/mercury/
]]> 需求调查是否有必要？

同事和领导说，工作是要做的，至于做出来有没有人用就与我无关了。这让我想起之前和孙老师在QQ上的谈话，他也看到目前太多图书馆都在做项目作系统，只管 完成不管是否有人使用，这样的系统是对人力物力的浪费。开展项目之前充分的用户需求调查是必须的。还记得三年前第一次接触用户测试，直接获取用户想法时的 愕然，原来他们想的与我们不同？不知道用户想要什么、喜欢什么，一味闷着头做事，做出来的东西没有人用，与垃圾何异？高档垃圾罢了。

网络调查是用户调查/问卷调查的一种，许多人都对问卷调查心存疑虑，认为其数据可信度不高。的确，我曾经做过问卷调查，个人也作为样本参加过其他的许多调 查，不可否认，即使样本选择随机、问卷设计非常客观，填写问卷的随意性也很大，也与阶段、心情、环境有关。利用问卷调查的统计数据作为依据其实是有些问题 的，何况网络调查？据我所知所谓网络投票和网络投票机就像身与影一样，从未分开过。就像业界有人担心的一样"网络调查的可信度有多大？"

即便如此，形形色色的调查问卷从未停止过，网络调查更是鳞栉节比。中国互联网报告年年在出，国民阅读倾向调查也每年不误，AC Nielson的各种调查更是从未停止过，OCLC每年的调查报告已成为行业的风向标。我认为，调查不完全可信，其统计数据作为科学依据尚欠力度，但是调查提供了一种了解用户需求和想法的途径。即使只有web2.0网站内容贡献者的百分比，也为系统人员提供了开发人员视角以外的新境界，显然是有益而且必须的。

我出了几个问题，关于手机上网，手机如何上网，上什么网，上网速度如何，上网环境如何等13个问题，希望可以了解一下用户对手机版的兴趣程度和兴趣所在。

]]> Usability,UsabilityTesting: Book list tag:labs.thinkjam.org,2008://5.1226 2008-08-31T06:56:09Z 2008-11-29T15:47:47Z 似乎所有站点"设计"书籍中都提到专业建站者必然要经过可用性测试才能发布，我从20... 墨神 http://www.thinkjam.org/mercury/ Don't make me think》（第二版）之后，于2006年年底对改版的站点进行的简易用户测试。

之所以提到是第二版，是因为早在工作之初的学习中已经看过中文的第一版。相对其他专业技术书籍，这本16开薄薄的小书做工精良（全是铜版纸），插图多，字大行距小，尤其是蹩脚的翻译（这也是最主要的，专业名词不准确，字句不流畅，意思表达不清，非常影响阅读的兴趣和耐心），于是当作一般书籍草草过一遍并未留下深刻的印象，错过了作者的先见思想。书中内容在讲述可用性，可是书籍设计和制作的可用性却背道而驰了。如果对第一版的可用性进行评估，大体不会及格。那么什么是可用性，如何进行测试呢？]]> Usability 与可用性测试

可用性（Usability），在ISO 9241-11中 这样定义:"Usability refers to the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of user"。其中effectiveness（效果）、efficiency（效率）和satisfaction（满意度）是衡量可用性的三个维度，更确 切的说，是 Ease of learning & Efficiency of use，Memorability，Error frequency and severity，Subjective satisfaction多维因素共同影响的指标（from usability.gov）。而可用性测试（usability testing)，简单的说则是对这些指标的评估。

一次完整的可用性测试是非常复杂的。对时间、地点的选择和准备，测试员培训，用户类型、用户人数选择，测试安排，纪录手段，测试相关文件的准备（隐私免责声明等），经费预算（纪念品等），后期的统计分析，测试结果，产品改进等等，这里我无法一一详述。国外这一领域早已引起了足够的重视，国内还只是悄然兴起（行内少数），许多国外译著也相继翻译出版，相比原版难获取和阅读满的同学来说，是好消息。

BlueIdea的朋友推荐了一些j经典书籍，分享如下，欢迎补充：

  • ABOUT FACE 2.0  －√
  • 专业主页设计技术---50佳站点赏析  －√
  • 什么是网页设计 What is web design?  －√
  • Web设计大全  －√
  • 设计心理学（The Design of Everyday Things）－Donald A. Norman  －√
  • 交互设计之路：让高科技产品回归人性（第二版）
  • 情感化设计（Emotional Design: Why We Love (Or Hate) Everyday Things）－Donald A. Norman  －√
  • 艺术与视知觉－Rudolf Arnheim  －√
  • Web可用性设计 （Designing Web Usablility）－Jakob Nielsen  －√
  • 可用性工程 （ Usability Engineerig ）  －Jakob Nielsen  －√ 
  • 用户界面设计
  • Designing interaction
  • 点石成金：访客至上的网页设计秘笈（Don't make me think）－Steve Krug－√ 
  • Web 设计禁忌
  • 人机交互:以用户为中心的设计和评估－√


其中Jakob Nielsen的两本著作可谓经典中的经典，不少朋友将书中内容摘录下来，以供分享和学习。另外，Thomas Powell的《web设计大全》也很经典，记得不错的话，网上似乎有电子版下载。可用性测试中可能会用到的一些文件和声明、表格等，在《人机交互:以用户为中心的设计和评估》中可以找到范本，适合实际操作中参考。关于可用性测试的报告，Nielson也论述了何时需要正式报告，何时简易小结便可。（我的简易测试，采样面还不够完整，我选择了后者，希望将来还有机会把缺失的群体测试补全。）Library Terms That Users Understand中有一些较新发表的论文（相对Nielson和Norman 1990's经典著作的时代而言），有兴趣不妨深入学习。

此外，说到可用性不得不提的是以用户为中心的设计（user-centered design,UCD)和人机工程（人因学，HCI），心理学（主要是认知心理学），这才是可用性以及Thinkjam  Labs关注的UE/UI，UCD等方向的理论根源（如艺术与视知觉，虽然都是理论很枯燥，但是很有用）。Nielson等国外可用性专家本身也是相关领域出身，他的实验室的眼动（Eyetrack）实验一直未停止，其结果是网站可用性设计的最佳证据。

当然，可用性包含的范围并不只是屏幕见方之地，只要有人，只要有使用，就有可用性。Usability无处不在！

附Ⅰ：

可用性相关的国外图书和网站：

Books：

•    Cooper, A. (1995). About Face: The Essentials of User Interface Design. IDG Books Worldwide.   √
•    Cooper, A. (2004). The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity. Second Edition. Sams.   √
•    Bias, R.G. & Mayhew D.J. (2005). Cost-Justifying Usability, Second Edition : An Update for the Internet Age, Second Edition. Morgan Kaufmann.
•    Hix, D. & Hartson, H. (1993). Developing user interfaces: ensuring usability through product and process. New York: Wiley.
•    Landauer, T. K. (1997). The trouble with computers: usefulness, usability, and productivity. Cambridge, MA: MIT Press.
•    Lindegaard, G. (1994). Usability testing and system evaluation: a guide for designing useful computer systems. London: Chapman & Hall.
•    Mayhew, D. (1992). Principles and guidelines in software user interface design. Englewood Cliffs, NJ: Prentice Hall.
•    Mayhew, D. (1999). The Usability Engineering Lifecycle: A Practitioner's Handbook for User Interface Design. Morgan Kaufman.
•    Nielsen, J. (1994). Usability Engineering. Boston: Academic Press.    √
•    Nielsen, J. & Mack, R. (Eds.) (1994). Usability Inspection Methods. New York: Wiley.   √
•    Nielsen, J. (1999). Designing Web Usability: The Practice of Simplicity. New Riders Publishing.    √
•    Norman, D. (2002). The Design of Everyday Things. Basic Books.   √
•    Raskin, J. (2000). The Humane Interface: New Directions for Designing Interactive Systems. Addison Wesley Longman, Inc.   √
•    Rosson. M.B. & Carroll, J.M. (2001). Usability Engineering: Scenario-Based Development of Human-Computer Interaction. Morgan Kaufmann.
•    Shneiderman, B. & Plaisant, C. (2004). Designing the User Interface: Strategies for effective human-computer interaction. Fourth Edition. Addison-Wesley.

Website:

•    http://www.useit.com
•    http://www.asktog.com
•    http://www.hcibib.org
•    http://www.hcirn.com
•    http://www.usableweb.com
•    http://www.scottberkun.com
•    http://www.jnd.org
•    http://www.usability.gov
•    http://www.usabilityviews.com
•    http://www.usabilitynews.com


附注ISO 9241：

    ISO 9241是关于办公室环境下交互式计算机系统的人类工效学国际标准，它由17个部分组成，根据人类工效学和可用性原理，分别对各种硬件交互设备属性和软件用户界面设计问题作了详细的规定和建议。可以对一个产品设计符合该标准的程度进行评估和认证。

]]> 从IA到UCD tag:labs.thinkjam.org,2008://5.1225 2008-08-29T06:54:11Z 2009-04-13T03:35:08Z 许多人都在讨论Lib2.0，web2.0的出路，前些日子lib3.0也成为众人... 墨神 http://www.thinkjam.org/mercury/ 许多人都在讨论Lib2.0，web2.0的出路，前些日子lib3.0也成为众人讨论的热点，所谓语义时代大门开启，在lib2.0浪潮中乘风破浪的弄潮儿似乎看到了新的曙光。我的新曙光来自2006年的一个报告。由于技术不是我所长，即使很早接触web2.0，但是似乎在Lib2.0的应用领域的一些出路也被无形的墙堵死了。直到听报告，获知还有专门研究网站内容组织、结构相关的领域就是信息架构（IA），和我一直从事的具体工作非常紧密，还有专门研究用户的领域叫做UCD，就是我平日苦思冥想却不知如何命名的领域。


]]> 教授的一篇名为信息构建(IA)－－情报学研究的新热点  中列出了10大研究热点，其中IA是其中之一。周晓英老师的论文《基于信息理解的信息构建》详细介绍了IA的由来，研究内容，还提到了许多用户研究的方法，信息架构师的介绍，为所有工作范围不明，徘徊在网站设计，内容组织，站点设计，需求分析，网站制作维护，网站测试等等之中迷失了自己的同行来说犹如一缕光，可以顺着它找到真正的定位。

IA领域最著名的就是Jesse James Garrett了，2002年出版的The Elements of User Experience:User-Centered Design for the Web(introduction(pdf) ,chapter2(pdf))一书拉开了Information Architecture的序幕，其图表（pdf） 很有里程碑意义。 Jesse James Garrett还发表了一系列以用户为中心的信息构建的论文，以及The Information Architecture of Everyday Things 的报告，是IA爱好者不可错过的文献。

从IA到UCD之间到底有什么关系？首先需要知道什么是UCD，UCD研究的范围包括哪些。UCD（以用户为中心的设计）是基于产品使用者信息过程的设计方法。就是通常说的自下而上的设计，以用户需求驱动的产品设计，不同于以往领导拍脑袋或者程序员灵光一闪就作出个东西却永远没人用。UCD研究对象的是人、使用者，所以UE/UX（用户体验）、Userbility（可用性）、User testing(用户测试)、UI（用户界面）、HCI（人机交互）这些新名词都包含在其中，涉及的学科包括网络、计算机、心理学、工业设计、平面设计、广告设计等。我认为IA是信息科学中以UCD为核心进行信息组织和设计的领域。当然最权威说法来自 Peter Morville，他将Information, Architecture, and Usability联系起来。

国外关注UCD领域的很多，从学者到公司。好的用户体验，好用的产品是公司盈利的根本。从一些公司的User Interface Style Guides 中或许可见一些端倪。UCDChina提出了了解用户的研究方法，The User Is Always Right的作者Steve Mulder也提出了针对用户定性、定量研究的方法。JunChen的wishroom1906 做了一些用户研究，如基于结构化页面的用户点击行为，页面长度与用户行为等。Adaptive Path的员工也发表了不少用户，用户测试的论文，Jesse James Garrett 论述了以用户为中心的链接应该如何设计（Ⅰ ，Ⅱ），Lane Becker还提出了"90%用户测试都没用"的观点，是否印证了Dan Saffer研究只是途径方法论之 说，就像文中引用Jesse James Garrett的话来形容感觉、猜测、臆断在用户设计中的作用（ "Guesswork is an inescapable part of our work. More importantly, the quality of guesswork is what differentiates a good architect from a bad one."）。 Mike Kuniavsky起草了用户研究的计划，有人提出了从品牌(branding) 、使用性(usability) 、功能性(functionality) 和内容(content)四方面量化用户的体验的方法，以及用户测试省钱的方法（如何在用户测试中花费最少）。Jakob Nielsen和Donald Norman一直是领域领军人物，他们的理念一直是众人追随的方向。在有关usibility的众多著作中，最经典的莫过于Jakob Nielsen的Designing Web Usability。

以前总结过一篇信息构建和用户研究书目的博文，现在可以在清单中加入两本2008新出的中文版图书。一本是《web信息架构：设计大型网站》－－终于出中文版了，另一本是本人一直想动笔却被一位大侠捷足先登的好书《就这么简单》，另外《赢在用户》也不错。看了书愈发觉得用户研究人员工作的丰富多彩了，我也期待如Marcus Haid一样能展开一段用户体验的职业生涯。

（注：本文草稿写于2006年，后经历多次休休停停，于2008年8月29日基本完成，今日终于定稿发布，不容易啊）
]]>