What Does Rich Mean?

Written by: Uday Gajendar

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. 1 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. 2 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 3

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 4 , the necessary components of a well-formed argument include are:

fig_1.gif

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. 5 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!

baxley_model.giflukew_model.gif

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. 6

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

References

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

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

3 Ibid.

4 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.

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

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

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

Learning to Love the Pixel: Exploring the Craft of Icon Design

Written by: Uday Gajendar
“Discussing craft as a value of the user-centered process will expand upon typical issues confronting designers, highlighting matters of moral value, innovative potential, and aesthetic character.”Designing web-based enterprise software involves creating complex artifacts like architecture wireframes, object models, screen flows, and clickable prototypes in order to articulate aspects of the online experience for product stakeholders. As an interaction designer at Oracle, this is quite the norm for me. This routine, however, was recently disrupted when I was assigned the task of creating icons for some of our products.

I first wondered (a bit snootily, perhaps) whether such seemingly trivial bitmaps could be worthy of an interaction designer’s breadth of skill and knowledge. I’m used to designing whole systems of interaction! It soon became clear that, while macro-level outputs (such as flow diagrams or wireframes) require a flexible 10,000-foot view of the application, micro-level icons demand I put on a parachute (or straightjacket, some may say) and plummet to a 1600-percent zoom in Photoshop, going eyeball–to-eyeball with just a few pixels. Amid this dramatic shift in scale and display, I realized interaction designers can have a positive impact on the user experience in two additional ways:

  • The craft of creating icons can support high-level (i.e., typically IA-driven) considerations of the user’s experience by helping visualize access points throughout the application.
  • Conversely, processes and methods used in high-level design can improve icon design by avoiding thrown together graphics that simply “pretty up” screens, and instead crafting something relevant, usable, and attractive.

But what does “craft” mean for interaction designers? In looking at the activity of creating icons, craft can be seen as contributing care and diligence to the production of artifacts that benefit the user. From the designer’s point of view, craft also suggests a personal sense of pride and ownership in the artifact. In addition to debates over wireframes, search engines, and controlled vocabularies, discussing craft as a value of the user-centered process will expand upon typical issues confronting designers, highlighting matters of moral value, innovative potential, and aesthetic character, which are embodied within and transcend any one artifact (such as an icon).

Icons as communication

From Byzantium to your desktop
What are icons anyway? Historically, icons (from the Greek, eikons, or “images”) were religious paintings on wood panels, made during the Byzantine Empire in the 6th century.[1,2] They flourished across Europe for several centuries under various stylistic and cultural influences (i.e., the Middle Ages, the Italian Renaissance, etc.). As visual symbols, they encouraged pious duty and passed on Biblical stories to mostly illiterate audiences.[3] They served as a way to “touch” and “see” something otherworldly yet influential in daily living.

Fast-forward to today. In the dynamic graphical computing context, icons are stylized representations, with varying degrees of abstraction, of some internal (i.e., encoded in binary) object, process, or status of an application. According to Mullet and Sano, an icon denotes an object “by virtue of its own likeness to or resemblance of that object, on the basis of some quality or characteristic inherent in the icon itself.”[4] Icons are thus points of access to the digital space. They may be clicked or viewed, and offer actions the user can take for routine computing tasks. Of course, “pious duties” are not espoused, but “holy wars” over icon colors and styles are known to have raged across design departments.

How does meaning come from icons?
As contextually-located objects, icons exemplify the big challenges of communication and interpretation when using codified visual languages to convey meaning. “Semiotics,” or the study of communication processes, can help designers arrive at a deeper understanding by defining the relationships among signs, symbols, references, and human interpreters. I will forego academic discourse about this rather dense topic, but the following basic semiotic elements should be noted:

  • Syntax: the internal grammar of parts that enable a properly formed sign to be parsable by someone or some system—think of the computer throwing a “syntax error”
  • Semantics: the intending meaning of the sign by the maker(s) of it
  • Pragmatics: how the sign is received, perceived, and acted upon by some person or interpreter by the confluence of syntax and semantics; the resulting effect [5,6]

Whether in home software, mobile phones, or enterprise applications, icons have helped make computing more communicative between people and digital systems. Arguably, they have also cluttered our screens and morphed into a winking, blinking miscellany of digital ephemera that distracts the user from her goal. Or they are simply ignored. Herein lies the value of craft in enhancing user experience, at the pixel level and beyond.

Icons as problems of craft

The craftiness of it all…
So, what is craft? A quick (and somewhat simplified) stroll through its history will help, with guidance from Malcolm McCullough’s Abstracting Craft. Arising from old English “craeft”—for strength and power—craft was the province of tradesmen, smiths, and guilds skilled in the manual production of goods.[7] Craft was plying one’s trade to materials like metal or wood, devoting significant time and effort to creating objects of unique worth. This is in contrast to products of mass industrialization and distribution, created via mechanized means under the inhumane conditions of factories and mines.

Mass-produced goods gave rise to the social unrest of the early 20th century and the critical philosophies of Marx and others, which emphasized the value of the human worker in regards to his output. This suggested the primacy of relationships between the eye, hand, and mind, and tools and materials. In the UK, William Morris led the noble Arts & Crafts movement to resurrect handiwork aesthetics and values of material economy and moral virtue. Americans saw this with Shaker furniture, which was borne of homespun simplicity. Amidst the tumultuous changes of the ensuing “machine age” of the Industrial Revolution, craft as a practice came to be perceived as hobby-like amateurism (think of the crafts section at your local Wal-Mart), while art became a search for loftier values removed from technique. Meanwhile, bold, fast machinery suggested high quality and “futuristic” production. Remember “streamlined” refrigerators, phones, and car tailfins of the first half of the 20th century?[8]

However, from Eames furniture to Rand’s logos to Apple consumer products, personal craftsmanship has resurged as a signifier of commercial design achievement. Consumers and BusinessWeek alike have applauded the high quality of the iPod, Mini Cooper, Nike watches, OXO utensils, and so forth. Craft remains “skilled labor applied towards practical ends.”[9]

It’s not easy being digital
But what about digital media? Can there be a craft of intangible things like icons and interfaces? Digital media is ephemeral, iterative, incremental, reversible (thanks to Undo), and now increasingly networked and collaborative—does any of this make a GIF or web page less craftworthy? And why should designers care?[10]

One reason craft is important, as McCullough suggests, is that the structure, constraints, and play of any medium stimulate personal innovation, pushing the boundaries of what’s possible while solving design problems in a skillful manner. The digital medium, comprising pixels, screen resolution, and color bit depth, can be manipulated by computational processes and tools like Photoshop to unheard levels of ingenuity and “craftiness.”

Secondly, as designers plan an optimal interface, concern for detail—striving for craft—can motivate a team, elevate quality, generate pride, and encourage positive attitudes about how people can use digitally mediated processes and artifacts to improve the user experience. McCullough refers to this as the “moral value” of an activity independent of the product, towards a “humane end.”[11]

Crafting icons, pixel by pixel…by pixel

Some examples from my time designing icons should help illustrate the value of craft with the interaction designer’s involvement at such a detailed level. No doubt these examples will help many readers recall their own icon design efforts—maybe even yesterday’s project.

The development of an icon can be a deep process of applying personal knowledge, corporate context, and skilled labor towards the creation of something the user will see and interact with and that will drive her experience with an application. And, since an icon gets maximum exposure to the end user, the designer better do a darn good job creating it!

I start pixel production after receiving detailed icon requirements from the product team, such as the product name and user profile, visual context, task situation, functional description, and icon type. In the Oracle UI standards for web-based applications, icons are categorized into different types: global button, information quantifier, inline messaging, object type quantifier, and functional icons. Each type has specifications for sizes and colors that reflect the corporate brand for Oracle’s web-based applications and that constitute a usable, persistent visual language. This aids in a user’s interpretation of and expectations for icons featured in other Oracle applications. So I must match the icon request with the category and dictated visual style, including dimensions and colors (e.g., a functional icon is 24×24 pixels, with four to six shades of web-safe “blue”).[12]

I then sketch out concepts on paper, starting broad and narrowing down to a select few worthy of Photoshop. Digitizing the icon is a task featuring a curious intimacy among the tools (PC workstation and Photoshop), the artifact I’m making, and me, due to the level of zoom required to manipulate the pixels. Much like a bricklayer building a wall or a nuclear scientist laying down plutonium, I precisely position pixels one by one, which can yield big differences in just a few clicks—what was once a folder suddenly becomes an account ledger.

Meanwhile, with multiple windows open in Photoshop (across two monitors, of course), I am afforded different views of the same artifact at varying levels of zoom—this helps me consider the totality of the image, like a cinematographer taking in a whole scene. I also concurrently view other icons and source materials (screen captures, stock photos, scanned sketches, clip art, etc.) that I can use for quick reference, inspiration, or even for some parallel icon analysis (“Should I move this pixel over one more?” “Why is this icon not like the others?” “How can I strengthen the color scheme?”). I also refer to screenshots of the application to make sure what I’m making fits in its context. Throughout the process there is rapid iteration and multiple undos, which permit many concepts to be generated in a short period of time. Some Photoshop features, such as the History and Layers Palettes, make this even easier.

The immediacy and improvisation of this process help cultivate dexterity with the tools (such as implicitly mastering keyboard shortcuts and mouse positions to reach toolbar buttons). This also creates a “feel” for the pixels—the ability to anticipate the effects of moving one pixel versus another, much like a sculptor gaining a feel for marble or clay to express her vision.

This increasingly smooth, continuous interplay of hands, eyes, and tools (particularly the mouse as an extension of my hand) mediates my influence on the pixels and creates a sense of “flow,” or optimal experience of a craftsman engaged in his trade. (This is usually aided by listening to trendy trance music.) Popularized by University of Chicago psychologist Mihalyi Cziksentmihalyi, the concept of “flow” combines maximum performance towards a challenging goal with immediate feedback loops.[13] This is exactly what icon design involves at a tightly focused level, much like a jeweler refining an intricate pattern. All the while, my past training as a designer operates subconsciously, evaluating visual balance, scale, harmony, color, form, contrast, figure and ground, etc. The hand/tool/mind relationship implies ongoing active knowledge, but with the physical memory of mousing around to different parts of the Photoshop interface to find functions and shortcuts.

Of course, beyond the actual production of icons, I work as an intermediary among project managers and developers (the folks that request the icon) and the standards group (the people who approve the icon) to achieve icon agreement. There is constant pressure to satisfy team requirements and user goals while preserving standards. And there’s always input from other designers—often the toughest critics!

Shifting the mind from icon to wireframe…and back

These anecdotes suggest craft is an emergent value of a dedicated, focused activity that requires individual skill and diligence. This is the interaction designer’s value in creating artifacts of the user experience—the “it” a user sees and uses firsthand on screen.

Similarly, reflecting upon icon craft offers lessons for information architects and strategic design thinkers. For example, in moving from macro-level plans to micro-level pixels, there is a shift of mind (or “metanoia”) that forms new perceptions of how parts and wholes relate in the overall application UI.[14] In particular, considering the craft of the design helps the designer or architect:

  • See icons as manifestations of functional requirements in the product plan—as action triggers and status cues that support information display and decision-making.
  • Recognize that icons reflect the character and voice of the application, particularly that of a style guide governing the look and feel of products.
  • See icons as designed entities that require research, testing, iteration, and specifications in order to ensure sound, consistent construction.
  • Add a sense of poetics to enhance the user experience, to alleviate the tedium of tasks that rely on drop-down menus and other standard web widgets.
  • See icons as part of the whole system of interactions, at a page level (in the organization of components), an architectural level (as visual indicators resting on invisible wireframes that the user may or may not perceive), and a transactional level (as points of access to various paths or flows).

Good craft can be applied to “macro-level” outputs, like wireframes, prototypes, even code itself, to yield something worthy of attention to boost user experience quality and designer morale. Thus, while creating the interaction flows, the designer should be mindful of the controls and pixels that must be crafted to helpfully, efficiently guide the user. Similarly, while designing the icons, the designer should be mindful of the architecture and interface context within which the icon resides, to ensure its relevance and utility.

Examining the craft of icons suggests various ways designers can add value to the user experience, both from the typically broad, strategic perspective, and at the level of detailed pixel perfection. I believe part of a designer’s significance is found in providing a sense of craft to the design, whether it be embodied in an icon, a diagram, or a task flow. This is achieved by using a sound process respectful of context, users, constraints, goals, and especially personal attention to the details of the artifact. Craft adds to a sense of the cohesiveness of the whole and its parts, at varying levels of abstraction and in various relationships. This is particularly true for enterprise applications that have interdependent flow, architecture, and page level issues. Craft also contributes to the “quality of life” for designers slaving away, by offering a sense of purpose in an often impersonal economy where satisfaction must arise from the designer’s attempts to produce “good work” with positive impact. Ultimately, craft becomes a key concept in the modern design lexicon, and helps ensure a sense of humanity in the production of digital artifacts, and their user experiences.

  1. “A Short History of Icons,” from Praying With Icons by Jim Forest, published by Orbis Book, 1997.
  2. Icons, Their History and Construction,” online document.
  3. Ibid.
  4. Mullet and Sano, Semiotics: A Primer for Designers,” at boxesandarrows.com.
  5. McCullough, Malcolm. /0060920432/ref=nosim/boxesandarrows-20”>Flow: The Psychology of Optimal Experience.
  6. Senge, Peter. Uday Gajendar is an interaction designer with the Oracle Usability and Interface Design Group, where he has spent the last two and a half years designing healthcare software, financial applications, and visual querying tools.