Boxes And Arrows : The Design Behind the Design

What Does Rich Mean?

A Deeper Look at the Rich Experience

by Uday Gajendar on 2007/06/05 | [14 Comments]

Amid the current hype of Web 2.0, rich has become the de facto buzzword suggesting fresh, sexy digital products, often marked by glossy buttons with AJAX-driven behaviors. But what does rich mean to a UI (user interface) designer who wants to craft intelligent, compelling, and memorable interactions? Given current digital and technological trends, today’s UI designers must deepen their understanding of richness. Such an effort will strengthen designers’ vocabularies (adding legitimacy and weight to client discussions), and enable designers to temper judgment when it comes to applying rich capabilities.

Before delving into notions about richness, it is critical to acknowledge the core challenge of designing rich experiences. Designers face an ongoing battle for human attention across the digital landscape—from websites and desktop applications, to mobile devices and beyond. Newer technologies allow for greater levels of information display and dispersion, enabling access anytime, anyplace. Scholar Richard Lanham has noted that we now live within an “attention economy” where designers must effectively arbitrate the scarcity of human attention. Those who know how to command the landscape of competing words, images, sounds, and motion will aid user goals more effectively. ¹ Therefore, to move beyond the hype surrounding richness, it is vital to clarify its meaning.

A Framework for Experience: Rhetoric

For a common understanding of richness, it is necessary to step back and reference the dictionary. Typically, the definition of rich includes words such as abundant, plentiful, intense, and of course, wealth. Entities associated with richness are described as indulgent or saturated, like savory foods, glossy photographs, and luxurious objects. But how do these descriptions apply to online banking, mobile messaging, and other digital encounters?

To better articulate the relationship between richness and the quality of experience, we need to understand what is meant by user experience (UX). Controversies and definitions abound, but for the purposes of this article the approach is broad: A subjectively interpreted, continuous stream of psychological and physical phenomena brought into awareness through an interaction. ² A complete user experience depends upon the correlation of three human elements:

Attention: the connection between a person and a form

Attraction: the process of being drawn to a form and engaging with it on multiple levels

Satisfaction: a fulfilling sense (yes, it’s a feeling thing!) of being useful, usable, and desirable ³

Admittedly, this description could refer to a number of situations, but within this article it applies to encounters with websites, mobile devices, and desktop applications. Using this framework, we can then identify the area of impact where richness becomes important: The choreography of sensory elements—text, image, sound, motion, and behavior—that comprise a digital experience and transform it into a compelling statement that entices a user to interact with a product. In sum, this transformation is about forming an argument, or persuasive message that is memorable and pleasing. Thus, richness enables a designer to communicate more effectively and sensually, and allows users to participate more fully in support of their goals.

The sensory elements listed above are not about flashy marketing spin, but rather how the user experience becomes a type of social, or rhetorical, communication. This communication between the designer and the user is mediated through digital elements that attract the user’s attention and compel the user to access the product or service for some goal. Hopefully, the goal is what the user intended to accomplish! Engagement is about the creation of an argument directed toward improving people’s lives: paying bills more easily, learning a new subject, or sharing photos with friends. The argument must be made into something integrative and whole, rather than a patchwork of poor navigation, buried features, and annoying graphics. According to classical rhetorical theory, which dates back 2,500 years to Aristotle and Cicero ⁴ , the necessary components of a well-formed argument include are:

Logos: the reasoning behind the argument

Pathos: cognitive and behavioral affects in relation to audience expectations

Ethos: the argument’s emotional voice or presentational style

These components must be shaped by a definition of the audience, the purpose of the argument, and the designer’s tone of voice. ⁵ Rounding out this rhetorical stance is a sense of plot or narrative (mythos), which brings the argument into completion as a consummated experience, whole and complete, and worthy of re-living and sharing with others (e.g., repeat sales and customer testimonials). See how this all connects!

If these concepts seems alien (or even antiquated), note that the key components of a classical argument described above are in line with views espoused by “Jeff Veen”:http://www.veen.com/jeff/index.html and “Bob Baxley”:http://www.baxleydesign.com/ in their works discussing web design and web-based applications. As designer “Luke Wroblewski”:http://www.lukew.com/ has noted, such fundamentals seem to always come in threes!

Intersection of Richness and Experience

If a digital user experience is a form of social and rhetorical communication, then richness must address ways of amplifying rhetoric of that message through sensible and powerful means. By taking a closer look at rhetorical structure and the intersection of richness and user experience, we can then identify the key places where richness enhances engagement. ⁶

Rich Structure: Enhanced informational structure, layout, and content. The value is delightful (and convenient) discovery that aids in understanding of content.

Attributes:

• Progressive layers of data
• Different degrees of data connectivity
• Findability marked by serendipitous discovery

Examples:

• “Spivot”:http://www.spivot.com/: A media reader that aggregates news sources and user-generated content; the site is enhanced by a multi-faceted browsing model for gathering news feeds.
• “LinkedIn”:http://www.linkedin.com/, “Friendster”:www.friendster.com, “Orkut”:http://www.orkut.com: These social networking sites are based upon the six degrees concept of human connectedness, allowing for rapid discovery and browsing social contacts.


• “Amazon”:http://www.amazon.com: Despite being the prime global marketplace, the Amazon website offers confusing navigational methods for purchasing and browsing items and creating lists.

Rich Behavior: Greater ability to interact with data and features using behavior and motion cues. The value is direct, real-time feedback that provides confidence and trust.

Attributes:

• Direct manipulation and instant feedback without latency or page re-loads
• Drag-and-drop interactivity (e.g., a constructor-like UI model)
• Animation for presenting and dramatizing the interface

Examples:

• “Flickr”:http//www.flickr.com: Online photo site offers editable photo labels and descriptions, a drag-and-drop photo set builder, and interactive slide shows.
• “Google Maps”:http://maps.google.com/ and “Yahoo Maps”:http://maps.yahoo.com/broadband: Using different technologies, both sites feature map manipulation, real-time traffic data, and zoom features aided by a mouse wheel.
• In contrast, gratuitous Flash-enabled video advertisements distract the user, or worse, are displayed across the main content and have hidden close buttons that distract and annoy.

Rich Style: Visual embellishments that provide luminosity and convey texture and atmosphere, thus enhancing user experience.

Attributes:

• Gradients and drop-shadows
• Rounded edges
• Translucent effects

Examples:

• Apple dashboard widgets: These whimsical mini-applications are rendered in a glossy or translucent fashion, adding to their stylishness.
• XBOX 360 dashboard: The main hub for browsing, game play, and setup features a subtly animated background accompanied by glowing buttons, as well as gradient and shadow treatments tailored for a gamer audience.
• Windows Vista: In contrast, the operating system for Vista features heavy styling that overwhelms the user and fails to provide organizational cues and system stability.

An Emerging Definition

By breaking down the major moments where richness amplifies the user experience we can arrive at a cumulative definition: A sensory-enhanced communication targeting human attention at key levels to comprise an argument. Its purpose is to enliven dialog with a digital product, thereby providing users with a sense of positive engagement. In his book “Emotional Design”:http://www.amazon.com/Emotional-Design-Love-Everyday-Things/dp/0465051367/ref=pd_bbs_sr_1/104-0131272-1529541?ie=UTF8&s=books&qid=1180666056&sr=8-1, “Don Norman”:http://www.jnd.org/ illuminates the impact levels of user experience:

• Visceral (physical or bodily)
• Behavioral (psycho-motor skills)
• Reflective (psychological interpretation and understanding)

Interestingly, these three levels map nicely to the underlying structures of argument and user experience!

• Visceral : Style : Ethos
• Behavioral : Behavior : Pathos
• Reflective : Structure : Logos

While increasing the emotional appeal of a UI through seductive cues can have a positive impact, the level of complexity increases as well:

• Information increases and becomes more dense
• There are more visual cues begging for attention
• A changing mix of graphic elements and behaviors across web, mobile, and desktop applications begin to blend

Quite simply, having flashy buttons and animated tabs are of no benefit if the labels are misaligned or somehow inhibit task completion. Good ol’ fashioned craft through sound typography, color, and layout remain vital. Each design variable is a communicative signal, but when combined with others, they merge to create an expressive message that informs and inspires. If executed poorly, these variables can interfere with the user’s goals and become a mess of interface signals.

The Burden and Gift of Richness

Designers must apply rich elements in careful balance (much like composing an argument where neither structure, nor style and behavior overwhelms the other) and be ever mindful of context and semantics. Will the meaning of the argument be enhanced by richness? These questions will only intensify as physical-digital interfaces, interactive cinema, and on-demand services herald new challenges for UI designers. Approaching them with an eye toward richness, combined with the goal of expressive communication, can help address difficulties and awaken the full potential for improving people’s lives.

It is useful to briefly remind ourselves that richness existed long before computers. Just think back to the last dinner you enjoyed with friends or family, complete with a delicious meal, aromatic wine, and sumptuous dessert. That moment exemplified a rich experience. The exchange of ideas, the multi-sensory objects, and the choreography from the arrival at the restaurant, to the waiter’s performance and the food’s presentation, all contributed to a sense of richness. This example and others like it can be a powerful remedy to hype-driven attempts at designing for richness.

And therein lays the great burden and hope of designing for rich experiences. As arbiters of human attention, designers must ensure there is not an overload of superfluous, gratuitous richness that distracts users or makes a product difficult to use. Recognizing that every digital product is a rhetorical moment amplified by expressiveness can enable designers to tap into the promise of rich experience: Intelligently crafted, well-intentioned acts of communication that are emotionally satisfying and sensibly organized to meet user goals, thus becoming something memorable and valuable. Ultimately, that is what richness is about—connecting to those core human qualities that define our goals, values, and attitudes for living.⁷

References

¹ Lanham, Richard A., “The Economics of Attention”:http://www.amazon.com/Economics-Attention-Style-Substance-Information/dp/0226468828

² Gajendar, Uday. The Aesthetics of Design: A Model of Beauty for Designers. 2004 IDSA National Educators Conference, Pasadena, CA.

³ Ibid.

⁴ Rhetoric is typically regarded as sly double talk attributed with politicians and salesmen. Rhetoric is in fact a classical art formalized by Aristotle, which led to a discipline devoted to studying and performing persuasive public speech. As a situated art of communication, rhetoric offers strategies to shape people’s actions and thoughts with language. For more information on rhetoric, please see works by Richard Buchanan and Wayne Booth—and for hardy souls, Richard McKeon.

⁵ Booth, Wayne C. (1963). The Rhetorical Stance. College Composition and Communication, Volume 14, Number 3, Annual Meeting, Los Angeles, CA.

⁶ Screenshots of these examples can be found in this “Flickr photo set”:http://www.flickr.com/photos/udanium/sets/72157600081468924/

⁷ For further pointers on how to put these ideas into practice, please visit “my blog”:http://udanium.blogspot.com.