December 2009

Volume 24 Number 12

Usability in Practice - More Than Skin Deep

By Dr. Charlie Kreitzberg , Ambrose Little | December 2009

Style sells. That’s as true about software as it is about other products. A slick visual design can attract buyers and suggest that a product is cool, well-thought-out and effective. Of course, a pretty package doesn’t guarantee quality of the contents, as well-worn proverbs like “beauty is only skin deep” and “don’t judge a book by its cover” remind us.

But visual design matters. While slick visual design is no substitute for quality construction, it’s a mistake to dismiss visual design as just marketing fluff. At a minimum it should be professional and attractive. If you are producing a product for customers or the public, you might consider hiring a visual designer to develop a distinctive look and feel. And if you have a suite of products, a common look and feel is important.

Visual design is more than decorative; it has a strong effect on the user’s experience. Some areas to focus on are:

• Look and feel  
• Readability
• Discovery of affordances
• Supporting communications
• Emotions and trust

Look and Feel

Look and feel is the term used to describe the overall impression (personality) of your product. It’s not a particularly well-defined term, but it does remind us that visual design contributes greatly to a product’s character.

The term look generally includes colors, fonts, graphics, logos and branding. The feel is a bit more amorphous and attempts to capture the quality of the user’s experience in interacting with the product. Feel is created through the interaction of visual design and other design elements such as information architecture. Feel is affected by elements such as animations, transitions and language used in the interface. Feel is often described using adjectives and metaphors: formal, casual, friendly, vibrant, aggressive, laid back. Although it’s possible to discuss look and feel separately, in practice they should form a coherent whole.

To help you think about look and feel, you might want to visit CSS Zen Garden. Created by Dave Shea, a Web designer from Vancouver, the CSS Zen Garden is a collaborative work where visual designers develop a look and feel for a standard HTML site. The rules are that they can modify a CSS style sheet and add graphics but may not make changes to the HTML or content. So in that sense, some of the feel is set—you can’t change the verbal language, but you can change the visual language.

When you are at the site, you can flip among the designs. They are all quite good, but very different in look and feel. As you switch from design to design you can get a good idea of how much difference the approach to visual design makes.

You will surely prefer some designs in the CSS Zen Garden to others. Choosing a look and feel is a matter of taste and appropriateness to the purpose of the product. As with other aspects of the user experience, it’s the taste and expectations of your audience you should try to meet. 

You may decide that some of the designers who contributed to CSS Zen Garden were more focused on their self-expression—art—than about the site’s content. This is a real problem. Many visual designers are so focused on their art that they are less successful in enhancing readability, messages, affordances or brand, which are important. The take-away is that not every good artist is a good visual designer for software.

You may be interested in the presentation of visual framework patterns in the (Quince UX Patterns Explorer. There you can learn how visual design can be used to establish a framework or “visual design language” that can be used throughout your solution (and beyond it into other assets) so that there is a consistent and appropriate design framework.

Readability

Readability is strongly affected by visual design. Readability, broadly, is the user’s ability to comprehend and process content. We’ll focus mostly on the readability of text, but you should consider all the types of content you are supporting. When it comes to readability, visual design works hand in hand with your product’s information architecture. Recall that information architecture is concerned with how information is organized semantically in a visual hierarchy. The visual designer will determine how the various types of information are rendered.

A couple of Web sites that (inadvertently) demonstrate problems with readability are Mr. Bottles, and Bella DeSoto. These sites are from Web Pages That Suck, which isn’t always a reliable source but a way to view sites that some people consider problematic. As you look at these sites, consider what is creating the readability problems and how you might address them.

An interesting readability tool can be found at Readability. This tool enables you to explore different font sizes and column widths and, through a bookmarklet, apply the desired look to arbitrary Web pages.

Fonts and typography can have a powerful effect on the product’s look and feel. We often tend to think of fonts as static and utilitarian but they can carry a lot of emotional impact. It’s worthwhile to visit webdesigner depot, where you will find 18 examples of typography used with video to convey powerful messages. While you may not have many opportunities to use this sort of typography-in-motion, you will get a sense of how powerful a tool it can be.

Type size is one of the more important factors in readability. Often developers (and designers) are young and don’t think about the fact that older users have less acute vision. As a result, too-small font sizes are common. Choosing a smaller font size can be okay, as long as the design supports enlargement either through the browser (assuming that’s available) or through a more direct option like you see on many news and other information sites.

The contrast between the font and the background is also a very important element of readability. There is a trend among some designers to use a grey rather than black type for normal text. It looks elegant but can be difficult to read. Compare the grey text (10pt, #AAAAAA) with the black version (10pt, #000000) in Figure 1. Using grey can be effective for small amounts of text that you want to de-emphasize. Used in that way, grey can help unclutter the page. But using grey for primary content makes the content difficult to read.

Figure 1 Text Color and Background Contrast

In Figure 1, we are using “lorem ipsum” text, which, as you probably know, is used by visual designers to explore typography and layout without using actual content. It’s a useful tool that can sometimes make the review process easier, as it encourages people to comment on the visual appearance rather than the specific content. You will find a useful lorem ipsum generator at Lorem Ipsum. While lorem ipsum can be useful during the design phase, reading placeholder text isn’t the same as reading meaningful text. For this reason, if you have access to the content, you should try it out before finalizing the visual design.

It’s possible to create some really awful text/background colors in HTML, and there are examples of really bad design on the Web. The W3C has suggested an algorithm for determining if two colors have sufficient contrast to work well together.

We created the two examples in Figure 1, as well as the horrible example in Figure 2 using a nice little open-source tool called Designer Plaything.

Figure 2 Poor Contrast Damages Readability

Other readability factors that you should consider include:

• How much space to put between lines. Too little space creates a cramped appearance, while too much space will destroy the cohesiveness of the paragraph. Spacing at 1.5 may be a good way to start.
• How long to make the lines. Very long lines are hard to scan. If you are using a liquid layout where the lines may become very long on some monitors, you may want to consider restricting the line length to no more than 80 to 100 characters, depending on the font size used. In many cases, shorter line widths are better and (as newspapers have long understood) multi-column designs can really enhance readability when there is a lot of text.

A useful typography resource is the eBook, "The Elements of Typographic Style Applied to the Web."

Discovery of Affordances

The third area that you should consider in your visual design is making it easy for the user to discover affordances. Affordances are the cues that let you know that you can do something with a thing, like an underline on a link so that the user knows that the text is clickable, or a button that looks raised, as if it can be depressed.

In general, a well-designed UI object should be obvious in how it works. The reason that 3D and shadows used to create the illusion of depth are effective in indicating to the user that the object can be pressed is that they leverage a metaphor from the real world. Recall that in our October column (”Getting Inside Your Users’ Heads”), we talked about mental models. This is an example. Users understand how to press buttons in the real world so they transfer that understanding to a well-designed graphic representation of a button.

Using a hand cursor over a screen element that is clickable is another way to discover an affordance. Used well it can help unclutter a screen, but using affordances that are only obvious upon a mouse hover can create usability problems. It can be a bad idea to make people move the mouse around to discover what they can do with an interface, especially if it’s a primary action.

With most of the controls you use, you don’t need to worry too much about how the affordances are presented–a scroll bar is usually pretty clear because it’s an established convention, for example. But if you’re creating graphical hot spots to control navigation or other actions, it’s important for the user to know where to click. And if users aren’t familiar with certain controls (there’s that mental model again) you need to be very clear in the design how they work. Recently in a usability test, we found that a lot of users didn’t understand how to use an accordion control. Redesigning the control solved the problem.

In short, the visual design should communicate the elements with which a user can interact. The design should make it obvious what actions are possible and what the outcome will be.

Supporting Communication

Many visual designers approach the design of a product by defining a visual language. A visual language is a set of design principles that assist in communicating ideas. There are several aspects to creating a visual language.

Perceptions and Associations

One element of a visual language takes advantage of perception. Visual processing isn’t passive—simply observing the objects in front of your eyes—but an active process involving selectivity and judgment. We discussed some of these issues in the October column. The study of perception is the specialty called Gestalt Psychology, and it’s worthwhile to become familiar with some of the perceptual principles, such as closure, similarity, continuation, proximity, and figure and ground—see The Gestalt Principles.

Other elements of a visual language are built on common mental associations such as using organic-feeling curves to suggest nature, using hard angles and lines to suggest machines, using deliberate disjointedness to create a sense of disturbance, and using symmetry to create a sense of balance and harmony.

Other associations that can be leveraged include culturally conditioned elements, such as using red for errors/stop and green for ok/go. However, be aware that such associations may have different cross-cultural or contextual elements. For example, red has positive associations in China and in the context of a car or dress, red suggests sexy.

Given how common the red/green = problem/ok connecting is, it’s surprisingly common to find colors used in a non-intuitive way. For example, we encountered the message in Figure 3 in a forum program. We deliberately made the text indistinct so that you could get an initial impression based on the use of color.

Figure 3 Red Color Suggests a Problem

While the use of color suggests a problem, Figure 4 shows what it actually says.

Figure 4 The Color Clashes with the Message

Also note that the heading is in a lighter color than the text it labels. Revising the message by changing the color of the message box and the header yields a much clearer communication, as shown in Figure5.

Figure 5 Green Suggests a Positive Message

Changing the color to green is a better visual design for this purpose and context.

Information Architecture

Visual design can also be used to reinforce information architecture, especially the visual hierarchy. For example, we almost always make headings larger and bolder than the content they label. And we create hierarchies of headings to help clarify the structure of the content. Within text we use such techniques as bolding, underlining, italicizing, making bigger and smaller to emphasize or de-emphasize elements and cue the reader about their role.

Color is another area that can be leveraged to great effect, especially when used sparingly. Quince has a Few Hues pattern that deals with limiting the color palette to just two or so hues and then varying the intensity (saturation) and brightness of those colors to reinforce your visual communication. Color can also be used to great effect, if the interface isn’t already saturated with color, to really draw out important elements, such as calls to action.

Color can also be used to pull the more important items into the foreground by simply de-emphasizing less important elements. This is a situation where using grey text, for example, can push less important stuff into the background and bring what’s left front and center. 

Figure 6 Visual design Supports Information Architecture

Emotion and Trust

Visual design affects emotions and can affect the credibility of an application or site and the sense of trust (or mistrust) that the user develops. For example, consider the two sites in Figure 7 and Figure 8, each with the same content but different visual design.

Figure 7 Would You Trust This Vendor?

Would you buy a TV from a place that looks like this?  Do you innately trust it?  Most of us have come across what seem to be shady companies online, and we’re not inclined to trust them. Consider this alternative design:

Figure 8 Same Content, Different Design Engenders More Trust

This design is more professional, trustworthy, credible and reliable. You’d be much, much more likely to hand over your credit-card information to a site like this. And in fact, there has been specific research into this aspect of visual design by the Stanford Web Credibility Research project. We recommend you read and follow their guidelines. Don Norman has written a book in this area called Emotional Design that further explores the impact of aesthetics on product acceptance. 

Significant Impact

Visual design is far more than skin deep. The look and feel, readability and clarity of the various controls can make a great deal of difference in the product’s usability and the user experience; it’s not just eye candy or personal taste.

Good visual design helps the user identify which screen elements are affordances, so it directly affects the ease of interacting with the product. Visual design also supports information architecture, making it easier for the user to process the information being conveyed. Visual design can evoke emotions in the user both through photographs and illustrations, and more subtly through the overall look and feel. In addition to emotions, visual design can help create (or damage) a sense of trust. In short, while some developers dismiss visual design as unimportant, eye candy or lipstick, it can have significant impact.

Because it’s so powerful a tool, it’s important for developers to think about visual design and educate themselves on its more functional aspects, as we have touched on here. Few of us have the skills to create high-quality visual designs, and it’s often best to bring in a professional. But whether you do visual design yourself or work with others, it’s important to understand the basics. A good primer is Alex White’s The Elements of Graphic Design: Space, Unity, Page Architecture, and Type (Allworth Press, 2002), which lays out key principles built around seven design components.

In addition to reading about design, look at many established examples of good design (try searching for award-winning sites) as well as designs you come across and think are good. Analyze them to figure out why the designs are good. If you find designs that are less compelling, think about why they should be improved and how. The more exposure you get to good design, the more you will be able recognize it and even do it better yourself. You may never become a professional visual designer, but you will work better with them. And, inevitably, when you have to do the work yourself, you will do a better job.

Visual design can really help you produce great products by creating excellence in the elements that are most visible to your users and stakeholders.

Dr. Charles Kreitzberg is CEO of Cognetics Corp., which offers usability consulting and user experience design services. His passion is creating intuitive interfaces that engage and delight users while supporting the product’s business goals. Charles lives in central New Jersey, where he moonlights as a performing musician.

Ambrose Little lives with his wife and four children in central New Jersey. He's been designing and developing software for more than 10 years and is honored to be an INETA speaker and Microsoft MVP. Lately, he's shifted from technical design to designing for people and is now a user experience designer for Infragistics.