7 beginner tips: Web design basics for better conversion rates

If 10 from 100 visitors on a shop purchase a product, the conversion rate is 10%. On average, this rate lies between 1% and 5%. Very rarely is it above 5%. The value largely depends on the target group, offer, texts & images, as well as the design of the website. Even the smallest of changes have often resulted in a huge impact on the conversion rate – the following tips should help you optimize your website’s design for more conversions.

1. Professional layout

A good, professional web design has a clear effect on how customers perceive your company. A tidy, well structured, and appropriate design gives a very good first impression – and this is extremely important because "there is no second chance for a first impression".

In addition, factors such as integrity, reliability, cohesion, and trustworthiness can be conveyed directly from the web layout. In contrast, a chaotic, unprofessional layout can also be directly associated with your company, factors that immediately have a negative impact on the image of your company. The conversion rate is directly dependent on this first impression since no one wants to shop at a chaotic, unprofessional company.

You should therefore strive for a professional web layout and uniform corporate design. If you cannot implement this in-house, you can turn to a freelance web designer or a website agency.

2. Less is more

Too many distractions or options are a killer for the conversion rate. In particular, the homepage or landing page should have a clear structure and should never be overloaded:

• Keep texts short but descriptive: In cases where detailed information is necessary, you can integrate “more information” links that redirect to subpages or open additional content.

• Use lists to present key details without unnecessary sentence formulations.

• Do not be afraid of empty space. Not every space has to be filled and different sections can be separated with a large empty space.

• Do not display the same information more than once on the same page.

• Use as few fields as possible in forms: Every additional field in a form reduces the user’s motivation to fill out the form.

• Make sure that navigation is as clear as possible with few or no sub-levels.

• Use a maximum of 7 menu items for every navigation level: This is the maximum number that we can perceive at a glance, extra items are automatically depicted by our brain as being “too much” (Miller’s number).

• Use icons, e.g., as a symbol before an email address or telephone number.

• Work with simple motives and do not present too much in one photo.

Figure 1: just-t.de/en – Simple, clear design starting with offers in the slider, then the visualized product categories and brief information about the shop. All that a shop’s homepage needs.

3. Use descriptive photos

Photos are a good instrument to convey emotions. Positive emotions are linked to your company or product and reduce the inhibitions on the way to the desired information. The photos should appear professional with a clear statement.

In particular, photos of (happy) people and smiling faces send a very positive impression. However, you should be cautious and avoid using ordinary stock photos – the large number of artificial photos showing overjoyed people has dented the credibility of such photos.

If you want the strongest effect, the pictures should be large. An overlay, e.g., with a short title or button can be a good way to catch the attention and effect of the image.

Figure 2: evocsports.com – This shop combines cool shop product photos with action-packed photos of products in the application thereby sending emotions.

4. Guided call-to-action

It is very important to guide visitors on your website and ensure that they reach their desired destination. You can do this using call-to-action elements that contain a clear action guide such as "Contact us now", "Order product", or "Request free information".

In most cases, a button is used as a guide ("Request more information"), where the user is confronted with the final prompt to action ("Please fill out this form to receive more information").

For call-to-action elements to receive the desired attention, they should be conspicuous (e.g., with a color that is unique from the rest of the page) and placed prominently. Ideally, a call-to-action should be the most conspicuous element on a website. You should therefore define a clear goal for your website and use call-to-action elements to try and achieve the defined goal.

Figure 3: asos.com – The call-to-action buttons cannot be overlooked (here, the focus is on men’s and women’s fashion).

5. Smart color design

The impact that colors have on the conversion rate cannot be underestimated. Example: The company "Performance" changes the color of a call-to-action button from green to red and thereby improves the conversion rate by 21%.

Prominent colors (yellow, red, complementary colors) generally achieve better conversion rates. However, the color that is best suited for your website depends on many factors and cannot be generalized. Such factors include the target group (even men and women have different "favorite colors"), the product itself (for natural products, a green button could have a much better effect compared to a red one), as well as the general coloring of the website.

If you have the possibility to perform an A/B test, the color of a call-to-action element would be a good starting point.

6. Clear structure

A clear website ensures that visitors find their way around the website and therefore stay longer on the website, thus increasing the dwell time. This way, the user can take in more information, the company or product remain in their memory longer, and the possibility of a conversion increases.

You should therefore ensure that your website has a clear structure through its design, structure, navigation, and by focusing on the key details (see point 2 – less is more). Check if a breadcrumb navigation would be appropriate for your website and if the long text on your website can be shortened.

Figure 4: arngren.net – This is an extremely negative example that clearly shows the importance of a good structure and clarity.

7. Load time

Website visitors become impatient after just 3 seconds, 65% leave a website if it takes longer to load. A large majority of 85% of the people questioned believe that the load time has a great effect on the user’s trust in an online shop.

You should make sure that your website loads as fast as possible. You can measure the time needed for your website to load, e.g., using Google’s PageSpeed Insights tool, different browser plugins (e.g., extended status bar for Firefox), or with OnPage.org.

Figure 5: Use OnPage.org to check the speed of your website

In many cases, even the slightest optimizations on your images or CSS files can lead to significant improvements. For CMS, you should also check the cache options. Similarly, updating to a better web hosting package or changing the host can improve the load time.

Figure 6: amazon.de in Google’s page speed analysis

Conclusion

There are several basic measures for improvement of the conversion rate, but even the smallest of changes can have significant effects. Check if your website has a clear goal and facilitate this objective through the tips on clarity, color, and call-to-action elements. If your photos and load time are well optimized, you can rest assured that your website will enjoy many customers.