The Importance of Design Functionality & Conversion


It’s difficult for designers to come to grips with the look of a website that’s made strictly for optimizing conversion rates. And theirs is a valid concern; ugly sites with glaringly obvious keyword usage and cheap design are no more appealing to the novice web user than they are to the seasoned designer.

On the other hand, a flashy site that uses all the new tricks is just as likely to be a problem from the user’s perspective. The point to most sites isn’t to dazzle viewers with your virtuoso design skills; it’s about gaining a user’s trust with clean functionality that’s a pleasure to use. But there’s a way to fuse the two goals, and create websites that work well and look great at the same time.

Design Should Direct the Eye

One of the most intuitive ways that conversions work well with design is in directing attention, and accommodating the nonlinear method that people use to take in a webpage. Eye tracking studies show that most users scan a page, giving slightly more attention to the elements on the top left, before skipping along to anything that excites visual interest elsewhere. Once this initial scan is completed, they might delve further and actually read content. Sophisticated design works perfectly with this method of intake, giving the page a visual hierarchy that lets the viewer scan the right parts through the use of interesting typographic choices.

Labbler‘s website has a fairly intricate set-up, but by consistently identifying each category with its own color, it draws the eye to the right place on each rollover. At this same time, the type at the center of the page is eye-catching enough to ensure that the viewer understands the point of the navigation system.

Conventions Need to Be Respected

The less-than-attractive appearance of many web conventions almost seem to invite a designer to toy with them for a more appealing result. But because interaction is an integral part of the web, designers always need to keep the needs, interests, and prejudices of the user in mind. Most of the time, this means sticking to certain traditional features, such as:

  • A search bar that is located on the top right of the page. If auto-complete recommendations are included, these are clearly identified as suggestions alone.
  • Using breadcrumbs to show the user their path through the site, and easily enable them to take a step or two back.
  • Consistent UI controls, that are easily identifiable for what they are. This means buttons that are visually similar, links that work the same way, etc.

For example, Clearleft‘s website shows how breadcrumbs can be an unobtrusive yet attractive navigational element. The bright color of the links and the conventional positioning ensure the user of its presence, but the small size ensures that it doesn’t distract from the main content of the page.

Design Should De-clutter the Page

Although there are some examples out there of successfully busy website design, simplicity is the safer and better choice. And the more complex a site becomes, the more streamlined it has to be. For example, ecommerce websites need an extremely high level of clarity for their customers to successfully navigate their conversion tunnels. While the use of established ecommerce software can definitely help, every design decision should be geared towards effectively minimizing confusion or distraction.

Need Supply‘s product pages decreases clutter by having a single social button, in the attention-grabbing color they use site-wide to direct their customers’ interest. When you roll over the button, it splits into two options. This strategy makes for a cleaner page, as well as giving it an interesting and attractive navigation element.

In every situation, there’s a way to make good design decisions that fall within the boundaries of good conversion optimization. And as users become more and more savvy to the common practices and visual cues that rule the web, designers are allowed greater freedom in their work. Within the near future, what is now a begrudging compromise will hopefully become a harmonious collaboration.

About Luke Clum

Luke Clum is a Seattle based designer, web developer and outdoorsman. If he’s not geeking out about UI design, you’ll most likely find him climbing something in the mountains. Follow him on Twitter @lukeclum

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>