发表于 2007-04-28 16:09 | 分类: 交互设计 | tags: myspace, UE, 可用性 | 评论 (7)
传说中的MySpace中国在凌晨上线，但是我在午夜零点后，刷新了那个干巴巴的页面N次，仍然面对着毫无生气的“中国领先的WEB2.0网站”，实在忍不住了，睡觉，心里对MySpace中国已经不爽~~~
果然，在我第一次（今天才看到，那天凌晨的守候无果后，竟然忘记了）看到M点CN的身影后，就一怔：这不就是把洋文换成了中文么？这个，就算中国领先的了？
细细一品味，实在是大失所望：
1、Top导航变化太离谱。
首页倒还好，可是一跳转到二级页面，Logo竟然不翼而飞，一个大大的Banner在那里闪来闪去。首页本来靠右上角的”国际 帮助 注册”在各个二级页面竟然位置也飘忽不定，忽左忽右的，着实令人难以理解。
2、最最基本的交互细节-链接的处理及其糟糕。
仅仅在首页，就有多达数十种链接样式。搞的我实在不知道那些是可以点击的，那些是不能点击的。而链接，是网站给于用户的导航仪，引导用户去那儿，我可不能像地雷兵一样的这里点点，那里点点的去实验那里走的通啊。
上图中，“忘记密码”和“高级搜索”，相隔很近，链接样式却不一样，实在离谱。同时，不理解为何“国际”在首页上加了个地球的图标，在别的页面却又是光秃秃的呢？
看看下图中，你猜猜那几个是可以点击的链接呢？
3、登录进去后，“我的个人首页”布局实在是~~~奇特。可能是某种后现代艺术派的风格吧；
456789……
对不住了。我实在没有信心去使用这个中国领先的网站了。（我知道，写文章才这么点，实在浪费您的时间。但您也要体谅我啊，我要是在体验下去，还不吐血啊。再者，人家M点CN可不在乎这些问题呢…）
M点CN的风格完全是照搬了外国的样子，在排版布局结构上完全不适合中国人的欣赏水平和使用习惯。而这点，是国外领先网站进驻中国市场的一块硬伤。
想想当年的Ebay，我登录过几次，怎么看都觉得网站像是没有完工似的。那是完全汉Ebay国际网站的产品，我想，那也是他败给淘宝的很重要的一个原因吧。
发表于 2007-03-05 19:14 | 分类: 交互设计, 可用性 | tags: 箭头 | 发表评论
转载自臭鱼，本文中的基本结论是在和臭鱼的讨论中得出的。特转载记录于此。
上图中，点击“右箭头”按钮，缩略图列表应该往左移还是往右移？
稍做尝试我们便会发现，点击“右箭头”按钮，列表向左移动是更“习惯”的，也是比较普遍的做法。比如下面几个例子：
news.yahoo.com
http://www.6rooms.com/
看过了这种滚动的缩略图列表，再来看一下电子地图：
map.baidu.com
按“右键头”按钮，地图是向左移动的。
再来看视窗界面：
视窗界面中的滚动条，按“右箭头”按钮，界面向左移动。
按“右箭头”按钮，应该是往右移啊？！
是的，按“右箭头”向右移，按“左箭头”向左移。超级玛丽中操纵玛丽兄弟就是这样的，所有的人应该都习惯吧。
横向滚动条中的“左、右箭头”按钮原本是用来控制拖动手柄的。拖动手柄在整个滚动条中的位置对应着整个界面在窗口中的显示。按“右箭头”按钮，拖动手柄向右移，窗口中应显示整个界面更靠右边的部分，因此，整个界面向左移动了。
电子地图、滚动的缩略图列表经过了“进化”，滚动条被简化了，只剩下了方向键（yahoo新闻的例子中还能看到一些进化的痕迹），而方向键实现的功能还是不变的。
在实际的设计工作中，会遇到各种不同的具体情况，不仅需要我们清楚上面所说这种种左右对应的关系，还需要能分辨出哪些是“拖动手柄”，哪些是“被间接控制的界面”。来看个实际的例子有助于进一步的理解：
http://qqshow.qq.com/act/2006/zrshow/upload.html
这是一个让用户自己上传图片、加工图片作为个人形象的工具。用户选中本地的图片后，图片会直接显示在331×347px的图像显示区域中。140×226px的黑线框内是个人形象应有的大小。用户可以缩放、移动图片。
方向键操纵的是图片，140×226px的黑线框是不动的。通过缩放，图片可以比整个图像显示区域（331×347px）更大或更小。
被操纵的图片到底是“拖动手柄”还是“被间接控制的界面”？图片被放得很大的时候，在331×347px的图像显示区域里无法完整显示，更象那张无限大的地图。图片似乎应该是“被间接控制的界面”。图片被缩得很小的时候，方向键更像是在操作玛丽兄弟。但是，显然不能随着图片的缩放，方向键的功能也变化吧。
这里提供的功能是让用户调整图片作为个人形象，在140×226px的区域内显示。140×226px的区域是真正的可视窗口。用户上传的图片应当至少是一个能充满整个140×226px窗口的图片。窗口是140×226px的黑线框，图片只会比窗口大，不会比窗口小。这样来理解，图片显然应该是“被间接控制的界面”。接下来只需要修改一下界面上的视觉效果，正确的表现出上面的理解就ok了。修改效果如下图：
发表于 2007-02-06 22:07 | 分类: 交互设计, 可用性 | tags: 下拉箭头, ajax | 评论 (9)
接上篇（下拉箭头怎么拉?），现在聊聊下拉箭头在web上的一些应用。
先给个标准的例子，来自Gmail，在打开一封邮件后，右上角的回复快捷操作和更多的操作。
很明显，间隔线前的操作是回复此邮件，后的下拉箭头表示更多针对此邮件的操作。
这里还有一个例子，来自著名的Discuz论坛，在任何一个版面都可以见到的右上角的“发新帖”的按钮。
直接看这种样式的设计，应该是鼠标点击“新帖”为发表一个新的帖子的意思，而点击后面的下拉箭头，就是（发表的）更多操作。
但实际上–
当你把鼠标移动到这个按钮的任何一处，就弹出了这么一个层。当然，这个是运用的高超的ajax技术，给你带来了不需要多点击一次鼠标的便利，但他同时也给我带来了很大的困惑。
- 鼠标一移动到“新帖”的按钮，就弹出四个选择，那么是不是，我发帖一定要选择以下四种之一呢？就是说，本站只能发以下四种帖子。（我想，Discuz的意思应该是论坛可以发以下五种帖子。但是，我一移动到新帖上，就弹出四种选项，这么强烈的吸引走了我的注意力。很容易让人觉得这个是发帖的必须选择。）
- 鼠标移动到下拉箭头上，出来的是同样的东西。那么干嘛把“新帖”和下拉箭头分开？
根据这个设计所表达的意思，我想，只需要简单的这么处理以下，应该就能解决问题了：
鼠标移动到新帖上，点击，表示发表一个新的帖子。鼠标移动到后面的下拉箭头，自动弹出选项框，表示还可以发表更多类型的帖子。这个逻辑和Gmail的回复是一致的。
PS：这种设计形式下的交互方式是符合逻辑的，但是，跟Gmail的回复操作一样，他也不免有一些小小的弊端：后面的下拉箭头表示是跟发新帖一类的操作，但是交代的不是很清楚。
最清晰直观的解决方法就是，把这5种发表帖子一一摆开（当然可以在样式上突出第一个），类似的效果在早期的Discuz可以看到。
但是以上只有2种类型的帖子，一一摆出来还是可以的。后面发展到了5种（说不定以后还有更多类型的帖子），一一摆开显然是不明智的做法，一是设计上不好看，二是后面四种属于不常有的操作。所以采取了放出一种常用操作（发表普通帖子）而把不常用的藏起来的做法，这时，自然而然的就想到了用下拉菜单来解决。
Discuz的想法是好的，只是在结合ajax技术运用时，一些交互的细节没有把握好。
发表于 2007-02-04 0:02 | 分类: 交互设计, 可用性 | tags: 下拉箭头 | 评论 (9)
现在的软件越做越大，功能也越来越复杂，然而展示给用户操作的界面却有限，聪明的交互设计师们想出了很多方法来解决这类问题，比如放出常用操作，而把一些不常用的相近操作给隐藏起来。下拉箭头就是一种常用的打开更多操作的方式。
看两个标准的windows下拉箭头的例子：
上面两个都是标准的图标+文字+箭头的形式，但是这两种种下拉箭头有什么不同么？我们把鼠标移上去，他们变成了这个样子：
第一种触发后在图标文字和下拉箭头之间有一条分割线，而后面的只是一个有触发的效果；前一种分割线前面的图标文字表示一种操作，而分割线后面的下拉箭头表示更多的操作选项。后面没有分割线的触发后就只是一种更多操作的选项。
所以，目前我们分辨以上两种样式相同的下拉箭头的方法只是：移动鼠标看触发效果，有间隔线的前面是操作，后面是更多选项。而没有间隔线的就是一个下拉选项而已。
当然，这种方法不直观，你必须鼠标触发后，才知道这个下拉箭头倒是是一个什么操作。
但这种操作在Win系统的软件里面，已经很标准了。以下都是运用这个标准的一些例子。
Google toolbar 
QQ聊天窗口 
但同时，在QQ的聊天街面上，发下了一些似乎并不那么符合这个标准的按钮，比如以下这个
按照以上的标准来看，第2、3、6、7的图标旁边应该加个小小的下拉箭头，鼠标触发效果应该是没有间隔线的那种。类比的可以看看msn聊天窗口的处理，似乎就比QQ处理的好（嘿嘿，这样似乎可以证明QQ不是简单的抄袭MSN呢）。
以上聊天窗口操作栏，QQ的传图片的图标（第4个）和MSN的更改字体的图标（第5个）点击后都是弹出windows标准窗体，而其他的图标，比如选择表情，都是拉出一个类似层的界面，本质上属于更多操作。处理方法应该需要下拉箭头，鼠标触发后的效果也是图标可以箭头之间没有间隔线的。
PS：看到了更高级的应用，以下截图是是QQ的群聊天窗口。
发现不同了么？
一个下拉箭头是在图标和字的中间，一个下拉箭头是在图标和字的右侧（和一般的一样）。据说，在箭头在中间的就是表示此操作为打开更多选项，也就是没有间隔线的；箭头在右侧的和一般的逻辑一致（一种理论：根据下拉箭头的位置判断可能的操作，直观）。
这里貌似是个不错的解决办法，但是他的问题是：
- 要是我缩小了窗口，提示文字隐藏了，我该怎么去判断呢？（这个时候还是要用原始的鼠标触发方法吧。）
- 这里的图标+下拉箭头+提示文字的组合根本不符合标准（这里文字出现的意义就是为了解释图标的，但是却被操作性的下拉箭头隔离了，那么他去解释~~~下拉菜单？）。所以根据下拉箭头判断也就无从说起了。
Update：上一个标准的例子，来自yahoo mail。直接做成按钮状的带间隔线的效果，直观，易懂。
发表于 2005-12-29 21:40 | 分类: 交互设计 | tags: HCD | 评论 (3)
在设计界，以人为中心的设计（HCD，Human-Centered Design）就是一条真理。但是近来，很多人都对此发出了置疑的声音，这其中不乏业界的专家，交互设计大牛Don Norman就是其中一位。
以人为中心的设计是有害的
Norman在2005年ACM通信杂志的“交互设计”专栏中有这么一篇文章：Human-Centered Design Considered Harmful，翻译过来就是以人为中心的设计是有害的。
他用以下几条来支持自己的说法：
1、对于某一个人（或一个群体）的关注是以牺牲其他人为代价的，但个体是个总在移动中的目标，为了今天的个体而进行的设计可能在明天就是错误的。
2、对于人本身的关注会影响对于活动自身的支持；对于用户需求的过度关注会导致产品缺乏内聚力，从而增加设计的复杂性。
3、通过了以人为中心的设计阶段和可用性评审的系统能够在静态的、单独的显示中表现得很好，但都不能支持任务和活动的序列性需求。
4、过多地倾听用户，屈从于用户的要求会导致过于复杂的设计。
此外，Norman还重点谈到了谁应该适应谁的问题？人去适应技术，还是技术适应人？而他给出的例子如钟表（和手表）、书写系统、乐器、汽车和日用品等等，都支持他人们确实是在适应技术的论断，显然这些都是工具决定了活动的典型案例。而这些案例大大的支持了Norman提出的以行为活动为中心的设计思想（ACD，Activity-Centered Design ）。
而在这个问题上，另一位易用性设计的大牛Jakob Nielsen早就有这句明言：First Rule of Usability? Don’t Listen to Users。大体上是说要设计出易用的界面，应该去注意用户怎么去做，而不是他们去说。自我臆断是不可靠的，但过份屈从用户的要求也是错误的。
什么才是以人为中心的设计
现在最新式的手机可以用来看电视，这个显然是技术的一大进步，人们也是欢迎的。但我们真的喜欢在手机上面看电视么？没有宽大的屏幕，没有清晰连续的图像，还要付给运营商昂贵的流浪费用，我真想不出这样看电视的优势。当然，很多人都会说这种功能是用在长途旅行中打发寂寞的，可是以现在的网络，电池等技术现状，我不知道你能否完整的看完一部一个小时的电视或影片。
这个就是典型的用户喜欢有这个功能，而不喜欢用这个功能。但这样显然不是体现了以人为中心的设计思想，虽然人们可能有这个需求。如果从这个方面看，也就不难理解以上两位大牛的言论了。显然，他们的本意应该是要表达过度的以人为中心是有害的和不要过度的一味听从你的用户。
人，human（or user）的定义其实包含了人的一系列行为活动，当然也包含了非线性的，可交叉进行的多个任务，直至这些活动或任务的目的（目标）。那么以人为中心的设计思想也应该是包含了以活动为中心（Activity-Centered），以任务为导向（task-oriented） ，甚至以目的为导向的设计。以人为中心的设计思想需要各个层面的东西都要参与进来，比如场景分析，给角色赋予情景，给角色安排任务等，以任务为导向安排人的行为活动流程，并达到某种目的。
活动都是和人相关的，所以那些支持活动的系统必然也能很好地支持从事这些活动的人。但我们需要对活动有更加深刻的理解以及有一个清晰的概念模型来指导我们的设计。单纯的关注人本身可能是有误导性的。
发表于 2005-12-23 21:47 | 分类: 交互设计, 学习 | tags: mode, interface | 评论 (1)
你肯定遇到过这样的情景：在登陆某个系统时，由于大多数情况下系统能记住曾经输入过的用户名，所以你只需要输入密码就可以了。可是当你重复输入了好几次密码后，系统总提示密码错误，而你确信没有记错密码。这个时候你估计会抓狂，怀疑是不是谁盗取了你的密码，或者尝试各种找回密码的方法。可是当你弄的精疲力尽却仍旧不能登入的时候，你却突然发现了键盘上的大写指示灯在朝你笑呢。这个时候你往往会责怪自己的不细心，可是为什么系统不能提示你呢？
同样的问题则出现在比较多的注册系统中，当你选择一个用户名，并将一大堆的资料填写完整后提交的时候，系统却提示说你选择的用户名已经被占用，请返回重来。那么不好意思，你不得不重新来过，再选择一个用户名并重填一次密码、确认密码、邮件地址……甚至更多。既然已经被注册了，可系统为什么不提示你呢？
还有一些在线的文字处理系统，比如在线邮件系统，你花大力气写了一封很长的信件，可是当你完成并按下发送的按钮后，系统处理了一段时间却提示您超时，并自动刷新回到初始界面，这个时候估计你肯定会发疯。既然在线写信时间有限制，可系统为什么不提示你呢？
当然，以上的问题并不是普遍的现象。
比如Windows XP系统的登录界面就针对键盘大写锁定问题做了改进。当键盘大写处于锁定状态下，这时你在密码输入框准备输入时，系统就会弹出一个醒目的提示框提示你，你的键盘锁定打开，这样可能使你输入密码错误。这种设计就完全避免了由于用户疏忽而打开键盘大写锁定导致输入密码错误的问题。
而注册系统中，大部分的做法是在你输入用户名后就提供检查功能的按钮，确认你选择的账户是否被使用。Yahoo! Mail和Hotmail都是这种做法，但还需要用户点击一次弹出新的窗口确认，相比较而言，Sohu blog的注册系统检测用户名就十分智能，当你输入完用户名后，便会即时的显示该用户名是否被占用。
解决在线文字处理系统超时的一个好方法就是提供在线输入的计时器，当到达限定的时间前几分钟就给予提示，提醒用户及时保存或者完成操作，这样就避免了发送信件超时的问题。
以上的各种问题都会导致用户操作出错，这些问题就是人机交互设计中常见的
模式(mode)现象。这个概念最初是Macintosh之父
Jef Raskin提出的：在一个界面中，如果用户执行同样的动作但得到不同的结果，那么这样的界面就存在模式现象。这样的界面有着不同的模式，在不同的模式下，相同的动作会引起不同的结果或执行不同的功能。
模式现象分为有害模式和无害模式。所谓有害，就是指人们在使用存在模式现象的界面时容易出现错误，而当影响一个动作产生不同结果的内部状况或因素在界面中清楚的向用户展现出来了，明确的告知用户并避免了错误的产生，那么这种模式就是无害模式。
Jef Raskin从认知心理学的层面指出，界面中的模式现象之所以会导致人们觉得产品使用困难甚至出错，是由于它打断了人们在完成一件事情时的正常思维过程，使人们要去思考与完成任务无关的其他问题，这给人们带来了极大的记忆负担和认知困难。
但从根本上说，导致界面中出现模式现象是由于产品功能多于控制系统，从而无法形成控制机制与功能之间一一对应的关系。这就好比Norman在那本经典的《设计心理学》里面提到的只有12个键的电话机和一种莱茨牌投影仪一样，那些系统的一个按钮往往被赋予两种甚至多种功能，而他总是被这些系统搞的气急败坏。按钮与功能之间怎样匹配？各种复杂的组合方法实现怎样的功能？这其中存在着明显的模式现象，这样的界面，就显得难以学习和记忆了。
好的产品要使用户更加方便的使用。模式问题显然在用户使用产品上造成了很大的困难。那么在是产品设计中应该怎样去避免模式现象的产生呢？
首先，能够完全的消除模式现象是最理想的状态。比如做到不论什么动作在任何情况下都具有相同的结果，或者做到产品的控制（或操作）与功能（或结果）能够一一对应起来。当然，对于功能简单的产品，实现并不难，但对于功能复杂的产品，有着技术和成本等多方面的因素要考虑。
那么退其次的做法是尽量使得模式是“无害模式”，即把影响动作执行结果的内部状态都展示给用户，并确保这些展示被用户注意，从而让用户意识到他的动作会产生的结果。比如以上所提到的Windows XP登录界面对于大写锁定状态的展示就是这种设计。
但如果界面的确存在“有害模式”无法克服（比如相关因素都展现给用户但无法引起其注意），必须采取的设计就是使用反馈原则，及时的把执行动作的结果展示给用户，让他能意识到错误的发生并主动去纠正错误。以上Sohu blog注册系统的用户名的即时检测，便是这种设计的典范。
更多阅读：
1、臭鱼的交互设计：西宁邮政宾馆与博客网—不清楚结果且不可撤销的设计。
2、张亮：从Windows XP登录界面说起
