Demystifying Usability

Design technique: use containership to shape user experience

Containership is a useful design technique that can help you direct your user's attention and shape their experience.

Do top and bottom Web page toolbars add Clutter?

In the past few years toolbars have started to appear on popular social networking websites like Facebook; product review sites like CNET; news sites like Reuters and the Huffington Post and social tool services like HootSuite. Today, it seems more Web page-level toolbars are inhabiting our screens. The result: less control of the web page, the session or the redirect experience...and a more cluttered web browsing session.

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

Graphic Design vs. Usability

The GUI Olympics (Graphical User Interface, pronounced "goo-ey") is an annual event where top graphic designers converge to design the latest and greatest "skins" for the Winamp media player, Windows themes and Icons.

The event is in its final week, and while it's wrapping up it might be useful to reflect on a couple of note-worthy items that relate to popular misconceptions of usability and graphic design...

The Logic of a "Skin"

The GUI Olympics are about designing interfaces that some graphic designers refer to as "skins". The idea comes from the habit of developing software and website code first and then adding the interface last ("the skin"). The concept is that many users prefer different interfaces, so provide a variety of skins and please more users!

There is nothing wrong with that concept as long as it is clear that it only works with highly specialized applications such as Winamp. It is even culturally expected in the Winamp community that skins will be created and made available.

When the philosophy of the 'skin interface' is applied to other applications, it becomes problematic. Here's why:

1. Interfaces in general are not "skinnable". A skin is an external dressing to some underlying functionality. The skin interface implies an "after the fact" make-over. Thinking about how users will interact with an interface at the end of the development lifecycle is too late.

Take-away: Interfaces represent the interactions, intentions, goals and tasks of your users. Greater success is gained from putting usability (architecture) before graphic design (dressing) early on in the process.

2. Skins are often dictated by visual appearance and not priority of user actions. Some skins look really cool. But since looking cool is the main objective of a skin, the underlying grouping of user actions, features or display of functionality is often lost.

Take-away: Looking cool for the sake of art is great if you can get away with it. However, in the business world where large scale websites or complex applications need to be intuitive and sensible, users want cool to be balanced with functional (usable).

What does the research say about Graphic Design?

Graphic design plays a significant role in the perception of trust of a website. You wouldn't know this from speaking to most usability professionals who spend their days arguing for usability not aesthetics. Worse, many usability consultants (you know who you are), personally do not favor aesthetics or beauty. I have worked with people who think that a table should be easy to sit at and still look like a park bench, as if a nice tablecloth and a big bouquet of fresh flowers didn't add anything to the seating experience...

1st Research Item: Website aesthetics influence feelings of trust (Karvonen 2000) PDF

2nd Research Item: Website aesthetics influence users' satisfaction, pleasure and perceived usability (Lavie and Tractinsky 2003) PDF

3rd Research Item: Website aesthetics influence perception of credibility (Fogg 2002) link see #6 in the tips list

Would you like a more usable "skin" with that user interface?
On the GUI Olympics site, if you search for a Winamp skin, it gives the choice to search filter for "Useable" interface skins. This seems hilarious to me, but might be a whole new business model for certain Operating System manufacturers. Imagine if you could buy the "usable" version of software or pay to have features or functionality removed from your current software packages? Hmmmm.

It seems GUI Olympics has created that filter since some of the skins go over the edge with graphic elements that it becomes difficult to find the play button! One interface I tested looked great to me, but when I started using it there was no progress meter (the bar you pull across to skip forward in a track). This is exactly the phenomenon I have found in my usability testing of hundreds of interfaces over the years:

Users will be attracted to great looking software, applications or websites with great excitement...but if the functionality does not act according to their expectations, feelings of abandonment or disatisfaction set in.

Bottom line: Functionality that does not deliver usability undermines aesthetic benefits.

Why and when users will favor cool over usable
The paradox, however, is that if users want to use the graphically pleasing (but un-usable) product due to some other stronger reason such as social influence or scarcity of content, they will. The Winamp skin interface is an example. Websites that have rare content but that are hard to use will still be used if the content is perceived to be exclusive to that site. This phenomenon was demonstrated by Lindgaard and Dudek (2002) who found that:

"Using a site with high appeal but very low in perceived usability yielded very high satisfaction, but low perceived usability scores, suggesting that what is `beautiful' need not also be perceived to be usable. The results suggest that web designers may need to pay attention to both visual appeal and usability".

Bridging the Usability and Graphic Design Gap

Usability engineers ought to live next door to graphic designers, not upstairs or downstairs from them. I believe that graphic design is extremely important, if applied with a sensitivity to usability. Typically usability engineers will hand "wireframe" prototype designs to graphic designers, who often will alter the information architecture in order to enhance the look and feel.

Usability professionals need to wake up to the fact that aesthetics are not a trivial afterthought, but an integral part of the user experience. We need to understand the value of graphic design and visual designers need to understand the value of usability. I had to learn this the hard way. In a previous job as a User Centered Design specialist, we spent $30,000 perfecting the usability, interaction design and functionality of a new website with several rounds of usability testing. Our client handed our user interface design specification over to an agency (who now mysteriously claims to be a user centered design agency). The agency added their graphic design to the website and completely changed the navigation system in order to add a logo and a branding element.

The lesson: Graphic Design can "hijack" usability efforts if the graphic design team is not "on board" with usability. This is probably why these days more and more graphic artists (like the students at the Art Institute of Portland where I am currently teaching a class) are learning about usability and have a sensitivity for its user-centered intentions. Here's an interesting paper that discusses balancing usability and graphic design on Yahoo!

I believe that closer collaboration and more respect between usability and graphic design is inevitable, as is the overlap between usability and marketing. More on that in another post...

Best Wishes,
FS