Decoupling Usability and Visuals

July 1st, 2010
Published on
July 1st, 2010

Design is often seen as a subjective and creative pursuit. I tend to agree, but feel that the more subjective and detached you are from specific strategic goals, the more problems will arise. If there’s any ambiguity regarding how something should be used and how visuals are incorporated to your advantage, you should expect a lot of waste.

Usability and visual design are two areas that are heavily dependent on each other. They affect each other dramatically and each requires an understanding of how people will use and visualize the content. Pulling them apart, where possible, is a great way to understand how they impact the overall design and reduce the time and energy wasted in your creative process.

Thoughts on usability

I’m careful not to claim that usability is about making things easier to use—that’s not giving usability enough credit. Helping people work through a certain idea or scenario can prepare them for information that would have normally been ignored or misunderstood. In a strange way, extra steps can sometimes create value.

Purposely making things difficult without reason is clearly a poor strategy. I just want to illustrate that usability can be much more sophisticated than reducing an interaction’s complexity. Sometimes a back-story and context is required to get someone to care.

For example: When was the last time you actually thought about what a fortune cookie said? It’s one of the simplest interactions possible, contains some pretty valuable content, and comes in a cookie.

He who hurries cannot walk with dignity… Yea, whatever. Gimme another cookie!

Thoughts on visuals

Managing perception seems to be a forgotten aspect of design. I rarely hear it brought up on web design blogs, journals, or in presentations. There’s almost constant chatter about optimizing forms and making navigation systems look cooler, but rarely do any of these tips or tricks seem to be associated with a goal of getting person X to think of company Y in Z way.

Providing visual cues as mental short-cuts is another incredibly under-appreciated aspect of design. A great example in newspaper design is the consistent use of section identifiers so that they are always in the same spot with the same color and size. This lets people rely on visuals to quickly communicate meaning without needing to search, analyze, or think.

The visuals of a website should influence a certain point of view or attach meaning to elements on the page so you don’t have to explain the same details over and over again. This can bring a sense of stability, quality, and trustworthiness that may be impossible to convey through the content alone.

Pulling them apart

Usability and visuals can easily weave into each other. Giving an element of a website a certain color to make it easier to realize something can fall into each category. It’s still worth the trouble to think about every aspect of a design and determine what it’s for.

Look through all the areas of a design meant for usability and see if you can expand, consolidate and simplify. Do the same with the visuals. If there’s anything that doesn’t seem to fit into either category, it may be a good idea to remove or rework it.

This can get messy since a good usability plan rarely remains intact after meeting a good visual plan, and vice-versa. Still, you might be surprised how much clarity and purpose can be distinguished from creativity and inspiration with this exercise.

Making design more objective

The creative side of design is great, but can be a terrible crutch. Requiring your team or audience to accept anything based on your creativity is a very arrogant expression of self-importance. Thinking your creativity as more relevant than a solid strategy is ridiculous. Thinking your creativity can make up for a lack of strategy is also ridiculous.

I doubt any designer in a single lifetime can become 100% objective about everything. The world of design is too complicated and abandoning inspiration and creativity isn’t the goal. Harnessing usability and visuals to create meaning and value is.