Finding the right compromise and synergy between aesthetics and function.
Truth and Beauty
There are two kinds of design. The first is aesthetic design, with its patron god Beauty, that seeks to create attractive products, to make them pleasing to the eyes and other senses. This is apparently the kind of design that dominates work on the web where most web designers come from a graphics design or other art-related background.
The other kind of design is functional design that seeks to create effective products, to make them work well under the expected conditions of use. To these designers, it doesn’t matter how people feel about the product. What matters is how it performs by objective measurement. Its patron god is Truth: either the product works to specification or it doesn’t.
Many web designers seem to place little emphasis on second kind of “design,” perhaps because it doesn’t come from schools of art. It comes from engineering. It’s the kind of design where one takes the expected loads for a bridge member and determines the physical dimensions the member will need to avoid deformation. You may wonder why engineers call this “design” instead of simply “engineering.” The reason is that engineering is broken down into two subdisciplines: design and analysis. Design is the specification of the product characteristics (e.g., dimensions of the bridge member), while analysis determines the performance and use conditions of the product (e.g., the load the bridge member needs to take)
In any case there’s functional design in addition to aesthetic design, and each kind of design has different goals, criteria, disciplines, training, and even stereotypical personality types. Here’re their differences:
| Attribute | Aesthetic | Functional |
| Goal | Attractiveness | Effectiveness |
| Patron | Beauty | Truth |
| Analysis | Intuitive & Philosophical | Empirical & Computational |
| Criteria | Subjective | Objective |
| Academic Training | Art Schools | Engineering Departments |
| Stereotypes | Arty Expressive Flighty | Geeky Introverted Practical |
| Utterly inaccurate but obligatory popular brain hemisphere distinction | Right | Left |
| Wine of choice | Chardonnay | Merlot |
So aesthetic designers and functional designers are like completely different people, which wouldn’t be a problem if they didn’t work in the same discipline, but they do. The expertise of both is needed for user interface design and both functional and aesthetic design are part of the user experience discipline. A user interface for a public web site or consumer software or hardware needs to be both effective and aesthetically pleasing to be a success, that is, to provide a positive user experience. Users value both beauty and truth.
Fortunately, there’s common ground between the two types, so I think we can work together. We both do research in our own way, studying nature, people, and other products for inspiration, but functional designers are more likely to employ a scientific approach to gather and analyze the data (which isn’t necessarily the best way to get inspiration). We both appreciate the importance of design iterations, the main difference being that functional designers are more likely to want to test each design iteration on the users.
We are both dedicated to the user. For aesthetic designing, this is a natural result of its subjective orientation. Most artists are looking to connect with some kind of audience, and for a user interface, that audience is usually the user. For the aesthetic designer, it may be difficult to conceive of designing for anything other than the user. For functional design, dedication to the user took revolutionary thinking. Through the 1970s, designing software meant creating the most efficient code possible for the remarkably weak CPUs and storage capacities of the day. It was the software engineering equivalent to designing bridges to use the least amount of steel necessary. As computer capabilities increased and the computer users came to include broader cross-sections of the population, some engineers awoke to the heretical notion that real bottomline performance -taking input and getting output quickly and accurately -depended more on designing for the limits and abilities of the users rather than the machine. Thus was born user-centered design, to be distinguished from the former implicit machine-centered design. Usability engineering concerns the functional design and analysis of user interfaces. (There was a similar phenomenon during World War II when the complexities and capabilities of advanced war machines made the human operator the bottleneck in performance, thus human factors engineering came into its own).
Finally, while the arty and geeky types have lived largely separate academic lives, we both got stuffed in our lockers by the jocks in junior high, so I think there’s some shared experience to bond on. In an ideal project team, the user interface designer is well-trained in both functional and aesthetic design, not unlike architects and industrial designers. But however well an aesthetic designer and functional designer might get along (apart from ordering a carafe of wine), conflicts in design between functional and aesthetic design goals are inevitable. In this post, I cover some guidelines for resolving such conflicts.
In the interests of full disclosure, I should say that I’m from the functional design side, being schooled in industrial engineering and research psychology, the latter which, while certainly emphasizing the significance of people’s subjective states, also tends to instill a certain value for objectivity. As for my personal life, I may pursue aesthetic experiences as much as the next guy, but when it comes to designing my own space, well, here for example is the wallpaper on my computer right now (click for full size).
Perhaps aesthetics aren’t at the top of my list of priorities. So maybe I’m not the best person to suggest resolutions to the conflict between aesthetics and function, but I’ll take a shot anyway with the justification that no one can stop me.
Function versus Aesthetics
As it’s typically presented, there is a trade off between functionality and aesthetics. We can see this in my pen, a Cross Medalist, which I carry with me always, and use for almost all non-digital writing and drawing.
Functionally, it’s rugged, easy to maintain, and draws a smooth even line of ink, but it’s not the most usable pen conceivable. The narrow body and smooth metal surface with longitudinal grooves make it harder to hold than some pens. Debatably, a button to retract the point would be easier to use and more discoverable than twisting the body. These are compromises for aesthetics: it gives the pen a pleasant sleek look and feel that I like -so much that for me it outweighs the functional costs.
We see similar conflicts on the web. On early web sites, functionality was poor because some graphic design techniques that were perfectly functional for print weren’t functional on computers. Usability came along to inject functional design, but at a price of bland appearances in some eyes. We see conflicts between aesthetics and function increasingly in desktop systems too. I’ve personally disassembled Microsoft’s Vista for favoring good looks over usability. Apple is hardly immune to it, not on its web site, its Leopard OS, or its hardware. In general the design of consumer hardware frequently favors aesthetics over function, and in the mobile market, this tendency appears to be increasing.
When the user values both function and aesthetics, how do we resolve such conflicts? How do we decide on what is the better design?
Aesthetics Facilitating Function
Traditional Rules of Form
Well, first of all, functionality versus aesthetics is not necessarily a zero-sum trade-off. Indeed, sometimes aesthetics enhance functionality. Many of the artistic traditions for pleasing forms also make functional structures. For example, linear and hierarchical information architectures lend themselves to both graceful visual representation and also make for easy web site exploration and browsing. Using the ”grid” from graphic design produces neat, aligned, balanced forms that not only look good, but are easier to use. A neatly laid out dialog box, for instance, makes it easy to scan for a desired field. A consistent and disciplined graphic style throughout your web page or app facilitates managing your graphic variability, which minimizes the impact of clutter. And it also looks sharp. It’s part of what the Apple Human Interface Guidelines calls “aesthetic integrity.”
This doesn’t mean that all neat balanced designs are the most usable. If the symmetry and order do not correspond to the function, then such aesthetically motivated designs interfere with functionality, providing the user with misleading cues for interaction. Microsoft Vista’s Advanced Search dialog uses neat even spacing between the controls that may look nice, but obscures the relations among the controls. It is not immediately apparent that the controls are more related horizontally than vertically.
References for Emotional Effects
Artistic effects are often produced by creating references to something else. Quite apart from the pure form of the Cross pen, for example, the use of gold and silver metals are associated with wealth and status. References to these positive attributes increase the attractiveness of the pen beyond any inherent beauty associated with such materials. References may also be used to communicate function, giving users a feeling for how your product works. This is accomplished by designing in references or metaphors to things the users are familiar with in order to provide affordances for user actions. Examples include giving command buttons a raised appearance to suggest an object to “press,” a visual design that looks good and is easy to learn. Another example is the simulated physics applied to scrolling lists on the iPhone, where the faster a finger sweeps the list, the farther the list scrolls due to “momentum.” Functionally, this behavior allows the user both gross and fine scrolling in a manner that is easily discovered while avoiding the clutter of multiple scrolling controls. It’s also fun to use. Designs that strive for such aesthetic harmony with the user’s context through the use of metaphors can provide naturally intuitive interaction, where users are able to learn the UI quickly by generalizing from metaphors employed by the designer. Emotionally, users experience a sense of directness and control over the product.
As with applying traditional rules of good form, not all applications of metaphors result in the most functional or intuitive user interface. One has to choose the right analogies. Efforts to imitate physical electronic devices in software UIs, such as done by Avast Antivirus software, are almost certain to have poor usability, partly because modern physical electronic devices have poor usability to start with, and partly because it means importing the inherent weaknesses of physical devices (e.g., an inability to visually represent a disabled control).
We have a similar phenomenon with Microsoft’s Vista, where references to the web conventions have detracted from usability.
Most often, nonfunctional aesthetic references are a result of designing for fashion, rather that for beauty specifically. Fashions by definition are transitory styles that are widely applied for a given period of time. The actual style may be regarded as arbitrary. The point is only that it is different from current styles. By appearing to break with the past fashions, a designer creates references to What Is New, a generally desirable association for technological products, where new is assumed to mean better performing. Also, by being different than mundane former styles, fashions also created references to What Is Cool, giving the product an elite status sought by consumers.
Any fashion ultimately destroys its own references. By being widely applied, fashions become old and mundane, and thus lose their associations with New and Cool. This provides an opportunity for a new fashion to rise. The perpetual change that accompanies fashion is one reason it interferes with functionality of a UI. Changing something for merely for the sake of looking “fresh” generally means users must relearn the UI for no functional benefit.
The “widely applied” part of fashion also tends to interfere with functionality. Current fashions, like gradient shading, transparencies and reflections, touchscreen interfaces, the Carousel, and Ribbon menus, are not themselves inherently nonfunctional. Like any design element, each can be used for good functional effects as well as aesthetic effects. But once a style is recognized as New and Cool, then inevitably many designers will adopt the style and overuse and misuse are the result. We get gradient shading that confuses the relations among controls, transparency and reflection that interferes with readability, touchscreen interfaces where their disadvantages out weigh their advantages, carousels where pages should be used, and Ribbons for apps with few commands.
Compromising Aesthetics for Functionality
If you’re designing primarily for functionality you can still include substantial aesthetics in your design by:
- Avoiding fashions.
- Designing for reality.
In avoiding conflicts between functionality and aesthetics, the issue is not the presences or absences of aesthetics, but the proper kind of aesthetics. This still places boundaries on the acceptable space of aesthetic design, but the boundaries may be wider than you might think.
Avoiding Fashions
Many conflicts between aesthetics and function can be avoided by not chasing fashions. In many situations, this means no real cost to aesthetics, because ignoring fashions is a good path towards superior aesthetics in addition to functionality. Fashions, in general, are ugly. In order to be New they need to deviate from traditional rules of good form, and thus tend to be imbalanced, over-wrought, and disproportional. Fashions tend to be extreme in order to announce their newness, in the process becoming caricatures of themselves. Chasing a fashion has the short term benefit of making your product appear new and cool, but soon fashions go out of style, and now you’re left with a UI that is nonfunctional and ugly. You’re app has the UI equivalent of wearing oversized pants. On the other hand, by creating a timeless style, one that will still look good decades from now, an aesthetic designer will have greater total positive impact. The Cross pen has such timeless aesthetics. Although it was also briefly fashionable a couple decades ago, it remains as attractive today as ever.
Designing for Reality
In general, conflict is avoided if the aesthetic design is consistent with functional demands. Traditional rules of good form enhance functionality when the resulting form is aligned with function -when the visual symmetry and groupings corresponds to functional symmetry and groupings. References enhance functionality to the degree the reference or metaphor is consistent with the function.
Conflicts with function emerge when aesthetics are dishonest or otherwise disjoined from reality. This can occur through the application of references that represent how the designer (or marketing) would like the product to be regarded, rather than how it actually is. For example, following the fashion of the touchscreen, such as on the new Blackberry Storm, is often an attempt to project the hopeful notion that the product is as easy to use as an Apple iPhone, when the reality is that many touchscreen devices lack the heavy investment in refinement the iPhone has. Furthermore, for many tasks, such as the emailing a Blackberry is used for, the old thumb-operated keyboard is actually easier to use. The touchscreen represents an aspiration, not an achievement.
Conflicts can also occur when the designer adheres to an uncompromising aesthetic vision, which is different than a functional vision, something that can be verified empirically. Trouble is ahead when an aesthetic designer is out to make a point with a UI, rather than just make a UI. One example of this is Apple’s commitment to shiny flat surfaces with rounded corners irrespective of the device (including one where slipperiness is a functional liability). In the name of a smooth shape, mouse buttons disappear entirely, functionally making for poor discoverability and tactile feedback. Yes, in a utopia, the inhabitants master their environment with a few deceptively simple looking artifacts, like wizards in a fantasy world summoning great powers with a simple wooden stick or sparkling amulet, but that is not how things are, ever were, or ever will be.
Ultimately then, most conflicts between functionality and aesthetics are not conflicts between Truth and Beauty, but between two kinds of Truth, the engineer’s realistic Truth and the artist’s idealistic Truth. The realistic or “dirty” Truth is rooted in what exists here and now, in what can be discovered from study of the user’s world by either the artist or engineer. Idealistic “purist” Truth looks beyond the superficial here-and-now to express an artist’s concept of what could be. There’s no answer to the question of which Truth is “right.” The deeper concepts an idealistic artist may explore may not be accessible to the average user today, but such exploration may be necessary to create the advanced UIs of tomorrow. On the other hand, it’s also important to have a usable product today.
Compromising Function for Aesthetics
Rather than limiting aesthetic design to realistic non-fashion-chasing possibilities, there are times when it may be better to compromise function for aesthetics. The kind and amount of compromise firstly depends on what you see as the purpose of design. What master does design serve? Some may argue that design is done for business and a business exists to make money, being ethically accountable only to the business’s investors, and, by extension, the bottomline. From this perspective, functionality may be compromised in a design if ultimately the design makes the business more money for whatever time interval the business plans for.
If this is the purpose of your design, then the appropriate research can be conducted to resolve conflicts between aesthetics and function. More so than user experience research, market research includes methods for collecting and analyzing data to determine which design features will bring in the most revenue. Weights can be applied to revenue from both immediate sales and potential future sales from returning customers (the latter being where arguably functionality matters more). Ultimately, the market size and best price can be afixed to the product based on such research, and the total revenue predicted.
Alternatively, you may regard the purpose of design to be to improve the world, not to get grandiose about it. Sure, the company needs to make money to survive, but the company only deserves to survive if its products actually make life better for the users. Both aesthetics and function improve a user’s life, so from this perspective, functionality may be compromised in a design if ultimately the design provides more total value to the user through its enhanced aesthetics.
The value of a design to users is correlated but not necessarily equal to buying behavior (and therefore revenue). The intent to purchase is a function of the customer’s perceptions of the design, which is not necessarily the same as to the degree the design in fact improves the user’s life. Users don’t always recognize what is best for them, especially if user research is limited to surveys and structured interviews. User satisfaction is not necessarily the same as user value. If the user thinks your app is faster, then they may be more likely to buy it. However, if the purpose of design is to make things better for the user, then what matters is whether the app is faster.
There no formula for calculating the value of a design from aesthetic and functional benefits to the user, but the degree you should compromise functionality for aesthetics depends on the context of use of the product; that is the characteristics of the users, the environment, and the task. Here are some broad guidelines:
Users
Aesthetics are more important relative to functionality for consumer products than for business products. While business users like a pleasant place to work as much as a consumer, it’s usually more important for business users to complete their task efficiently and accurately than for consumers. When using a word processor, for example a spelling error in a contract is probably a greater embarrassment than in a letter to the user’s aunt (your aunts may vary).
Also in my experience, older users are more concerned with function and less concerned about aesthetics, especially fashion, than younger users. Maybe us old fogies realize we’ll never be fashionable anyway, so why bother? Meanwhile, older users are going to have less disposable time to learn new things, as well as having various performance degradations (e.g., poorer eyesight) that make such learning or using more onerous. I’m fine with my Cross pen now, but if I ever develop arthritis, I’ll be changing pens.
Environment
The more social the environment, the more important aesthetics become relative to functionality. In social environments, the appearance of the product transfers to the appearance of the user in direct relation to the proximity of the product to the user. Under such conditions, aesthetics earn double points for the user, being pleasing to the user directly and impressing others who see the user with the product, which also pleases the user. If the user is going to be seen with the product by friends or business associates, aesthetics matter more. If the user wears or carries the product, then aesthetics matter even more. For decades, various industries threatened and pleaded with workers to wear safety glasses. Then they made the glasses stylish looking, and workers were suddenly willing to wear them.
The more demanding the physical environment, the less important aesthetics become relative to function. Function matters more if the product is going to be used under poor viewing conditions, or in heat or cold, or while the user is wearing bulky clothing, or under time pressure, or when fatigued. The Cross pen is fine for writing a few paragraphs or so, but if I’m going to spend eight hours scribbling notes from interviews or observations, then I reach for a thicker grippier pen that’s less wearing on my hand muscles.
Task
The greater the interaction, the less important aesthetics are relative to functionality. Aesthetics is a sensory experience generally enjoyed passively, the user appreciating the sights, sounds, feel of the product. As the task shifts from providing output to the user to the user providing input to the product, such sensations make up a small proportion of the experience and may even distract the user from making the desired input. More interaction means more to learn about manipulating a product -more controls, more modes, more things a user can do. Making such learning easier becomes proportionally more important the more there is to potentially learn.
There’s not much interaction with a Cross pen. Other than knowing which end the write with, about the only input to learn is to twist the barrel to expose or retract the point, a nonstandard interface in a world where pushing a button is the more common input for such results. But given the limited and simple interactions supported, one can forgo for aesthetic reasons the traditional button, and even labels to indicate which way to twist for what. However, if a pen has four colors, a laser pointer, a flashlight (with six modes), a digital camera, and a divining rod, then it becomes more important to provide the conventional button at the end of the pen (among the many other controls) so I can reasonably guess out how write with the frigging thing. Likewise, static web pages, where all the user has to learn is what color represents a link, can make more allowances for aesthetics (including deviating from the once standard bright blue for links). However, web applications, with their richer interactions, can tolerate fewer allowances for aesthetics, and need to use standard-looking and standard-behaving controls.
Summary Checklist
Problem: Balancing aesthetic design with functional design.
Potential Solutions:
- Recognize that functional and aesthetic designers ultimately have much in common.
- Recognize that some aesthetics, such as traditional rules for good form and references to metaphors, can enhance function.
- Keep aesthetics consistent with reality.
- Avoid chasing fashions.
- Compromise function for aesthetics for
- Consumers and younger users
- Products used in a strongly social environment, especially when the product is proximal to the user.
- Products used in undemanding physical environments.
- Simple products with minimal interaction.