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

Comments

[Presenter Perth]

Great site. Well done on the interesting content.

[Shamima Sultana]

Great resources..
Thanks for the post

[Andrey Smagin]

I think many people are confusing “graphic design” with “design”.

Design is about developing things that work great and fulfill its functions in a pleasant satisfying way.
Design involves usability aspects and aesthetic ones together. It’s the process of creating products that involves problem solving in all aspects of product life. Graphic design is a process of creating graphics. You can’t expect people who just create graphics to care about production issues, about usability, about marketing and sales strategy. The same way usability experts are not capable of developing final products by themselves. How can you be usability expert or expert in human interaction with some products, when you’re not familiar with how colors or emotional message of design of a product going affect usage?

The reason we have so many usability experts that develop some schemes that are decorated after that by graphic designers is that we don’t have good designers that are experts in both. Usability expert and graphic designer shouldn’t be working next to each other - they should be one entity.

[Richard (Designer)]

Graphic design Vs usability? Graphic design *is* about usability. If the product hasn't been designed to be usable (and accessible, for that matter) then it hasn't been designed properly. The same goes for print design as well as web design - although obviously, since the advent of graphic designers entering the world of interactivity, web design has the higher profile.

[Tom Smith]

Fantastic article... GUIs that are "skinnable" are dead in the water already... skins are tastless decorations, nothing more...

[Etienne Ranc]

Aesthetics is just one thing graphic designers tackle. Communicating and persuading visually would sum it up better. It's quite simple, just apply the all time definition of what a graphic designer does in any media and apply it to multimedia and interaction.

There's a huge difference between multimedia and lotsomedia, the first one converges different media into one, communicating in a way no other media can, the latter is just a bunch of images, text, audio, clicks, drags, animation and video put together without a purpose, without communicating in integration.

It's obvious we as web designers need to stick to the characteristics of the chosen media: bandwidth, monitor size, usability, accesability, etc. But it's nothing that has never been done in other media, so know your media, errr.. multimedia?

[Sergio Jardim]

We designers have to remember that the most important thing is to comunicate with the user/consumer. To pass the cliente message through the design. That´s the very simple principle which applies to every piece of our work.

[Chris Murphy]

It's my firm belief that graphic designers - however they may call themselves - need to truly educate themselves in Human Interface Design, or any discipline geared towards better usability. The more you know, even instinctively, the better you’re able to defend your work. I’ve had the misfortune of having dealt with usability “experts” – who are no more than software developers and engineers who can’t see past code – and really lack understand in the importance of good aesthetic design.

I’m personally sick of so called third-party usability “experts” constantly trying undermine a design with their biases towards text-based, minimalist, aesthetic-free interfaces. Aesthetics are important on so many different levels when dealing with the demands of the business world. A designer constantly has to keep in mind requirements for branding, marketing, and all those annoying hang-ups of the corporate world – most usability experts don’t understand this. The ones who do are great to work with, the ones who don’t - [insert: desired demise for said "expert"].

I doubt we’ll ever be free of usability "experts" - people love to give themselves fancy job titles – given that, it’s a designer’s responsibility to educate and be educated. All in all, the more you know and understand, the better you design and defend.

[Vidya Gopinath]

"Usability professionals need to wake up to the fact that aesthetics are not a trivial afterthought, but an integral part of the user experience",says the author.He is true in his view that the graphic designers have to go hand in hand with usability proffesionals.
All of us like beauty and art,but at the same time too much of graphics which takes time to download may easily fustrate us.Like wise a site that is ugly might also bore us easily.

[Andrei Herasimchuk]

I assume you have already seen this, but in case you haven't, related to this post, even though a few weeks behind it. While satirical in nature, hopefully you'll agree it makes your point on this issue clear using a concrete example.

http://www.designbyfire.com/000094.html