心弦

这是阅读《人机交互（第三版）》一书1.2.1"视觉"小节的读书笔记。

1.受人类眼睛的工作原理所限，"注视着屏幕中部的用户"难以或无法"读到底线上的帮助文字"（p5）。

遗憾的是，相当多的软件设计违背了这一原则。常见的如浏览器的状态栏，浏览器在接收到用户的点击后，通常将相应的反馈信息放在状态栏中显示，问题是状态栏通常位于浏览器底部，处于视野范围的边缘，其中的变化很难引起用户的注意。我有很多次亲眼所见用户忽略了提示信息而不断的重复点击（这一般发生在网速不是那么快，或者用户当前的操作引起服务器端高负荷量计算时）。

在Mac OS X的Spotlight搜索中，反馈信息处于用户关注点之外的远处，虽然从软件界面的变化中用户可以得知搜索过程已经开始，但要想知道是否结束，就必须将目光移动到Finder窗口的底部 - 如果他知道这里有反馈的话（如下图）。

在设计公司内部使用的开发工具"代码助手"时，我改进了这一设计，将表示搜索过程正在进行中的陀螺图标放置在输入框的右面，并且设定当陀螺出现并旋转时表示搜索正在进行中，如其消失则表示搜索过程结束。

在现有的主流浏览器中（如Firefox、IE、Opera和Safari），这一问题是普遍存在的。在没有很有效的方法之前，类似抓虾这样的提示框或许是个不错的做法。

2.人眼对亮度的感知

曾有一个问题困扰了我很久：晚上在关了灯的房间里，余光会清晰地看到墙壁开关上的指示灯，但如果直视却看不清了。这个问题很古怪，甚至有些恼人。怎么可能余光看的清，直视却不行了呢，一点也不符合常理！

当我读到人眼感知亮度的原理后，这一谜团终于迎刃而解了："在昏暗灯光下，视杆细胞主导着视觉。因为在中央凹视杆细胞较少，所以凝视低照亮度下的物体时不大容易看得见，处在外围视野中时反而比较容易看到。在正常光照下，视锥细胞会取而代之起主导作用"（p5）。

3.文本的大小和颜色、行的间距和长度对可用性的影响

就我的个人经验来看，这部分并没有在很大范围内引起足够的重视。实际上我个人也是如此，每次只是习惯性的将字体设置在12像素，间距在20-22左右，至于长度几乎从未考虑过。但显然它们是会对可用性产生影响的。

书里面提到"9磅至12磅大小的标准字体是同样易读的。类似的，行的长度在58mm至132mm时也是同样易读的"，不过这是英文的情况，中文字体应该有所不同。UI花园上有一篇名为"高分辨率下文字字体、图像、界面布局的解决方案"的文章，不妨一读。

最后说一下为了尽可能的提高阅读舒适度，究竟是应该采用白色背景深色文字还是反过来。书中认为前者（即所谓的"负反差"）可以提供较高的亮度和敏锐度，从而提高易读性，但"屏幕也更容易闪烁"。虽然书中没有明确交待，但常识告诉我们闪烁会造成眼疲劳。因此到底该采用怎样的方案，的确是一个有待商榷的问题。

在《人机交互（第三版）》一书的绪论中，作者以Mac OS X中的Dock设计为例，得出了非常有趣的结论（p11），即：

• 设计并不总是朝更好的方向发展

• 但是至少用户变得更聪明了

"用户变得更聪明了"这样的说法虽然是现状，但听起来多少有些无奈。我们不能指望着用户变得更聪明，从而可以设计出地可用性的系统。更何况随着计算机和互联网的普及，用户平均的操作水平却在不断下降。

这篇短文指出的dock在可用性上的问题就是鼠标光标于dock图标上定位的困难。

实际上我一直觉得Dock的设计颇有悖论的味道：

1. "放大"功能的设计初衷就是为了让用户更容易定位某个图标，但在实际使用中，由于鼠标光标并不总是直接从图标上面向下移动（事实上这恰恰是少数情况），而是从图标各个方向接近，这样常常放大了这一图标周围的图标，使得原有图标的位置发生了变化，加大了定位难度。

   这也就是文中那位想把文件扔到Dock上废纸篓的用户所遇到的情况。原有设计初衷和实际使用情况恰好相反。如下图：

   

2. Dock的大小。这是另外一个恼人问题：在总是有限的屏幕分辨率下找到一个合适的Dock大小。从网站的访问日志来看，现在最普遍的分辨率大概是1024x768，在此种分辨率下，一个窗口为了能完全显示自身内容，常常占据了绝大部分屏幕空间，那么多大的Dock是合适呢？尺寸大固然易于定位，然而却要吃掉不少原本已十分宝贵的屏幕空间。如果再遇到aMule这样的设计，只能让人哭笑不得。尺寸小定位起来太困难，对用户的鼠标操作要求太高。如下图：

   

Ars是我比较喜欢的网站，这篇评论是针对Mac OS X Public Beta的，其中详细的阐述了Dock在可用性设计上的缺陷，包括：

1、Dock中目标由于位置不固定而难于点击

（1）由于Dock是居中显示的，往上面增加内容和删除内容都会导致其它目标位置的变化，用户永远需要识别而不是靠记忆寻找目标；

（2）即使不增加新的项目，原有项目的位置也会发生变化，这是因为最小化的窗口也在Dock中。

2、Dock是贴近屏幕底部的，项目图标却不是

同很多人想法一样，我认为这是个非常愚蠢的设计。众所周知，Apple的菜单居于屏幕顶部是参考了Fitts定律的设计，这使得这一菜单的定位难度降低，说白了就是更易于点击（我对此有不同意见，暂不表明）。然而Dock上的项目图标却没有按照这种方法设计，而是将最下端的区域变为不可点击的。

3、Dock上项目的文本标签不直接可见

上图中哪个文件夹是你想要的？

我不得不说，这是我见过的Apple最糟的设计之一！图标没有自明性，这已经被无数的研究证明（包括Apple自己）了的理论，却轻易的被Dock设计师无视。我要美观，可我更要可用性。

4、Dock中项目的分类是“武断（arbitrary）”的

为什么左面就一定是应用程序，右面是最小化的窗口、替身和废纸篓？不符合道理的设计。

本来想把原文好好翻译一下，中途接了一通电话，思路被打断，就此作罢。

部门内急需一名交互设计师，要求精通HTML/XHTML、CSS和Javascript，有意者请速与我联系。

从今天开始，我也仿效白鸦同学，把最近读到的比较有趣的文章贴出来，算是个导读吧。 1、UED相关 Mac OS X's GUI: Poor human factors? (long) 这篇文章具有古老的历史，它诞生于00年1月7日，作者Dr. Jon G. Temple是一名具有丰富经验的可用性从业者，也是一个多年的Mac用户。作者对OS X的UI进行了严厉且猛烈的批评，他的核心观点是从OS X开始，Apple的Mac OS引以为豪的可用性已经不复存在了，比较而言OS X更加重视底层技术（这个我没看出来）和各种各样的Eye Candy，甚至为了它们可以让可用性退居到第三位（这个我非常赞同）。 他大概提及到了以下几个方面： （1）Invisible Widgets。他指的是窗口左上角控制栏中的3个按钮功能不可见，除非把鼠标移过去。另外，他认为按钮颜色的代表性有问题：即使红色可以勉强表示"停止"和"关闭"，那么绿色及黄色又怎么能和"最大化"及"最小化"联系起来呢？ 我个人也一直认为这3个按钮的设计有问题，不过我考虑的是在某些操作下它们被缩小的情况（如command+j调出的"View"面板），此时它们的面积极小，鼠标点起来相当有难度。我觉得这是Apple为了显示cool为降低可用性的一个例子。 （2）Color coding和Transparency effects。作者指出由于色盲、色弱和近视等问题的存在，OS X的色彩设计和透明特效极大的降低了可用性。 这个我没经验的，劝当开拓视野吧。 （3）Real world metaphors。作者原本说的是OS X中桌面的设计不同于以往，破坏了习惯和隐喻。不过当时由于他并没有真正试用OS X，而只是根据Apple的宣传图片做出了上述判断，考虑到实际的情况并非如他所想象的那样，因此这点我就不再赘述。 不过我觉得在UI设计中，真实世界的隐喻始终是个令人挠头的问题。典型的反例就是OS X中的Dock，它上面有相当数量的图标都无法代表程序真正的作用，加上Dock没有总是可见的文本标签的低劣设计，令使用者启动程序和切换任务的效率十分低下。这个问题我以前有过一点讨论，我将从07年初开始，对Dock+Expose做深入一点的研究，如果你感兴趣，不妨同我联系。 Top Nine Reasons the Apple Dock Still Sucks 这篇文章很出名，作者是Apple的第66个员工，并据说是其内的第一名交互设计师和"唯一的一位人本界面思想传播者（only Human Interface Evangelist）"，他列举了9项证明Dock低劣设计的证据，我对他的观点表示完全的同意，你呢？ 2、其它 索尼WAPI笔记本电脑上市 无线局域网国标破冰 NND！WAPI终于有国外的厂商表示支持了，好几年前便开始关注可怜的WAPI和TD-SCDMA（05年初写的一篇文章），眼睁睁的看着我们自有知识产权的标准被发达国家封杀……如今不管怎么说，看到这个消息让人略觉欣慰。 声音与愤怒 最近狂喜欢看王晓峰的Blog，收获匪浅，这是一篇关于音乐的，你不妨也看看。

刚刚从会场回来，忙碌了一天，真是累就一个字！不过躺在床上仍然抑制不住兴奋的心情，趁现在还是记录一番吧，否则很可能又要无疾而终了。这里顺便说一句：我是在Treo 650上输入这篇东西的，这绝对是一部“user friendly”的手机。

UPA中国（搞不懂为什么要叫“UPA China”，也的确看到有人提出类似的疑义，不过我还是另文讨论吧）今年举办的可用性大会“User friendly 2006”非常成功，据主席黄峰先生介绍，今年注册的与会人员达到了500多人，厂商也超过了120家，均比去年有成倍的增长。看着这么多同行济济一堂，心想中国可用性的春天真是到了！ 第一天大会上有很多重量级公司发言，如HFI中国、Microsoft中国、Yahoo韩国和Google等，可惜Google演讲的时候我和几个同事在同Yahoo韩国的UED主管Jin-soo Kim先生聊天，没能听到，甚觉可惜。

HFI的Apala Lahiri Chavan女士提到了设计中的文化差异问题，这是我非常感兴趣的话题，也一直在保持着关注。我所不明白的是：中美网站（典型的如新浪和Yahoo）在信息架构上的巨大差异，如首页的信息量和表现形式的区别，是由于文化不同所导致的思维方式的差异，还是网页设计水平的高低，抑或各方用户习惯于被动的接受目前的形式？这个问题在学术界有过很多的探讨（我就不列出具体文献了，这个不难找到），在一些UI方面的论坛，如我喜欢的UI花园上也有数次交流，但至今我仍未找到令人十分信服且满意的答案，尤其是特别针对中美比较研究的。第三天我参加的一场圆桌论坛上，这个问题再次被提起，与会的代表分别来自国内外的知名公司，有趣的是由于在一些领域中本土企业的强势，这个话题很快转向了跨国公司和本土企业在策略上的差异，以及由此带来的影响。讨论中似乎达成的一个共识是：中国人并非天生喜欢门户网站那样“8页长的网页”（唐绚），而是他们没有选择。白鸦甚至认为Yahoo中国的设计将会给三大门户带来巨大的冲击，并迫使后者改变长久以来的风格。

我所参加的另外一个Session是由Sap的Vice President of User Experience—Daniel Rosenberg先生主持的。他从事此行业超过30年时间，在多家世界一流公司工作过，如Xerox PARC、Kodak、Oracle和Sap等，具有非常丰富的经验。特别引起我注意的是他在XPARC经历，在我心中XPARC是一个无比神圣的殿堂，我对它的憧憬与向往甚至超过了更知名的Bell实验室，我觉得在上个世纪7、80年代，能在里面工作的都是世界上最顶尖、最富有创造力的科学家！不仅仅因为GUI、Alto等伟大的发明，更由于与那个黄金年代所联系起来的黑客精神。

写到这里不妨多说一句，很多人（尤其是那些自以为是的所谓“mac fans”）误以为GUI是Apple发明的，误以为最早应用GUI系统的个人电脑是Mac，他们甚至干脆一股脑的把鼠标的发明也归功于Apple了，这一切真是大错特错！GUI诞生于XPARC，最早在个人电脑上的应用是运行在Alto电脑上的系统（估计对于上述所谓“mac fans”而言，这些都是闻所未闻的），鼠标由Douglas Engelbart先生于1964年发明，所有这些都不是Apple发明的，Jobs成天恶心的攻击MS说其抄袭，殊不知他才是真正的抄袭者！

11月8日凌晨16分补记：这篇东西是这几天在手机上陆陆续续写完的，所以看起来有些乱，也懒得修改了。

我和同事徐清华前一阵子翻译的一张图，现挂在公司里和每个人的桌子上。另外这张图最近好像研究的颇多，虽然对里面表达的部分观点我无法同意。

最近在和同事一起制定网页中表单（form）的设计规范和指南，查阅相关资料的过程中发现了很多好东西，其中有一篇名为"Label Placement in Forms"文章很有趣，作者Matteo Penzo使用了eyetracking技术来研究表单中的标签摆放问题。

他分别作了4个实验。

第一个是左对齐的标签放在输入框（或"输入域"，Input Field）的左面。这是网页中最常用的形式，用户可以很容易理解标签和输入框的对应关系。但研究发现标签和输入框之间的空白区域极大了加重了用户的认知负担（cognitive loading），用户必须花相当多的时间以便在标签和输入框之间移动视线，在这个实验中这个时间为500ms。

这个实验再次印证了作者以前的观点，即下拉菜单是最吸引眼球（eye-catching）的表单元素。在网页中除了一个简单的表单、不含其它内容的情况下，所有的用户-包括专家用户-都不约而同地关注下拉菜单。并且即使此时下拉菜单中默认的选项没有任何意义。此外，在表单被最终递交之前，所有的受试者都会再次检查一下标签和与之对应的输入框中的内容是否无误。

第二个是右对齐的标签放在输入框的左面。研究发现此时用户的认知负担大幅度降低，表单填写时间下降了一半，标签和输入框的切换时间下降到了240ms。

但作者继而表示对用户识别标签的担心，即由于标签文字是右对齐的，而阅读又是从左面开始的，这样就会造成每一行标签的初始位置不确定，给用户带来额外的负担。实际上这也正是我所担心的事情，-恰好此前也看过一篇文章否定这种形式。结果作者使用了非常强烈的语气肯定了自己的错误："I couldn't have been more wrong（我真是大错特错）"！他说根据eye tracker的追踪结果显示，用户眼睛关注点的转移速度是非常快的，并且即使不从头阅读标签也能明白它的意思。从上图中我们不难看出这点。

第三个是左对齐的标签放在输入框的上面。根据上个实验结果可知标签距离输入框越近，用户所花的时间越少，认知负担越小。而同时用户更关注输入框本身，而不是标签。如下图所示：

这种摆放形式的好处就是，用户可以一眼就看到标签和它对应的输入框。此外，如果用户对标签的内容非常熟悉的话，如First Name和Last Name的情况，用户看到了First Name的这个标签后，不需要看Last Name就可以直接填写此项。

令人惊讶的是，在此实验中，在标签和输入框之间切换的时间巨减到50ms。

另外作者发现即使将下拉菜单的位置调整（如上图），它的被关注程度还是不会降低。

最后值得一提的是，不同于上个实验，此时专家用户均没有进行再检查，初级用户中有部分仍旧进行了再检查。

第四个是左对齐、粗体的标签放在输入框的上面。想必很多人都会赞同并推荐这种设计吧，包括作者经常提到的Luke（Skywalker in Starwars? :D），当然也包括我。可是实验结果却出人意料：这种设计增加了60%的切换时间，从50ms增加到80ms。作者猜测这可能是由于文字的粗体和与之相邻的输入框那厚重的边框增加了用户的分辨难度。

综上所述，作者在文章结尾给出了如下结论：

1. 标签位置。从实验可知标签放在输入框上面的设计比较理想；
2. 标签对齐方式。如果标签位于输入框左面，使用右对齐；如果放在上面，使用左对齐；
3. 粗体标签文字。在不使用额外的样式以使输入框的边框变细的情况下，尽量不使用粗体标签文字；
4. 下拉菜单。由于它非常吸引眼球，要小心使用。只用它来接收重要的数据，并尽量把它放在更重要输入框的下面；
5. 下拉菜单的标签。如果下拉菜单中的选项非常多的话，尽量用清晰的选项内容来告知用户这个下拉菜单的作用，而不是在下拉菜单旁放置一个标签。

这周开始了一个新项目：“语意差异问卷生成器（Semantic Differential Questionnaire Generator）”，详情见： http://heartstringz.net/projects/sdq

ASQ, After Scenario Questionnaire CSUQ, Computer System Usability Questionnaire SUS, System Usability Scale SUMI, Software Usability Measurement Inventory QUIS, Questionnaire for User Interaction Satisfaction