Designing the Democratic

The role of the information architect (IA), interaction designer, or user experience (UX) designer is to help create architecture and interactions which will impact the user in constructive, meaningful ways. Sometimes the design choices are strategic and affect a broad interaction environment; other times they may be tactical and detailed, affecting few. But sometimes the design choices we make are not good enough for the users we’re trying to reach. Often a sense of democratic responsibility is missing in the artifacts and experiences which result from our designs and decisions.

Noted scholar on democracy James Banks simplifies its definition: democracy means rule by the people.1 Philosopher and pragmatist John Dewey, however, interprets democracy more deeply as a way of living together as well as a kind of government.2 A “way of living together,” in our evolving globalization, means one or more different cultures in contact and interacting. Though this interaction across and between cultures has always existed to a greater or lesser degree, technology enables a historically unequaled degree of such interaction.

Whether it’s clearly recognized cultures interacting (i.e., the business practices between an Australian firm and a Chinese corporation), or less obvious subcultures interacting with a dominant culture (yuppies, castes, etc.), every member is entitled to democratic representation within the user experience. This means acknowledgement of, respect for, and empowerment regarding cultural dynamics of those for whom we design. Users may be of diverse cultures categorized by social class, gender, sexual orientation, religion, ethnic identity, age, racial group, industry, language, ableness, political power and control, and technological capability to name a few.  

I’d like to discuss several elements of democratic responsibility we might have some control over, touching briefly on potentially deeper implications for the design decisions we make. It’s folly to try to establish a canon of best practices in this regard because each of us is informed by a unique roster of experiences—personal, professional, and cultural—when making decisions that influence the user experience. Instead, I am suggesting that we get in the habit of reflecting on our decisions with special attention to the degree to which we are meeting our democratic responsibility.

One-way Design

The most common type of user experience occurs when a user interacts with artifacts in an onscreen ecosystem authored by someone else. Online shopping, music downloads, and rich internet applications are easy examples.

For this type of user experience, generally speaking, designing toward a democratic responsibility is under the control of the design and development team. They are in charge of the content, language and tone, visuals and layout, database management, and all the other aspects of making an end product. Whatever this team comes up with is what the user experiences. So, in addition to the regular tenets of information architecture and design we practice, careful thought about the cultural dynamics of the users is another necessary level of responsibility.

One thing we can do, particularly during the early stages of the design and development cycle, is to recognize the influence of our own culture on our methods, standards, practices, and expectations. Because  a great deal of the computer technology used today was standardized by American and Western European cultures, those of us from those cultures may take for granted many things that make their way into the onscreen ecosystem: feedback style, metaphors, icons, business processes, decision-making, the semantics of buttons or functions, problem solving, aesthetics, image use, etc. Hegemony of these dominant features within most aspects of the technology potentially leads to ineffectiveness ranging from confusion to offense in members of other cultures. To put it in IA-speak, the right information stops getting to the right people at the right time.

By being aware of our own cultural proclivities, we can reflect on our influences and how they may be at odds with those of other cultures. Then we can architect a more democratically responsible user experience. To not do this, particularly for cultures dominant in computing technology, becomes a form of technological imperialism where some users “remain at the mercy of other people’s decisions.”3 Some even consider this a sort of ethical imperialism based on one’s culture dictating what is “good” and “bad” and what “ought to be good.”4 For example, the presence or absence of certain navigation elements on an e-commerce site may inadvertently validate participation by one demographic while disregarding the needs of another. It’s imperialism with modern resources, imperialism in the form of business practices and popular culture imposed on those with less power.5

This has more serious implications as emerging countries struggle to participate in the global marketplace. For example, bandwidth-heavy interactions defeat the helpful intentions between the United States and Kenya as the US tries to share information with medical institutions there.6 What message is this sending to Kenyans and how does it affect their experience? What can IAs and designers do to maintain the integrity of the interaction and content while at the same time accommodating Kenya’s infrastructure?

Representing multiple cultures in an online environment is a challenge, and doing it poorly risks the participation by one or more groups. At best, you might lose them; at worst, you could marginalize or alienate them. For example, the wording of a survey or a form may perpetuate stereotypes, unintentionally convey an agenda, or reinforce control of one group over another. Or persuasion links may impact interaction patterns by other-culture users in unexpected ways, resulting in incomplete communication or lost revenue. For example, because of cultural influences on their mental modeling or on the perceived value of using technology, members of a given group may not understand the organization of a taxonomy you’ve instituted; it can be tricky to establish paths or processes so that users from differing societies can get to crucial features or pages.

Interaction patterns and hierarchy in rich internet applications may be another trouble spot. Because usage patterns, priorities, and functions differ from culture to culture, naturally these differences would need to be reflected or acknowledged onscreen. Users in some cultures may not yet understand the newer interface metaphors of sliders, accordion panels, and other manipulatives. Or they may need to control and organize information in ways that are meaningful to them but have not been considered by the designers and developers. For example, some cultures think contextually, others in a linear fashion. For the IA in this case, integrating a task list function and a calendar suddenly requires deeper cultural consideration.

There will always be instances when there is no choice but to make a design decision which favors one culture over another. But we must make the effort to reflect on the implications of our choices in the hope of coming up with a solution that will result in a positive user experience. How will design decisions affect the function or the business goal for other cultures? How will they affect the meaning of the experience for targeted users?

A good illustration, based more on experience design than IA, is modern coffee makers which may alienate an older demographic (subculture). These devices are often confounding because they rely on assumed knowledge of digital programming and a button-click interaction. How does it feel when you want coffee and have no choice but to interact with a device you don’t understand? Instead of feeling empowered or respected, you’re more likely to feel discounted and helpless. It should be a simple task—running hot water over ground coffee beans—but instead it becomes complex and defeating for that group of users.

Social Media

The need for another kind of democratic responsibility emerges as the use of technology evolves. Social media, commonly labeled Web 2.0, is a stage for users to both obtain and supply content for the interaction or technology space. Examples of such collaboration and information sharing include wikis, social networking sites, folksonomies, and shared databases. How can the characteristics of social networking and Web 2.0 bolster democracy? How can they hinder it?

Nielsen says that online networks that rely on users to contribute content suffer from a participation inequality—most users don’t participate very much.7 They use the site in a traditional “one-way” fashion. Based on statistics which mirror Zipf’s law,8 he has developed a rule he calls the 90-9-1 rule:

  • 90% of users read or observe, but don’t contribute
  • 9% of users contribute from time to time
  • 1% of users participate a lot and account for most contributions

For example, Wikipedia sometimes draws heat because a relative few are contributing a relative majority of the work. (For Wikipedia, the stats suggest that 1% of the users author 50% of the content.)

For as much as social media sites put power in the hands of the people, or crowdsourcing, it can mean an opportunity for revisionist interpretations of history, people, accomplishments, etc. Or, less diabolically, if only certain groups of people contribute, they “out-voice” others and the content becomes unintentionally biased. Users from a technologically emerging nation, for instance, may be at a particular disadvantage because they do not understand the benefits of social networking or how to effectively contribute. Or because of social mores they may not feel comfortable making contributions which become public. As a result, for example, information about one’s own country might be contributed by a foreign visitor who doesn’t have the insight of a native.

Another aspect of social media is the visual elements within a participatory ecosystem. The graphics and visualizations themselves become artifacts with social appeal, impacting the subsequent direction of participation.9 These visualizations might support personal or group identities (encouraging robust participation), they might be relatively neutral, or they might marginalize or ostracize certain people or groups (i.e., the visuals may be defamatory, perhaps inaccurate or manipulative, or they may not be understood by certain groups).

In all cases, social media begs for democratic responsibility from those who are given power to influence that technological environment. As a solution, Chris Wilson suggests we move from “wisdom of the crowds” to “wisdom of the chaperones.”10 This means practicing stewardship and offering principles to guide those contributing to social media. Again, there is no set of rules for accomplishing this. Each social media space is unique in context and requires its own examination to establish a democratic responsibility. In fact, it may be up to us to recommend that a social media setting is not appropriate. Perhaps cultural aspects of the user base mean that some things are better placed in a one-way ecosystem instead of in a participatory setting.

Reflection

As IAs and UX designers, it’s important to convey the meaningfulness and relevance of democratic responsibility to other cultures or those in developing countries. Sometimes it may seem like we are making more work for ourselves or working to a low common denominator (like the connection to the Kenyan medical institutions). But by demonstrating these qualities with the technology, we encourage an evolving participation which ultimately raises standards. Or the result may be ambassadorial efforts which further the mutuality between two or more culturally diverse populations—a responsiveness which is necessary for healthy globalization. Perhaps the onus is on the more technologically advanced societies to model this democratic responsibility so technologically emerging cultures will more easily understand the value of it as they grow.

Marshall McLuhan’s idea of the Global Village involves the profound impact of information technology on the development of complex relationships within and between cultures. But in order to understand another culture, we must understand our own. In our respective disciplines, we make design decisions based on context, so it’s not hard to see how we can make democratically responsible design decisions relative to the contextual understanding of culture.

The habit of reflecting on the choices and recommendations we make is a big step in the right direction. Designing requires a balance of reason and intuition, an impetus to act, and an ability to reflect on actions taken.11 It is reflection we undertake conscientiously that makes us good IAs, good designers…and good citizens.

References

[1] Banks, J. A., Banks, C. A. M., Cortés, C. E., Hahn, C. L., Merryfield, M. M., Moodley, K. A., et al. (2004). Democracy and diversity: Principles and concepts for educating citizens in a global age. Seattle: University of Washington, Center for Multicultural Education, College of Education, 17.

[2] Dewey, J. (1961). Democracy and education. New York: Macmillan. (Original work published 1916.)

[3] Nielsen, J. (2006). The digital divide: the three stages. Alertbox, 20 Nov. 2006  http://www.useit.com/alertbox/digital-divide.html.

[4] Martin, J. N., & Nakayama, T. K. (2000). Intercultural communication in context (2nded.). Mountain View, CA: Mayfield Publishing Co.

[5] See Banks, Democracy and diversity: Principles and concepts for educating citizens in a global age, 20.

[6] Kirch, D. G. (2008). Supporting a culture of collaboration across professional medicine. MedBiquitous Annual conference, 13-15 May 2008. Baltimore, MD.

[7] Nielsen, J. (2006). Participation inequality: encouraging more users to contribute. Alertbox, 9 Oct. 2006  http://www.useit.com/alertbox/participation_inequality.html

[8] Zipf’s Law. (n.d.). Retrieved May 12, 2008 from http://en.wikipedia.org/wiki/Zipf%27s_law

[9] Viégas, F. & Wattenberg, M. (2008). Many eyes, democratizing visualization. PARC Forum, Jan 31, 2008 http://www.parc.com/cms/get_article.php?id=715

[10] Wilson, C. (2008). The wisdom of the chaperones; Digg, Wikipedia and the myth of Web 2.0 democracy. Slate. http://www.slate.com/id/2184487/

[11] Rowland, G. (1993). Designing and instructional design. Educational technology research and development, 41(1). 79-91.

 

IDEA 2008: An Interview with Andrew Hinton

As IDEA 2008 draws closer, the IA Institute is conducting a series of interviews with the speakers for the conference. As Event Coordinator for IDEA, I fill a variety of roles, including the Interviewer of IDEA Presenters (which I proudly share with Liz Danzico).

This is the second interview in the series, and this time I pulled the name of Andrew Hinton, Lead Information Architect at Vanguard, from the virtual hat. You may recognize Andrew as the presenter of the closing plenary for the IA Summit in Miami this year. Andrew’s blog is Inkblurt and don’t be surprised if you end up engrossed in it and feel as if you are getting a free education!

RU: How did you get your start in Interaction/Information Design?

AH: As far as technology-based work, I did some very rudimentary interface work when I was learning a bit of Apple BASIC & Pascal back in high school. But I’d say my first real challenge was when I had a job at a small medical office as their office manager, and all they had was a typewriter and a telephone. I talked them into getting a computer (a Mac Plus), and buying a database package (something called Double Helix), and letting me build a client accounts system for them.
Trouble was, I had to design it so that my exceedingly tech-phobic co- workers could use it, which forced me to think hard about interface design.
Of course, that was just a part-time job when I was in graduate school. My academic background (Philosophy, Literature & Creative Writing) taught me a lot about making difficult ideas understandable with language — and I think that’s at the core of any information- design challenge. That background continues to be a help for me.

RU: How did you get your start as a presenter?

AH: I’ve been doing stuff in front of crowds since I was a kid. Everything from playing music in a bluegrass band when I was about ten to oratory and debate in high school. Plus drama & choir and the band I had in college. Then there’s the teaching I did while in grad school, and I won’t even go into the preaching I did as a teenager in a big suburban Southern Baptist church.
As far as speaking at conferences, I started sending in proposals to the IA Summit and got one accepted, and sort of got on a roll.

RU: What should the audience take away from your talk?

AH: Well, I suppose details are still emerging. The topic is context, and what technology is doing to upset our deeply ingrained assumptions about context — socially and otherwise. But in general, I’d say I’m more interested in asking questions than answering them. That is, I hope it gets people talking.

RU: Who do you look to for inspiration?

AH: That’s tough. I’d have to say my major inspiration is my kid. She’s the future I’m designing for, in more ways than one.
In terms of people I read or look up to, for me it’s all over the place. I grab inspiration from wherever I can find it. Lately I’ve been really into watching presentations from the Long Now Foundation, for instance. The one by Will Wright & Brian Eno is especially amazing. But I also find my imagination-head needs input from things like movies, fiction, biographies, documentaries about almost anything.

RU: You’ve mentioned your daughter before–both in presentations and at least a couple of times in some of the post-IA Summit Y! Live sessions that we were both in. She seems like a really great kid, and as a daughter-daddy myself, I think it’s great when I hear others in our community really getting in to “the future as our children”. As crazy as our worlds can be with work and other obligations, the IA / IxD / UX world seems to be ripe with really great parents.
What’s your favorite way to communicate with people who aren’t in the same room with you?

AH: I like a lot of different methods — and one thing I love about this age we live in is the great variety we now have for communicating. There seems to be a whole new species of communication cropping up every few years, and they all seem to emerge from the nuanced needs we have for how we connect. So, really it’s very contextual for me. I like whatever tool feels most suited for the kind of communicating I’m trying to do at the moment.
It’s easier to say my least favorite — that’s the garden-variety conference call. So little context, so little sense of physical reaction. Plus the awful noise-reduction circuitry on most speaker phones makes it even harder to pick up on subtle verbal cues. I always come out of conference calls feeling anxious & exhausted.

RU: And now, a 2-parter. A lot of people know your name, have heard you speak in the past, quote your blog, and you’re thought highly of (this interviewer is included in that group). How has being a presenter and conference-attendee helped you improve upon your career?

AH: Presenting has been a big help, mainly in my own head. By that I mean … First, the pressure of presenting on a topic forces me to grapple with it in a rigorous way I’m too lazy to do otherwise, which results in having my ideas sorted out in my work a lot better as well.
Second, it’s a decent confidence boost that helps me stick up for the user with more authority than I might otherwise be able to in the daily grind.
Even just going to conferences has been very helpful though. The User Experience Design world is so distributed and virtual — we’re all in each other’s heads, mediated through electronics and words.

Periodically being able to look each other in the eye is incredibly important to keeping all that grounded.
And I don’t know how this “thought highly of” business got going, obviously you’ve never seen me after a conference call!

RU: Part 2. What would you recommend to people who are just getting started in the field and who are interested in becoming more active in the industry—or who just want to follow in your footsteps.

AH: It means a lot to get involved in your community of practice. You don’t realize what an impact it makes on people around you, but it’s huge. Find some problem that needs solving that tickles your fancy, some skill or service that the community could benefit from that you get a kick out of working on, and dive in. Lurking is fine at times, but if you want to be “active in the industry” you have to engage. You can engage the conversation at any level, as long as you have a sense
of humor & perspective about it. And read all kinds of stuff — don’t just read “design” crap all the time. We all breathe each other’s air way too much, and it’s important to get ideas from outside the UX bubble.
As for my footsteps, I don’t recommend them — mainly because I don’t know that I could’ve walked those steps on purpose if I’d tried. Which is to say, follow what obsesses and excites you, whatever crazy path that might take you down, and there’s probably somebody somewhere willing to pay you for doing it well.

RU: I’ve said to many people that a lot of us have not come by our current roles honestly. That is, almost everything that you stated above. I’m trying to say that I think your footsteps are fairly common for the more “seasoned” folks in the industry. Do you have an opinion on where the User Experience Designer of tomorrow will evolve from?

AH:There are already formal curricula out there that are bringing older practitioner skills and learning into the User Experience space, and from what I can tell they’re doing a great job. If I hadn’t burned out on graduate education long ago, I’d consider going to a program myself. That said, I think UX is inherently a hands-on practice, and has to be done to be understood. Doing the work is the only way to get better at it. So whether newer folks get a head start on that from internships or studio work in school, it’ll be necessary eventually anyway. The other thing is that, this field is evolving so quickly, I wouldn’t be surprised if we continue to see people from many other fields coming into the fold and showing us new, amazing things they know how to do that we hadn’t thought of. For example, I keep running across news items from the neuroscience world (which is exploding lately with amazing new knowledge) and finding it incredibly applicable to UX work. UX design will always need cross-disciplinary input, and practitioners who adapt and evolve with the work itself.

 

About Andrew Hinton

Since 1990, Andrew Hinton has worked as a designer, instructor, writer and consultant of various stripes in the healthcare, financial, consumer and manufacturing industries. Clients have been small and large, including Fortune 500s such as American Express, Shaw, Wachovia and Kimberly-Clark. Andrew is now a Lead Information Architect in mutual-fund giant Vanguard’s User Experience Group.

From his pre-Web education, Andrew holds a BA in Philosophy, an MA in Literature and an MFA in Writing. He’s a regular speaker at conferences like the IA Summit, and sometimes writes for publications like Boxes & Arrows. His current obsessions include Communities of Practice, social design factors, what games teach us about design, and the meaning of context in digital spaces.

A co-founder of the IA Institute, he serves on its Board of Advisors. He also keeps a home on the web at inkblurt.com.

 

About IDEA (Information Design Experience Access)

This conference addresses issues of design for an always-on, always-connected world. Where “cyberspace” is a meaningless term because the online and offline worlds cannot be made distinct. Where physical spaces are so complex that detailed wayfinding is necessary to navigate them. Where work processes have become so involved, and so digitized, that we need new processes to manage those processes.

This conference brings together people who are addressing these challenges head on. Speakers from a variety of backgrounds will discuss designing complex information spaces in the physical and virtual worlds.

Design for Emotion and Flow

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

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)

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

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…

The user navigates to accomplish a task, like 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 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.

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

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 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)

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.

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

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.

Yahoo
Figure 4: Yahoo

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.

Tango Tax
Figure 5: Tango Tax website

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.

References

Csikszentmihalyi, Mihaly. (1990). Flow – the Psychology of Optimal Experience. New York: Harper Perennial.

Csikszentmihalyi, M. (1977). Beyond Boredom and Anxiety, San Francisco: Jossey-Bass. Copyrights: Journal of E-Business (International Academy of E-Business). All rights reserved. Journal of E-Business, Vol. 1, Issue 2, December 2001.

King, Andrew B. “Chapter 2 – Flow in Web Design.” 2003. http://www.websiteoptimization.com/speed/2/ accessed on January 21/2007.

Fogg, B.J. (2003). Persuasive Technology – Using Computers to Change What We Think and Do. San Francisco: Morgan Kaufmann Publishers.

Hoffman, D.L, Novak, T (1996), “Marketing in hypermedia computer-mediated environments: conceptual foundations’”, Journal of Marketing, Vol. 60 pp. 50-68.

Norman, Donald A. (2004). Emotional Design – Why We Love (or Hate) Everyday Things. New York: Basic Books.

Novak, T.P, Hoffman, D.L (1997), “Measuring the flow experience among Web users,” Interval Research Corporation.

Novak, T, Hoffman, D, Young, Y (1998), “Measuring the flow construct in online environments: a structural modeling approach”, Owen Graduate School of Management, Vanderbilt University, working paper.

Novak, T. P., Hoffman, D. L., and Yung, Y. 2000. Measuring the Customer Experience in Online Environments: A Structural Modeling Approach. Marketing Science 19, 1 (Jan. 2000), 22-42

Rettie, R., (2001), An Exploration of Flow during Internet Use, Internet Research, 11(2), 103 – 113.

Simon, H. A. (1971), “Designing Organizations for an Information-Rich World”, in Martin Greenberger, Computers, Communication, and the Public Interest, Baltimore, MD: The Johns Hopkins Press, ISBN 0-8018-1135-X. pp. 40-41.

Simon, H. A. (1996), The Sciences of the Artificial (3rd ed.), Cambridge, MA: The MIT Press, ISBN 0-262-69191-4. pp. 143-144.

van Gorp, Trevor, J. (2006). Emotion, Arousal, Attention and Flow: Chaining Emotional States to Improve Human-Computer Interaction. University of Calgary, Faculty of Environmental Design, Master’s Degree Project.

Your New Excuse to Get an Xbox

Games are fun, addictive, beautiful, and immersive. Websites, for the most part, are not. Take a moment and think about what video games look like, what they sound like, the way you can move on the screen, what “you” can be. Think of how you feel when you play and who you play with. Consider the launch of Halo 3 on Xbox 360, with unprecedented graphics, sound, and interactivity that Time.com called “refined to the point where it delivers only pure unadulterated gaming bliss.”

People gaming on computers and consoles are having a blast and spending big. The result: elements of the game medium are drifting into other digital experiences. Video games have become sophisticated creations that can take years to develop, weeks to play, and days to go platinum. The $12.5 billion dollar market (NPD Group 2006) continues to grow as game franchises have extended into books, graphic novels, films, merchandise, and communities of devotees. The televised Video Game Awards is in its sixth year and the influence of gaming culture is increasingly appearing in the mainstream.

Jeopardy screen

World of Warcraft featured on the Jeopardy game show

Companies should create rich and immersive website experiences, drawing from some of the techniques for game design to build brand affinity and differentiate their sites.

Where did those three hours just go?

When considering whether elements of video game design could apply to a site, you might think the category of your site is your first question. At first glance, advertising sites, RIAs, and some transactional sites seem obvious candidates for engrossing their visitors in the world of the brand; enterprise solutions, not so much. As John Ferrara has demonstrated, games tackle similar tasks as web applications and the HCI considerations still apply. No category of site is therefore inappropriate for “game think.”

Ask yourself the following questions:

  • Are you looking to build brand affinity?
  • Do you have universal corporate messages that you would like to communicate to all visitors?
  • Do you need to create strong incentives for your users to complete a certain task or contribute in a certain way?
  • Do you want your informational site to be more compelling than a brochure?
  • Do you have a significant set of features that might overwhelm first-time users?
  • Does your brand welcome customer contributions and self-expression rather than requiring that all content and experiences be curated?
  • Are you leveraging a marketing campaign that already has audio, animation, and transition styles and a narrative associated with it?
  • Is social media and building an online community part of your strategy?

If you said “yes” to most of these questions, then “game think” could be applied to your site.

Successful video games get users to suspend disbelief, form a visceral connection, and invest themselves in the game world. Players can go into a zone and feel a sense of flow, described as “a feeling of energized focus, full involvement, and success in the process of the activity” 1. Imagine a website where visitors also feel and behave this way: they are engaged and focused, unaware of time, unselfconscious, and feeling rewarded. It would mean we could present brands in more complex environments and we could sustain interest in a site for longer. We could make time spent on a website more enjoyable to the visitor by touching them emotionally. Businesses could move beyond transactional interactions with visitors to mutually beneficial relationships, for long-term future rewards.

Websites don’t need to become more like video games in every way. The inherent purpose of a game is to have fun, and that is not the core motivator for most websites. Many of the most successful sites are able to incorporate fun into the experience, but the suggestion here is that the design of video games offers lessons, rather than a game’s defining attributes of fun, non-productivity, and uncertainty. Key elements of video game design are attractive to website designers because they remove some of the constraints we apply to solving design problems, and open up new opportunities for brand expression.

Such elements include:

  • the reliance on discovery
  • an expectedly steep learnability curve
  • explicitly graded levels of difficulty
  • expression of information using scenes rather than linear pages
  • the entertainment value and length of time engaged in a game title

Infusing websites with some of the attributes of games does not mean that we abandon the notion of utility either. Game players have goals—to kill enemies, to find treasures, to amass wealth—just as web visitors have goals. There exists a need to make progress, to accomplish something. Successful games induce a player to take on a goal, believe in it, obsess on it, and return to the game over multiple sessions, often spanning weeks, in pursuit of achieving it. Game designers plant a kernel that rages so strongly that a player will dedicate considerable time to it. How can we, as website designers, plant such a kernel in our users?

Attributes of websites vs. video games

 Websites  Video games
 Hand-eye coordination: digital  Total body coordination: physical
 Usable  Learnable, playful, discoverable
 One level of difficulty  Multiple levels of difficulty
 Social content   Social interaction
 Web development  Product development
 Wireframes  Storyboards
 Page  Scene
 2D  3D
 Needs are user-centric: satisfy the user  Needs are engendered: satisfy the player
 Free  Bought
 2 to 15 minutes  Hours to days
 Task, transaction and information  Entertainment
 Sticky, at best  Addictive
 Cheap to design and build  Expensive to design and build
 Superficial customization and personalization  Considerable customization and personalization

So how do you play this thing?

Nine approaches can put you on the path to creating differentiated website experiences.

1. Find a balance between challenging and rewarding the user

Gut reaction: who wants to be challenged? This is an area where “game think” is not suitable for every brand, company, and user goal. Conservatively positioned banking web application used by time-poor mom: “no thanks.” Progressive youth fashion brand frequented by surfing tween: “why not?”

Call of Duty 4's initial levels include tasks to familarize the player with weapons and actions

Call of Duty 4’s initial levels include tasks to familarize the player with weapons and actions

Another way to consider “challenge” is to recognize that games have rules and environmental constraints (e.g. materials, locations, physical spaces). Many websites and web applications also rely on rules and have other constraints that require users to interact with them in a certain way (e.g. travel booking forms, profile setup wizards, retirement benefit calculators).

Thinking about the way a game challenges a player is to think about:

  • Learnability. When you start a new game, you have to try buttons, actions, commands etc. to see what can be done. By the end of a few sessions you’ve worked out pretty much everything, and the game has probably guided you through most of it. Apple made the bet that people would be able to work out how to use an iPhone without the familiarity of the interactions from other phones. Users learned the gestures quickly and it has been hailed as an incredibly usable device. As the breadth of activities that can be performed online expands, the way we navigate and interact with those sites and web applications is also going to evolve. Usability will not be the key driver; it will be a given, and learnability will play a larger role.
  • Safe environments to explore and make mistakes. If you provide a way for a user to pleasantly explore and discover different things without irreversible consequences, then a website does not have to be immediately transparent in how it is used. Supporting rich undo, cancel, back, reset, and restart in appropriate ways contributes to the safety net where a user can experiment.
  • Swapping between easy and advanced modes. In video games, players who can handle it opt for more advanced game situations. If they find it too hard, they swap back. Crisis over. Some websites and applications ask users to select a version (standard, professional, custom, or other more complex) before they’ve even tried it out. And then once they’ve selected the more advanced version they’re stuck with it. Let them swap.
  • Progressive disclosure. Instead of overwhelming a player with all the modes of play (weapons, locations, moves etc.) from level one, the video game gradually introduces more sophistication and power. The most important options are offered initially, then more complexity is introduced as a player progresses, or specifically requests it. Tips, tutorials, and demonstrations from other game characters allow the player to learn as they go. Managing the learning curve of your website requires prioritizing features into primary, secondary and so on, knowing the technical and functional domains of your novice and expert users, and determining how many stages of disclosure are appropriate.

Usability is new to gaming; the focus has been on learnability and the visceral connection of the player with the game. Many websites aim to be intuitive. Video games show us that new paradigms can be learned.

2. Allow an ultimate fantasy experience that might actually be true to life

Fantasy experiences are not limited to creating an alter ego with a perfect body. Fantasy experiences incorporate:

  • Doing something in a game that is not actually possible (e.g. breathing underwater in a lost submarine city while shooting cyborgs, in BioShock)
  • Doing something in a game that is possible, just not as you (e.g. bashing out a guitar solo of “Welcome to the Jungle” by Guns & Roses as Slash himself in Guitar Hero I).

Plan your dream kitchen at Ikea with your kitchen’s dimensions

Plan your dream kitchen at Ikea with your kitchen’s dimensions

For some games (e.g. Gran Turismo), representing the details of real life as closely as possible is important. Players can dream that the skills they use in the game compare in a minute way to the skills they would need in the real situation. In other games (e.g. Legend of Zelda), the sense of freedom that comes with doing the improbable is intoxicating. Who doesn’t dream of flying?

For a website, supporting both of these extremes might be worthwhile. In a shopping scenario, some users may want to see what certain apparel looks like on their exact body, while others will want to experience how a minor member of a royal family, feted with personal shoppers, is treated. Probe whether the fantasy experience that your users say they want, or your client would like to offer, is the type of thing only celebrities get up to or is not actually done on Earth. Both offer enormous opportunities for originality and usefulness.

3. Give users control of audio, colors, environment, characters

Let the user’s DNA mix with the site. In games such as Grand Theft Auto, the user can select genres of music to play in the background as well as the volume of the sound effects relative to the music. Users set preferences such as gun cross-hair positioning, colors of environmental elements (e.g. make the racing car red so it stands out more and can be recognized more quickly in the pack), and other elements. The aim here is not to make the game prettier or set arbitrary preferences but to make gameplay more efficient.

Avoid encouraging users to play around with design features that don’t make sense. For websites, the modifiable controls should encourage more effective interaction with the site. For example if, on a banking site, a customer wants to be alerted to all transactions over $100, enable them to red flag these line items in online statements. If a traveler is on a travel planning website coordinating a ski trip, let them use images of snowy landscapes to immediately visually differentiate this trip from the summer vacation that’s also in progress. If a user has the desktop email program configured so that an audible ping gets their attention, chances are they would like the same for their web-based email. Give users who value this customization the options, so they can tweak for added user-friendliness.

Design control of Second Life avatars offers unprecedented detail

Design control of Second Life avatars offers unprecedented detail

Most games enable users to customize, and thus emotionally invest in, their characters. Second Life takes character creation to a level that invites the user to design anything from a facsimile of herself to something genetically impossible. Forget about shirt color, heels or sneakers, brown hair or blond—you can tweak freckle distribution, eye socket depth, lip pout, hand shape and other micro details along a continuum. Such advanced customization options enable the player to design someone unique and nuanced, and enjoy the sense of pride or accomplishment that goes with it. Once you’ve spent serious time perfecting the tip of your avatar’s nose, the bluntness of their profile and the hue of their cornea, you can bet that you’re not going to throw that work away lightly. You’re going to fall in love with your creation and show it off. What’s more, your handiwork and use of customization options impact the way other players or visitors to a social media site interact with you.

Make the character customization options on a website substantial enough, and give the options consequences, and you’ve won a degree of user loyalty. Yahoo, for example, enables visitors to create avatars that represent them as they move around the site. Users can express parts of themselves in Answers, chat, and other web applications without having to reveal their real identities. This way, visitors can avoid the proliferation of recognizable online identities and mitigate privacy concerns.

4. Wrap narratives around the action and functionality

Exactly how did Lara Craft become a tomb raider? How does this impact what “you” can do in the game? The back stories on games are well thought out narratives that drive the design of characters, scenarios, dialogue, levels and more. When new versions of games are released, the storyline develops further and players continue on the journey. Stories put everything in context.

The site reveals its functionality through a conversation, which tells the story of the firm

The site reveals its functionality through a conversation, which tells the story of the firm

The narrative for a website might stem from a number of different ideas and constructs, including personas, how the site fits into the organization’s processes and business model, the company’s history, corporate values, and its brand attributes. More likely it will come from medium- to long-term communication messages already evident in offline marketing activities, especially television commercials. If the company advertises, then the company’s story is already out there.

Bjorn Borg clothing store tells 'heritage' stories as video montages and invites visitor stories too

Bjorn Borg clothing store tells “heritage” stories as video montages and invites visitor stories too

Characters, locations, and storylines can evolve online. In fact arriving at a site that doesn’t continue this story or resonate with what visitors have experienced elsewhere is jarring and disorienting. Site navigation, imagery, and messaging should tell a universal story to all visitors to the site, so that they all walk away knowing what this company stands for and what it’s about.

5. Build delightful transitions and animations

Design flourishes (or lack thereof) reveal a lot about brand and add a layer of quality that can be impressive. Games have pushed the technical and design boundaries of animation so that pretty much anything that can be imagined can be represented on the screen. The physics engines do the heavy lifting within the games themselves, but the designers have also labored over the animation and transitions for non-game screens.

All aspects of the Mercedes Benz AMG interactions- selections, deselections, transitions – have been given carefully considered behaviors

All aspects of the Mercedes Benz AMG interactions—selections, deselections, transitions—have been given carefully considered behaviors

With the emergence of Silverlight and Windows Presentation Foundation (WPF), the web is rapidly catching up with gaming technology. The challenge is to actually understand what the web is now capable of and dream up the designs to exploit it. For example, navigating through a video game menu is rarely a matter of point, click, see next screen. Every interaction with the non-game screens and in-game menus is an opportunity to reinforce a brand attribute, or pad out the world the player has entered, or let the user know they’re on a certain path. Every interaction.

Blue Moon Brewery makes the most of every click

Blue Moon Brewery makes the most of every click

6. Use loading screens to educate the user how to use the site better

There can be a lot of dead time playing a video game: loading, graduating to a new level, “dying,” cutscenes that relay the story and so on. Games make the most of this limbo by telling players more about the game. Hints, tips, factoids, instructions, and trivia are displayed while the player patiently waits for the fun to start. “Slow mo” scenes from previous games, spectacular gameplay sequences, acted scenes contributing to continuity and online player statistics—game designers are tapping their imaginations to come up with novel ways to make these loading screens not only palatable but valuable.

If you know the page that is loading, give the user a tip on how to use it, such as in Tony Hawk Proving Ground

If you know the page that is loading, give the user a tip on how to use it, such as in Tony Hawk Proving Ground

Online, users have the luxury of simply leaving a site if they have to spend too much time watching progress bars. Empower the user with something extra so that when the site or module finally loads they’re better prepared to use it effectively, better informed about the company, or at least amused.

7. Implement strong audio cues to provide feedback

Playing certain games with no sound is nigh impossible. You can’t hear things approaching, you’re not sure if your action was executed, you’re not sure where to go, you’re unclear about the results. Think of all the website usability tests you’ve witnessed where the participant is confused about whether their click registered with the site and whether something is happening. Further evidence of this confusion is the “only click once” message that some sites use to deter visitors from clicking again, when they think their action was not registered.

On the web, sound has been anathema. Websites that suddenly blare music at you during discreet workplace web surfing have destroyed the fun for all of us. But audio cues are common on computer operating systems and traditional applications. They’re such a simple, effective way to reinforce an action, alert you, or let you know whether something was successful or not.

Audio can add satisfaction by imitating real world sounds that we’re familiar with. The state of flow is supported because there is no need to translate the result. For example a falling two-note sound is instantly recognized as a negative result, whereas the cha-ching of a cash register is known to be a sign of money being exchanged.

On Uniqlo.com many clickable elements are indicated with an audio cue, with another sound to indicate when you have clicked and when a successful action is complete

On Uniqlo.com many clickable elements are indicated with an audio cue, with another sound to indicate when you have clicked and when a successful action is complete

Also, audio is another way to exercise brand muscle. Nothing quite lets a user know what your brand stands for than expressing it with a sonic branding device or giving it a literal voice. What sound would you expect to hear when visiting intel.com?

8. Play with spatial cues

Flash, Silverlight, and WPF make working with spatial cues a more interesting proposition. Many games rely on recreating three dimensions so that a player can move through terrain or other environments. In fact, game design has been likened more to architecture than film-making (which is another popular comparison) because the designers need to signal to players that they should move from location A to location B.

Using 3D space on the web is easier to visualize now that Vista, Leopard, iPhones, and iPods have reimagined how items can be stacked, ordered, shuffled, zoomed in on, and previewed. The physicality that is innate with game playing is migrating to other digital technologies, such as the web, through touchscreens and gestures.

Adidas uses backgrounds and foregrounds forcefully to denote hierarchy

Adidas uses backgrounds and foregrounds forcefully to denote hierarchy

Designs using the “z space” are emerging, often targeting younger audiences who might more comfortably migrate their behaviors from other media to the web.

Nike's Jordan site features zoom controls to navigate the space

Nike’s Jordan site features zoom controls to navigate the space

Visitors are instructed to hold down mouse keys and drag, use mouse scrolls, or use keyboard and mouse combinations to move within all three axes. Website designers can now add “depth” to the design toolbox when considering hierarchy, prominence, information design and chronology, among other things. Any element closer to the user will be more prominent.

9. Sprinkle in a few surprising serendipitous moments

Serendipitous touches are the ones that you dream up in the heat of brainstorming and figure your client is never going to go for. They’re a little bit clever, or silly, or over the top, and that’s what makes them memorable and essential. Those “extra mile” details are the ones that get a site talked about and bookmarked. They’re the things that fans savor and brand advocates “get.” For example, when your character dies in The Sims 2, the Grim Reaper appears and looks over some paperwork potentially to do with the character’s soul. Who knows? It’s totally ridiculous, and the first-time reaction is likely to be laughter, even though the player is about to start the game all over again.

The Sims 2 injects unexpected humor into what is actually an annoying situation

The Sims 2 injects unexpected humor into what is actually an annoying situation

Flickr.com’s multilingual greetings are often cited as a lovely unexpected gesture. The designers didn’t have to do it, but they did, and it is appreciated. How many other sites welcome you and you ignore it entirely? Is this an approach recommended for every brand? Such a gesture doesn’t imply childishness: rather, it acknowledges that a human is visiting this website. There’s usually an attribute within every brand that is related to being human: this is the attribute to exploit. Think about the emotional response you’d like to get from your website visitor and find one or two ways to elicit it in a playful way.

Steadyhand's CEO checks his phone while he waits for the user to interact with him, like a game character waiting for a player to start

Steadyhand’s CEO checks his phone while he waits for the user to interact with him, like a game character waiting for a player to start

Did the design stage just get longer?

Incorporating some of these ideas into the design phase of a project need not take extra time. Applying “game think” as a filter across activities you’re already doing will get you a lot of the way there.

Game designers adopt different methodologies, produce different deliverables, and follow different processes than website designers. It doesn’t make sense to take on many of these because ultimately you are creating different products. However, the fact that you’re working with the same medium—people access the internet through gaming consoles and play games on computers—should cause you to pause and consider how to make better use of the channel.

Energize a site and engage more of the user’s senses with animations, transitions, 3D, and audio. Then let the user bond with the site by having the site tell a story while incorporating their preferences, so that there is more “conversation” and less “messaging.” Encourage the user to explore and become an expert on the site through a choreographed dance of challenge, education, and reward. Finally, delight your visitors and get them hooked through unexpected, frivolous, and unique touches that your brand can own.

The payoff for using video game design elements is a memorable, distinguished, high-impact user experience that brings a brand to life, increases loyalty, and reaches out to new customers.

Your next step? Go play some video games and get inspired.

1 http://en.wikipedia.org/wiki/Flow_(psychology)