Walking the line between usability and aesthetics

I’ve always had a rather broad practical streak. Which is probably why usability studies interest me. Well, while working on our website, we engaged the services of a graphic designer. With my background focused on usability and her background focused on aesthetics we had varying opinions on what to prioritize.

Don’t distract your audience

Originally, I put up a picture of Hallett Peak from the Rocky Mountain National Park as the background. I love this mountain – it was the inspiration for our business name. With a 1,000 foot sheer drop into a lake, it’s absolutely amazing!

To say our designer was less than thrilled would be an understatement. The picture itself was great. It was so good that it distracted our audience from the purpose of the site. Not to mention the fact that no one but me knew the significance of that particular mountain.

Make it readable

Text size and readability are very important to me. Especially since we are in the business of writing. The graphic designer was concerned with the visual aesthetics of the text and wanted to decrease the font and change the color to gray. These two properties make text more visually appealing when looking at it as a whole page. I wanted to keep the text larger and black, the high contrast and larger size are easier to read on a backlit screen.


There are several design principles I incorporated into our page while writing the HTML and CSS. First and foremost, I wanted to make sure it was search engine optimized. Research shows that text is better than images because the “spiders” can read HTML text, but can’t read pictures. So I made it text based as much as possible.

Unfortunately, the almost exclusive use of text caused several formatting headaches. Most notable was the mini portfolio on our home page. The pictures/text refused to line up with the background color and displayed differently in each browser.

The designer suggested making each segment a picture as a quick fix. But then we would lose the full effect of the text, and there would be several extra steps to changing out examples as our portfolio grew. As a fellow business owner, I’m sure you know how I felt about adding extra steps to any process!

Walking the line

That’s how it works with graphic design and usability. Usable isn’t always pretty (just look at foremost usability expert Jakob Nielsen’s page). And just because it looks good doesn’t mean you can complete the most important task at hand (for example, just about any .gov page; clean cut, but finding usable information takes, um… experience).

When navigating the line between these two, you’ll have to find your own balance. The most important thing to remember is to make sure your users can complete the single most important task on your site. For Hallett Peak Copywriting, that task is requesting a quote.

My line

With the help of the graphic designer, I found where I was being stubborn (the background), where we needed to compromise (the size and color of the text), and where to draw the line (keeping the page text based). I found a background that wasn’t distracting, shrank the text some but kept it black and did more research to fix our formatting. At the end of the day, we have a site that is both fashionable and functional. A win-win for HPC, our designer and definitely our customers!

Julie is a co-founder of Hallett Peak Copywriting, a Central Illinois based freelance copywriting business. For more information on Hallett Peak Copywriting, visit hpcink.com. You can also follow Hallett Peak Copywriting on Twitter @HPC_Ink to get updates on our business and our blog.


About Julie

Co-founder of Hallett Peak Copywriting.
This entry was posted in Design. Bookmark the permalink.

One Response to Walking the line between usability and aesthetics

  1. Christina says:

    Love this – and love the balance on where you need to give and take. As an online marketing professional (particularly with a focus on SEO), I find that this is always the hardest component to explain to my clients and internal team members.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s