麦当劳两则

七月 16th, 2006 21 Comments »

工业产品的设计从上个世纪初(甚至可以说是上上个世纪末)就开始了,经历了百年。工业设计中的很多经验对于现在的互联网设计都是很有启发的。

最近经常回家很晚,常去门口的麦当劳吃晚饭。在那里注意到两个很有意思的设计。

第一则:厕所的门
uploads/200607/16_185600_outsidedoor.jpg
这是在麦当劳厕所外面拍摄的。可以看到,所谓的门把手就是钉在门上的一个金属板。这个门要怎么打开?没法往外拉,没法横向推拉,只能往里推。

这是深圳的一家麦当劳的厕所门,现在回想一下,似乎北京麦当劳的厕所门也是这样设计的。

关于这个设计,之前曾经在blueidea的用户体验综合版里说起过。

我们来看看这样一个设计对web的交互设计有什么启发。这个设计使得用户在操作之前就已经知道要如何操作了,而不用去尝试。在网页中,也存在着类似的需求—文字链接。

用户打开一个页面后,需要能知道哪些内容是有链接的、可以点击的。不应该让用户用光标去尝试,这会大大降低使用效率。这其实是可用性中一条很明确的要求,但是,却总是不被注意。
uploads/200607/16_185848_qq.gif
上图所示的页面中,“您所在的位置:”是不可点击的,“QQ首页”是可以点击的,“新闻频道”是可以点击的,“走马灯、正文”都是不可点击的。

类似的问题几乎各大网站都存在,请您随便想出几个常去的网站,sina?163?中国新闻网?无一幸免。

第二则:番茄酱
uploads/200607/16_190028_.gif
这袋儿番茄酱在包装上很清楚的给用户提示了撕开包装袋的方法。实际上,并不是只有包装上指示的锯齿位置才能撕开。这显然是为新手用户设计的。如果您是第一次使用,不知道该怎么操作,那么,就按照提示来做吧。多用几次之后,您就会发现沿包装袋两端任何一个锯齿都可以撕开。

也许这个设计看上去有些多余甚至可以被认为是一种对用户的误导,误导用户从指定的位置撕开。不过,这样的误导并没有给用户造成太多负面影响,并且为新手用户提供了有价值的帮助。如果您不是新手,不要在意这个提示就行了,它不会让您有太多不好的感受。如果您是新手,面对这样一袋番茄酱也许会不知道如何下手,其痛苦感受我们大致可以想象的到。并且,如果操作失误,里面的番茄酱还会有喷射而出的危险。被一袋番茄酱弄的好像不幸中弹一样,显然会给您的心灵造成巨大的创伤,并留下严重的阴影。因此,这个包装袋上的提示是很有价值的。

软件设计里也会有类似的提示。请随便打开一个windows文件夹窗口,确保“查看”菜单中的“状态栏”被勾选,并且窗口不是“最大化”显示,此时,窗口右下角就会出现一个三角形图标,提示“拖动可以改变窗口大小”。而实际上,拖动窗口的任何一个边或者一个角都可以改变窗口大小,就像番茄酱包装袋上沿任何一个锯齿都可以撕开包装袋一样。

大多数软件也沿用了类似的设计。Gtalk,MSN都有这个小三角,并且四个边四个角都可以拖动。但是,也有一些例外,比如realone,有可拖动的小三角,并且只能拖动小三角,其他地方不许拖动。其中的不便,想必大家都有体会。

再来看网页的设计。在一个文章列表页中,一篇文章后面的评论信息要怎么显示?
uploads/200607/16_190211_.gif
MSN space是这样做的:
uploads/200607/16_190234_msnspace.gif
“添加评论、阅读评论”,有必要这么罗嗦吗?有必要。就像番茄酱包装袋上的提示一样必要。

―――――――――――――――――――――――――――――――
此文是在公司内部一次小组交流会上的发言。

有21 条对“麦当劳两则”的评论

  1. 蜘蛛霞 说:

    嗯,说的没错!深有同感,但是我不够细心,对生活的留意不够仔细,向你学习!! [yes] [wink]

  2. 白鸦 说:

    诺曼说这叫:预设用途

  3. awflasher 说:

    pr=4~

    嘿嘿,比偶低一个~~

  4. 大头神仙 说:

    无数多的网站有这个问题,我也曾经关注过,谢谢臭鱼把这个问题阐述的这么明白

  5. tangmm 说:

    很有启发,俺比较关注的设备人机交互设计上也可以应用的。
    顺便问一下,俺是刚开始接触人机交互,侧重医用设备设计,哪位达人可以提供些这方面的资料啊?不胜感激!

  6. 小白 说:

    很受用
    转载不介意吧,转载有写出处
    http://www.x-bai.com/blog/blogview.asp?logID=602 [lol]

  7. Evan 说:

    臭鱼很注意生活中的各个细节啊。。佩服。。

    今天刚来这里,从别人的友情链接里点来的。。。

  8. make 说:

    对麦当劳

  9. 人机交互 说:

    细心的你能够从生活中捕捉到灵感,并能映射到界面设计中,读你的文章很受启发,希望能读到你更精彩的文章,期待中……

  10. badst 说:

    真的很细心,生活中的任何设计都能引用的上。
    厉害厉害!佩服佩服!

  11. 不洗澡的鱼 说:

    不错,学到不少。 [yes]

  12. ling 说:

    [angry]

  13. angel20TH 说:

    但是我不喜欢live space添加或者阅读评论去到这篇日志的单独连接里面,这样同样是打断了我的阅读

  14. XPB 说:

    多了不说,看你对其他网站很多细节方面提了不少问题。但你的网站我也感觉至少有这么几点让人感到不便:

    1、首页上我没找到搜索内容的入口。

    2、没有就没有吧,翻页找吧,比如我想找包含某些特定关键字的文章,操作只能是一页一页翻看,每一页都是标题加部分内容,最反感这种日志方式,又臭又长。找起某篇文章比如曾看过的想再看一次的文章,费力!!!如此实用的搜索功能没有。没有就没有罢了,放上个日志标题的列表也好啊,找日志标题列表总比现在这样更“一览无余”吧???

    3、列表方式没有就罢了,连分页也只是这样简单,上一页,下一页,到底多少页,我找到什么时候能找完?

    4、较旧的日志,较新的日志之间的空白处完全可以放诸如《【1】【2】【3】》
    之类的更方便的分页形式。

    5、另外,发评论的时候我总的提醒自己先把评论复制到剪贴板里,免得发送不成功丢失。

    不知道为什么,wordpress作为一个很多人因为看到评论都甚至拼死也要从其他日志程序转化的blog程序,连这样简单的一些功能或是人性化的地方都做不到。

    另外,如果你看一下wordpress的程序执行时间,您会发现,几百条日志信息的读取执行时间要比几百万数据量的Dicuz!论坛在相同的硬件配置的服务器上高几十甚至上百倍。是我见过的php程序的blog中效率最差的一个(即使默认设置不安装任何插件)

  15. 黑白颠倒 说:

    学到了很多哦!

  16. 默明 说:

    将个人博客做成了一个设计资源网站
    有空常来逛

  17. 折折熊 说:

    臭鱼,我的博客和你的一样出现了大量的英文垃圾评论……

  18. 非法操作 » 设计原则VS实际情况 说:

    […] 第一步.未操作前;操作可识别,结果可预知。 这是两个准则。操作可识别,是说按钮应该象按钮,链接应该象链接。《麦当劳两则》中的第一则提到了“链接应该看上去象链接”;第二则提到了操作应该给用户明确的提示。 按钮应当是有立体感的,看上去就感觉像是可以点击的。《接受伪按钮》《谁是按钮?它在干嘛?》都是在说有关按钮的事儿。不过与现在说的这个主题似乎不是很一致,还是别去看了。 […]

  19. hui 说:

    佩服

  20. 交互行为三部曲 | MoonCLoud 说:

    […] 第一步.未操作前;操作可识别,结果可预知。 这是两个准则。操作可识别,是说按钮应该象按钮,链接应该象链接。《麦当劳两则》中的第一则提到了“链接应该看上去象链接”;第二则提到了操作应该给用户明确的提示。 按钮应当是有立体感的,看上去就感觉像是可以点击的。《接受伪按钮》《谁是按钮?它在干嘛?》都是在说有关按钮的事儿。不过与现在说的这个主题似乎不是很一致,还是别去看了。 […]

  21. http://zhitongcheyouhua.com/2014_03_18/1443.html 说:

发表评论

您的大名: