Four Key Principles of Mobile User Experience Design

Written by: Dakota Reese Brown

Prior to becoming a senior UX designer at Popular Front Interactive, I spent two years as a mobile UX researcher within the Georgia Institute of Technology’s Mobile Technologies Group – a lab tasked with both future-casting and then rapidly prototyping innovative mobile experiences.

As I transitioned from academia to industry, I discovered that while mobile UX was discussed, it wasn’t discussed from the same broad frame of reference that I was used to within the confines of a research-based institution. Although more recent mobile UX conversations I have found myself in have undoubtedly benefited from the ongoing smart phone revolution, overall I still find these conversations to be needlessly driven by tactical adoration and lacking a conscious consensus regarding the fundamental principles of the mobile-user experience.

I do not presume these following principles to be all-inclusive or ultimately authoritative; rather, it is my hope that they are received as an anecdotal summation of my findings that might then spark and contribute to the larger conversation and consensus-building process.

 

PRINCIPLE #1: There is an intimate relationship between a user and their mobile device.

While an intimate relationship between an individual and their mobile device may seem like a given, the depth of that relationship probably goes deeper than most initially realize. In fact, I argue that the relationship extends to a physical level and the exchange of bodily fluids.

Imagine that it is a hot summer day and someone asks if they may borrow your mobile device to make a call. You hand it over. What level of trust does this simple act portray? Consider those around you right now: How many of them would you loan your mobile device to without hesitation? In your social circles, is it acceptable to decline such a request? How does context influence this scenario? What if you are at work? At a bar? How about a family reunion?

Let’s assume that this person is noticeably respectful of your device and the personal data it contains while making their call. At the call’s completion, the individual immediately and graciously returns it, whereupon you notice that it has accumulated an amount of … goo (perspiration, humidity, etc.) that is typical of mobile device use on a hot, sticky summer day…but then again, it isn’t your goo.

From a gooey physical level to a level of data privacy and security, there is an intimate bond between an individual and their mobile device, the strength of which often elevates the mobile device to the status of iconic personification. I am my phone. My phone is I.

In order to meet user expectations, mobile experiences should assume a semi-guarded state of primary usership; however, we must also responsibly protect our users. As the trend of embedding ourselves into our mobile devices increases, so does the cost of our devices being compromised. Assume primary ownership, allow for secondary usership, and plan for what might happen should we lose ourselves.

In a worst-case scenario, a compromised mobile device containing a significant amount of personal data would become the networked equivalent of a voodoo doll, where actions performed via the mobile device could cause actual harm to the individual personified by the device. In cases such as this, a remote wiping of all data on the device may be a user’s only recourse. 

 

PRINCIPLE #2: Screen size implies a user’s state. The user’s state infers their commitment to what is on the screen.

Imagine that you have been looking forward to seeing a particular blockbuster movie since the day it was green lit, and now that the day of its release has finally come you are going to get the most out of the experience by going to see the movie on the largest IMAX screen in the tri-state area.

Let’s say that when you finally take your seat in the sold-out theatre, you notice the person sitting next to you has a very annoying laugh. There is nowhere else to sit in the theatre, and you’ve been dying to see this movie for more than a year. What are the chances you abandon the experience and walk out? Probably fairly slim to none.

Now let’s say that you were backpacking through Europe when the above blockbuster was released, and that you have been equally anticipating the movie’s Blu-Ray release. To celebrate the release, you and your friends are gathering at the home of the friend who has an impressive home theater featuring a 52-inch HD screen, and again you find yourself seated next to the guy with the annoying laugh. Now how likely are you to abandon the experience? Probably more so than above, but still not likely.

What if this scenario played out in a college dorm room and the movie was being viewed on a 22-inch computer monitor? What if you were sitting next to the guy with the annoying laugh? The chances that you might abandon the experience are probably increasing.

What about a mobile device’s 3.5-inch screen? Is there any way you would sit next to some random person with an annoying laugh for 90 minutes to watch that movie? Probably not.

Although there are any number of social and environmental factors that would affect the user abandonment rate in the experiences described above, it is consistently possible to estimate a user’s level of commitment to an experience based upon the size of the screen through which they are engaging it.

Since mobile devices are likely to be the smallest screens in a user’s experience, the design of mobile experiences must accommodate the user’s varying commitment and distributed attention. How an experience accommodates these conditions will change depending on experience type — game, banking application, or the like — but the underlying impetus remains the same.

 

PRINCIPLE #3: Mobile interfaces are truncated. Other interfaces are not.

A dreaded task that usually accompanies getting a new mobile device is the act of transferring your data from the old device to the new. In years past, this meant arduously re-entering all of your contacts via the device’s, most likely E.161 (12 key), keypad.

There were a few early, notable attempts to ease this burden. GSM service providers pushed device manufacturers to save all user data to the devices SIM card by default, but the card’s limited storage capacity produced a poor user experience. On the other hand, CDMA service providers began automatically transferring address books between devices as a customer service. Even early on it was widely acknowledged that although an individual wanted to use information on their mobile device, they would go to great lengths to avoid having to manually enter that information.

Palm, and later Research in Motion, sought to improve this fact of mobile user experience by introducing and then proliferating the practice of syncing. This concept paired the truncated mobile interface with a full-sized desktop interface, allowing the user to easily and reasonably efficiently enter their address book data via a familiar QUERTY keyboard. Although this feature was initially limited to smart phones, it has since been incorporated into a wide swatch of consumer-grade devices. In fact, the notion of syncing has become so ubiquitous in mobile computing that the syncing of one’s entire networked identity is a core plank of Google’s Android operating system.

Even as miniaturized QUERTY became and becomes a more standard feature for all mobile devices, the truth remains that mobile interfaces are truncated and better used for manipulating data rather than entering it. One might conclude that as mobile devices continue to incorporate increasingly impressive sensor arrays, even standard, consumer-grade devices will provide powerful data collection capabilities. Regardless, data collection is not data entry, and data entry is not likely to become a mobile-appropriate activity. 

 

PRINCIPLE #4: Design for mobile platforms — the real ones.

There is a prevailing tendency is to discuss mobile platforms in terms of device manufacturers and service providers. This is understandable. It is fun and easy to get caught up in the moment of the latest tech demo, press release, or rumor. However, in needlessly binding the dialogue to the news of the day, we create unnecessary segmentation across an already complex landscape. The overall conversation is better served by focusing on the mobile platforms that have emerged as constants over time. Those four platforms are voice, messaging, the internet, and applications.

 

Voice

Voice was the original mobile platform, but it is also the platform with the most nebulous future. Don’t get me wrong: People will always need to make an occasional phone call. However, the frequency with which we are doing so is declining. Why? Mobility is as much about efficiency as anything else, and telephony (vocal communication and vocal response interfaces) has proven more difficult to optimize compared to other methods of interactivity.

For example, let’s say that you wanted to verify that your paycheck had been deposited. Most banks offer both tele-banking and online account access. Which interface are you likely to use, and why? How about if you wanted to order a pizza? Would you rather call, be placed on hold for five minutes, and then dictate your order to a multi-tasking teenager, or would you rather just use a GUI to do it?

 

Messaging

Friedhelm Hillebrand, the architect of the messaging (SMS) specification, described the platform’s limit of 160 characters as “perfectly sufficient.” The question we must ask ourselves in considering this mobile platform is, “Perfectly sufficient for what?” Although Hillebrand can provide several reasons for how he arrived at the 160-character limit, the one that I have always found the most interesting is that his team discovered that most postcards typically contain 150 characters or fewer.

Have you received or sent any postcards recently? If you have, they were likely either brief social communications (“Having a great time. Wish you were here!”) or they were simply task-oriented such as RSVP-ing for a wedding or canceling a subscription.

Messaging trends today continue to affirm Hillebrand’s postcard comparison. The vast majority of SMS traffic consists of social interactions within small groups of individuals. The second tier of usage is comprised of simple task-based transactions such as voting, entering contests, and receiving notifications.

In both cases, SMS and postcards, content-heavy experiences are a minority occurrence as the media is not designed to accommodate such a level of engagement. Furthermore one could argue that due to the designed efficiency of the messaging platform, that a content-heavy experience would be far from appropriate. 

 

The Internet

The Internet is the most awkward of the mobile platforms in that it is the one that is the least natively mobile. Currently almost 95% of all Internet users experience the web via displays with resolutions of 1024×768 or greater. As such, 1024×768 is observed as a fairly universal standard and is what a significant portion of Internet-based experiences are designed to. Given that mobile displays typically range between resolutions of 60×120 and 480×320, it is fairly obvious that most Internet-based experiences aren’t designed with mobile users as a primary consideration.

As a means of making Internet-based experiences more accessible to mobile users, most mobile web browsers have been designed to include adaptive methodologies for displaying larger experiences on smaller screens. While these adaptive tactics, which typically employ pan and zoom-esque interactions, have undoubtedly made more of the Internet accessible to mobile user, one could hardly argue that it has resulted in a desirable user experience. In fact, if browsing the Internet from a desktop is regarded as a scanning activity, than browsing the Internet through the adaptive lens of a mobile browser might best be described as a squinting activity.

As mobile web usage has continued to emerge as a somewhat common activity, the assumption that Internet-based experiences are to be automatically adapted for mobile users has given way to the design of alternative experiences specifically for mobile users. While this trend has provided mobile users with more efficient and scannable web experiences, it also has the potential of overplaying the users’ expectations for Internet-based mobile experiences.

As Internet-based mobile experiences have become more device-centric and sophisticated, they have begun to resemble mobile applications, thus creating a scenario where users might expect the Internet-based experience to function as a mobile application would. The distinction between desktop applications and Internet-based experiences may be rapidly evaporating, but it remains germane in the mobile experience. Although there are several differences between the platforms, the primary point of contrast I will draw here is that applications are able to use device-level services such as sensors, ad-hoc networking, and optics, whereas Internet-based experiences cannot. While mobile browsers are beginning to make some of these services available to Internet-based experiences, each platform will always have affordances the other doesn’t. As such, and to manage user expectations, if an experience looks like an application and attempts to behave as an application would, then it should be an application — and vice-versa.

 

Applications

From a technical standpoint, applications represent executables that are native to a specific mobile environment, have been selectively installed, and have access to the device’s full array of available functionality. However from a UX standpoint, they represent a specialized interaction design that caters to an affluent, sophisticated, and targeted mobile user base.

As few as 24 months ago, the seemingly basic task of locating and installing an application on a mobile device required a fairly developed skill set. With the recent proliferation of “app stores,” this task has become more user friendly; however the percentage of users who are able to install an application on their mobile device nowhere near approaches that of those who know how to make a phone call or send a text message. So, regardless of recent improvements to the overall process of acquiring and installing a mobile application, the user who can perform this task would still be considered sophisticated compared to the overall segment.

All things considered, mobile applications might best be described as the boutique mobile platform. As is the case with most boutique experiences, a comparatively small audience will compensate for itself through fervor and zealotry. However, since the success of an application-based mobile experience is based almost entirely upon acceptance within that small audience, extraordinary attention must be paid to the particulars of the target audience’s needs and behaviors. What existing need is the application attempting to mobilize? What efficiencies can a focused interface bring to that workflow? How can the specific affordances of a mobile device augment and improve upon that experience in contrast to using one of the other mobile platforms?

Mobile applications are powerful tools…for a relatively small segment of individuals who want them and know how to use them.

 

Conclusion

Someone tweeting on behalf of Punchcut once wrote, “In mobile UX, don’t confuse precedence with standard.” I couldn’t agree more, but as I hope that I’ve successfully illustrated, this statement is well ahead of where the conversation should be. Both standards and precedence are both tactical perspectives. Within our context, they both represent distinct libraries of interactions and are either redefined as the landscape evolves or simply replaced as more elegant solutions are brought to market.

The variable nature of each of these categorizations only further demonstrates why it is best for the current mobile UX conversation to focus on higher-level principles rather than tactical particulars.

As mobile UX designers, we have both opportunity and choice in front of us. The opportunity is to establish the foundation principles of a stable, yet still emerging, experiential space. The choice lies between getting caught up in the excitement of the fad du jour or asking ourselves the difficult question of what foundational principles am I following, or establishing, with the work that I am currently doing.

The only unfortunate part is that the time we have to make this decision is quickly running out.

Designing the Democratic

Written by: Jamie Owen

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

Written by: Russ Unger

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

Written by: Trevor van Gorp

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.