拆掉窗上的把手

十二月 31st, 2006 42 Comments »

uploads/200612/31_220652_1.jpg
这是公司吸烟室里的窗,为了避免宝贵的烟雾从这里流失,窗被封了,是用胶粘住的。虽然有很大的提示,但是,还是被人强行打开过。那时,这里是有把手的,象其它窗一样。后来把手被拆掉了,不再有人试图去开窗了。

之前虽然也有很醒目的文字提示,但是还是有人要开窗,因为上面有个把手,有把手意味着可以扳动。即使有提示,那个试图开窗的人还是会给自己想出一些看似合理的解释,比如,“是不是有人恶作剧?”“是不是说,不建议打开?其实,打开也不要紧的”……

之后拆掉了把手,不再有人去尝试强行打开了。既然不希望用户去操作,那么就不提供操作手段。仅仅是告诉了用户正确的信息还不够,还要避免出现不正确的暗示、引导。

我们设想一个更极端的例子,如果给马路上的井盖上装上一个把手,显然会有行人试图打开它,尽管并没有什么提示邀请行人这样做,并且,行人也不会有打开井盖的需求。错误的引导会引发出错误的操作,即便那个错误的操作看上去是荒谬的(如果是要偷井盖卖钱那就不荒谬了,那是可耻)。

下面回到网页上来:
uploads/200612/31_220653_2.gif
这是一个发表评论的功能。
未输入内容前,点击“张贴评论”按钮,会弹出对话框提示“请先输入评论”。对于这个发表评论功能,将按钮初始状态设置为“disable”是比较合适的。“因为,现在还不可以张贴,所以,那个按钮不可以点击”。如下图:
uploads/200612/31_220720_3.gif

下一个例子:
uploads/200612/31_220813_4.gif
先介绍一下:
这是Qzone商城。Qzone商城是一个让用户购买装饰物装扮自己Qzone空间的产品,在这里,用户可以买到背景、鼠标指针、各种小装饰,还包括用户自己Qzone空间导航栏的皮肤(图中右侧部分)。

点击商城中商品的小图片,就可以即时的在页面中预览到实际效果,为了让用户预览到自己空间中的导航换上皮肤的效果,这里显示出了用户个人空间中的导航。显然这里并不希望用户通过它离开商城。但是,这里的“主页、日志……”却是可以点击的。既然这里不希望用户点击,为什么要让这些链接可点击呢?如果你使用过Qzone就会感觉到,这个导航的引导效果甚至比“井盖上的把手”更强。

为了挽留用户,且避免误操作,不得不弹出一个对话框:
uploads/200612/31_220814_5.gif
“保存更改到新的方案吗?”……中文确实是世界上最难的文字。

为了挽回一个错误的设计,不得不再设计一个邪恶的弹出窗口。而更复杂的设计,意味着出错的几率更高。

似乎也可以说,在这里用户看到自己Qzone空间的导航,是有点击导航进入相应栏目的需求的。但,这个需求产生的前提是:先有了这样一个导航,并且看上去就像是可以点击的样子。在这个前提下,要点击它的需求才出现了。如同那个窗上的把手,把手在那里,并且上面没有大便,看上去就象是可以扳动的。

我们可以尝试着设计一下:
1.让这个导航看上去就不象可点击的样子;
2.在商城页面上部加上明确的链接允许用户返回到自己的Qzone空间中。
满足了上面两条,还会有多少人非要在Qzone商城中直接进入自己的“留言板”呢?

PhotoshopCS2中,一个工作窗口可以拖动的范围更大了,如图:
uploads/200612/31_220815_6.gif
以前的版本只能这样:
uploads/200612/31_220816_7.gif
与以前的版本相比,最顶部的80px也可以用作显示工作窗口了。PhotoshopCS2提供了更大自由度的操作。但是,这80个象素原本也不是空着的,如果把工作窗口拖上去,菜单栏、辅助工具栏就会被遮挡住。在遮挡住的状态下,要想点击“显示变换控件”这个复选项,又不得不再把工作窗口拖下来。更糟糕的是,也许有些用户会根本就找不到这个功能了。

我们来推测一下设计者的想法:“缺省的位置不会出现遮挡,如果用户需要更大的工作区域,这样的设计也是能满足的。”这似乎是一个更周全的设计。

既然工作窗口是用户自己拖上去的,是用户自己的操作、自己的意愿,哪些区域被挡住了,用户显然是看到了的。这甚至比吸烟室窗上斗大的字条更加显而易见。然而,在使用中,我还是经常会不经意的把自己挡住。并且,我相信,不是因为我笨。

在photoshop CS3中,这个功能被取消了。(遗憾。如果是在CS3发布之前就提出这个问题,似乎会显得更有先见之明,唉,现在,马后炮了。)

总结一下,好的设计,不仅应该把正确的引导传达清楚,还需要避免不正确的引导、暗示。

出现不正确的引导、暗示往往源于提供了太多的自由度、太多的功能、太多的选择,而出现“太多”则是为了“保险起见”。“所以的操作都在这里了,您想用哪个就用哪个吧。”没有引导的设计更象没有设计。

设计的职责不仅仅是把所有的功能都展示出来,也需要拆掉窗上的把手。

电影《重庆森林》里讲:生活中,选择太多,姑娘可能就跑了。多么沉痛的教训,应该足以引起注意啦。

有42 条对“拆掉窗上的把手”的评论

  1. Amer 说:

    这几个例子很直观,确实,多余多部分会带来更多余的附属部分 [smile] 受益

  2. sume 说:

    让用户自己决策就是设计师不作为,呵呵~
    但是有些事却是我们设计,别人来定稿。
    就像这里的留言也是没有对<发表>按钮灰化处理的:)
    我想不是你的主义吧。

  3. rgb 说:

    厉害!每个例子都是切中要害啊

  4. 大徐 说:

    兄弟你终于更新了~

  5. 腾龙 说:

    寻求完美的交互设计的平衡点
    http://netgodfather.blog.sohu.com/27921471.html

  6. 奇遇 说:

    ^_^ 好多人关注你 终于更新了 做设计的时候经常遇到此问题,你的形容很好! [lol]

  7. 木木桃子 说:

    终于看到臭鱼的新文, [cry] 不容易啊

  8. 怿飞 说:

    终于又看到臭鱼的文章了! [redface]

  9. evanbai 说:

    顶! [yes]

  10. AdamWan 说:

    disable 不错,简化、简化、再简化

  11. hax 说:

    写的不错,但是评论按钮disable的例子值得商榷。因为也可能造成用户误解不让评论。

    比较好的方式是以醒目方式提示(如红字提示,现在比较流行的则是渐变高亮提示),但是不用对话框来干扰用户。

    进一步说,个人认为弹出对话框也并非完全不可取,问题在于对话框的文字太令人厌烦,如果活泼一点也还可以,比如提示“您什么都没输入呀!”,然后两个按钮:“哦,按错了”以及“我就是要发表无字天书!”。

  12. nic 说:

    佩服啊!

  13. joanna 说:

    不好意思,我是来点名的。没办法也 [sweat]

    http://sjoanna.blogspot.com/2007/01/blog-post_09.html

  14. stephanie 说:

    理论都很对,但老板不这样认为怎么办,凉拌~ [cry]

  15. mouse 说:

    “保存更改到新的方案吗?”……中文确实是世界上最难的文字。

    哈哈.这句说的真精辟!

  16. mouse 说:

    你的这个留言,用户名和验证码貌似好像不要输的(支持匿名?).我是这么觉得的.又没加星也没说明!结果表明还是得输. 又让我回退再输!支持匿名?支持匿名?

  17. sheng 说:

    作者主张的的按钮变灰逻辑是有错误的

    当一个按钮变灰的时侯,用户并不知道变灰的逻辑是什么,他甚至不会知道在框里输入文字才会恢复回来,这个时候用户会非常迷惘。设计一些看上去不看点击的导航条就更是扯蛋了,用户怎么知道如何才能让这种不能点击变得可以点击呢?

    弹出框本身是打扰用户,但是更多时侯它是一个更好的逻辑明示和用户感知,比一些想当然的隐藏逻辑设计要好得多。

    建议作者多去做一些真正的产品易用性测试流程,然后再得出结论,而不要用想当然的自我推测来误导大家了

  18. sunlinepsy 说:

    "没有引导的设计更象没有设计"——很精辟的设计理念。其实我认为,设计师拥有一个聪明的设计理念很重要,设计理念反映的是设计背后的逻辑和原理。不太同意sheng的说法,界面交互是一个动态的过程,其实对于这个添加评论的任务,用户有一个固定的任务流程,用户看到这个添加评论的框以后,第一个要做的事情是在对话框中写评论,而不是直接去关心“添加评论”这个按钮是不是可用(我通过找几个同事进行非正式的测试,发现了这个任务流程:))。当然,sheng前面所说的是通过严格的用户测试而得出的结论,那就有进一步探讨的必要了,呵呵

  19. 怒放 说:

    将按钮初始状态设置为“disable”反而会给用户造成迷惑吧,这个按钮为什么不可点击?是网页功能失效的缘故还是我未登陆的缘故?还不如在INPUT框里用灰色的字注释:在这里输入评论内容。鼠标移上去这些文字消失。

  20. 小窗 说:

    写了一大篇字恢复,提交居然告诉我我没有权限发布!!!我要杀人!!!

  21. 小窗 说:

    只好把刚才写的再写一遍….
    即要让用户看懂逻辑,也要简化指示,可以在INPUT框里用灰色的字注释:在这里输入评论内容;此时按钮初始状态设置为“disable”,这样用户就不会迷惑了,因为INPUT框告诉了用户要做的事情。

  22. 臭鱼 说:

    小窗,对不起,文本输入确实有时候会失败,不知道是程序的问题还是服务器的问题。我只是在首页的公告上写了“有些时候发表评论会提示什么“没有权限”,其实……”显然,在那里提示这里的问题,显而易见的错误。受限于精力、能力,短时间内还没办法改掉这个问题。

    再次致歉。

  23. 鱼儿 说:

    你真的很厉害~佩服~
    俺新进ui设计领域~多多关照哈~

  24. ryana 说:

    哈哈,好喜欢这篇文章的话题。关于文字的诱导与心理战术,有时候,就好像一场设计师跟用户的较量~ [razz]

  25. ahkai 说:

    good

  26. vsky 说:

    用按钮禁用的方式来限制用户似乎没有文字直接吧,如果弹出的alert文字语意亲切,用户应该能接受的,或者直接在DOM中用文字给用户提醒。上面sheng说的也有道理,用户不知道灰色按钮的逻辑,例如我在使用QZONE时就发现了验证码输入时的一个细节:页面加载完毕,验证码图片本身是没有返回的,当我想输入验证码时我就在想验证码在哪儿了?事实上当输入框接受了鼠标焦点时才向服务端发送请求然后返回验证码图片,在网速慢的情况下这个图会让我等得“无措”。在我发现这个逻辑之前,我一直都是用旁边的“看不清楚,换一个”来显示验证码,因为我都不知道验证码是什么,怎么会去点击一下输入框了?

  27. 严重关注 说:

    不知道可不可以直接将“请在上面的框中输入评论”写在disable的按钮上

    当输入框中有内容的时候,按钮上的文字变成“提交评论”,并且变为可用

  28. 严重关注 说:

    写完之后 又觉得将问题负责化了

    如果一个人试图打开一扇门 但是打不开 他首先会想到什么?!

    如果符合最常见的思维逻辑 应该就不需要考虑太多其他的异常情况。

  29. 看了一下 说:

    不过,你这个评论设计得不是你写的那样,更差

  30. 高手 说:

    你想的太多了~!

  31. 857 说:
  32. 248 说:
  33. 791 说:
  34. 713 说:
  35. 625 说:
  36. 摄氏80度 说:

    写的很好啊

  37. 425 说:
  38. www.tclook.com 说:

    是的 这个例子 很不错 够直观的说明问题 多谢分享

  39. the gong 说:

    很好的例子,至少发现了问题,提出了问题。

  40. vetement Hollister 说:

    petrobras au large plate-forme de rive de l’atlantique sud . la plupar magasin Hollister pas cher t des investissements directs étrangers au brésil va à cette société , s Hollister Shirts es filiales , ou les champs de pétrole et de gaz , il est découvert au large de la côte de rio et sampa . c’est probablement pas le plus grand risque brésil Hollister pas cher f

  41. www.achatboutiquehollister.com 说:

    lorsque les entreprises de ven Sandales Abercrombie Femme te au détail des ennuis, les maux sont toujours systémique : les entreprises ont hollister Sweat perdu le contact avec leur clientèle de base et à l’identité de la marque essentiel – y compris comment les clients principaux s’attendent à être servis de la marque . les corrections néce Hollister pas cher s

  42. RogerBiz 说:

    anchor

    anchor

    anchor

    anchor

    anchor

    anchor

发表评论

您的大名: