Are you wondering how to increase website converisons? Sadly, you’re not alone – it’s a common problem for many companies. A large number of websites are built based on what looks good rather than focusing on functionality and design that converts.
The solution is to use conversion centered design on your website. This approach uses established design principles to persuade users to take a single business-driven goal, helping to increase conversion rates and drive more leads.
“CCD helps you design experiences that guide the visitor towards completing that one specific action, using persuasive design and psychological triggers to increase conversions. In other words, it’s about persuasion.”
(Source: Unbounce)
Listed below are some core principles of Conversion Centered Design. Use these to help drive your users to a single action.
Minimize Distractions to Increase Conversions
Have you ever sat in a restaurant for way too long sifting through a 20-page menu trying to decide what to eat?
Now, if that were a one-page menu with fewer options, the time and effort it would take to make a decision would decrease. This is explained by Hick’s Law.
“Hick’s Law predicts that the time and the effort it takes to make a decision, increases with the number of options.” (Source: UX Planet)
(Source: UX Planet)
The more options you give your visitors, the more frustrated they will get with making a decision. Minimizing distractions throughout the website is key if you want to convert your users to a single action.
Make Important Web Design Elements Stand Out
According to Conversion XL, Fitt’s law stipulates that the time required to move to a target area (e.g. click a button) is a function of the distance to and the size of the target. In other words, the bigger an object and the closer it is to us, the easier it is to use it.
Make important elements that you want to highlight on your website easy to select, large, and position them close to the visitor. Buttons are a great example of this law, as their purpose is to stand out and be easy to find and select.
Below, you can see how we use a large button to make out CTA stand out for our client’s blog design:
Draw in Focus To Your Call To Actions (CTA) Using Imagery
Strong imagery creates a connection between the user and the photo, and therefore, the page.
“When it comes to the types of effective human images to use, babies and attractive people are well known to have an impact.”
Source: HubSpot
In a study done by UsableWorld, an image of a baby was used to perform eye tracking to see the effect it would have on a user’s attention. The image below shows a heatmap of the results. As seen below, most of the attention is focused on the baby’s face.
Source: HubSpot
In the second image below, the area the baby is looking at also receives a lot of attention. This also a great way to make your user focus on your CTA and important elements of your website.
Source: HubSpot
Use Social Proof To Increase Conversions
Have you ever had to wade through pages and pages of reviews before deciding whether to buy a product? Those reviews are an example of social proof.
According to Hootsuite, social proof is a psychological phenomenon referring to people’s reliance on the feedback and actions of others to determine what is right and what is wrong in a given situation.
You can build the users trust by Integrating social proof strategies such as:
- Number of social shares
- Testimonials
- Ratings and reviews
- Partners
- Certifications
- Clients
- Case studies
- Data/numbers
Conversion Focused Content Placement
To draw your user’s attention to what you want them to notice, your website needs to follow important elements of visual hierarchy.
Listed below are some rules and concepts you can leverage in your design.
- Rule of Thirds: The rule of thirds refers to a 3×3 grid that helps you understand the most eye-catching points on an image. The four middle sections of the grid are the strategic places interest.
In the example above, the most important elements of the banner are placed at these points to grab the viewer’s attention.
- Z Pattern: “A Z-Pattern design traces the route the human eye travels when they read — left to right, top to bottom” (Instapage). This kind of pattern is good for designs that have a couple of key elements of focus and minimal copy. Facebook’s landing page is a great example of the the Z-Layout.
To learn more about this pattern, check out this article on The Z-Pattern Layout.
- V Pattern: Using the V pattern can be an effective way to make your CTA stand out. Center your text and lead it down to your CTA in a V Shape. A great example of this method can be seen in the example below:
Source: InkSoft
- F Pattern: According to various eye-tracking studies, the F-Pattern is the way visitors read the screen.
- First, our eyes move to the top of the page to read headlines
- Then towards the upper left corner and left side of the screen
- Lastly, across the page again (reading anything that stands out in that section such as bolded text or headlines)
Source: Instapage
The heatmaps above show the generalized F layout. Red / Orange / Yellow are the hotspots where a viewer’s eyes fixated the most. An important thing to note here is that it is not a strict F shape, but more of a rough F outline.
Guide Website Visitors To Call To Actions (CTA)
Directional cues can be a great way to subtly point your visitors attention towards focal area of your website.
Arrows
One way to guide your visitor to your CTA, is to use arrows pointing to it. See below for an example done for Jumpfactor’s landing page. There is are two arrows pointing to the Free Assessment button to visually guide the user’s attention to the CTA.
Following Eye and Head Movement
Another way to guide your users is through images where the person or animal is looking at the product. Below is an example from Think Eye Tracking to illustrate how this works.
Make CTA’s Stand Out Using White Space
White space plays an important role in improving reading comprehension, prioritizing important interface elements and guiding users on a page. The purpose of this is to make your call-to-action stand out from other elements of your page and give the user one thing to focus on. It also makes your website look more clean, uncluttered and minimizes distractions.
Source: Squarespace
JustInMind describes the example above very well – Squarespace uses very few UI elements on their homepage but in spite of these limitations, the user has everything they need to understand what Squarespace is all about.The black call to action button stands out against the use of muted colors and there’s no credit card required to get your trial started – easy!
Use Contrast To Make Conversion Elements Stand Out
“Consumers form an initial judgment of a product within in 90 seconds of interaction and 62%-90% of them are based on the colour.”
Source: Hackernoon
Using the right colour scheme in your website is integral to setting the right mood and representing your brand.
Contrast also plays a major role in making the important elements of your website stand out. Use high contrasting colors on elements that you want to draw the user’s attention to. Using a light contrasting background between different areas within the website also helps your user scan your page with ease. See below for an example done for one of our clients where a contrasting background was used to differentiate between sections on the page.
Conclusion
Get more leads and convert the visitors on your website by implementing the design principles above. Keep in mind, the key to developing a successful website is to address the needs of your unique end-user. Continuous improvement and careful analysis of your data is also an integral part of the process if you want to generate leads and increase your conversions.
Are you interested in generating leads and improving your website? See how Jumpfactor can help. Request a one on one consultation.
