交互行为三部曲

九月 23rd, 2007 28 Comments »

之所以会出现“交互设计”这个词儿,很大程度上是alan cooper想区别于以往的界面视觉效果设计,重新定义一下基于电脑的软件设计工作。既然是区别于原先的界面设计,我想,可以简单的不准确的概况一下这个概念:交互设计=界面设计+行为设计。界面的设计无须多说,行为的设计就有很多话题了。

之前的很多小文里也经常会提到有关行为设计的问题,几天前如厕时偶然意识到关于行为设计的一些问题联系起来考虑会更有助于设计。

啥是网页上的行为?看到一个链接,左键点了一下,打开一个新页面。
当然行为也有更复杂的,填写、提交一份注册资料;删除我日志中的垃圾评论;打开一个视频,调整音量,全屏观看…

关于这些行为,我们可以分为三个步骤,并对每个步骤提出相应的准则:
第一步.操作前,操作可识别;结果可预知。
第二步.操作时,操作有反馈。
第三步.操作后,操作可撤销。
(文字排列的还挺整齐的,怪像诗的哦。好吧,借以沉痛悼念即将远去的诗人:白龙。)

如果你深谙设计之道,恐怕已经知道我说的这几点是什么了。那么本文看到这里对你来说已经足够了。将这些设计问题联系起来考虑,在设计一个行为的过程中能有意识的考虑这一系列问题,应该会有助于你的设计。

如果你还有兴趣再具体了解一下上面说的这些准则,我们继续。

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

操作可识别是为了保证用户触发操作的有可能性。如果看不出那是个链接,恐怕就没人去点了。
QQ空间中有个不好的例子:
1.gif
有输入框,但却看不到验证码图片,读了上面一行文字才知道,光标点进输入框后验证码图片就会出来了。“没看到图片我怎么知道要输入什么?”“不知道要输入什么,我就不去不输入啦。”操作前表现的不够清楚,会影响触发操作的可能性。
(上面那行温馨提示算是个补救措施,但并不能解决问题。如果都靠提示就可以了,那么就不需要设计师了,有作家就够了。)

“结果可预知”是说,未进行一个操作之前,应该让用户大致能猜测到操作后会是什么样的结果。或者说,操作的设计应该和用户的期望相同。那些只写成“返回”“上一步”“下一步”的链接,如果可能,最好还是写清楚些为好。比如写成:“下一步 进入购物车”、“返回首页”…还有些时候,让结果变的不可预知是因为观念上的问题。设计者故意给用户一些意料之外的结果。《他想要什么?》中有些例子,说的更清楚些。

第二步.操作时,操作有反馈。
进行了一个操作后,需要页面上有反应。

使用系统按钮也算的上是一种反馈吧。点击一个系统按钮时,按钮会动一下,告知用户:“您点了一下。”当然这个反馈还不足够。还需要执行这个按钮应该有的功能。

QQ空间商城的页面很短;QQ秀商城左侧固定,右侧可滚动,这些都是为了保证点击了一个商品后,用户能看到页面页面上的变化。与之对比,天下秀等网站的操作都存在类似的问题。(说别人的坏话,这样不好,很不好。)

第三步.操作后,操作可撤销。
执行一个操作后,应当允许撤销,允许用户反悔。操作执行前的提示、二次确认并不能完全解决问题,几天前,我在删除垃圾评论的时候就遇到了这样的问题,错误的删除了一条评论,虽然之前有二次确认的小窗口,但是仍旧是删了。之后我追悔莫及,需要的是撤销刚才的操作。但是,WP里删除评论是不许撤销的。为此我特意致歉了一下,那段致歉就写在了那条评论牺牲的位置上。

有些时候,不提供撤销操作是故意的,设计者妄图通过这样的设计达到自己不可告人但又尽人皆知的险恶目的。当然,这样的情况越来越少了。大家都知道,网页上最简单的操作是关闭该网页,想牵着用户鼻子走,通常是很难的。

当然更多时候,不提供撤销操作是设计的时候没考虑周全。比如西宁邮政宾馆的热水器:《西宁邮政宾馆与博客网》,由那个热水器带来的恐惧使我直到现在还是只洗凉水澡。

有28 条对“交互行为三部曲”的评论

  1. 萋萋 说:

    如果设计还需要文字提示才能让用户明白,设计本身就是失败的。所以文中QQ空间的验证码设计,因不够温馨而不得不加上“温馨提示”。
    关于操作可撤销,在于计算机的交互中,太多操作会弹出二次确认,比如删除文档,清空回收站,关掉文档询问是否保存,……,这一系的确认过程不仅浪费精力,也潜移默化的让我养成了点“确定”的习惯。即使我由于失误正在删除一个重要的文件,仍然会下意识的去点确定。这个时候我一般也不会意识到自己的失误,所以二次确认在挽回错误操作方面,起到的作用也甚微。
    另外,操作可撤销,会不会助长了用户的惰性呢?对可撤销产生了依赖,可以不必为自己错误的行为负责,也不会收到惩罚,反正可以撤销重来。倒是减少了许多思考过程。

  2. Horwa 说:

    兄弟可否查一下你Gmail邮箱,我给你作了20天的链接了。。。。。。

  3. xiaoxiao 说:

    我回来了!!

  4. 稻草 说:

    白龍…banlon.呵呵

  5. banlon 说:

    我来看你了,阔爱的臭鱼。

  6. seeker 说:

    你好!能交换链接吗?
    我的blog:http://www.seekerblog.cn
    名称:IT江湖|Seeker Blog

  7. xing 说:

    谢谢您的好文章。
    只是贵空间其实也缺乏一些必要的互动,特别是没有全部文章列表,可能您只是为自己做的一个博客,所以设计得比较简单。
    您的文章确实让我受益匪浅,谢谢。

  8. 一叶千鸟 说:

    楼上几个做链接的也不太厚道了,看完文章就这点反应么?

    如厕时都在思考的精神,值得大家学习。

  9. 西贝 说:

    当操作时,操作及时反馈是很必要的,但是对于已经熟知的用户来说,过多的提示会造成快捷操作的困扰,我一直不知道如何平衡之间关系

  10. koma 说:

    qq空间的验证图片那里
    一开始是一直有验证码图片的,可是,如果你发表日志时间比较长,验证码就实效了,会显示为发布失败,验证码错误。
    现在要发布的时候点一下验证码,反正框框总是要点的啊
    我个人觉得是不是为了避免验证码实效:)

  11. JoeCom 说:

    说说QQ空间的,
    之前的验证码确实是很明细的显示的,后来才变成现在这样的
    这个跟楼上讲的一样,凡是验证码之类的都用session比较多,session的失效对于开发人员来讲确实也是一个难题

    QQ空间现在这个方式,对于第一次操作来说确实找不到门,但第二次及以后就不会有困难了。

    再说说那个 操作可撤销 的问题,如果所有的删除我们开发人员都要考虑可以撤销的功能,这将是我们开发人员的灾难。
    像你说的blog模版问题我觉得应该是当作一种特殊的问题对待,而不是普遍的,普遍的还是用二次确认。如果二次确认后你的重要资料仍被删除了,那是你自己的粗心,与软件无关,与设计无关(除非你又更好的其它方法)!

  12. Orient 说:

    任何事物都有个度,可撤销是应该有的,但不是任何操作都应该有,尤其是删除,何况,现在的好多后台都有“物理删除”和“逻辑删除”之分。

  13. leo159 说:

    TO JoeCom:

    让程序员处理验证码问题是比较难,但是让访问者吞掉这个苦果就是最好的解决方案吗!!!

  14. JoeCom 说:

    回楼上,谁都不愿这样做的

  15. xiaodai 说:

    交互设计已经影响到产品设计了,包括越来越多的的内容

  16. algabin 说:

    to leo159
    腾讯这样的做法,算是个比较折中的做法吧.
    QZ的用户停留在页面上的时间比较长,session容易过期,过期了用户回复就会失败,还需要重新获取验证码.这也会被很多交互设计师们喷的吧.很简单,加长session的过期时间.问题解决了.
    但是,对于腾讯这么大用户的网站,大量的长时间保存的session会降低整个网站的速度,何况现在QZ的速度我感觉本来就不是很快,一个网站的流畅不是更重要么?

    如果leo159你会怎么选?选速度还是选最佳解决方案?

    而且腾讯也不是什么都没有做..他做了他能做的提示,只是增加了一点点用户的学习代价,相信这点带来的性能上的提升是值得的

    我比较同意JoeCom的意见

    技术才是主导,交互方式不能超过技术的能力范围之外.
    但是 “无法实现” 不是程序员偷懒的借口

  17. 开开 说:

    to algabin :
    技术才是主导,交互方式不能超过技术的能力范围之外.

    这么说技术算主导?只能说技术是约束。

  18. greenboy 说:

    好的设计师必须要考虑到技术的局限。
    就好像传统工业的外形设计,必须要照顾到内部的机械结构一样简单,你可以要求汽车能穿行与小巷,并且内部有大空间吗?

  19. 一葉千鳥 » 操作三部曲 说:
  20. 且歌 说:

    to algabin

    session过期的问题,可以在输入框获得焦点的时候判断一下,如果过期的话,自动刷新验证码图片,并且给用户一个小提示“由于您这么长时间没干什么,验证码已经失效了,等几百毫秒以后,你会看见一个新验证码。”,几百毫秒不能算长吧。

  21. kingokiko 说:

    看到举QZ验证图片的例子 我想说一句
    现在的验证方式比以前的好。
    理由
    提交一篇文章的成功率比以前高

    个人觉得验证的图片辨认时有一定困难

  22. 醉中仙 说:

    非常不错。比Norman的七个步骤简化多了,很好,很强大:)

  23. 堂主 说:

    喜欢这篇文章

  24. […] 臭鱼的交互行为三部曲 […]

  25. 路人乙 说:

    引用:
    像你说的blog模版问题我觉得应该是当作一种特殊的问题对待,而不是普遍的,普遍的还是用二次确认。如果二次确认后你的重要资料仍被删除了,那是你自己的粗心,与软件无关,与设计无关(除非你又更好的其它方法)!

    TO JoeCom:
    正是因为太多应用二次确认这种方式使用户习惯了点击确定按钮,而导致重要资料仍然被删除,这种方式不好,需要改进,这绝对是软件设计的关系。

  26. 道哥 说:

    当操作时,操作及时反馈是很必要的,但是对于已经熟知的用户来说,过多的提示会造成快捷操作的困扰,我一直不知道如何平衡之间关系。

    这个问题提的很是到位,我也在想。

  27. bihuman 说:

    学习

  28. 陈刚 说:

    不错 学习之

发表评论

您的大名: