18 Web Design Tips for High Conversion Rate Websites

 

Web-Design-Tips

 

The number of hits your website gets is important, but hits are almost useless if they don’t convert. Conversions do not have to be sales but could be any KPI that matters to your business. A conversion event could be:

  • Signing up for a free or paid subscription
  • Registering as a user
  • Allowing for storage of visitors’ credit-card information for easier checkout
  • Downloading a whitepaper, a trial software, or some other goodie
  • Getting more information about a B2B product or a consulting service
  • Using new or advanced features of an application
  • Upgrading to a higher level or a service
  • Returning to a website a certain number of times during the measurement period
  • Anything else that a computer can count unambiguously that you want visitors to do

Many strategies are used to increase conversion rates. Top among these are adding guarantees such as no-questions-asked refund policies to entice visitors, using tangible action verbs such as “grab yours”, asking for as little info as possible in email opt-in forms, including testimonials, reviews and videos to humanize your brand, including stock numbers such as “only 4 left in stock”, detailing how your products or services will help visitors solve their problems, and having strong calls to action (CTAs).

The way you design your website could negatively or positively impact conversion rates. Below are a few web design strategies that have been tried and tested and seen to increase conversion rates. Getting web design right from the get-go ensures you do not have to dramatically change your site every time you need to include a new feature. Most of these strategies are also good for SEO. If you are a business owner and have are planning to design a website in Halifax that is then this information will have a positive effect on your web design project.

Website-Content

1. Content is still king

Content is still king when it comes to increasing conversion rates and in SEO. If you have engaging content, visitors will stay longer and are more likely to convert. The language should be emotionally-charged and you should use amazing storytelling to make visitors excited and eager to try your services or products.

If you have a PPC campaign, ensure the ad copy is consistent with the landing page copy. Inconsistencies will leave visitors feeling deceived.

Your social media profiles are an extension of your website. It brings targeted traffic to your site and visitors expect to find what was advertised. Create professional social media content that is at per with your website.

The focus of the content should be on people, not search engines. You should, therefore, avoid keyword stuffing and other Grey Hat SEO tactics that make for bad user experience.

When creating content, use the 8-second rule which states that you only have 8 seconds to grab the attention of a visitor. That is the approximate length of the human attention span. To achieve this:

  • Use large, benefit-driven headlines that are brief and that go straight to the point
  • Deploy hover effects on buttons (make them change color when a mouse is over them) to make it more satisfying to click on a link
  • Use eye-catching imagery and draw the eye to the main CTA
  • Ensure signup buttons are large, simple and clear
  • Use power words for engaging and enticing copy
  • Incorporate multimedia like audio and video to engage visitors longer

 

2. Choose CTA button colors based on your target audience

Ript Apparel recently changed its CTA button from green to yellow and reported a 6.3% increase in conversion rates. The color you choose should be based on your target audience. If you are targeting men, go for green, blue, or black. For women, go with purple, blue, or green. Studies show the least effective colors are orange and brown.

 

3. Use product videos

More and more websites are using product videos to increase sales and conversion rates. If you have a service-based or a Business-to-Business company, use videos to talk about your differentiators and to share your story.

 

4. Easy navigation

The most important info should be “above the fold”. This way, visitors do not have to scroll in the hunt for the information they want.

Whitespace is referred to as negative space in web design, while positive space is the space with all the website elements. Despite the name, use white spaces whenever possible. Just look at how effective Google’s minimalistic landing page has been. Flat.io also makes good use of whitespace. A cluttered webpage feels cramped and looks ugly. Having too many elements can confuse your visitors and even turn them away. You should only include what is truly important. To ensure you have enough whitespace:

  • Ensure the line-height (the space above and below lines of text) should be about 150% of the font size (1.5 in CSS).
  • Use paragraphs instead of large blocks of text to increase whitespace between them and to make the page more readable.
  • Add whitespace in between larger elements on your website such as sidebar, body, header, and footer

The website menu should only have high-level categories. The menu should then slowly drill down as the visitor digs deeper.

Use search functions and filters to help visitors find specific items and information on the website. This requires a robust search function. If you have a large choice of products for users to consider, ensure the filter features only displays the most relevant results so that the visitor is not overwhelmed.

 

5. Loading speed optimization

In a world of high bandwidth, visitors today are impatient and they get frustrated and leave websites that load slowly.

Compress web pages because full-size web pages take longer to load. Compressing a web page ensures the server does not have to send too much data to the page while it is loading, so it will have a shorter loading time. There are many web page compression algorithms available, among them, Deflate and Gzip.

Split large pages into multiple smaller ones. This ensures your scroll bar is not overly long. The attention span of most visitors today is short and having multiple pages helps reduce this time.

Consider using single code source for all the web pages. Having separate scripts for your different web pages means websites have to read them every time the different pages are opened and that will take a long time. Having an external code/a single code source for all your pages ensures the code is always in the cache and leads to faster loading speeds.

 

speed-optimization

 

Ensure the programing language is used properly and avoid using too much external resources. Not only is clean coding good for improved loading speeds, but it is also good for SEO because Google likes a clean code.

As discussed in the previous tip, using white space is good in driving conversion, but using too much white space is bad since it negatively impacts page load time. This is because white space adds up to a few bytes. Determining the right amount of white space is a delicate balancing act.

Images play an important role in any website. Human beings are visual creatures and images help enhance user experience. According to research by Bright Local, 60% of consumers are more willing to consider search results that include images and 23% are more likely to contact businesses that showcase images. You, however, should use images in the right format. The best formats for website images are:

  • Portable Network Graphics (.PNG)
  • Scaleable Vector Graphics (.SVG)
  • Joint Photographic Experts Group (.JPG or.JPEG)
  • Graphic Interchange Format (.GIF)
  • Weppy (.WEBP)

The images you use should be compressed, no matter the format, to increase loading speed. Source high-quality photos if you can only get bland images. You can find free stock photography for high quality and personal information at Pexels, Superfamous Studios, Negative Space, Death to Stock, StockSnap, Unsplash, Gratisography, and Little Visuals, among other places.

There are several free tools that you could use to check your page speed and to troubleshoot any issues. These include Google PageSpeed Insights, KeyCDN, Pingdom, Sucuri, and GTmetrix.

 

6. Include a virtual chat

Visitors today prefer a quick online chat compared to calling or filling out forms whenever they have a query. Take advantage of this and include a chat feature. Even if a visitor does not have the intention to chat, knowing that the option exists is enough to increase trust in your brand.

 

7. Use trust symbols

Trust symbols, as the term suggests, greatly improve the trust value. Examples of such trust symbols are Yelp badges, PayPal’s certification logo, security seals, and industry-related symbols. Trust symbols serve the same purpose as customer testimonials.

 

8. Limit the choices visitors have

Follow Hick’s Law when giving visitors choices. The law, named after British psychologist William Edmund Hick, states that “the time it takes for an individual to make a decision is directly proportionate to the possible choices he or she has.” A famous study conducted by psychologists Sheena Iyengar and Mark Lepper found that a display table where they displayed 24 varieties of jam attracted less interest compared to a table displaying only 6 jam varieties.

Dedicate different web pages to different products to limit the number of choices your visitors have. As an example, if you have a simple business website selling 3 products, have a separate page for each product and ensure the “About Us”, “Contact”, and other pages are on separate pages as well. However, decisions are not only about what to buy. Visitors make several other different decisions on a page, among them:

  • Deciding whether to share your posts on social media, leave a comment, or download your lead magnet
  • Skimming the headlines to determine which blog post to read
  • Picking between the scroll button or the navigation bar
  • Choosing between reading product reviews, making a purchase, or browsing for more products

 

9. Use the Rule of Thirds

The Rule of Thirds is popular in the photography world and you should consider applying it to web design. Visually divide your images and web pages into thirds, both horizontally and vertically, to get 9 equal squares.

 

Web-Design-Rule-of-Thirds

 

Use the rule, use the 4 middle interactions for the most impactful image or design since this is the strategic place of interest. Do not place your navigation bar near these intersections so that the visitors can focus on the main CTA and not stray their eyes to navigate elsewhere.

When determining placement of CTA, use Fitt’s Law which states that “the time required to move to a target area, such as a button, is a function of the size of the target and the distance to the target.”

 

10. Use F-Layout

You could use F-Layout because studies have found that user’s natural behavior is to browse in an “F” pattern. People first scan a page from left to right at the top of the screen and then they scan the page downwards. Bottom right gets the least visibility.

Ensure all the CTAs and all important information fall within the F-Layout and push the less important information in the lower visibility areas.

 

11. Use color combinations that evoke emotions and reactions

Color is also an often-underrated aspect of web design. Other than conveying the overall meaning of a brand, it also impacts the mood of a website. According to Tom Kenny, a web designer, “Different color combinations can evoke different emotions and reactions.” Choose a color combination that evokes emotions.

 

12. Make use of the Gestalt Similarity Principle

Gestalt psychologist Kurt Koffka came up with Gestalt design principles which can be summarized into, “The whole is other than the sum of the parts.” This means the human brain and eye perceive unified designs in a different way than they perceived individual components of the design.

Follow the first Gestalt principle which is the law of similarity and group similar objects together during web design. We all make use of this mechanism to organize noisy environments and to make sense of things.

 

13. Use Faces for Increased Familiarity

It is human nature to like human faces. According to designer Sabina Idler, “When we see a face, we are automatically triggered to feel something or to empathize with that person.” She adds, “If we recognize content on a website – such as a problem, dilemma, habit or whatever else – we feel connected and understood.”

You could incorporate faces into case studies, articles, opt-in pages, and testimonials. Get horizontal shots of the face of your brand with negative space on one side for use with a CTA or some text.

 

Use-Faces-in-webdesign

 

Another important design principle that can be derived from Gestalt theory has to do with proximity. When grouping things together, always remember that items that are too close to each other tend to be perceived as one object. You should, therefore, put elements of the same category close to each other such as navigation or footer links together to show visitors they have the same function.

Yet another important Gestalt principle is continuity. Once the human eye has started following something, it will travel in that direction until the path is disrupted by something else. You will find many conversion-focused sites leveraging this habit by using photos of models whose gaze is directed at a CTA or content they want visitors to see.

The principle of closure states that the human brain seeks completeness. If it sees shapes or images that are not complete, it will fill in the blanks. Only use this law for objects that are recognizable by the audience.

The principle of symmetry states that the brain seeks out symmetrical arrangements. When the human eye sees two unconnected but symmetrical elements, the brain attempts to put them together to form a coherent shape.

 

14. Stick to standard layouts

Weird is not always pretty. Sites that are considered to be beautiful have low visual complexity and high prototypicality. If you are looking for a way to differentiate your brand from your competitors, the layout is not the place to do it. A “standard” website with high prototypicality will have:

  • The company logo in the top left
  • Horizontal navigation in the header
  • Social media icons at the bottom
  • Search bar at the top

 

Benefits of a Responsive Website Design

15. Responsive web design

Create a responsive website. This is a website that works with both desktop PCs and mobile devices. Responsive web design ensures visitors have a good user experience without having to move websites.

 

16. Use arrows as visual cues

Human faces are great at grabbing attention, but they may not help you control where the eyes of the visitor should focus on next. Consider using little hand drawn arrows for this. CXL did an eye-tracking study that found that a simple arrow was effective at getting visitors to look at page elements.

 

17. Link to product pages

Link building remains one of the most effective ways of generating leads. However, avoid the common mistake of linking visitors on your service page to your blog. You should link to product pages because the aim is to turn the visitor to a lead.

Even more useless is linking outside your website, including to your social media profiles. You should, therefore, avoid the common practice of having social media icons in the website header.

 

18. Professional Web Design

Designing a good website is quite easy nowadays, even for an untrained person. However, consider hiring a pro because he will know, through training and experience, what it takes to set your website apart from template websites.