按“右箭头”按钮，往左移
发表于 2007-03-05 19:14 | 分类: 交互设计, 可用性 | tags: 箭头 | 发表评论
转载自臭鱼，本文中的基本结论是在和臭鱼的讨论中得出的。特转载记录于此。
上图中，点击“右箭头”按钮，缩略图列表应该往左移还是往右移？
稍做尝试我们便会发现，点击“右箭头”按钮，列表向左移动是更“习惯”的，也是比较普遍的做法。比如下面几个例子：
看过了这种滚动的缩略图列表，再来看一下电子地图：
按“右键头”按钮，地图是向左移动的。
再来看视窗界面：
视窗界面中的滚动条，按“右箭头”按钮，界面向左移动。
按“右箭头”按钮，应该是往右移啊？！
是的，按“右箭头”向右移，按“左箭头”向左移。超级玛丽中操纵玛丽兄弟就是这样的，所有的人应该都习惯吧。
横向滚动条中的“左、右箭头”按钮原本是用来控制拖动手柄的。拖动手柄在整个滚动条中的位置对应着整个界面在窗口中的显示。按“右箭头”按钮，拖动手柄向右移，窗口中应显示整个界面更靠右边的部分，因此，整个界面向左移动了。
电子地图、滚动的缩略图列表经过了“进化”，滚动条被简化了，只剩下了方向键（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了。修改效果如下图：
下拉箭头在web上的应用
发表于 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: 下拉箭头 | 评论 (6)
现在的软件越做越大，功能也越来越复杂，然而展示给用户操作的界面却有限，聪明的交互设计师们想出了很多方法来解决这类问题，比如放出常用操作，而把一些不常用的相近操作给隐藏起来。下拉箭头就是一种常用的打开更多操作的方式。
看两个标准的windows下拉箭头的例子：
上面两个都是标准的图标+文字+箭头的形式，但是这两种种下拉箭头有什么不同么？我们把鼠标移上去，他们变成了这个样子：
第一种触发后在图标文字和下拉箭头之间有一条分割线，而后面的只是一个有触发的效果；前一种分割线前面的图标文字表示一种操作，而分割线后面的下拉箭头表示更多的操作选项。后面没有分割线的触发后就只是一种更多操作的选项。
所以，目前我们分辨以上两种样式相同的下拉箭头的方法只是： 移动鼠标看触发效果，有间隔线的前面是操作，后面是更多选项。而没有间隔线的就是一个下拉选项而已。
当然，这种方法不直观，你必须鼠标触发后，才知道这个下拉箭头倒是是一个什么操作。
但这种操作在Win系统的软件里面，已经很标准了。以下都是运用这个标准的一些例子。
Google toolbar
QQ聊天窗口
但同时，在QQ的聊天街面上，发下了一些似乎并不那么符合这个标准的按钮，比如以下这个
按照以上的标准来看，第2、3、6、7的图标旁边应该加个小小的下拉箭头，鼠标触发效果应该是没有间隔线的那种。类比的可以看看msn聊天窗口的处理，似乎就比QQ处理的好（嘿嘿，这样似乎可以证明QQ不是简单的抄袭MSN呢）。
以上聊天窗口操作栏，QQ的传图片的图标（第4个）和MSN的更改字体的图标（第5个）点击后都是弹出windows标准窗体，而其他的图标，比如 选择表情，都是拉出一个类似层的界面，本质上属于更多操作。处理方法应该需要下拉箭头，鼠标触发后的效果也是图标可以箭头之间没有间隔线的。
PS： 看到了更高级的应用，以下截图是是QQ的群聊天窗口。
发现不同了么？
一个下拉箭头是在图标和字的中间，一个下拉箭头是在图标和字的右侧（和一般的一样）。据说，在箭头在中间的就是表示此操作为打开更多选项，也就是没有间隔线的；箭头在右侧的和一般的逻辑一致（一种理论：根据下拉箭头的位置判断可能的操作，直观）。
这里貌似是个不错的解决办法，但是他的问题是：
- 要是我缩小了窗口，提示文字隐藏了，我该怎么去判断呢？（这个时候还是要用原始的鼠标触发方法吧。）
- 这里的 图标+下拉箭头+提示文字的组合根本不符合标准 （这里文字出现的意义就是为了解释图标的，但是却被操作性的下拉箭头隔离了，那么他去解释~~~下拉菜单？）。所以根据下拉箭头判断也就无从说起了。
Update： 上一个标准的例子，来自yahoo mail。直接做成按钮状的带间隔线的效果，直观，易懂。
无等候电梯？电梯变聪明了还是我变笨了
发表于 2007-01-12 12:09 | 分类: 可用性 | tags: 可用性, 电梯 | 评论 (4)
以上两张图片是北京某知名国际大厦的电梯（感谢Sasha同学提供照片），来头可不小，美其名曰无等待电梯，这种新型的无按钮电梯又被称为“目的地直达电梯”，目前正在全世界的新楼宇中登堂入室，号称能加快搭乘速度，缩短等候的时间。
这种电梯是瑞士迅达（Schindler）的产品，据说使电梯变的更加聪明了：它在乘客进入轿厢前就预先获得乘客将要去往的楼层信息，它一方面知道 有多少人在等候电梯，另外一方面也知道了进入电梯轿厢之后，有多少人要去同一个楼层，它会合理分派电梯运作，完全避免了一般电梯经常出现的一下挤进10多 个人，从1层到N层几乎层层停的状况。此外，这项独特的乘梯技术还可以限制访客进入某些楼层，因此，这项技术对楼宇的安全性有了极大保障。
但似乎，我变笨了，因为我不会使用这种高科技的产品了。：（
就像上世纪50年代的乘客抱怨没有了电梯操作员一样，今天的乘客对于把搭乘控制权让给电脑感到很不自在。第一次使用是最困惑的，当我跳进一架打开的电梯，电梯门在面前关上时，才发现没有按钮可按。而接下来，我只是在满是镜子的封闭空间里手足无措。
和现在大多数的一般逻辑不一致，导致我根本不会注意到电梯外面的按钮，而当我进入电梯发现什么都没有了，我觉得自己就像个傻瓜。当然，任何新事物总 是需要培训的。但是当我熟悉公司的乘梯方式后，回家却总忘记了按公寓楼电梯按钮，电梯半天没有反应，后进入的人打开电梯，发现这个人还在里面，怪异的看着 我，于是我又手足无措了。
让我们来看看这种新式玩意儿到底有些什么问题：
- 让首次使用者感到困惑并觉得自己很蠢。
- 针对这个像电话按键的东西，我不知道怎样才能到达11楼。
- 还有*号键和-键，难道这个”-”是链接两位数楼层的？那么当我输入1后，电梯不能立即反应。因它不知道我是要继续输入”-”，还是从别楼层要去1楼。那么应该还要个确定按钮？
- 按轮椅标志会出现什么情况？
- 我去B电梯等待，但是当我发现旁边的A已经下来并打开后，我却不能进去？
- 进梯后，我突然不想去7楼了，我却不能改变主意。
总之，我们装了新的电梯，但却没有人知道怎么用。
当然，启用新电梯常常要教育乘客如何使用电梯。比如经常派发小册子，并在门厅举行培训课，或者在电梯厅安排了两名，负责告诉客人如何使用电梯。
但，搭乘电梯，我还有必要学习吗？
人类是很难培训的。在高峰时间，有些人就会按照一般的逻辑，想加快服务的速度，不停地按楼层的按钮，试图控制电梯的运行速度。然而，事与愿违，电梯系统反而慢下来。
“电梯里只有我们俩人，而电梯却停了五次左右，”哦，我的天。
update：看看大人物们怎么谈论这种电梯。
默多克（Murdoch）：在接受《纽约客》的一次采访中，新闻集团主席也抱怨了这个事情，“有人装了新的电梯，但却没有人知道怎么用。”
汤姆.塔利斯(Tom Tullis)：麻塞诸塞州沃尔瑟姆本特利学院(Bentley College)研究技术的“可用性”的教授，在波士顿第一次接触到直达电梯，吃惊不小，以至于后来他在一个技术可用性会议上做了一个名为《搭电梯不应要读用户手册！》讲座。
格拉斯伯格：《电视指南》(TV Guide)的资深副总裁，“电梯门关上后，你就没有机会改变主意了。一上了电梯，就好像得了幽闭恐怖症。”
Seven：中国唯一说这个事情的人？“我并没有去体验，只是看了几张手机拍的图片。不知道是电梯变聪明了还是我变笨了。”嘿嘿。
