Archive for the '设计模式' Category

即兴与设计——如何进行有效的设计沟通

Jazz是门很奇妙的艺术,尤其是音乐家们即兴创作时互相激发、灵感四溢,一气呵成,酣畅之至。这种状态,恐怕也是各位设计师渴望的境界。如果你发现自己整天陷于琐碎的细节与无谓的争吵时,不妨尝试“即兴创作”的沟通与创作方法。

Liz Danzico在一篇文章里提炼过几点Jazz即兴创作的特点,且看这些特点如何能用在设计过程中(其中“练习沟通”和“加点魔法”是我加入的原则):

  • 集中精神,聆听
    在台上最重要的一点是,聆听你的伙伴,任何一个音符或律动都可能成为下一段的动机。同样,在设计沟通的过程中,不能对同伴的任何一句发言掉以轻心。
    2009年,在交互设计协会于纽约举办的讲座中,Steve Portigal建议,在沟通中给予足够的安静,允许对方“speak in paragraphs instead of a sentence”。
  • 练习沟通
    这里讲的是自我修炼,而不是彼此磨合(最初的Jazz即兴演出,也是在几个彼此并不相识的音乐家间进行的)。研究表明,所谓天才,至少要10000小时的努力。正因为音乐家数十年苦练,才造就了他们在台上的精妙配合与如诗妙章。在设计与沟通中,仅仅脑中充满奇思妙想是绝对不够的,如何发言表达出自己的看法同等重要。你要做的不是说服,而是启发与共鸣。如何达到这一境界?从现在起练习。
  • 互相支持
    在演出中,无论对方奏出了多烂的旋律,音乐家要做的都是——彼此支持。一损俱损,一荣俱荣。因此,在设计沟通中,如果任何一个建议没有得到回应,就会像乐曲中没有支持的旋律,造成残缺的感觉。
  • “我同意,而且……”
    这句话是即兴创作的根本。除非是按照特定的对话(比如贝九第四乐章开头)进行创作,音乐家要做的首先是肯定对方的旋律,并且相应,加强,共鸣;而不是说“不”。
    在Pixar,这种方式被称为“Plus-ing”。Pixar的Randy Nelson说到,这不是评论或者说“这不错,我怎么能让他变得更好”,而是“我就从这里出发,接下来怎么做呢?(Here’s where I’m starting. What can I do with this?)”
  • 下台后再说
    音乐家绝对不会在台上互相指责或反思,一切,等台下再说。在头脑风暴的原则中,叫做“推迟评价”(withhold judgement)
  • 加点魔法
    以我的经验,在即兴演出中,脑子里只有一个大概朦胧的影子,很少会去想到具体如何弹奏,如何进行和弦配置,一切都是到时候自然的流淌出来的。这一点跟Alan Cooper在他的研讨班中提到的“魔法法则”有一点相像,他建议,一旦确立了目标,不妨放弃对技术细节的考虑,而是假设有一个魔法师帮助你实现目标,比如说“将数码相机里的图片导入电脑”这个操作,就可以抛弃“取出SD卡,插入到转换头”里的细节。

团队合作和跨领域合作一直是美国设计界的重要方法。如同现在科研界的趋势一样,单凭设计师单枪匹马引领风潮的时代可能即将过去。摆脱“你们不懂设计”、“这是我的专业“的思维,学会团队合作将是设计师面临的挑战之一。同时对于设计团队的其他成员(如产品经理、研发工程师),如何进行高效沟通也将越来越重要。

当下次讨论即将陷入僵局后,你可以建议:”换个思路,来即兴一下吧“!

会猜用户心的界面

人性化的界面应该猜测用户的行为,就跟好的秘书应该猜测老板的心理一样。说是猜测,实际上是根据大量用户行为数据总结的解决方案。

1. 猜测(实际上是总结)用户的行为,允许快速地操作

chrome的标签栏 vs firefox

我使用Chrome作为默认浏览器的重要理由有两个都和其标签栏有关:一个是标签栏在顶部更加符合Fittz定律,另一个就是Chrome关闭多个标签的方式十分优雅。从一排标签的中间一个开始关闭时,左右的标签都会自动变换宽度,让关闭按钮跳到鼠标所在的位置。这对于经常打开数十个标签的用户是非常有帮助的。

Chrome的设计,是基于“用户关闭一个tab的时候,很可能他还有其他的tab需要关闭”这个对用户行为的猜测来进行的。

firefox里面,关闭多个tab就变得很痛苦,在标签较多的情况下,每一次关闭都需要细微移动鼠标一段距离,这种精细肌肉运动是很容易让用户变累的。

Foursquare的加好友

每次同意/不同意一个好友申请之后,这个申请向左侧滑动消失,同时下方的好友申请向上滑动,正好把同意/不同意按钮送到用户鼠标下,只需原地点击一次即可再次完成操作,省去了移动鼠标的时间,爽!

4sq friend request

相比之下,twittertwitterfollow多个你的follower的操作就麻烦一些。

Foursqaure的设计,是基于“用户批准一个好友申请时,很可能他会继续批准下一个好友申请”这个对用户行为的猜测来进行的。

当然以上的对比取决于对用户操作习惯的理解。例如,有多大比例的用户会确认绝大多数的好友请求?对于我这个通过所有4sq好友请求的用户来说,这样是很方便的,但是对于 @yuancheng 这样有选择通过的人来说,foursquare的功能就可能造成误操作,特别是在网速比较慢的情况下,这个Ajax效果可能不够流畅,导致误点击。所以产品设计是具有其contextual性质的。不过从另一个方面来说,只要能提供方便的unfriend功能,我认为偶尔的误操作也是可以接受的。

搜索引擎打开首页就自动把焦点放到输入框,提交按钮响应回车。

这个例子基本上所有的搜索引擎都是基于“用户来我这里最可能的是输入关键词进行搜索”来设计的。但是GoogleFade界面把这个猜测发挥到了极致,我相信Google敢于这么做,一是有大量的数据去支持,二也是因为Google足够出名,大部分用户都知道在Google的首页上其实还是有别的内容的吧。

2. 猜测用户的行为,引入特殊的flow

当用户反复地做某事的时候,程序应该有足够的智能(或者说产品设计师有足够的考虑)去猜测用户想做什么。

例子:

QQ邮箱里面短时间多次点击“收信“按钮(似乎是3次),可以看到右侧出现一个对话框。想象一下用户正在等待收某份邮件,反复地点“收信“按钮,然后这个对话框恰到好处的出现的情景吧。

untitled-2

相比之下,我就希望校内能猜一下:

untitled-3

在每次确认好友申请的时候都会出现这个选择分组的对话框,但是这个对话框在功能上是可选的。当需要接受很多好友申请的时候,操作相当繁琐。其实如果在这里当用户数次添加好友时都不创建任何新分组的话,可以考虑添加一个“以后不显示该对话框“的选项嘛。

总结:

最偷懒的产品设计是什么都问用户如何进行(甚至还是以一个又一个javascript 对话框的形式),每一个猜测,或是根据数据,或是根据产品设计师的直觉,而猜测的结果,也应当是根据用户的反馈来进行调整修正。例如以上例子中的QQ邮箱案例,最初是有两个并排的link“报告问题”和“我知道了”,想必是这个“我知道了”在这个场景下变得有点莫名其妙,所以之后的设计将报告问题放入上下文,而把“我知道了“独立出来,作为“以后不再显示“的另一含义。

我常常把用户使用软件的情景比做老板和秘书的关系,如何做一个好秘书?请看为首长服务的艺术。是把软件做成温柔体贴的小秘书,还是简单粗暴的警卫员,是否善解人意很关键:)

一致性 VS 使用情境

一致性是设计中很普遍的概念。良好的一致性会帮助企业塑造起品牌形象、大大减少顾客/用户的学习成本和认知成本;从系统的角度看,高度一致化的流程也是保证产品质量和运营效率的基础。此间最著名的实例莫过于麦当劳的VI和产品线。

然而,一致性原则到底有多么重要,在什么情况下可以被打破呢?
我认为,在很多情况下,考虑使用情境是更有效的设计指导方法。

用户期望是否被满足,是用户体验的最基本要素;而使用情境,决定了用户在什么情况下对产品上产生的期望。如果能够充分的考虑到某种情境下用户的需求和行为习惯,往往能给人带来意外之喜。我很喜欢深泽直人在一次演讲中提到的例子:“…在没有放雨伞的地方,几乎所有的人都会把雨伞往墙上一靠,而雨伞的另一头就放在瓷砖与瓷砖之间的缝隙中。这种情况下,当你造一座新房子的时候…,只要在地上开一条缝,当你家来客人的时候,他就会把雨伞往那儿一放。”

在某些特定情境下,为了更好的提升用户体验,是值得为此打破“一致性”规则的。让我们来看看iPhone输入键盘,在发送短信和输入网址时,使用情境如何压倒一致性:
iphonekeyboard
想象一下,当你在Safari地址栏输完lanrenux后,正郁闷的准备输入“.com”时,突然发现这个按键就在大拇指下面时的惊喜吧!

所以,下次烦恼是否要给网站部署完全一样的全局导航时、是否要统一所有按钮的样式和文案时,请不要再被“一致性”的框框所束缚,想想在此情境下,用户想完成什么任务,他们真正需要的是什么,也许会得到不一样的答案。

从一幅涂鸦谈设计

今天我冒着感染猪流感的风险暂时摆脱宅男状态,在Los Alto的一家星巴克门外采访了Damien Newman,设计公司Central的创始人。他之前在Frogdesign做过Director of Strategy,然后又在IDEO任Brand Strategist。现在他自己开了个名为Central的设计+战略咨询公司。

1个小时的采访中Damien介绍了很多关于设计咨询公司的经验。这些我想之后整理好了专门介绍一下。这里先提到的是他多年前画的一副涂鸦。如下图。

naked-squiggle1

source: http://www.centralstory.com/filed/squiggle/

设计是什么?我认为这幅图很好地表达了出来,那就是:
- embrace the uncertainty at the beginning
- focus on a single point of clarity in the end

各位用户体验设计师可能有和我一样的经历,当别人问你是做什么的时候:“噢,我是设计师”。然后对方很有可能就会很佩服地说:”噢那你美术一定很好了!“

实际上呢,拿起铅笔画画基本上是我最不擅长的事情之一。

设计师实际上要做的事情有两个,第一个是识别问题,第二个才是解决问题。很多人对设计师的理解停留在第二个事情上,也就是解决问题,这样的设计师不叫设计师,应该叫设计匠。

匠:Crafter。何为匠?客户要你设计一个瓶子,你说OK,我给你设计一个瓶子,这就是,请拿好,再见。

师:Master,Teacher。何为师?客户要你设计一个瓶子,你说别急,我们先来一起弄清楚为什么我们要设计这个瓶子,它要满足用它的人什么需求?它要解决什么问题?目前的解决方案缺点在哪里?如何改进?最后你设计出来的可能完全不是瓶子,说不定是个电灯泡呢。

20090404_gloji_01

设计第一阶段:研究
在设计的初期,事情是复杂的,并且我们也要把事情弄复杂。因为通过探索不同的可能性,我们能更加深刻地了解我们所面对问题的实质。在这个阶段,我们要采访用户、发放问卷、请教专家;我们要成为所在领域的专家,我们要了解这个问题的来龙去脉。在这个研究阶段,整个事情就像是一团乱麻一样。只有敏锐的问题解决者(problem solver),才能从中抽丝理续,进入到第二个阶段。

设计第二阶段:概念/原型
在这一阶段,通过之前的大量研究,你摒除了那些不重要甚至是误导的信息,真正抓住了什么是重要的,迫在眉睫的,值得解决也能够解决的问题。这样形成了设计的概念(concept),或者在斯坦福设计学院,叫观点(point of view)。此刻你知道了你是在为谁设计(Persona),接下来你开始围绕这个概念或观点,产生出一系列的原型(prototype),并且加以验证和迭代(Prototype and iterate)。这个时候复杂度已经大大降低,但是仍然存在多种可能性和不确定性。

设计第三阶段:设计
在这个阶段,通过前面的研究和原型测试迭代,你已经很清楚设计应该是怎么样了,接下来很简单,运用各种工具,把这个设计做出来吧!

squiggle-text

不幸的是,我们太多次都直接从第三阶段开始了。原因是多种多样的,内部的外部的。好一点的情况下,我们对自己说:用户应该喜欢这样的设计因为……,更多更坏的情况下,我们对自己说:我要这样设计因为我喜欢这样……

Damien说,好的设计团队里面有各种各样的人才,人类学家、心理学家、计算机科学家、营销专家、机械工程师、信息架构师等等。而我们平时认为的设计师(illustrator),只是完成最后一步的一个专才而已。设计应该是多学科紧密合作的(Multidisciplinary radical collaboration),这也是IDEO和Frogdesign等设计公司如此成功的重要原因。

PS: photo use for the banner is authorized.

如何处理海量tab?

回国正好赶上百度用户体验部主办的UXday活动,我们小组讨论的话题是tab(标签)在使用时的禁忌。

我们讨论的话题集中在一个点上:如何处理海量的tab?

首先回顾一下Tab的历史。这里的tab,是一类交互元素的统称,既包括在web设计中的导航,也包括在浏览器等桌面软件中的使用。被称为tab的交互元素一般有如下两个特性:

  • 同时具有动作和状态两个含义。tab之所以流行,一个原因就是因为它既方便操作,同时又能够让用户清楚地知道自己目前在哪个位置(tab)
  • 从信息架构的角度来看,tab之间的内容一般是不交叉的。并且tab之间的关系应该是平等的,没有相互隶属的关系。

所以从广义来讲,绝大多数导航菜单其实都可以归结为tab。

在网页设计中tab的使用一般认为是Amazon开了先河。相信大家很多人都读过LukeW的经典回顾文章:The History of Amazon’s Tab Navigation(中文版请猛击这里)。从这篇文章中我们可以看到,Amazon的导航从最初只有两个tab:Book和Music,演化到2000年最多的时候有两排tab。很显然,当tab数量增多的时候,tab这种交互方式遇到了一些困难。

amazon1  21_095252_131762077_47722dbf06_o

另一个例子是Word 2003中的设置对话框。如下图所示,当标签太多而显示空间有限的时候,微软不得不同样把标签排成两排。这样做的一个大问题是,上排的标签在选中的时候,如何表示选中状态和当前内容页的关系?

1229582078_ddvip_445

微软的做法是饱受诟病的。在上图中当用户点击上排标签时,上排自动和下排对调从而保持标签和内容页的紧贴关系。然而这个做法使得标签的位置非常不一致,相信很多人都有着同样的迷茫经历。

在其他一些软件中,如firefox 3(如下图),点击上排标签时,仅仅将标签显示变为选中状态,这样的好处是保持了标签位置的一致性,然而却失去了一些位置上的指示功能。

untitled-3

那么如果多排标签不是个好主意,如何处理很多的标签呢?

一个显然的思路是把标签从惯用的水平排列换到竖直排列。一般这样的排列是在视图的左侧,可能是以图标或者文字的形式。

不过这种做法存在一些问题。首先,如果标签的名字很长,将会占据很多宝贵的左侧空间,而这一空间正好是屏幕上用户注意焦点,兵家必争之地。有的网站的做法是将文字垂直摆放,这样的做法,特别对于英文网站来说,可读性简直就是灾难。如果放在右侧,有可能和滚动条相互干涉,并且用户也不容易注意到。其次,当标签不多的时候(考虑标签数目可变的情况),标签下方放什么内容也是比较头疼的。

一个思路是,如果标签之间存在着某种结构,那么可以把标签分组。然后增加一个导航级别。微软的onenote在这方面做到了登峰造极的程度,将信息分为Notebook, section, page三个层次,每个层次都用标签导航来表示,结果就是在页面的上方,左侧和右侧都布满了标签……微软功力不俗,用格式塔(左侧的分割)、色彩标记(section的彩色和page的白色)等手法把三层标签导航都处理得很好。

onenote

另一种分组的方式是直接呈现在标签上。考虑windows任务栏的默认分组方法,将同一个程序的不同窗口归为一组。或者是IE8中,将来源于同一父网站的标签用相同的颜色归为一组。

taskbar

如果标签之间存在重要程度的不同,也可以考虑显示最重要的一批标签,同时以“更多”等按钮来提供余下的标签(交互设计模式中的extra on demand模式)。如Amazon在实在不能忍受双排标签之后就这样做了(如下图)。此外,还可以根据用户目前的位置提供相关性最高的标签。

amazon2

如果标签之间不存在重要程度的区别,也不存在显然的结构呢?比如浏览器的标签?不同的浏览器有不同的做法。firefox和IE的默认做法是只显示一行标签,设定标签的最短长度,然后在两端加入向左/向右的箭头,同时还在标签栏左侧或者右侧加入显示全部标签按钮。Safari 4只在最右侧加入一个”…”的“显示全部标签”按钮。而Chrome做的比较奇怪,没有最短标签长度这一设置,也不管三七二十一将所有标签都显示在一行里面,于是当标签数目过多时就会变成如下图这个悲剧的样子。我们建议,如果只显示一行标签的时候,best practice是:在左右两侧显示滚动的箭头,并且提供以某种方式(通常是平铺或下拉菜单)显示全部标签列表的按钮,并且设定标签最短的长度。

untitled-12

总结浏览器的做法,可以看出还是以对标签栏的横向操作为主。举个手持设备的例子。facebook的iPhone App中,对于不同的feed是将其显示在一个“window”中,手指滑动可以拖动feed条在window下移动(语言很难描述清楚,看图)。另一个对标签条横向操作例子是苹果的Mac页面,在这里苹果使用了交互设计模式中的“注释滚动条”模式,将滚动条加上了标签的功能,这同时也是标签分组的使用。

untitled-4

untitled-3

总结以上讨论:

1. 在静态页面设计中,尽量避免使用多排水平标签的布置。可以使用垂直标签代替。

2. 如果标签之间存在结构,可以将标签分组。分组可以以下拉菜单,颜色分组等多种方式进行。

3. 如果标签重要性或相关性存在区别,可以显示最重要的标签,然后加入“更多”(全部)按钮。

4. 如果标签之间都是相互平等的,可以考虑对标签栏进行操作,如加入左右移动按钮,允许用户拖动/滑动等。

从爱情伙伴的分类到数字化产品的分类

The science of love, Inspired by a marvelous video by Helen Fisher, I wanna borrow this metaphor and apply that to human-computer interaction, since J. Bronowski told us: Innovation is the creation of the unity in what is diverse by the discovery of unexpected likeness.

According to her theory, there’re three types of love, and all three types are independent from each other. They are:

1. Romantic love

2. Sex drive

3. Long-term attachment

She concluded that a human being can have the same feeling at the same time to his/her lover, or have the same feeling at the same time to different lovers.

I would love to extend her theory to Human-Computer interaction by categorizing my own digital products to these three groups.

1. Long-term attachment.

Example: my desktop computer(my wife). Trust, Reliability and security-guaranteed.

hptouchsmart

2. Romantic love partner

Example: My laptop(my lover), Promotes possession, motivation and intense energy on a platonic level.

macbook_pro

3. Sexual partners.

Example: my other digital devices, Satisfy my curiosity and short-term excitement.

toys

I’m sure a through exploration and understanding of Helen’s “love”theory will inspire digital product development strategy. The different ways people expect and treat their three types of lovers, are quite similar to the ways they treat their digital products. Furthermore, as the digital products(and their softwares )evolve, they will eventually own the ability of “memory-based prediction”, and most of these digital devices will become an extension of physical human body. We all know the ability to love, is one of the fundamental abilities that God assigned to human beings, we can assume, a simulation of the loving behavior of human being(attachment, sexual, romantic), will push the digital products development into a new era.

这篇博客涉及到我最喜欢的一个话题,将人类行为的模式转化为数字产品行为模式。基于海伦费舍的科学爱情研究,我把我身边的数字产品用类比的方式也归纳为成三类,长期伴侣产品,性欲伴侣产品,和浪漫伴侣产品。我的理论是,人们对于三种不同的爱情伴侣有不同的期望值和行为模式,这些价值可以直接类比转化到数字产品开发的战略中。同时我们意识到,在数字产品的进化中, 他们变成了人们所依赖的身体的一部分(self-extension), 数字产品对于人们爱情模式的模拟可以增加人们对于数字产品的感情和个性化体验。原文的链接在

问题: 数字产品和爱情行为的关系有那些,我们可以得到怎样的启示。

迎合用户的控制欲

今天twitter上junyu发起了一个话题:

@junyu『Google似乎在告诉我,我一直认为的“软件应该提供安装路径选择”这一想法是错的。』这个想法到底是从哪里来的呢? 为什么这个想法不能是 “错” 的呢?

当然,我相信作为有经验的电脑用户,当然知道这个想法是怎么来的:减少重装的麻烦,降低系统盘的磁盘碎片,等等。这里无意讨论究竟软件应不应该安装到C盘。

两个观察是:

  1. 大多数新手用户不会选择更改安装路径。
  2. 鉴于目前windows对磁盘管理能力有所提高,以及计算机配置普遍超过日常生活需求,将软件安装在系统盘已经不会对系统performance有显著的影响。

那么如果95%的用户不修改安装路径,是不把这个选项拿掉是个好的选择呢?

第一个考虑是,需要修改安装路径的用户,往往是计算机经验比较丰富的用户,这类用户在其周围人群中往往以“电脑高手”等形象出现,在与计算机相关的话题中充当opinion leader的角色。让这些用户反感,将会把产品的负面影响扩大。学而时嘻之有一篇不错的文章讨论这个话题。

在本文中我更加关注另一个问题:Control VS Sense of Control

我们都希望对自己的生活和工作有更多的控制权,然而如果用户真正有了大量的控制权,首先他们不会去使用其中的大多数,想想office 2003里面有多少按钮是经常用到的?其次,太多的option让用户不知所措,感觉到界面太复杂,而产生畏惧感。

在绝大多数情况下用户需要的其实是Sense of Control。用户希望自己是产品的主人,而不是被产品背后的设计师带着走(虽然在绝大多数情况下被设计师带着走是比较好的选择),这种需求扎根在人的本性中,即人的自我意识。(这里有一篇很好的文章讨论这个问题,英文)
Norman大叔曾经论述过,用户虽然用不到大多数产品的功能,但是会偏爱看上去功能比较丰富的产品。某种程度上来说这实际上也反映了用户对控制欲的追求。有多少时间你用到了你电视机的全部调节功能?

Make it simple and people won’t buy. Given a choice, they will take the item that does more. Features win over simplicity, even when people realize that it is accompanied by more complexity. You do it too, I bet. Haven’t you ever compared two products side by side, comparing the features of each, preferring the one that did more? Why shame on you, you are behaving, well, behaving like a normal person.

如何提供sense of control?提供选择。如何让用户不被选择迷惑?交互设计中的Extras on Demand模式是个好选择(参见designing interaction)。比如我正在使用的wordpress 2.7,所有除了撰写博客之外的操作都可以收起。比如Google Chrome中把options分为:Basics, Minor Tweaks, Under the Hood三个级别。

回到安装路径的问题上来,我认为best practice是,采用extra on demands模式,在安装流程中不提供专门的指定路径页面,但是在另外某个必须的页面中(比如欢迎页?)提供一个到更改安装路径对话框的链接。



低效的Tag Cloud

在Martin & Mark于2007年发表的一篇论文<An Assessment of Tag Presentation Techniques>中,对用户在Tag Cloud中寻找某关键词的效率进行了研究。

在实验中,共有6种不同的关键词呈现方式中,每次随机展示10个词,被试者要求迅速找到指定的词(具体方案请看论文,此处不赘述)。实验共有62名被试者,结果如下:

呈现方式                        平均耗时
——————————————————————–
Tag Cloud(字母序)     2.94
Tag Cloud                     3.409
水平排列(字母序)       2.887
水平排列                        3.199
垂直排列(字母序)        2.892
垂直排列                        3.241

可见,Tag Cloud的检索效率低于其他方式。虽然看上去差异并不显著,可是别忘了这仅仅是从一个总量=10的列表中寻找1个词,如果我们把总量放大到100,差异定会指数级倍增。

当然,有人会争辩说Tag Cloud存在的意义不在于快速检索,而在于直观呈现大量信息的概况。但是请设想,若有兼顾二者的方案,岂不更好?事实上,一直有人在探索。请锁定懒人有才,我们将继续介绍此话题。

btw,该实验还发现了另一个有趣的数据:Tag Cloud的左上角总是最容易被关注到的位置,而正中间和右下角则分别是其所在水平行最容易被关注到的地方。

懒人有才还将继续就Tag Cloud展开讨论,剧透时间:

  1. 同时兼顾呈现方式和检索效率的牛鼻Cloud
  2. 中文Tag Cloud的悲剧
  3. (编剧还没想好..)