OM19's Time

情绪板(Mood Board)，意为情绪收集板，是指对要设计的产品以及相关主题方向的色彩，图片，影像或其他材料的收集，从而引起某些情绪反应，以此作为设计方向或者是形式的参考。我们可以利用情感板去定义颜色和风格，作为设计过程中沟通设计目的的方法。(http://www.imafu.com/content.php?id=88)

更多的关于情绪板，我们可以参考这篇文章，上面对情绪板做了一个比较详细说明还包括一个工作坊。

制作一个情绪板的步骤一般包括：

1. 我们要为设计的网站、产品设置一组关键词。 
2. 叫上你的同事，PD、Boss等人，让他们收集杂志里的认为能够描述关键词的图片。
3. 将符合关键词要求的图片从杂志或相片中剪下来，然后把剪下的照片贴在一起到一张展板上。
4. 从整理下来贴在展板上的图片中归纳颜色。

大家可以看到传统的情绪板制作耗费比较多的时间，事实上，剪纸、粘帖、归纳颜色等过程不但耗费了许多时间，而且还要花时间寻找素材。我这里，总结了一个无纸化的敏捷型情绪板制作。(中间使用的所有软件、网站全部免费哦~)

在第二个步骤，我们可以让相关人员在网络上较大的图片提供商网站上根据关键字进行图片搜索。这样做既简单，又快捷。例如我们要做一个有关机票和酒店的网站。那么，我归纳了三个关键词：airport，travel，hotel 。登录www.shutterstock.com 按这几个关键词搜索图片。找到相关合适的图片之后，我们就把它们下载到同一个目录上。(直接在浏览器上另存为图片就好，忘掉图片上的水纹印吧，那并不影响我们接下来的操作^_^。)

第三步，拼贴。我们直接使用Google的Picasa3的照片拼贴功能。在Picasa上选择刚才下载的图片之后，点击右下角的Collage(拼贴)。在”拼贴“模式下，左边的Settings(设置)里，拼贴方式选择Grid(网格)；Page Format(页面格式)选择Current Display(当前显示)，点击Create Collage(创建拼贴)，我们的情绪板就这么做好啦！

接下来，别忘了我们还要分析归纳情绪板的颜色呢。这里，我推荐使用Adobe的在线配色工具，Kuler。登录 kuler.adobe.com ，注册登录后，在左边的导航栏选择Create(创建) -> From an Image(从图片)，然后上传你刚刚在Picasa里拼贴的图，很快，Kuler就自动归纳出了我们的情绪板中的颜色。(额外的好消息，Photoshop CS4还支持直接从Kuler中获取色盘。)

好啦，自此为止，情绪板的工作就结束啦！你的Boss、PD现在没法不喜欢这套颜色了。继续接下来的设计吧！

欢迎转载，转载请注明出处。

我们使用软件，我们使用网站，这一切的活动事实上都是在围绕着一个东西：信息。扩展开来，我们的一切活动都是在围绕着信息做交互。所有的这些信息都能产生 一些影响，但同时也带来的挑战。Simon如是说：“What information consumes is rather obvious; it consumes the attention of its recipients … a wealth of information creates a poverty of attention (信息消耗是显而易见的；它消耗了受众的注意力……富载的信息导致了注意力的贫乏。)” 这不禁让我想到不知谁发明的眼球经济(也就是注意力经济Attention Economy)。眼球经济是依靠吸引公众注意力获取经济收益的一种经济活动，在现代强大的媒 体社会的推波助澜之下，眼球经济比以往任何一个时候都要活跃。电视需要眼球，只有收视率才能保证电视台的经济利益；杂志需要眼球，只有发行量才是杂志社的 经济命根；网站更需要眼球，只有点击率才是网站价值的集中体现。从这个方面来讲，我们应当把注意力当作是一种资源来看待：因为它能够被消耗，它能够创造价 值。当我们花了时间看了广告的时候，当我们看了“香车美女”的照片的时候，当我们瞟过网站上漂浮的“美腿丝袜”的时候，我们一直在消耗注意力，并同时为资 本家创造着价值。当注意力成为了一种稀缺资源后，我们也该认真地对待它，善用它。这也是我们信息架构师和交互设计师的责任。
心 理学家齐客森米哈里(Mihaly Csikszentmihalyi)将这种关注的注意力称为“精神能量 psychic energy”。就像我们日常生活中的能量一样，没有能量就没法工作，每次工作就会消耗能量。我们都应该有过这样的体验：有段时间，我们会全身心地投入到 某种事情中，将我们的集中注意力完全集中在这件事情上，所谓的废寝忘食。齐客森米哈里把这个状态称为“心流 flow”。心流是：忘我、忘记时间、忘记其他所有不相关的东西，完全沉静在某项事物或情境中。就像是自己极端的专注于做某件喜欢做的事，完全没有因为迷 惑、重复、繁杂的任务而引起的烦躁或无聊。关于心流的更多内容，例如心流的状态，心流的产生条件等在Jim Ramsey的Design for Flow 、JunChen的心流理论和设计 和Wikipedia 上都有详细的说明。我这里就不多转载了，不过建议大家可以先阅读JunChen的心流理论和设计。

为心流而设计

我们并不需要去学习专门的课程或者使用新的软件来为心流而设计。事实上你也许已经踏上了为心流而设计的道路。开始心流设计之路就是去考虑每一步交互之后预期的结果然后去掉那些影响用户达到这个预期结果的所有东西，亦，提高信噪比。

从 剔除分散注意力和阻碍交互的元素开始。无论是现实的产品还是互动产品，这都需要我们减少或者消灭造成类似心理上的沮丧或者是生理上的不适这样的情感反馈的 元素。这些改消灭的元素分为外在的，如环境因素等；内在的，如痛苦、不适、焦虑等等两方面。情感是需要用户集中他们的注意力才能加深体会的。为所有用户行 为提供即时反馈能够减少用户的焦虑感。有效地使用布局、信息设计、排版、交互设计和信息架构可以平衡挑战感和用户的技能等级。

这里我们需要介绍“挑战感”和“技能等级”两个要点。挑战感指的是某个交互行为下，目标对自身产生的挑战难易度的感知。技能等级描述的是我们在进行交互过程的自身技能水平。我们来看下面这张关于心流的图:

这 张图相对于上图来说是个理想化的图示。左上角区域是焦虑，右下角区域是无聊。我们在图中可以看出随着我们面对的挑战越来越难，我们会越来越感觉到焦虑并且 失去心流(红色点)。这时，如果我们增加我们自身的合适于挑战感的技能水平，我们就会重新进入心流状态。同样的，我们如果增加我们的技能水平却获得不了更 高的挑战感，那么我们就会感到无聊(紫色点)。

为了更好地将心流理论应用到我们的实践中去，我在这里根据心流产生的原因来一一阐述。

1. 清晰的目标
   首 先，我们要理清我们设计的流程，将我们的逻辑信息构架、导航、搜索路径尽可能清晰地展示给用户。尽量的让每一个页面只完成一个目标，且清晰。减少选择，让 用户能够很快地做决策。强大的网站应该是像在一个高档的餐厅，客户用餐，除了体验到美食，也同时体验到了优质的服务。可惜，现在的大多数网站都像是在做自 助餐，在你面前摆上无数种选择，认为这是在尊重用户意

原文链接：http://www.smashingmagazine.com/2008/02/07/shopping-carts-gallery-examples-and-good-practices/

原文作者：SmashingMagazine

翻译：om19 (www.om19.cn)

欢迎转载，转载请注明出处。

原文链接：http://www.uie.com/articles/user_expectations/

原文作者：Jared M. Spool

翻译：om19 (www.om19.cn)

欢迎转载，转载请注明出处。

最近，有一个设计师问我们说用户期望在页面的哪儿找到登录区域呢。有的站点把它放在左边，有的却放在右边。我们是不是有什么研究能够表明放在这儿比放在哪儿更好呢？

这样的问题拉出了一个更大的问题：为用户的期望而设计。一方面来说，用户，无论是新生儿还是新手，都会对某件事物理应出现的地方产生期望。为这种期望而设计将会减少用户的认知负担，并且能够让他们能够将注意力集中在他们的任务上。从另一方面来说，并不是所有的业界标准都是设计的最佳之道。设计师能够正确地摆脱前人的束缚，才会出现更好的替代方案。甚至有时，那将是现有标准的一种“进步”。因此，有个两头论：我们应该为用户的期望而设计还是给他们一个新的体验？——这种新的体验也许会更好但会违背用户的期望。登录区域的问题对我们来说是个不错的案例来探索如何解决这个两头论。我们可以利用视觉设计和交互设计作为导向来帮助我们解决这个问题。

到底、究竟该放在哪里

在 最近的包括了经常浏览的用户的研究中，我们有机会看到第一手关于当登录功能被放置在页面的不同地方时，登录功能将如何见效的资料。登录放在哪儿并没有一贯 的原则。例如，hertz.com把他们的登录放在左边栏的中间；Marriott.com放在页面的中央；USAriways.com把用户名和密码输 入框横跨在页面的最顶端。

虽 然没有太多的一贯的原则，但是他们都确实使用了登录表单——一个用户名或者email输入框，加上一个密码输入框——或者只是用了一个叫做“登录”的链 接，这个链接带领用户到第二个登录界面。Orbitz.com的页面上方就有一个这样的链接，Avis.com把他们的链接放在了页面的中 间，Westin.com将链接放在了左上方。

观察用户我们得出，无论是位置还是样式(表单或者链接)都没有明显的区别。这些位置和样式都很好地完成了功能——想登录的用户可以没有挫败，不会出错地开始登录。这最设计师来说是个好消息。这个结论给予了他们在设计上的很大的灵活性。

到底、究竟该如何表现

虽然放在哪儿并不重要，但是我们确实发现了视觉表现的重要性。貌似很明显地，如果登录区域或者链接在页面上难以看见，那么用户会遇到麻烦的。

在 最近的对电影租赁网站的UI部门经理Bill Scott的采访中，他承认了我们的这个发现。他讲述了一个故事：由于“登录”链接太小，被混乱在设计之中，因而Netflix的用户到了网站的新页面上 却找不到“登录”链接。当他们对颜色、大小和表现做了一些微小的改动后，他们发现，问题基本消失了。

使用视觉设计上的一些最优方法可以帮助团队保证在他们的用户需要登录功能的时候找到它。对登录使用一些视觉上的变化可以让那些寻找登录的人很容易在页面中发现它。

双输入框模式

根据我们对用户的观察，貌似他们首先会去寻找两个等大的文字输入框。他们的眼睛会先会先扫描页面(常常伴随着鼠标移动)寻找两个输入框。

网站上的一般包含在一个不同的背景和边框里的两个输入框，可以很快的抓住用户的注意。他们应该会在第一个框内输入用户名，在第二个框内输入密码。

这样的模式十分根深蒂固以至于影响了本不该是登录框的模式。在Etrade.com上，一个在线贸易行业银行业务的网站，他们设计了两对双输入框。第一对是标准的登录区域，但是更突出的另一对是股票报价和站内搜索功能。

由于用户对这种的模式的强烈的反应，常常见到用户将自己的用户名和密码输到股票和搜索的地方，完全忽视了正确的登录表单。由此可见，设计师在放置一堆文字输入框的时候应当注意用户是否会把它们误认为登录框。

登录链接模式

如果用户没有看到两个输入框，那么他们会开始扫描寻找一个叫做登录的链接。(我们还未发现有人用按钮来表示它。其实按钮也是一种选择。但是，我们怀疑如果按钮没有恰当地表现，那么这可能会照成认知上的不一致。)

在我们的研究中，有一个模式很可行。这个模式就是：一旦登录，就把登录链接更换成用户名、id、或是email地址，接着后边放上一个退出的链接。用户表现出他们理解了这个语义，这使他们安心地知道了系统已经确认了他们的帐号信息。

和两个输入框模式一样，登录链接需要在视觉上做得明显并且能够与在页面上的许多其他的链接区分开来。聪明的视觉设计师可以轻易地将“登录”做得明显而又不影响页面的美观。

什么时候让用户登录？

我们不但发现用户的期望仿佛不能决定页面上登录信息应该出现的地方，我们同时还注意到当登录应该出现的时候，用户有很强的期望它能够出现。交互流程的设计在我们研究的站点中有很明显的影响。

在Hertz.com上，首页向浏览者同时展示了登录区域和租赁详情区域。我们许多浏览者来网站时对航班信息记忆犹新。他们可能先开始输入航班信息，然后点击按钮开始选车并进入查看支付信息的步骤。

不 幸的是，这种方法并不能让用户很好享受保存着他们的车参数和支付信息的Hertz一等俱乐部的会员资格。一旦进入了第二个步骤，他们必须返回首页，重新登 录，然后再次输入到达航班和离开航班的数据。在我们研究的时候，他们一旦开始了这个流程，就没办法能够做到不用放弃并重新开始就能预订。(注：Hertz 随后变更了他们的设计。这个问题不再重现。)

在Marriott.com上