Introduction
Web design is considered essential for the success of any website, and this is mostly true as web design affects all the aspects of user experience and is often the deciding factor separating successful websites from unsuccessful ones.
Very few people are aware of how web design affects conversion in different ways, and even seasoned webmasters seem to be unaware of the vital link between web design and conversion rate. Conversion rate optimization is a science, and some of the significant tweaks recommended by CRO experts concern the design of a website. In this article, we will explain how web design affects the conversion rate of a website and will also share some tips on increasing your conversion rate by tweaking some design elements.
Why web design is essential for conversions
Web design has played an essential role in conversions and the overall success of any website since the dawn of the internet. A study conducted by Stanford University way back in 2002 identified web design as one of the leading factors that affect the credibility of a website. In the said study, a whopping 46.1% users said that they consider the design of a website for assessing its credibility.
Web design affects user experience and conversions in several ways. We have compiled a list of design elements that are known to have a disproportionate effect on the conversion rate. Some of the items on the list, such as color, structure, negative space, are familiar design elements, while others are not well-known outside the conversion rate optimization community.
Rule of thirds in web design
Rule of thirds has been popular among photographers for decades and is also known as one of the leading web design principles. You are supposed to divide each picture or webpage into thirds, both vertically and horizontally, which gives you nine equal squares, as shown in the image below:
The four middle sections where these squares intersect with each other are considered as the most strategic places. The human eye naturally hovers over these intersections, and these places are thus used for placing an image or text that you want your visitors to focus on.
You can see how the cup has been placed at one of the 4 sections, and this makes it at the center of the attention of any viewer. Here is another excellent example of the rule of thirds:
As you can see in the image above, John Lee Duma’s website eofire.com uses the rule of thirds and the call to action has been placed at the bottom-left intersection while his image is near the other two intersections on the right.
Color in web design
Colors have been used since antiquity for expressing various emotions and feelings such as love, sorrow, anger, happiness, or danger. It is well known that colors have their psychology and can affect the mood of a person, and colors are also used to soothe anxiety and calmness. It is natural to expect that a factor as important as the color would have a significant effect on website conversions, and several studies have also proven this.
Color is a quite powerful psychological agent that directly affects the human brain and is often a deciding factor behind our decisions. However, we do not know it consciously as the subconscious mind also plays an essential role in most of our decisions.
The image below contains a color wheel describing the favorite colors among people based on their moods. People with depression or anxiety are more likely to associate their mood with gray color, while happier people are known to associate with yellow color.
In addition to the primary color theme of your website, the color of buttons, call to actions, and other design elements also affects the conversion rate. Button color is known to affect the conversion rate, and this has been proven in this study conducted by HubSpot.
In this study, HubSpot kept all the elements including the message, text, same and just changed the button color from green to red and conducted an A/B test on Performable, a website owned by them. The results were astonishing as the red button outperformed the green button by a wide margin of 21%.
As you can see, in the image above, only the color has been changed for this test, and the rest of the message remains the same across both the versions. A 21% increase in conversion rate just by changing the button color may seem unbelievable at first. There are other examples also where changing or tweaking a seemingly unimportant design element has resulted in increased sales.
Negative space in website design
Negative space is the whitespace left empty on the webpage and is an immensely powerful design element that can have a dramatic impact on your conversion rate. In web design parlance, we refer to the space containing all the design elements of your site as a positive space, while the space without any element is referred to as negative space.
If used correctly, then negative space can help you focus the attention of viewers on a specific element of the site. Some of the most popular websites in the world utilize the concept of negative space in a beautiful way. Here is a screenshot of Apple’s website:
You can see how the space around the pencil and iPad image has been left blank on purpose. This directs a viewer to pay close attention to the main text and image on this page. Google is another excellent example of a website creatively using negative space.
Google’s homepage has only a few elements, including the search bar, Google logo, and some simple buttons, and these are surrounded by negative space. Both these websites use whitespace for the same purpose, i.e., to focus a visitor’s attention on some specific elements, and this also results in exceptional user experience.
The 8 Second Rule
A study conducted by researchers from Microsoft a few years ago found that people have an attention span of only 8 seconds which means that your website visitors will pay close attention to the content only for the first 8 seconds and will move to another page if you fail to capture their attention in these 8 seconds.
This effectively means that you have a short window to attract the attention of visitors and hook them up with the content or imagery on your site. Most successful websites use the following tricks to gain the attention of visitors in the first 8 seconds:
- Use attention-grabbing headlines that are brief and to the point
- Large, simple, and clear signup buttons
- Use hover effects on your buttons which make the button change color when someone moves the cursor over the buttons
- Use eye-catching images, multimedia, and videos that can grab the attention of a visitor
Impact of faces and images
Humans associate with human faces, and this is also true for digital media, where a human face will instantly allow a user to feel or empathize with the faces displayed on the webpages. Human faces on your landing page, email newsletters, case studies, and testimonials can allow you to gain the trust of the visitor and is a proven way to increase your conversion rate.
In the above image, career and business coach Melanie Duncan uses her face to establish rapport with her website visitors. There are several other examples out there where website owners use human faces to establish a connection with their visitors, which then leads to better conversion rates.
Structure in web design
This one is a no-brainer as almost everyone knows the importance of website structure for conversions. People visit a website when they are looking for information, answers to their questions, products, services, or solutions to their problems. Your success is directly correlated to the time which a visitor needs when looking for information on your site. Most successful websites make it easier for their visitors to find the information that they are looking for.
HubSpot conducted a survey some time ago and asked users what they consider the most critical factor in the design of a website. A whopping 76% of users said that the ability of a website to make it easier for them to find what they are looking for is the most important part of web design for them. Or in other words, the ease of use and structure of the website is the most important thing for most users.
Gestalt similarity principle
Gestalt principle is a principle of gestalt psychology stated by psychologist Kurt Koffka as follows: “The whole is other than the sum of the parts.” This essentially means that the human eye perceives the unified design of a website as differently than how it perceives individual design elements included in this unified design.
Gestalt similarity principle is perhaps the most widely used gestalt principle in web design. It states that the human eye perceives similar elements in the design as related to each other. Similarity can be based on shapes, sizes, or colors. Gestalt similarity principle has been used for organizing different elements of web design, and the effect is often perceived as greater than the individual components.
Testimonials and faces are an excellent example of this principle in practice. If you use a simple testimonial with just the name of the person who gave the testimonial, it may not be considered credible, but adding a human face to the testimonial changes the equation. Now the resultant design is more credible than both the text, and the human face would have been if used separately.
If you place the testimonial near the opt-in form, then the user will automatically associate these 2 with each other, even if the testimonial was written for another lead magnet.
Conclusion
Conversion rate optimization is not a one-off process as you will need to continually identify the bottlenecks and make changes to your site for improving your conversion rate.
We’ve tried to include the most important web design principles that affect conversions in this article, but you are free to add any topic that you feel should have been included in this list in the comments section below.
