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
