How design boosts conversion
https://icons8.com
What does any business aim for with their website? To keep conversion rates high and turn leads into happy clients. While this does require a good reputation and skill, the whims of leads aren’t just dependent on your company’s offerings. Most of the time the web conversion level depends on your website’s landing page and how well it’s designed. So today, for a change, I’m going to talk about the commercial approach to UI/UX design and which tricks you can use to boost conversion rates. This is the kind of guide you can show your boss to explain why you spent an hour choosing the font for your landing page or moving the CTA around the page. And it’s the kind of guide that’s going to send your conversion rate up a few notches.
1. The Art of Layouts
If you’ve read up on design in recent years, you’ve likely already heard about the patterns in layouts. They are based on research about the way people interact with websites. Apparently, users tend to track their eyes across the page in a few standard routes. One of the more widespread is in the shape similar to the capital letter F. This means that the user initially looks at the top left, takes their eyes across the screen to the top right corner, then down a bit, across, and then simply skims the rest of the page. In all that, there are just 4 or 5 points where you actually have a chance of capturing the user’s attention. To put it simply, you should be filling those precious spaces with the key elements that you want the users to see: calls to action, contact info, lists of services/products that you offer. It’s an easy way to improve website design and readability while keeping your landing page clean.
Another option is the Gutenberg diagram, though this one is used best for pages with a lot of similar-looking text (eg no titles or lists and other such elements that break apart the monotone look of your writing). This layout posits that your users will primarily read the parts of the screen in the top left and bottom right with everything else getting less and less attention with each second spent on the text. While the top right area also has a chance to be seen, it’s only getting attention once the user decides your site is worth it. Basically, if you apply it to this very paragraph, the user’s takeaway would be the words “Gutenberg diagram” and “use it, it’s pretty good”. By the way, use it, it’s pretty good (see what I did there?).
A third popular choice is the Z pattern, which is similar to the F layout but works best with sites that are a bit less corporate/official. It’s a great choice for websites that sell brands or really flashy items, ones where you can use negative space to your advantage and place content apart, giving the user’s gaze a chance to drift. Any info trapped on the user’s way from one block to another will likely be forgotten, so Z-pattern layouts are best for pages where not much content is presented.
2. Fontastic Text
Fonts matter. Like, a lot. The font of your company’s logo is going to shape the way people think of it and the font you use on the landing page will determine how readable it is. Unless you actively want people to skim your calls to action, choose a font that’s high-converting and fits all parts of your website. Yeah, by the way, don’t even think of using different fonts for different elements unless it’s strictly necessary. A maximum of 3–4 fonts should be seen across all of your website as it keeps the user experience seamless.
When choosing a font, go for something simple and easily readable regardless of screen size. This means sans-serif fonts, which offer minimalistic and discernible letters without any unwanted frills. If you’re feeling fancy and can’t resist the pull of an Inria Serif or its sisters, use it in a logo. That’s your space for getting fancy while the rest of the site should look professional. Well, that is if you’re creating a corporate website. If you’re making one for a small brand, in particular art and fashion ones, it’s okay to get a bit more creative as it’s a way to show off your brand identity. It’s still a good idea to keep the actual paragraphs of text readable though, so don’t get too wild. Some serif fonts look fun and creative but can still be read easily, offering a middle ground between the two styles.
The body of your landing page, ideally, will have bold text with only the necessary information presented. Anything that isn’t straight up essential needs to be hidden away (I’ll explain why in the next paragraph). Keep the text clean, sparse, and beautiful. And make sure you’ve got the size right: the body should be about 16sp or so, readable on any device. Headers must be larger but remember that the line width has to be kept in a certain limit or it won’t look good on mobile devices and narrow screens. The importance of text aesthetics and their influence on conversion is proven and cannot be overstated.
3. The Choice
Humans are, by nature, incapable of choosing quickly when presented with many options at once. Or, at least, incapable of choosing quickly and consciously. If the user gets to your landing page and sees 15 different paragraphs of text, each of them with an accompanying form to fill or button to click… Well, experienced designers know that most will just click away from your website instantly and the rest will get so confused that they’ll likely fail to find the right call to action.
This is called Hick’s Law and it’s the reasoning behind an overly busy landing page failing. Always keep this law in mind and look back to it whenever you find yourself adding another element. Is the presence of an “our products are amazing” section worth the potential dip in conversion rates? I don’t think there’s a single entrepreneur who would say this deal is fair. Braggy words might offer a smokescreen, sure, but it’s that very smoke that your users get lost in on their way to conversion. Instead, keep the info on point, the elements few, and the Hick’s Law unbroken.
4. Color Me Surprised
Back in the early tens of this century (how young we were!), there was an avalanche of articles “exposing” the “insane trick” behind movie poster colors. Basically, non-designers found out the terrible truth behind color combinations: THEY WORK! It’s a terrifying discovery but it seems to have been completely forgotten by everyone out of the designer circle. How else would you explain the fact that I’ve had freelance jobs where the clients asked for a yellow and pale green logo?
https://icons8.com
Now, it’s our job as designers to create striking color combos for logos, websites etc. And it’s also our job to explain our choices to the higher-ups as well as test the compatibility of certain colors with the brand. For example, red is known to indicate sales, both in the sense of commerce and discounts. If you’re pitching a landing page for a mid-range clothing brand, red could be a good fit. But luxury items are all about the black and white contrast, perhaps with some beige mixed in. Knowing which colors to choose and how to combine them is a key skill for high-conversion design. All users will pick a good-looking and color-optimized site over a regular one.
5. A Picture Will Last Longer
A well-written slogan can leave a lasting impression but crafting it is tough. Besides, we all know that a picture is worth a thousand words, right? Since I’ve already covered the importance of keeping your landing page free of novel-length paragraphs, let’s talk about pictures. You can really increase conversion rates as well as represent your brand by simply choosing good, high-res photos for your landing page. It’s often stated that people should be present if you’re selling services rather than products since that helps “put a face to the company”. Similarly, a clear photo of your product where it’s easily visible is more likely to bring in conversions than some obscured poorly lit shot. Just make sure that the photo you’re uploading is high-res but not overly large as it could kill loading times on your site and it’s not really a necessity.
6. One Line, No Waiting
I’m pretty sure I’ve touched upon this in every single one of my articles but I’ll never stop saying this mantra: make your site load faster. Quit using unnecessary elements and ultra-high-resolution pictures (as I’ve said, high-res is good, anything above is overkill). Just remember that nearly a third of users leave sites that load longer than 7 seconds. Unless you want to join the bottom of the barrel with conversion rates below 10%, do everything in your power to keep the website loading as speedy as possible.
7. Simplicity is Key
All of these rules might make conversion-friendly design sound tough but it’s simple, much like your landing page layout should be. Don’t try to reinvent the wheel with some complicated navigation choices, no first-time visitor is going to bother with them. Just present your information in a concise manner with a standard layout. You know the rules — contact info goes to the bottom, the menus are on top and on the side. The less your user has to think about the site — the better.
8. Spotlight On Your CTA
It’s no secret that whatever website design optimization choices you make with your landing page, you’re pursuing one goal: increasing web conversion, usually via the call to action. This ultimately means that you need users to notice that CTA and interact with it. However, drawing their eyes toward the button/form isn’t always as easy as placing it in a prime location. After all, you can’t put it at the very top since most people will want to see a bit of info about your offerings before they answer the CTA. And putting it too low might result in people not reaching it at all. So what do you do? Well, aside from finding a nifty spot to place your CTA, you need to spruce it up. Put a visual effect on it, make it animated, do color accents (who could resist pressing a big red button?) etc.
Another cool way to get users interacting with your CTAs works when they’re not buttons but forms. Designers have finally started to embrace multistep forms, which can be embedded right onto the landing page. This means that users don’t have to click away from the content they were viewing initially, there’s no additional loading, and the form, though asking the same questions, doesn’t seem as long. All of that leads to users being more willing to interact with forms and fill them out, which, in turn, brings web conversion up! As I always say: treat your users well and they’ll treat you right back!
Disclaimer: I based this article on my experience working at Incode Group and personal design projects, which you can find on my Dribble and Behance pages. If you agree and want conversion-enhancing design, I’ll be glad to help you and create custom website design just for you. Don’t hesitate to contact me with feedback about my articles or collaboration offers!
Big thanks to my copywriter colleague Semyon for the co-writing help and thank you for reading!
