We're back, as promised in our previous post, with 7 more design principles that you should “steal” from those e-commerce websites that have already “made it big”.
If the 5 principles that we revealed to you in that post revolved around the visually-appealing aesthetics that any website should “wrap” its conversion goals in, today we'll be tackling the issue of usability.
After you've learned all about delighting your visitors and visually enchanting them, today we'll reveal to you the 7 (surprisingly) subtle changes that you could apply to your website for discreetly guiding your visitors towards the final purchase, for making the whole “path” they'll need to cross from the moment they land on your site to the shopping cart page as easy to follow as possible.
1. Make Your Search Box Visible
Run a test! Go online, pick, let's say, 10 random websites, access them and try to time how many seconds it takes you to spot the search box on their homepages.
Needless to add that the “winner” is the site that “scores” the shortest time needed for you to track down its search box.
It's the same with your e-commerce website. You should, indeed, invest lots of time and creativity in getting it upgraded with striking visual elements to delight and to engage your visitors with and to pay great attention to the whole information structure and to the layout of your website, but mind you don't overlook the search box's major importance!
All your efforts in making your products/services as visually-appealing and desirable as possible might just go down the drain right from the start if you “manage” to frustrate your visitor by wasting his/her valuable time looking for your search box.
In a nutshell: make your search box pop out!
2. Discover Which Colors and Color Contrast Convert For You
Before you rush in to paint all your call to action buttons in red (since it's a general consent that red triggers a sense of urgency and therefore that it converts better) or before you rush in to change it from red (since you've discovered that, well, it did not help you reach that high conversion rate you expected it would) to orange (for you've red about it being the perfect call to action color for “aggressively” urge your users to buy), you should first:
- consider which is the emotion/which are the emotions that each colors conveys (maybe if you're selling beauty products you'd better go for cheerful pink rather than “alarming” red, for instance)
- run some tests for finding out which is the color that converts better for you and you only (what works for others might not work out for you, too)
- depending on the color that you decide to choose for your foreground and, most of all for your call to action button, you should choose a contrasting color for your website's background.
And here we are! To the very color-related “subtlety” that we wanted to point out to you: strive to find not just “your” website's color, the one that converts best for you, but the high-converting CONTRAST for your website, too.
It's the contrasting background that will help you make your call to action buttons pop out, you know. So, think in pairs of colors: purple and yellow, orange and blue and so on...
3. Go For An Attention-Grabbing Call To Action
Put your call to action in a container, make it stand out!
Your call to action button should be grabbing your visitors' attention even quicker than your search box.
If in the case of the latter your role is more that of a guide, one willing to assist the visitors to quickly find the information they're looking for, when it comes to your call to action you should make sure it simply grab their attention the very moment they land on your website.
We've talked about “wooing” your website's users, about delighting and “spoiling” them with striking imagery and quality content, but even so: you should keep in mind that at the any of their “visits” you still want them to buy or to subscribe.
In short: don't rely exclusively on the foreground-background contrast and add do more! Try a contrasting container for your call to action! It's the key element of your website, so you should make use of all the available resources for making it grab the attention!
4. Give White Space Its Due Importance
Here's another design subtlety that you could apply for making your call to action stand out: placing it against white space! Give it a try, test it on your website and see whether it works for you, too, whether a white background makes your conversion button even more visible!
5. Put Together a Visual Hierarchy
Remember that we've already talked, in our web typography-related post, about the hierarchy's high importance in web design?
Well, it's time to lay stress on it once again: visual hierarchy paves the way to an optimized user experience (and therefore to that conversion rate that you've been dreaming of)!
Display all the elements on your website in a powerful visual hierarchy and you'll discreetly and efficiently guide your visitors towards the target (purchase or subscription) that you've set up for him/her.
Turn his/her delve into the multiple layers of content (all the way to the final purchase) on your website as smooth and fluid as possible with the help of an effectively-structured hierarchy!
6. Keep Your Navigation Bar Short and Simple
Now it's time you examined your navigation bar!
How many links/buttons do you have there? Is it on top of your page or somewhere else? Are its labels generic or descriptive?
Once you've moved your magnifying glass across it and (maybe) you've “detected” some aspects that could be improved, here are our navigation bar-related tips for you:
- keep it short: go for an ideal no. of 5 items
- go either for a standard horizontal one, placed on top of your page or for a vertical one, placed on the left side of your front page: no need to get creative here, for “innovation” in this case is more likely to affect usability
- go for descriptive rather than generic labels: give your visitors a hint of what you do, who you are and not just standard, impersonal information (“Who Are We”, “What We Do”)
- put your key items at the beginning and the end of your navigation bar
- links, links, links, not buttons: links are far better for SEO reasons, since search engines can detect the written text, they're easier to edit and where do you ad they they load quicker than buttons, too!
7. Guide Them With Directional Cues
We all need a bit of guidance!
Therefore, help your website's visitors quickly spot your lead-generation forms and your call-to-action buttons with directional cues.
Use them for directing their attention to the conversion-generating elements on your website. They help you minimize the risk that your users may get too distracted by/captivated by all the other appealing types of content on your website and that they may outlook (or, even worse: that they may not spot them in due time once they've made up their minds) the “really” important ones (for you): call to action buttons.
And here we are, at the end of our list of conversion-centered design tips and tricks for you. Have you had the chance to test them already (or maybe just some of them? Have they worked for you? Feel free to share any other design subtleties not showing up in our list here and which worked “wonders” for you!
