What color do you like? The usability of look and feel (strategy with icons, images, branding elements)

The graphical or visual aspects of an interface are the most easily recognizable. They require no methodology (Graphic design vs usability) or design distinctions, (What is design?).

Everyone from CEO to programmer can understand an interface by it's visual treatment. For some the interface is "eye-candy" and for others representative of organized emotional response and visual perception.

Oftentimes, the confusion over who dictates the design can lead to confusion and often a gratuitous use of graphics. This problem can be compounded by an interface being dictated entirely by a designer (where usability resources are absent, underfunded or ignored entirely from a development process).

The question we'll explore in this post is: Does the user experience team dictate what happens to the visual design or do they back off and let designers do their job?

The role User Experience plays

The trained user experience practitioner sees the graphic or visual design as an important element of the interface, finalizing the underlying screen behaviors (interaction design) and adding emotional appeal and queues to the interface.

Most usability people I know don't touch the visual layer. Once a design 'wireframe' is finalized, the design falls entirely in the hands of the graphic designer (aka designer). Sometimes the freedom of articulating the user interface is left in the hands of the designer. For example, one usability consultant I worked with put lines and words at the top of his web application wireframe and explained that "the designer can decide whether it's a tab or a button..." In my experience, it is best to avoid this and guide as much of the visual metaphor as possible.

The job of the graphic designer (when a user interface has been designed based on usability research) is to add emphasis and enhance areas of the design that need more visibility, branding, emotional appeal etc. Whether it's a tab or a button is as much a UI issue as a graphic design issue.

The more specific a user interface specification can be, the more usability will be retained when designers or developers work on it.

How creativity can destroy functional design

In the case where usability has occurred (usability testing or user research), a user interface direction is strongly open to influence from the user experience team. Choice of metaphors, layout, and design decisions in general are more clear due to the user advocacy and understanding of feature and task priority that takes place within the design research context.

Still, when a user interface is specified, it can be undermined unintentionally by a graphic design team, often from a different department or company (e.g. agency). A graphic designer, without sensitivity for the usability research that informed the design wireframe, can re-interpret the design and purge all the goodness out of the design.

Let's be clear that this is less by intention and more likely due to what naturally happens when one human brain picks up and digest a design passed to it from another brain. Creativity is integral to perception in general, whether its artistic (design) or technical (development). This makes it imperative that user experience folks specify and comment on the visual design as it evolves.

If you are a user experience practitioner and you don't like to get your hands dirty in creative issues, get over it. The notion that cognition and emotion are separate is a mute point according to findings in the field of neuroscience from the past 15 years (Ratner 2000). It is important to maintain a holistic approach and see the visual design as *part of the user experience* not something you just hope the graphic design team gets because that's their area.

See Design and Emotion discussion on the link between emotion and cognition.

So, since graphic design is so subjective (e.g. What color do you like?), what is there to say from a usability standpoint? After all, usability requirements come out of behavioral observation not opinions about color. (For example in usability testing we never say "do you like this home page?", instead we ask users to interact with it and then notice if they find features, buttons, navigation and promotional elements). 

Usability Guidelines for Graphic Elements:

Here are some guidelines based on a decade of practical and empirical study of this issue.

1) Use of graphical elements generally: Generally graphical elements should help draw attention to content or functionality. The should not be used without a justifiable purpose. i.e.  Never gratuitously use images or graphical elements unless they aid or reinforce the usability goals of the page. Use color to add context, to reinforce action areas and to call attention to important task-oriented features.

2) Images: Images should have a connection with the audience (theme, target audience, match values and emotional impact). For example, our client, a luxury hotel chain trying to impact an emotional connection with luxury property ownership showed a couple with their backs turned holding a wine glass. Instead we suggested having the models face the camera. Another client, a health insurance provider showed a picture of an older woman who looked ill, with poor make-up and fading color in her hair (lesson: Choose healthy models if you are in the health business!).

3) Avoid clip-art: Images and icons should not look stock or clip-art (based on how competitors and new sites do "tight" look and feel). Never use grainy or 1980's or 1990's looking icons or images. Note: This is very subjective and if you don't know what I am talking about, find someone who does to help point out the distinctions. Well trained graphic designers will smell clip-art from a mile away, though I have clients now who still use clip art in leading edge applications, blessed by internal graphic design teams!

4) Icon intuitiveness: If using icons they should be intuitive, crisp and used strategically (not randomly). If an icon needs to be interpreted for more than a few seconds, either don't use it or create an intuitive icon. Icon usability is important. This issue is so important, for the past few years we (Experience Dynamics) have been offering icon design services through our Russian design group.

5) Logos and branding elements: Branding elements should be clear and distinct (with clear taglines) and follow company branding guidelines. Avoid placement of branding items next to functional elements like buttons. Users get "branding blindness" on a page (like "banner blindness") if logos etc. are too close to task based graphical elements.

6) Use graphic design to enhance visual appeal: A good graphic design treatment for a website or web application is subtle and looks great, without weighing the page down. If you think graphic design is "fluff" you are missing the point. If you think it is dangerous to usability, you are missing the fact that graphic design can enhance and accent the user interface making it more intuitive. A great example in this area comes from the work of Yahoo! visual designer LukeW, who incidentally has written a book on this topic, though I must confess I haven't read it yet.

7) Be sensible about minimalism: If balanced with usability, there is nothing wrong with graphic design. I am seeing, the more mature the Web becomes, the less relevant the issue of minimalism becomes. Many Web 2.0 sites combine a nice balance of visual treatment and sensible minimalism. Few are bare and sparse. Instead of condemning graphics or running from them, as is the common reaction, use guidelines such as the ones outlined about as well as any patterns you start to see from observing users as they interact with your site, application or product.

Balancing good visual design with usability is challenging, though not impossible. I have found it's more a group dynamics issue, process issue or personal belief influence than an issue with color, color perception or graphic design.  In my work, my agenda is not to fight for less graphic design or more, but to appropriately balance usability with visual flair. A dinner table needs to be functional and steady, but also needs to look nice and inviting...or as the great inventor Bucky Fuller most eloquently put it: 

"When I am working on a problem, I never think about beauty but when I have finished, if the solution is not beautiful, I know it is wrong".  -R. Buckminster Fuller

Warmest wishes,
Frank Spillers, MS

Comments

[Frank]

Jason,

Perhaps I have...lol

Sorry you found it disparaging... Unfortunately it is an issue and needs to be discussed as much as a design that gets unintentionally 'mangled' by a developer because it was easier to code...etc.

I agree there are plenty of great designers that are aware of usability issues. Though being aware is not enough it seems. User experience is harder to create by gut feel or awareness then it is by gaining empirical insights from observation of user behavior, user needs analysis etc.

I agree with you that designers who are paying attention will have usability at the top of their radar, and I think designers are also expected these days to be savvy to usability. Though it's naive to expect a graphic designer to represent known usability issues or the 25 years or more of knowledge we have gained from the corporate application of Human Computer Interaction and User Centered Design.

Frank

[Frank]

Hi James,

Good points... Of course the points of design in software and web contexts is to create understanding with the information, features and functionality. And yes there are cases where designers are part of the usability research process both observing and/or digesting the user research results. There are also graphic designers who are savvy to usability and "get it" over a designer who uses the medium to express his or her creativity.

In the post, I mentioned the case where usability is absent- and it's this case that we saw the most fall-out from during the dot com (the Boo.com case study being the classic).

The cannon of Great Graphic Design you refer to falls outside the context to which I was referring. Those examples (Napoleon) or London Tubemap are art and information design (Tufte), not software and web user interfaces. And actually there are dozens of fantastic examples of usability and graphic design in harmony- Yahoo!; Google for example...these days it's not hard to find good examples, probably 30% of the Fortune 500 all have great examples of user experience and a balance of graphic design (based on the amount of usability that goes on). Another classic great example is the home page of lowermybills.com.

On your last point, perhaps I was not clear, it's not about dictating per say as much as communicating usability requirements clearly- and also protecting the blueprints as they are dressed up. Most usability people drop blueprints and back off- to become frustrated by a different interpretation of the underlying information architecture or user interface.

It's as important to "dictate" or communicate clearly to developers what the usability requirements are so they are not altered by the creative development process.

Frank

[Jason]

This is a very disparaging article. There plenty of very good designers working across several industries who are well aware of usability issues. In fact any designer worth his/her salt will put it at the top of their priority list when designing an interface.

Perhaps, Frank, you have been working with the wrong people.

[JamesPage]

Is not design meant to help the user understand the information.... Otherwise what the point of the design?

Great designers I have worked with have simplified the users understanding. Bad designers have hindered it... The great designers (and I have worked with many) have spent time trying to understand the users needs, they may have needed help.. but once they have been briefed well the design has created clarity.

In my experience so called heuristics have hindered, but well presented research has helped the designers come up with ideas.

Have you ever tried to include the designer in the research? Sometimes the results are outstanding. Nothing is lost in translation...

Maybe the HCI community needs to copy the advertising world where there is a team to explain the user behaviour to the creative, and help evaluate it, and not dictate it?

You state that "This problem can be compounded by an interface being dictated entirely by a designer", but there is a large cannon of great Graphic Design that helps people understand a complex picture.. From the Leonardo da Vinci showing how copulation happens to the London tube Map to Tuft's imagery of Napoleon's march to Moscow.

Off the top of my head I can not come up with a great cannon from the HCI community. Yes from PARC but that was many years ago!

If you where to argue that there are many designer that need a helping hand to understand the complexity of human behaviour - I would concur... But to argue that they need dictating to I would disagree strongly...

James