design for emotion and flow

为情感和流而设计Design for Emotion and Flow

作者： Trevor van Gorp

译者：小方

我们创建软件和网站的显示和代表的人的信息。这些信息可能是任

何一家公司的产品清单，您度假的照片，或从一个朋友的即时消息。在

这一刻，还有更多的信息，比历史上任何其他时间提供给您。

所有这些信息有很多积极的影响，但它也带来了挑战。“信息消耗

的是相当明显的，它消耗的受助人的关注 ...... 丰富的信息创建一个关注

贫困“（西蒙 1971 年）。当注意力成为一种稀缺资源，这是重要的投资

是明智的。信息建筑师和设计师发挥了关键作用，在确保他们设计的产

品用户提供他们关注的投资回报“。

心理学家米哈里森特米哈伊的（1990）描述为“精神能量”集中注

意力。传统意义上的能源一样，没有工作可以做，没有它，并通过工作，

能量消耗。我们大多数人都经历了心理 / 情绪状态，我们关注的所有（或

能量）完全集中的活动。森特米哈伊（1990 年）命名这种状态“流”的

基础上，与会者介绍了如何在他的研究经验。

在这种意识的状态中，人们常常会遇到激烈的浓度，再加上最高性

能的享受和感受。在什么样分钟似乎传递小时。我们倾向于在几个中断，

我们的注意力变得集中的环境中进入这些国家所面临的挑战，我们相信

我们能够与我们现有的技术处理。反馈是瞬时的，所以我们总是能够判

断如何密切，我们要完成我们的任务，并达到我们的目标。任务的重要性，

影响我们的任务将是多么困难的动机和看法。

注意力和流

We create software and websites to display and represent information to people. That information could be anything; a company’s product list, pictures of your vacation, or an instant message from a friend. At this moment, there’s more information available to you than at any other time in history.

All this information has a lot of positive effects, but it also creates challenges. “What information consumes is rather obvious; it consumes the attention of its recipients … a wealth of information creates a poverty of attention” (Simon 1971). When attention becomes a scarce resource, it’s important to invest it wisely. Information architects and designers play a critical role in ensuring the products they design provide users’ with a return on their investment of attention.

The psychologist Mihaly Csikszentmihalyi (1990) has described focused attention as “psychic energy”. Like energy in the traditional sense, no work can be done without it, and through work that energy is consumed. Most of us have experienced a mental/emotional state where all of our attention (or energy) is totally focused on an activity. Csikszentmihalyi (1990) named this state “flow,” based on how participants in his studies described the experience.

In this state of consciousness, people often experience intense concentration and feelings of enjoyment, coupled with peak performance. Hours pass by in what seems like minutes. We tend to enter these states in environments with few interruptions, where our attention becomes focused by a challenge that we’re confident we can handle with our existing skills. Feedback is instantaneous, so we can always judge how close we are to accomplishing our task and reaching our goal. The importance of the task influences our level of motivation and perceptions of how difficult the task will be.

Attention and Flow

01/11 为情感和流而设计 Design for Emotion and Flow

流动状态相关的内容可分为三个方面 ; 1、流动的原因；2、流动的

特征；3、流动的后果（Novak, Hoffman and Yung, 1999 年）。

1、流动的原因• 一个明确的目标

• 尝试成功的即时反馈，以达到这一目标

• 你相信你有能力处理的挑战

2、流动的特点• 完全的专注和集中注意力

• 某种意义上的控制之间的相互作用

• 开放的新事物

• 增加探索行为

• 增加学习

• 积极的情感

3、流动的后果• 自我意识的损失

• 对时间的感知扭曲

• 活动被视为内在奖励

作为设计师，我们专注于提前或导致流动的元素。用户访问网站与

预先存在的目标（例如，寻找产品的相关信息）。随着时间的推移，这

些目标用户完成任务，他们的注意力被吸引到其他信息上。设计师可以

控制的主要元素是：

The elements associated with the flow state can be classified into the three areas; 1. Causes of Flow 2. Characteristics of Flow 3. Consequences of Flow (Novak, Hoffman and Yung, 1999).

1. Causes of Flow• A clear goal• Immediate feedback on the success of attempts to reach that goal• A challenge you’re confident you have the skills to handle

2. Characteristics of Flow• Total concentration and focused attention• A sense of control over interactions• Openness to new things• Increased exploratory behavior• Increased learning• Positive feelings

3. Consequences of Flow• Loss of consciousness of self• Distortions in the perception of time• Activity is perceived as intrinsically rewarding

As designers, we focus on the elements that precede or cause flow. Users visit sites with pre-existing goals (e.g., finding information about a product). These goals evolve over time as users complete tasks and their attention is drawn to other information. The main elements designers can control are:


• 提供即时的反馈

• 平衡困难认知和用户能力

设计流

为了设计流，你不需要上门课程或者学习新的软件。实际上 , 你已

经在做了。通过考虑每一步交互的用户期望结果从而移除那些分散用户

注意力且不利于完成期望结果的一切因素。

移除一些干扰和有可能的阻碍 , 对自然和的交互的产品来说 , 这意味

着要移去一切会引起用户情感反应的 ( 比如沮丧和身体不适、情感需求和

分散注意力 ) 不论是外部的 ( 比如环境 ) 还是内部的 ( 焦虑、痛苦等 ) 分

心事物。对用户的所有行为提供即时的反馈以减少用户的焦虑。页面布局、

信息设计、排版、交互设计和信息架构的有效运用都有助于平衡用户的

困难感知与能力水平。信息应该被细分为不会淹没用户认知体系的块。

当谈到用户的困难认知，这样去考虑：太少技巧遇到太大困难会引

起焦虑 ; 太多技巧遇到太少困难会感觉无聊。

流发生在无聊和焦虑之间 , 把它想象成二者间的河流 ( 图一 )。

• Providing immediate feedback• Balancing the perception of challenge against users’ skills

Designing for Flow

You don’t need to take a course or learn a new software package to design for flow. In fact, you’re probably already doing it. Begin by considering the desired outcome of every interaction and then removing everything that distracts the user from accomplishing that outcome.

Start by removing distractions or impediments wherever possible. For both physical and interactive products, this means reducing or eliminating both external (i.e., environmental) and internal (i.e., pain, discomfort, anxiety) distractions that cause emotional responses like frustration or physical discomfort. Emotions demand and divert the user’s attention. Providing immediate feedback for all user actions helps to reduce user anxiety. The effective use of layout, information design, typography, interaction design and information architecture all help in balancing the perception of challenge against the user’s skill level. Information should be broken down into manageable “chunks” that don’t overwhelm users cognitive faculties.

When it comes to balancing the users’ perception of challenge, think of it this way: too much challenge with too little skill causes anxiety; and too little challenge with too much skill causes boredom.

Flow occurs at the boundary between boredom and anxiety. Think of it as a channel that runs between anxiety and boredom.(Figure 1).


随着面对的挑战的增加 , 我们的焦虑逐渐增加并且偏离了流，重新

回到流涉及到掌握更多的技巧以应对那些挑战 , 并减少我们的焦虑 ; 当我

们的技术水平增强，我们会觉得无聊 , 除非我们寻找更大的挑战以匹配我

们的能力技巧。

要明白理解我们如何减少分心 , 让我们再回过头来看一下各个因素

是如何应用到用户体验当中去的。流的起因对网站和应用设计有着最大

的影响。

流的概念

1. 明确的目标

As the challenges we face increase, we become more anxious and lose flow. Re-entering flow involves increasing our skills to match these challenges and reduce anxiety. As we increase our skill level, we become bored unless we increase the challenge to match our greater abilities.

To understand how we can reduce distractions, let’s examine the different elements of flow again to see how each can be applied to user experience. The causes of flow have the most implications for website and application design.

Causes of Flow

1. A clear goal…


图 1 ：焦虑，无聊和流（ csikszentmihalyi ， 1990 年）(captions added

van Gorp, 2006 年 )

Figure 1: Anxiety, Boredom and Flow (Csikszentmihalyi, 1990)(captions added van Gorp, 2006)

用户要完成一个任务 , 比如寻找某些特定主题的信息或者娱乐冲浪。

这是一个动态演变的目标 , 依赖于提供给用户的选项和合理的信息体系结

构，直观的导航，有效的路径和明确的操作选项 ( 比如信息线索导向、面

包屑导航、某种含义的标签、清楚的网页标题 ) 的辅助。

2. 达到目标过程中成功尝试的即时反馈

以视觉转化和来自链接、按钮、菜单和其他导航的声音来给用户及

时的可感知的反馈。

3. 向用户展现：这个困难挑战你能应付处理

行动的机会是与用户的能力平衡的 , 在一个较低的水平 , 这是通过提

供完整的页面和消除不必要的信息来减轻用户的认知负载 ; 随着用户能力

的不断增加 , 交互的复杂程度也要随着增加 , 适应性的交互技术允许用户

调整控制交互的复杂程度来满足他们不断增强的能力水平。

流和情感

流的发生往往在用户的能力和面对的挑战水平比较高的阶段 , 如果

挑战太低 , 而用户水平太高 , 那样用户就不会有动力去做任何事情。这种

程度的刺激或“激励”在人体内是生理（即身体）方面的情感。激励的

程度会影响我们对特定情感的强烈程度的感知 , 还有情感对注意力需求的

强烈程度。在进化阶段 , 很容易看出其中原由 : 你的祖先对捕食者关注越

The user navigates to accomplish a task, l ike seeking information on a particular topic or surfing for fun. This is an evolving goal, dependent on the options presented to the user and aided by logical information architecture, intuitive navigation, effective wayfinding and clear options for proceeding like information scent, breadcrumbs, meaningful labels, clear page titles, etc.

2. With immediate feedback on the success of attempts to reach that goal…

The user receives quick, sensory feedback in the form of a visual shift and/or sound from links, buttons, menus, or other navigation items.

3. Presented as a challenge that you have the skills to handle.

The opportunities for action are balanced with the user’s ability. At a basic level, this is accomplished by providing an uncluttered interface and eliminating unnecessary information to limit the user’s cognitive load. As the users’ skill increases over time, the interface can increase its complexity as well. Adaptive interface technologies allow the user to adjust the complexity of the interface to meet their enhanced skills.

Flow and Emotion

Flow tends to occur in situations with higher levels of challenge and skill. If the challenge is too easy, or user skill levels are very high, anxiety can be so low that there is little motivation to do anything. This level of activation or “arousal” in the body is the


多 , 越有可能活下来繁衍子孙 , 把自己的基因代代相传。

愉快和不愉快的产品和体验都能够增加刺激程度 , 沮丧和兴奋都可

以 , 所以要用大的图像 , 亮丽的颜色和高对比度 , 所以加大图像尺寸和把

其中内容尽可能的排列紧密能够加强刺激。

平衡刺激的关键在于使认知挑战与用户的能力水平相统一 , 用户的

能力水平随着任务的发展和不同而有所不同 , 应该提供简单友好的界面但

应该提供给那些专家级用户适合他们能力水平的更困难的挑战。这些挑

战可以是视觉上的和内容方面的交互。简单来说，一个网站的一切 , 包括

内容、信息架构、交互设计和视觉设计都能对流有所帮助。

目标导向 VS 经验性使用

使用一个网站不同的动机应该采用不同的设计以方便流 , 新用户往

06/11为情感和流而设计 Design for Emotion and Flow

physiological (i.e., bodily) dimension of emotion. The level of arousal affects how intensely we experience a given emotion, and intense emotions demand our attention. In evolutionary terms, it’s easy to see why; the more attention your ancestors paid to predators, the more likely they were to survive and reproduce, passing their genes on to their descendants, people like you and me.

Both pleasant and unpleasant objects and experiences can increase arousal levels. Frustration and the excitement both increase arousal levels. So do large images, bright colors, and high contrast (van Gorp, 2006). For example, increasing the size of an image and moving anyone in it closer within the frame increase arousal levels.

The key to balancing arousal is to match the perceived challenge to the users’ skill level. Since skill levels differ from one user to the next based on their previous experiences and the type of task, interfaces should be very user-friendly but also allow more advanced users to find challenges appropriate for their skill level. These challenges can include the visual aspects as well as the content (King 2003). To put it simply, everything about a site, including content, information architecture, interaction design, and visual design can contribute to flow.

Goal-directed vs. Experiential Use

Different motivations for using a website require different

Figure 2: Interpersonal Distance and ArousalHow does looking at the picture on the right make you feel compared to the one on the left?

图 2 ：人际距离和激励

左右相比 , 给你的感觉有何不同 ?


往以比较娱乐的方式看待网络 , 而有经验的用户往往比较现实。这导致了

目标导向和经验性使用的差别。流经常发生在目标导向过程中 , 因为有更

高的挑战存在。

新用户 - 经验性使用• 更少的挑战

• 更多的发现探索

• 娱乐导向

有经验用户 - 倾向于目标导向• 更多的挑战

• 更少的探索发现

• 与任务紧密相连 ( 搜索、工作、购物 )

designs to facilitate flow(Novak, Hoffman and Yung 1996). Novice users tend to see the Internet in a playful way, while more experienced users tend to view the Internet in a more utilitarian way (King 2003). This leads to a distinction between experiential and goal-directed use. Flow tends to occur more often during goal-directed use, because of the higher challenge involved.

Novice Users – Experiential use

• Less challenging• More exploratory• Entertainment-oriented

Experienced Users – tendency towards Goal-directed use

• More challenging• Less exploratory• Connected with tasks (e.g. research, work and shopping)


Figure 3: Disturbia film siteAn example of a visually rich, entertainment-oriented site with little or no challenge involved.

图 3 ： disturbia 电影网站

一个例子，一个视觉丰富，娱乐为主的网站很少或根本没有涉及的挑战。

较低等级的挑战是在一个娱乐为导向的网站 , 用户使用过程中伴随

着的是较低程度的焦虑 , 较少忧虑的用户适合于以创造性的思维来决定如

何浏览网站和忽视小的问题。这里的动力是通过视觉元素 , 亮丽的颜色和

高对比度所带来的潜意识所驱动。经验性使用的网站应该使用更多的视

觉元素来吸引更多的注意力从而达到流的体验。

The lower level of challenge in an entertainment-oriented, experiential site means there is a lower level of anxiety connected with its use. Someone who is less anxious is more capable of using creative thought to determine how to navigate a website and overlook minor problems. Motivation here is driven by subconscious arousal triggered by interesting visual elements, bright colors or high contrast. Experiential sites can and should be more arousing visually to demand the greater attention that can lead to flow experiences.

Figure 4: Yahoo图 4 ：雅虎


When tasks are particularly unpleasant, we often lack the motivation necessary to complete them. In these cases, increasing the arousal level through the use of narrative can increase the user’s motivation. The Tango Tax website uses visual elements that resemble those found in movie posters and has a high contrast, cinematic feel that increases arousal. The software also introduces the classic cinematic narrative element of “us vs. them” to help increase user motivation.

当任务特别的不愉快 , 我们通常很难有足够的动力去完成它 , 这个时

候 , 通过故事性的描述通常能提高激励水平。探戈税务网站使用类似于电

影海报的高对比度的故事性视觉元素来增加激励。软件也经常用故事性

元素 " 我们 VS 他们 " 来增加激励。

完成任务的难度越大越会给用用户更多的激励 , 焦虑会让用户遭遇

困难时更少的去创造性的思考。一个产品如果在一个压力环境下使用 , 比

如医院的手术室 , 可用性就变的至关重要。所有的相关信息应该唾手可得

而且所有的反馈都应该是即时的和明确的。一个目标导向的网站应该使

用更少的视觉元素 , 用户已经焦虑的考虑是否能完成任务 , 不会被这些视

觉元素所淹没。

The greater challenge of completing tasks (possibly under deadlines) on a goal-directed site creates more higher arousal. Anxiety makes users less able to think creatively when problems are encountered. If a product will be used in a stressful environment, like a hospital operating room, usability becomes crucial. All relevant information needs to be close at hand and visible and feedback should be clear and immediate. A goal-directed site can and should be less visually rich so that users, already anxious at the prospect of a challenging task, are not overwhelmed.

Figure 5: Tango Tax website

图 5 ：探戈税务网站

Conclusions – Traits of Websites that Encourage Flow

How you apply these ideas depends on your target audience, as well as their internal and external use contexts. Consider the likely emotional state of your users. Are there loud noises, crowds, brightly colored objects or other distractions in the user’s environment?

Here are some basic website traits that will help to encourage flow.

• Clear navigation: Make it easy for the user to know where they are, where they can go, and where they’ve been, by including signposts such as breadcrumbs, effective page titles, and visited link indicators.

• Immediate Feedback: Make sure all navigation, such as links, buttons, and menus provide quick and effective feedback. Offer feedback for all user actions. When this isn’t possible, provide an indicator to hold the user’s attention while waiting (e.g., progress bar).

• Balance the Perception of Challenge With the User’s Skill: Since user skill levels differ, it’s up to you to balance the complexity of the visual design with the number of tasks and features people can use. Consider whether they are likely surfing experientially for fun or completing an important task. Tailor your sites to your audience’s scenario of use: more visually rich for experiential use and less so for goal-directed use.

Adaptable interfaces that allow the user to increase or decrease the perceived challenge by choosing how much detail is displayed. Simplicity helps reduce anxiety for both novices and experts, which is especially crucial in highly stressful situations. Options for information-rich displays can introduce challenge for more experienced users.

结论 - 促进流的网站特征

如何应用这些想法取决于你的目标受众 , 包括他们的内在和外在的

使用背景 ; 考虑你的用户的可能的情感状态 , 用户环境周围是否有噪音 ,

人群 , 明亮颜色的物体去分散她的注意力 ?

下面是一些促进流的网站的特征 :

• 清晰的导航 : 让用户很轻松的知道她现在在哪 , 去过哪 , 可以去哪 , 通

过使用路牌标志比如 : 面包屑 , 页面标题 , 点击过的链接提示。

• 即时的反馈信息 : 确保所有导航 , 比如链接 , 按钮 , 菜单等提供清晰有

效即时的反馈。对用户的所有行为提供反馈 , 当这一点不能实现时 , 提

供其他的暗示来吸引住用户的注意力 ( 比如进度条 )。

• 平衡用户面对的困难和自身能力 : 由于用户能力水平不同 , 所以平衡视

觉设计的复杂性和用户完成任务的数目和使用的特征功能就取决于你 ,

考虑他们是要经验性的娱乐使用还是要完成重要的任务 , 根据不同的用

户使用场景度身设计你的网站 : 更多的视觉因素给娱乐性经验使用 , 更

少的给目标导向的使用。

适应性强的交互界面允许用户选择展示的细节的多少来增减感知困

难 , 简单化对新用户和老用户来说都可以减少忧虑 , 这一点在高度紧张的

环境中至关重要。对老用户来说提供丰富信息化的展示可以降低困难。

记住 , 设计流并不需要专门的软件或者技能 , 只是另外一种思维方式 , 在

设计和挑战之间找到合适的平衡点能够让用户集中注意力并制造流 , 这将

可以创造投入和沉浸的用户体验。


Whether you’re an information architect, interaction designer or visual designer, your work should compel users to invest their attention, and then provide them with a return on that investment.Remember, designing for flow doesn’t require a new set of tools or skills – only a different way of thinking. Finding the right balance of design and challenge can help focus attention and create flow, which results in immersive and engaging user experiences.

不管你是一个信息架构师 , 交互设计师或视觉设计师 , 你的工作应该

让用户投入他们的注意力 , 然后给他们提供一个好的投资回报率。记住 ,

设计流不需要一套新的工具和技能 , 只有一种不同的思维方式。找到正确

平衡设计和挑战的方法 , 就可以帮助集中注重力 , 创造流 , 这会形成一个

引人入胜的用户体验。


design for emotion and flow

Education