Anyone who has played golf knows how difficult it is to hit a drive off the tee. It seems fairly simple – just grab the club and hit the little white ball right?
It seems really simple.
But in fact it is very complex action involving strength, concentration and physics. You have to keep track of no
less than at minimum seven body parts just to swing the club. Not to mention not missing that ball.
And the follow through is key as well so the ball doesn’t veer off into the woods. Or that beautiful picture window on the million dollar home over there.
What looks simple is complex and takes practice.
When you look at a piece of content that catches your attention, the same thinking applies.
It can look really simple, but that simplicity is deceptive. It is a complex dance between elements that is harder than it looks. And it takes practice to achieve.
Some simple design tricks to keep in mind can help improve your design and increase conversion.
What is it about that design that makes us want to click or watch without tuning out?
It takes practice. You must be consistent about it. Deliberate.
There are steps you can take to ensure consistent design, leading to increased response.
Practice good design?
Especially in today’s mobile enabled environment where people and prospects access information on smart phones, good design can be the difference between results that are okay and ones that can send you on a dream vacation with the extra income you just made.
Design for your audience
Keep in mind your audience, why they are taking time out of their day to stop by your site and what motivates them. We’ve all been to a website for the hot new restaurant we want to try, looking to make a reservation, only to be frustrated by the lack of a button for directions or mobile enabled site. That visit is totally different than checking out a site looking for a great recipe to save for the best BBQ brisket you want to foist upon your buddies when they come over to watch the season opener. Knowing your audience is key to good design. It affects the visuals you use, the writing style and length of copy, the most powerful call to action and total user experience.
Above the Fold
Imagine your website as a newspaper. Most newspapers fold in half. The top half of the paper is referred to as above the fold. It always carries the most important news of the day. He same hold true for your website. Above the fold is the first thing that visitors see.
It is vitally important to place the key elements of your website, the headline, call to action and services you offer, above the fold. And they should be designed to keep visitors on your site and “egging” them to scroll for more.
Elements in balance
Balance – formal (symmetrical) everything on one side is repeated on the other – elements on imaginary vertical center line are in equal portions on left and right
When you were a kid and trying to ride a bike, one of the key things you had to learn was how to keep your balance. It’s the same thing when designing a website. Too much stuff on one side of the page and it falls flat. Conversions suffer.
Whatever goes on the page needs to be in balance. Visual weight too much to one side or heavy graphics at the top of the page with nothing else below can negatively affect page load as well as reduce what may be an effective copy block with call to action. Imagine a center line and know that visually appealing content in balance increases readability and the chance that your prospect will convert. This is what so many ecommerce sites use a grid approach – it forces a balance to the page.
An example of a page that is not balanced:
Give it some space
Cramming everything you can on a page and stuffing it with words and images leads users to suffer from visual claustrophobia. Everything all in one place might seem like a good idea to try and satisfy users, but if they can’t focus it leads to frustration.
You have to give a page white space and room to breathe so that users can actually read the copy and absorb the images on the page. A visually pleasing layout has good margins and uses whitespace to separate elements. Good use of space also allows you to focus attention on your call to action – the most important element on the page.
Break it up into pleasing proportions and align elements on the page so users spend more time on the page. Topics can be handled with sections on a page or broken into different pages. You want to avoid using parallel structure and obvious alignment, it needs to be more subtle so that people are curious. Allows them to take a little time and weave their way around. Not to the point of difficulty, but just enough to entertain a little.
An example of a site that does NOT use white space:
Tie elements together
Just like pieces of a puzzle, the elements used on your site should fit together. They should look like they belong together, are related and make good use of visual harmony. A well designed page uses a central theme that holds the page together.
It is easy to see this design in action. A page that uses different, jarring colors, that distracts the visitor and is not pleasing to the eye, increases your bounce rate. Multiple fonts that clash with each other making a site hard to read also reduce conversion. Images that clearly don’t fit together and don’t use a common theme also lead users to run from a site.
An example of a site that does not use a theme and elements that work well together:
An example of a site that demonstrates unity and consistent theme:
One element should be the focus of the page
There should be one element that dominates the page. It can be a visual image, graphic, video or headline, but there should only be one that is a focus of the page. All others should serve as supportive elements, but not distracting from the main focus.
This approach calls importance to the key message and benefits of your site. Visitors and prospects can easily see what you offer and find the information that drove them to land on your site in the first place.
Keep it simple
Pages should be simple, have one single idea allowing for the focus of the reader. Keep it simple has been a mantra used for ages and with good reason. Too many complex ideas, thoughts or elements confuse users and confusion causes visitors to hesitate which leads conversions to drop.
If you follow the rule one page, one idea the focus will feel almost second nature. Your visitors will appreciate the time you take to create focus, as their needs will be met because it is easier to find what they were looking for.
A website that is way too much!
Simple is better:
Copy
Some sites prefer to engage readers in long copy blocks to increase time spent on a page way up. Depends on the goals and objectives. Retail store fronts want a conversion as quickly as possible. Blogs want to hold reader in a long form technique. Whatever the purpose, it goes back to who your audience is and what motivates them to take action.
Knowing this will dictate the amount of copy.
Whatever the quantity – must be easy to read on the page. Choose a font that is easy to read. Put an appropriate amount of space between lines so that visitors can easily read the copy.
The quality of your copy is also important. Write as if you are talking to a friend. Write like you talk.
Also review your work for typos. Errors can kill conversions. Use a proofreader and editor if you can. An expense that is well worth it and can actually save your time.
An example of copy that doesn’t work well.
Use Images
Too much of anything is never good. So when you use only copy for your website, it can’t lead to conversions.
Using images takes advantage of research that shows people respond better to visuals than text. Images also have the advantage of communicating an emotion and connecting in a very simple way.
When using images make sure that they are of high quality. There are several sites that offer images that are right free and low or no cost, Unsplash Design Rush and Big Stock
Also check to make sure that you are compressing your images so that they load quickly. There are a variety of plug ins that can help, including Hummingbird or Kraken.
Call to action
Your call to action should be placed in one of two areas, both above the fold. The ideal placement depends on your layout. Placement of the call to action should be in the center of the page or to the center right in the layout. If you use an image on the right, forcing the reader to focus on the center of the page, the call to action will then be best in the center left. This is again an element that has been tested by others over and over. Take a look at other sites that are e-commerce related that count on clicks for revenue.
The copy in the button should use action verbs. (GET A LIST HERE) MAKE A OPT IN !!
Buy now. Click to Buy. Get it Now. Free. Many different ways to say it, but keep it short and action-oriented. Subscribe is okay, but more action is better.
Color that stands out. Blue, green and red work well. Even a yellow or orange if it works with your color palette and doesn’t violate the rules of unity.
So many people A/B test the color of the button. Waste of time. More important to test main benefit, offer or headline. Don’t overthink the button color. Seriously, choose one of the three main colors that have been proven to work. Don’t believe me? Look at all the major sites that sell SaaS products. Mostly blue, green. Maybe a yellow if it fits their brand palette. But again, don’t waste time and effort on thinking too hard about button color. People click on a strong offer, not because the button is orange.
Consolidate what works for you into a standards guide.
When you have a set of design elements that work for you, write them down and keep them updated in a document that everyone can access. Usually referred to as a brand standards guide or design guide, it helps keep everyone focused on what has worked in the past and how you want your site to look. Every time.
Keeping track of different elements that you have tried and the results of those tests should also be committed to documentation so you don;t waste time and effort testing the same things over and over again. The last thing you want to do is spin your wheels testing small variations of something you were already supposed to learn.
Consistent elements of design that call to readers that it is your work – signature design, color palette
Test and revise
Testing different elements and structure on your site can provide needed direction. But again, test things that matter – headlines, benefit statements, imagery and a long versus short sales page. Button color and changing one word are not significant. Save the time and effort of conducting a test for things that are significant changes. And make sure that the traffic splits yield enough of an audience to deem the results statistically significant. The size of each testing group should provide at least 90% confidence interval. You can read more about statistical significance and audience size here.
We’ve summarized all the points in a handy guide you can get by clicking the (you guessed it) call to action below.
You won’t get this kind of guide from your golf pro showing you how to swing a golf club. It will prevent you from hitting into the woods. Put them into practice and eventually, you will be hitting right down the fairway every time.
Till next time.