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