Website design can be a personal matter. What you think looks good, may not look good to another. The hope is that your design inspires others and generates a reaction from viewing or interacting with your work. While we still look for that inspiration in Conversion Rate Optimization (CRO), it comes down to the actions of the majority that lead to a more profitable outcome for your business. We continually test in order to increase conversion rates and at times, forget about the design of it all and how important it is to keep those practices at the forefront when making testing changes.
Below are a few design principles to keep in mind when designing or editing a landing page. Of course, CRO is a lot about testing and having the resources to do that will only reinforce the proper use of the areas below. Remember that webpage visitors have about 5 seconds to truly make their impression of your business and decide whether or not they’ll stay on. Presenting them with great design will ease any hesitations or friction and potentially decrease your bounce rate.
Color
Color is powerful. The psychology and association with color choice can really set the stage for the user experience and the likelihood of the conversion goal being completed. For example, if a call to action button blends into webpage color, a user might skip over that button altogether. Having a contrasting color will help that button stand out. A great tool to help come up with the right contrasting color is Adobe Color CC. You’re able to select the primary color and it will show you the contrasting color family.
If you’re looking to feature your landing page design around an image, Pitaculous allows you to upload an image and the tool will pick out the best colors to be used with that image. Don’t forget about the proper use of whitespace. Whitespace will help reinforce those other aspects to your landing page and will create a balance.
Typography
The second design component is typography, an art of composing or arranging type (or text) on a page. Bad use of typography could lead to accessibility and readability issues. The use of typefaces is sometimes overlooked. There is an art form to both using and combining fonts. Some tips for combining fonts can be found here.
One item to keep in mind when working with clients is that often, we may not be in direct contact with their web developer or designer to know what typeface is used on the rest of the website. While this might not be a big deal to some, trying to match the font that’s used on the website will contribute to brand consistency. The landing page might be a unique experience but having it look vastly different than the rest of the site could cause some to question and possibly lose trust.
When designing landing pages, it’s important to be able to test how the typography might look on various devices. Typecast allows you the opportunity to enter in your copy on the landing page and test it on mobile devices so you’re able to see what a mobile user would be presented. Overall, the proper use of typography is just one way to influence and reinforce good design on landing pages.
Layout
User eyes are drawn to certain aspects and areas of a landing page. There are numerous ways to measure the success of a layout. Whether it is through clickmaps, scrollmaps, or even eye tracking – we’re able to see where users are drawn. Often, users start in the top left corner and move toward the right hand side, which becomes a prominent area to place a lead form, for example.
When using an image, try to find one that draws the eye toward the certain goal. Whether it’s of a person or an object, having the image more subtly point out the button on the page will draw the users’ attention without being as obvious as an arrow, for example, which could equally prove to guide someone’s attention.
Lastly, make sure the goal on your landing page is obvious. Users struggling to find out why they clicked through to this page will likely cause them to abandon the page altogether.
Congruency
While congruency might not be the first thing you think of when you hear “design”, it does play an important role in what qualifies as good design. Congruency is the act of connecting the numerous steps to the end conversion. Matching the ad copy to the landing page headline to the call to action button is just one example of how to maintain congruence. No matter how people get to a landing page, they’re usually presented with a call to action to actually get to that specific landing page. Whether it’s by email or through an ad, it’s important to maintain the expectation throughout the process. Featuring “Get Your Free Toolkit” in the ad copy but not keeping that promise on the landing page will cause frustrations and abandonment.
A practice used by conversion optimizers is to match the headline with the call to action. That way, the reason why the visitor is there in the first place is reinforced. Like I mentioned previously, color is an aspect to pay attention to. Using color that connects with the brand of the business will help to maintain congruency and brand awareness.
When Good Design Doesn’t Matter
Yes, I hate to say it – bad design will win. Sometimes, the audience couldn’t care less whether the page is using magenta or rose as the contrasting color. The audience wants to know why they’re there and what’s in it for them. It’s instances like these that cause some to question whether or not spending a lot of time on these design details will make a difference.
I, however, believe good design does matter. The experience created with good design will reinforce your brand, build trust among new and returning users, and reduce any friction a user might feel. The psychology of color and design also influences how a visitor may feel when they visit a website, let alone cognitively process it. Have you ever followed your gut feeling over what your mind was thinking? That feeling is exactly why design matters and why, while making subtle changes, we should be looking to create the best design experience for our visitors.
