Conversion-Centered Design
This is dedicated to website owners looking to increase sales and designers seeking efficient methods of conversion-boosting design.
At some point, you must have come across offers of “conversion-boosting” or “sales-boosting” design. Does this special kind of design exist or is it a myth?
Actually, it’s just self-promotion.
There are only two kinds of design: good and bad. The rest is just fantasy. Good design works toward the website’s objectives, it’s both functional and eye-catching. If the website is for selling goods or services, good design will greatly facilitate conversion and sales. So yes, it can be called a “sales booster,” but in fact, it’s just a good smart design.
Bad design can look good and pretty. But it’s prettiness for the sake of prettiness, and it does nothing for the product. A design which draws attention away from the objective does more harm than no design at all.
Nobody visits a website to enjoy the fancy design. They are looking for a product, service, or information. So the best kind of design is one that makes the site easy to use and navigate, directing the user’s focus where you need it to go. Smart designs make a product offer look desirable, interesting, and attractive to the customer. Nothing distracts the user from getting what they need.
So let’s not burden ourselves with labels such as “conversion-centered design”; instead, let’s look at what makes design great. If you already have a website, you can check it against these criteria. Failure to account for any one of these parameters may be the reason for poor sales and inadequate traffic. If you are a designer yourself, you can test yourself. Do you follow these principles in your work?
1. Proper accents
- Distraction
Are you sure visitors’ eyes are drawn to your product? Try eye-tracking, and you’re in for a surprise.
Here’s a vivid example of a bad picture from our very own website. What visitors focus on is not the hardworking team of designers, but a section of the parquet floor! (Well, at least they notice the logo.)
It’s hardly fatal in this case — but what if your visitors are looking the wrong way? What if they get bogged up in fancy design and forget what they came for?
If it turns out that your accents are wrong and something is distracting the eye, you should fix it. There are lots of design tools for emphasizing specific features, but they should be used wisely. Even a design that looks good at first glance needs to be tested and adjusted.
Accents are intrinsically linked to website hierarchy and your priorities.
- too many products or they look too similar
When there are too many products or they are all similar-looking, it’s distracting. Many factors affect the visitor’s visual perception in a store, but uniformity and excess will not help sales, whether online or offline.
The same thing happens in an online store with an overwhelming selection of products. A design overloaded with elements is a bad design. Don’t try to cram all your offers into one page. It’s much more useful to have just a few, with a design scheme which highlights them in such an attractive way that the customer will want to check out other products.
A heatmap helps you to see how easy your website is to navigate, whether ad banners are placed properly, which elements are attention grabbers, how users search for information. Eye tracking is used by all major brands — Apple, Google, Facebook. Looks like they don’t put much trust into “sales-boosting design” :)
Whether you choose to use eye tracking or not, the important thing is to avoid design overload and accentuate the key features. Eye tracking will enable you to see if you’ve made a mistake.
2. Using whitespace (negative space)
If you surround an image with a “void,” it will definitely be noticed. The “emptiness” around an element acts as a highlighting feature. It makes the design clean, comprehensible, and pleasant to look at. Negative space helps to structure the design and visually separate the elements.
Usually, a landing page can afford to use more negative space than an online store. As with all other tools, whitespace should be used purposefully. Too much emptiness is no better than too much clutter.
3. Gaze direction
These visual and psychological tricks are widely used in design and advertising.
- pointers
A person’s gaze will always follow the direction of a pointing hand, finger, or arrow. Our gaze is reflexively drawn to a road stretching off into the distance or to a line drawn on paper.
- a character’s gaze
We tend to follow the gaze of another person, animal, or any other creature. If you use photographs or images of people and characters, their gaze must be directed toward the target object (your product, for example). They can be pointing to it, reaching for it, or bending toward it. The user looking at the picture will automatically follow suit, diverting their gaze to the product. This is how our mind works.
- movement
Human eyes perceive the slightest movement. This happens unconsciously and reflexively. We notice anything that moves. Animation attracts the user’s attention like nothing else, but it should be used sparingly and wisely. Otherwise, it will distract, not attract.
- graphics
If there are no images of characters whose gaze directs the customer to the product, this is done by graphic means. Instead of a pointing finger, the user’s eyes follow a line, a row of scalable or rhythmic elements, or any object that acts as a pointer. In this regard, graphics are similar to animation. Lines are associated with movement and always draw attention. The designer’s task is to create the right gaze direction.
Emphasis in Design. How to Draw Attention
4. Proper hierarchy
This is actually the most important part. It’s where you should start before you even begin designing. Any errors in priorities come at a high cost. If it’s an already existing website, changing anything would be very hard. It is much better to set your priorities and map out the user flow at the outset. Otherwise, you’ll have to redesign the website to redirect users’ attention and increase the conversion rate.
User Flow. How to Guide Your Users So They Reach the Goal
5. Call-to-action buttons
“You mean red ones? Green? Or blue?” you might ask.
None of these, actually. And not because a red button is aggressive, a green one is unconvincing, and a blue one is not always appropriate. Research shows that’s not what matters. There are a lot of factors affecting the buttons’ conversion rate.
Call-to-action (CTA) buttons are eye-catching and prominent, urging the user to click on them. But to be eye-catching and prominent, they have to be high-contrast.
However, high contrast by itself does not guarantee success. It just makes the button more noticeable. But will you want to click on it?
The deciding factor here is your target audience and which colors it finds attractive and appropriate. Remember also that the button does not exist in a vacuum, being a part of the overall design.
Green buttons show a slightly better conversion rate. Nevertheless, the rate will suffer if you choose an “unconvincing” green (too low-contrast). The button may blend in with the other elements or be annoyingly conspicuous. The only way to know the truth is to test various-colored buttons with a specific target audience.
6. Using the psychology of color
In marketing, design, and advertising, choosing the color palette is crucial. When choosing a “conversion-rate” color, keep in mind your audience and the emotions you are aiming for.
Robert Plutchik’s Wheel of Emotions is a great way of choosing the color. It’s a good idea to apply findings from psychological research, but don’t approach colors mechanically. As with buttons, you should first and foremost concentrate on your target audience and if possible, test any palette options before using them.
Afterword
As you can see, all good design principles are closely intertwined. Without the proper hierarchy and prioritizing, you won’t be able to accentuate and highlight the key features. Without correct accents and directions, your hierarchy won’t work, and the website will become confusing and unnavigable. A poor choice of colors and fonts will scare away the target customer before they have a chance to notice any hierarchy or even the product itself. Everything functions together as a whole, and it only works if it was created smartly and lovingly for the good of your users.
