The thing with websites is that you can’t just focus on how beautiful you can make them.

Visuals—whether in the form of an image, a color block, or a video—affect the user experience. That means you need to carefully balance the needs of aesthetics and usability. Getting it right is paramount; not only do people remember visual input better, they also process visual information 60,000 times faster than text.

If you’re not careful, you might fall into one of these traps.

1. Ignoring the Balance Between Design and Usability

It’s tempting to think that beautiful and useful always go together, but, in practice, you will run into problems:

• Creative designs can hinge on having three or more colors to use on the palette, but the more colors you use, the tougher it is for the user to scan
• Expressive designs rely on your ability to surprise and delight; one of the core tenets of usable design is sticking to conventions for predictability (in other words: the absence of surprises)

When making design choices, it’s important to remember that there is no such thing as perfect design. There is however, design that perfectly fits the balance you are trying to achieve. It’s important to constantly think about that balance, because when aesthetics or usability—or both—run into low enough levels, you will annoy your target users and take a bottom line hit.

2. Thinking About Just the Design Elements

The downfall for many a web designer (and, to be fair, marketers and website owners) is that they treat imagery purely as design elements, rather than carriers of whatever messages the business wants to convey. That often leads to designs with oomph to spare, but also with mediocre utility.

This is a fairly large problem, because images convey more than text, and cement themselves into a visitors’ brain. The pre-conscious impression of the site relayed by images stays with users longer than headlines, copy, or calls to action text. But, too often, they lean towards edgy more than they do towards useful.

Take rotating banners, for instance. The allure is clear:

• It’s easier to craft a “branded” experience with pizzazz when you have more room with which to work.
• If all of your internal stakeholders want a piece of the home page, having 3 or more messaging areas let’s you avoid the political battle of who gets the prime real estate.

While having these banners can be expedient from an aesthetics perspective, in practice, these carousels are one of the most common practices that hurt conversions.

The classic example is Nielsen’s: users miss even large fonts when the messages are in rotating banners. But you don’t have to stop there: motion creates problems with people who have started to actually read or engage with your content. The carousels are less friendly to scanning, and can increase your load time.

That you still see the rotating banners everywhere speaks to the common mindset that is still at work; design still leans towards pretty, rather than useful.

3. Failing to Prevent Distractions

Because images get processed so much faster than text, they can often get in the way of users. Embedded videos is one that you’ll see often, and it’s worth discussing in some detail.

Used incorrectly, embedded videos offer the worst of both worlds: They take up a large enough part of the page that you need to adjust everything to make the page work, yet they’re not big enough to offer the best viewing experience.

Often, the answer is simple: use a lightbox to launch the video.

Keep the image big enough to draw attention to the video, but not so large that everything else needs to cater to the image for the page balance to work. When users click on the video, launch the lightbox in a reasonably large resolution, graying out the rest of the page.

Striking a Balance

Good web designs, and even great ones, are a compromise between superb aesthetics and tailored usability. They are not usable by accident—they were carefully engineered to be that way.

If you think about all the levers you can turn for aesthetics and usability, you’re that much more likely to produce a professional design that fires on all cylinders.

Frustrated customer image courtesy of Shutterstock.