Wednesday, June 23, 2010

User Interface Design vs. Graphic Design

I was recently approached to give a presentation on User Interface (UI) design for websites and applications. The person who asked me to give the presentation wanted me to designate fonts and colors for everyone to use. This made me realize that before I talk about anything, I first need to clarify the difference between graphic design and usability design.

Graphic Design is how something looks whereas usability design is how something works. Although gaining a consistent look is important, a common style sheet won’t solve all your problems. Just because the font is black 12pt on all our apps, doesn’t mean they will look or work the same.

For an analogy, let's compare websites to cars. Websites all have a home page, navigation to get around, and probably a logo. Cars all have a steering wheel, doors, gauges, tires.

Graphic design on a website is like paint, decals, and body shape on a car. Some websites look like Hondas and some look like…

But… if I want my car to work like a Ferrari, I can’t just paint it red and put a sticker on it. It won’t work the same way. Think for a moment, how do the doors open on this Ferrari?

The way these doors open is usability design. Even though my car may be painted to look like a Ferrari, my doors don’t open like this. Even if you use the same style sheet across your applications, it won’t make them work the same.

In GUI Bloopers 2.0, the author states, "usability is about interaction: how the application behaves, rather than what it looks like. It encompasses 'deep' issues such as the ease with which users can learn the site, the fit of the functionality to users' goals, the directness of the mapping between task concepts and those presented by the application, and the efficiency with which common operations can be carried out. "

These issues need to be considered early on in development and tested all through the process or else they won't suit your end-user's needs and goals for the site. Plus, fixing issues after release can be cumbersome and costly. Think again about my car example. Imagine trying to make the doors work like a Ferrari’s doors and the rework that will be involved, not to mention the money it would take. Ouch!

On the other hand, graphic design can be easily applied to any website or application because it doesn't affect the site's overall funcationality. It should be easy to change the look of an entire site instantly through use of style sheets and also is not nearly as costly to create/recreate as necessary. I can paint my entire car for as little as $250 and change it as often as I like.

Usability and graphic design are two completely different concepts, working hand-in-hand to create a functional website that is pleasant to look at.