Table of contents
1- Loading time
2- Hick’s Law
3- Rule of thirds
4- White space (padding)
5- Quick tips to follow:
6-Colours
7- Text
8- CTAs (calls to action)
9- Striking footage or video
10- Fitts’ Law
11- Familiar design
12- Which text do you think would be more effective? If you said the second option, “Add to basket”, you would be right.
13- Landing pages
14- Organic traffic from organic search or SEO
15- Traffic from paid ads
Breadcrumbs
16- Shape similarity principle
Intelligent marketing experts know that a well thought out Pro Ecommerce Store can make a big difference in conversion rates. The first digital impression can make or break your credibility as a business. We have some design tips to help you make the best impression on your website visitors.
Loading time
Everyone knows that long load times can increase bounce rates and decrease conversion rates. According to MachMetrics, a website speed monitoring service, if your page takes longer than 3 seconds to load, you will lose visitors.
Consumers’ ever-shortening attention spans are not willing to wait for long load times when Google is just a click away – potentially leading them to faster competitor sites.
If you want to increase conversion rates, you need to find ways to make your website faster.
Compressing images is an easy option to take. In addition to paying attention to file types, the images on your website could probably be a little smaller on the screen – in fact, a smaller image is certainly more mobile-friendly.
Removing unnecessary animations, auto-playing videos and rotating banners can also help a website run more smoothly.
In 2018, 52.2 % of all website traffic came from mobile devices, so you should always check the mobile functionality of your website after evaluating the desktop version of your website.
Hick’s Law
Hick’s law, or the Hick-Hyman law, describes the time it takes a person to make a decision based on the number of choices they are given. The greater the number of choices, the longer the decision time.
The famous Jam experiment from 2000 illustrates this point perfectly. On one day, customers in a grocery shop were presented with 24 different types of jam and a $1 voucher. On another day, a table with only 6 types of jam was presented.
Although the table with 24 types of jam attracted more attention, more purchases were made when the table with only 6 types was displayed. According to Barry Schwartz, this “decision paralysis” or “analysis paralysis” can affect the smallest things, from what to have for breakfast to more important things like career choices.
What does this mean for web design? When website visitors are presented with too many options at once, it can be overwhelming and lead to delayed decision-making. This can ultimately lead to customers leaving a website and not buying anything at all. The customers who do convert may take a long time, which can slow down the progress of your business and negatively affect your marketing strategy.
Simplifying options is crucial to getting the most online conversions. Hick’s Law is one of the reasons why companies like Buffer usually offer 3-4 package options instead of options that are tailored to the exact needs of each customer.
If you have a lot of items, such as sales packages, that you want to at least make available for viewing, it might be helpful to link to another page that contains less popular choices, says UX designer Paul Boag.
Following Hick’s Law can help your visitors feel comfortable on your website and not overwhelmed by choice.
Rule of thirds
Up to 38% of people admit to leaving a website if they find it unattractive. That’s a lot of missed leads! Although the rule of thirds won’t solve all your web design problems, it’s certainly one of the first places to start.
The rule of thirds is a principle from photography and videography that works by dividing an image into three parts. The eye naturally focuses on the central rectangle and the dots around it, as seen in the image below.
Using the rule of thirds, you can design your website so that important images, text or CTAs are placed near these points to attract conversions.
White space (padding)
Give your elements some room to breathe! White space or negative space helps prevent your design from looking cluttered and crammed together. It also helps to highlight important elements like CTAs.
White space does not only refer to the empty spaces in your header or sidebar. It also refers to the gaps within the text, such as between it and the paragraph above it, and between individual lines and letters. If all this text were jumbled together, it would be unreadable!
In today’s age where websites are more often scanned than read verbatim, readability is crucial. If your message doesn’t stand out, it won’t be noticed.
Quick tips to follow:
– Choose clear fonts instead of decorative fonts.
– Avoid the urge to fill negative space with advertising or text.
– Make sure your website is mobile friendly.
– Leave negative space near sidebars; this is particularly useful for mobile users who have limited scrolling space and may be put off by cramped designs.
Colours
Pay attention to the colours you choose for your website. While it’s a good idea to maintain consistency with your brand colours, you could lose a lot of conversions if you don’t consider how the colours on your website relate to each other and how colours can be used to influence decision making.
Text
The text on your pages should be high contrast. For most websites this means that you should have black text on a white background or vice versa.
CTAs (calls to action)
Are there buttons on your website like “Subscribe” or “Add to cart” where you want to improve the conversion rate? Design them with high contrast and use contrasting colour sparingly. A red CTA button, for example, will stand out on a website with a white background that does not already frequently use the colour red.
An easy way to find out the best contrasting colour for your website is to use the colour wheel and find the colour that is opposite to the main colours in your website’s design. For example, if the background of your website is blue, you should make your buttons orange.
If the primary colour of your website is white and your secondary colour (e.g. your brand colours) is yellow, consider blue CTA buttons.
Take the image of Verizon’s website below. Although the call-to-action buttons are prominently placed, they don’t stand out as much as they could because their colours blend in with the rest of the website. For example, changing the background colour of the buttons to a simple blue (the colour wheel opposite the red of the Verizon logo) could increase the conversion rate of the website.
Whatever colours you decide on, make sure they remain consistent throughout the website. For example, don’t use a yellow CTA button on one page and a blue CTA button on another. Consistent colours help brand recognition and make it easier for customers to navigate your website.
The only exception to this rule: social media icons. It may be easier for your website visitors to recognise your social icons if they are in the original colours of the platform, i.e. the colours the brand uses in its own marketing. The blue Twitter bird is instantly recognisable, but if you change the icon to a different colour to match your website, users might miss it altogether.
It can take a while to choose the best colours for your website. Play around with your options until you like what you see.
Striking footage or video
Imagine a website that consists only of text, navigation and calls to action. Pretty boring, isn’t it?
Pictures and/or videos would help to break up this information. They also help visitors scan the page and get to the point. What can this company offer me? What can they do?
For example, if you see a picture of a dentist on the home page of a website, you don’t even have to read the text to get an idea of what that company does.
The problem is that many DIY website designers don’t know how to get high-quality photos or videos for their websites.
Fortunately, it is 2021 and the internet offers a solution for most content needs. If hiring a photographer, videographer or web designer is not an option, you can consider one of these websites to get images that are sometimes royalty-free:
– Pexels
– Unsplash
– Shutterstock
– Envato
– Pixabay
– Burst
– Kaboompics
– Canva
– Flickr
– Getty Images
It’s also worth noting that you can search for royalty-free images directly on Google. It is also possible to embed posts on social media, so it is not always necessary to come up with a completely unique image yourself.
Consider what visual content is best for your branding and remember that including faces in media can help consumers connect with your brand. Human expressions are priceless and can be very powerful motivators.
Fitts’ Law
Did you know that conversion rates can be influenced by the position and size of your buttons in relation to the distance the cursor has to travel?
That’s right. It sounds silly, but imagining where the cursor would naturally fall when viewing a website can help improve CTR (click-through rate).
Sounds complicated? Don’t think about it too much. Navigation bars are a great example of applying Fitts’ Law; because menu options can take you directly to what you’re looking for, you don’t have to scroll into the void. Instead of searching the entire news home page for the Celtics score, you might go to the sports page first to save time. Understanding which shortcuts your visitors find useful and how to apply them will improve the user experience.
Another example: WordPress‘ UI. If you’ve ever noticed that most of the options for publishing posts are at the top right of the page, it’s no coincidence.
Note that the “Refresh” button has a larger font and a unique background colour and is in an easy-to-find location:
The “Edit” links are all less visual because the typical user does not click them as often as the “Refresh” button. Nevertheless, they are all in the same place, just in case.
Adhering to Fitts’ Law doesn’t have to be complicated. When designing your website, simply focus on making it as easy as possible for customers to find what they are looking for.
Familiar design
Unique may be personally satisfying, but it is not always better.
Take an e-commerce website that is designing a new “Add to Cart” button. They are working on three options, each with an orange background but different text:
- +
- Add to shopping cart
- Shopping cart
Which text do you think would be more effective? If you said the second option, “Add to basket”, you would be right.
This is because websites like Amazon are so deeply ingrained in us that when you decide to buy something, you press the “add to cart” button. Pressing anything else would feel unnatural. You might even skim the button completely.
A new trend has also emerged in navigation bars where users have to wait for animations and then click several times to get to the information they want. Complicated designs like this can be confusing and even annoying for some people.
It is not necessary to reinvent the wheel to create a beautiful, efficient website.
Landing pages
Create different landing pages for organic search and paid ads. And why? Because the way consumers reach the two landing pages is fundamentally different. In this example, let’s say you run a local bakery in Dallas, TX.
Organic traffic from organic search or SEO
If you want your website SEO built, a visitor might search for “bakeries that deliver in Dallas, TX” and discover your website. Great! When he clicks on the link to your landing page, he might find a comprehensive description of your business, what you offer, testimonials, and what days and hours the business is open. You have probably paid attention to the keywords and taken time to perfect other SEO elements.
However, if your potential customer has discovered your website through paid ads…
Traffic from paid ads
When you place ads with a service such as Facebook or Google bought, these platforms are smart enough to find your potential customers for you without you having to worry about SEO. However, since it is possible that the user clicked on the ad while they were doing something other than searching for bakeries in Dallas, it is important to get them through the conversion process as quickly as possible. This landing page should be clean and to the point.
Breadcrumbs
You can’t eat these breadcrumbs; instead, visitors use them to easily navigate through your website. They can look like this:
Company AB >> Blog >> Conversions >> Email marketing tips to increase conversions
Breadcrumbs are useful on large websites and for websites with a lot of organic traffic. A visitor may be looking for email marketing tips and find your article, but let’s say the visitor wants to see other similar articles that already exist on your website. He won’t know where to find these articles in the menu if you don’t point him in the right direction.
Providing your website visitors with more information can only increase the credibility of your brand.
Shape similarity principle
The Gestalt similarity principle as it relates to website design can be summarised as follows: The human brain groups similar objects together. In the digital world, it is important to be able to make connections quickly and precisely.
You can use this design law by placing elements that you want to be associated with each other next to each other. For example, you could have an incredible testimonial. If one of your goals is to increase sign-ups to your mailing list, you could place a CTA button near the testimonial.
The Gestalt similarity principle is about using existing content and organising it in a way that can lead to better conversion rates.
