Here is my translation of the Vietnamese text to English:

11 Web Design Principles That Will Increase Your Conversion Rate

As mentioned in my previous post, we have affirmed the importance of the website conversion rate in evaluating the effectiveness of a website. There are many ways to increase conversions on your website. However, the design of the website is the most important foundation to make your website stand out. In this article, we would like to share 11 web design principles that will increase your conversion rate.

Most marketers understand the importance of SEO, social media, creating conversion magnets, but often overlook an extremely important element, which is web design. Web design is not just a pretty face, but plays an extremely important role that can make or break your website’s conversion rate.

According to a study by Stanford University, 46.1% of respondents said that a website’s design is the top criteria in deciding whether a company is credible or not. Therefore, it is extremely important that your design looks attractive and professional.

Whether your website is aesthetically pleasing or not, it plays a major role in optimizing the conversion rate. With 15 minutes to consume content, two-thirds of readers prefer to read something visually appealing over a dull one (according to an Adobe study). So if you want people to read your blog posts, you need to look appealing. Statistics show that 38% of users will leave your website if its design is poor, which is an unfortunate loss!

Having a professional, visually appealing website is essential. And to make that website happen, it is necessary to apply principles of visual and design, especially UX UI principles.

To go into detail, we would like to present some important design principles that help sustainably increase the conversion rate for your website:

Web Design Principle 1: Follow Hick’s Law
Hick’s Law is a popular theory cited by many individuals for various purposes, but is often referenced regarding website design. Named after the English psychologist William Edmund Hick, the law states that the time required for an individual to make a decision is proportional to the number of choices they have. In other words, as the number of choices increases, the decision time also increases.

You may have heard of the famous study by psychologists Sheena Iyengar and Mark Lepper, where they found that a display of 24 jams received less interest than a display of 6 jams. In fact, those who saw the larger display were only one-tenth as likely to buy as those who saw the smaller display.

That’s an example of Hick’s Law at work: Action is diminished corresponding to the number of choices presented.

In web design, you can increase conversions by limiting the number of options a user has. One of the first places that may need a reduction in options is your navigation bar. Obviously, you don’t want to have too many links to choose from, or the user will become indecisive and lose interest.

However, Hick’s Law doesn’t stop there. There are many other decisions a user may have to make on your website, beyond which navigation link to click. For example:

  • Deciding whether to use the navigation bar or scroll down the page more
  • Skipping past headlines to see which blog post they want to read
  • Deciding whether to download your lead magnet, share your post on social media, or leave a comment
  • Choosing between making a purchase, reading product reviews, or browsing other products

These kinds of things just present the user with too many unnecessary choices and can make them feel overwhelmed, unsure of where to start. In that case, reducing the feature choices is necessary, but more simply, just apply Hick’s Law from the start when designing your website.

All you have to do is create a full-screen call-to-action on your homepage. With a full-screen call-to-action and the user will only see one option, so they won’t be indecisive, and if they want more options, they can just scroll. This allows you to minimize distractions on the homepage, while still maintaining its functionality.

Overall, when applying Hick’s Law to your website, the key is to know which option is most important for your business. The more precisely you limit the user’s choices, the more user-friendly your website becomes, thereby increasing the conversion rate.

Web Design Principle 2: Apply the Rule of Thirds
The rule of thirds is a popular photography principle that can also be applied to web design. With the Rule of Thirds, you divide a visual image (or webpage) into thirds both horizontally and vertically.

When divided this way you get four intersection points, and these four points are areas of high focal interest, where objects placed at these intersections create a visually compelling composition, as well as increased information intake. In terms of web design, you can place the most important elements of the page at these intersections to draw attention and increase your website’s conversion rate.

Note that you should not place the navigation bar near any of the intersection points. This helps keep visitors focused on the primary call-to-action on the page, rather than drawing their eye somewhere else.

And you don’t have to design your entire website strictly according to the rule of thirds, but instead you can use it as a guideline to help direct visitors toward the most important parts.

Web Design Principle 3: Respect User Patience
According to a study by Aberdeen Group, every second of delay in page load time decreases conversions by 7%!

So when it comes to page load speed, every tick counts. To check your speed and see if there are any errors affecting page load, run your website through some of these free tools:

Web Design Principle 4: Use Negative Space
In web design, we have a term called negative space. The areas containing design elements are called positive space, and the remaining blank areas are called negative space. Negative space is an important element in web design, because without it your website will become difficult to read and use.

Negative space is not just the gaps between larger graphic elements, but other blank spaces like the space between a headline and body content, or the space between a sidebar and main content. It also refers to the space between all the smaller elements of the webpage, like the spacing between paragraphs, the line spacing between lines of text, even the spacing between individual letters. Negative space helps make everything more readable, visually appealing, and of course, all of this leads to increased conversions.

For example, Flat.io kept a huge amount of negative space on their homepage so visitors could focus on the call-to-action to sign up with Google or Facebook.

Here are some tips to ensure you’re using enough negative space:

  • The smaller your font size, the more you’ll need to increase the spacing between letters (increase the ratio of negative space to font size).
  • Line spacing for body text content should be around 150% of the font size (in CSS this would read line-height: 1.5;).
  • However, smaller font sizes need wider line spacing.
  • Break up long chunks of text into smaller paragraphs to increase the negative space in between them, keeping your blog posts easy to read.
  • Add spacing between important page elements (sidebar, headers, body, footer, etc.) by using generous padding.

Web Design Principle 5: Consider the F-Layout
Researchers have discovered that the natural behavior of web browsing users when reading a screen follows an F-pattern model.

Here is a heat map showing where a user’s eyes typically stop on a webpage:

As you can see, people look from left to right, starting at the top of the screen then scanning down reading subsidiary content. The area of least focus on the page is the bottom right-hand corner. And the areas where the eye rests longest form an F-shape pattern.

So what does this mean for boosting your conversions? Yes, you can leverage this behavior by placing important objects, calls-to-action along the F-pattern lines, and placing less important objects in lower viewing areas.

Then, if you want to keep feet on the page and direct them to read your latest blog posts, you can place those post headlines down the left-hand side of the page. Less important information (say, sponsored ads) can live in the right sidebar, and the least important information (like the cookie policy) should go in the bottom right-hand corner – the mouse’s corner of the page.

Web Design Principle 6: The Matter of Color

“Color is often an undervalued aspect when it comes to web design, but it can play a huge role in user experience, the overall mood of the website, as well as your audience’s perception of your brand. As designer Tom Kenny puts it: “Different color combinations have the ability to evoke different emotions and reactions.”

When choosing a color palette for your website, be sure the colors evoke the kinds of emotions you want associated with your brand when combined. An easy way to try this is to create a pinboard on Pinterest with images that match your brand’s personality and emotions. Then upload those into Adobe Color, and the system will automatically create a color palette based on the colors in those images. You can also move the sliders around to customize the colors

In addition, you also need to pay attention to color contrast. The colors of the elements and background need to have contrast to ensure visibility and legibility. And especially the parts you want users to pay attention to (e.g. the registration button) will need to have vivid, high-contrast colors.

  1. Remember KISS

Albert Einstein had a famous saying, which was: “Keep it simple, stupid”, which emphasizes the importance of coherence and clarity when presenting something. It applies to language and also to design, especially web design.

Simplicity is of utmost importance when it comes to increasing the conversion rate. Whenever you create a page, ask yourself if there is a way to make it simpler. The result is usually more aesthetically pleasing, and almost always converts better.

Remember Hick’s Law? That comes into play here, but simplicity is not just limiting options, it also creates a clean, uncluttered design that reduces distractions. The fact is, humans cannot process too much information at once. In other words, if we see too many things crammed onto one page, we will feel overwhelmed and annoyed. Creating a smooth user experience on a website means removing any unnecessary elements from the design. For example, Apple is one of the typical models of simplicity in web design, and it has been so effective that countless other brands have had to follow suit.

Web Design Principle 8: Use the 8-Second Rule

The general principle is that you only have 8 seconds to capture a visitor’s attention, as that is the limited timeframe for attention to be sparked. You have a very small window to grab a user when they first visit your website, so make those ticks count!

Here are some tips for grabbing attention and driving conversions in the first 8 seconds:

  • Use a large, concise headline about the benefit you can deliver to prospects.
  • Use eye-catching imagery that conveys the main point or purpose of the website. Draw the eye towards your primary call-to-action.
  • Create large, simple, and clear sign-up buttons.
  • Use positive, energetic words.
  • Incorporate multimedia like video, audio or other interactive content.
  • Use hover effects for your buttons (e.g. make them change color on mouse over) to make them more enticing to click.
  • Use pop-ups to re-engage visitors who have lost interest.

Web Design Principle 9: Remember the Gestalt Principle of Similarity

The Gestalt principles of design can be summed up by a statement from Gestalt psychologist Kurt Koffka: “The whole is something else than the sum of its parts.” Basically, the human eye and brain perceives a unified design in a different way than they perceive the individual components of that design. The first Gestalt principle is the principle of similarity. Specifically, the eye or human brain tends to group together objects that share similar traits. It’s a mechanism that allows us to form connections between different objects, grouping them into a collective. In web design, you can leverage this law by making the shape, color or position of a group of objects uniform so they have a connection.

For example: If you have positive testimonials from customers and you want to use them to increase conversions on your sign-up form, you can place them right below the form. And even though that testimonial may not directly relate to your lead magnet content, users will associate the two because they are positioned near each other.

The law of similarity is also important for user experience. By grouping all the core components of the sign-up form together (headline, description and opt-in button) and keeping them sufficiently distant from other page elements (using negative space), the user’s brain will be able to process the information more quickly and efficiently. This will of course be great for conversions especially because, as we mentioned earlier, humans have a very short attention span!

Web Design Principle 10: Use Faces to Increase Familiarity

Humans tend to look at faces. “When we see a face, we are automatically triggered to feel something or empathize with that person,” designer Sabina Idler says. “When we intake content through a face—whether it’s an expression of frustration, being stuck, habitual behavior, or anything else—we feel connected and understood.” Be sure to add headshot images to your posts, testimonials, opt-in areas, and landing pages to boost conversions.

If you have brand ambassadors, it’s even easier. When shooting photos, work with the photographer to get lots of horizontal shots with ample blank space on one side (left/right). That way, you’ll be able to place a call-to-action or important copy there.

However, if you don’t have brand ambassadors, you can still use people images on your website by hiring models or purchasing stock photos. Just make sure the facial expressions in the images convey the right mood and state that you want your visitors to feel a connection with.

Web Design Principle 11: High-Quality Image Sources

One thing that can make customers evaluate a website poorly from the first impressions is low-quality images.

In reality, images can make or break an order. Bright Local found that 60% of consumers are willing to access a search result that includes images and another 23% are more likely to contact a business that has lots of images on their website.

Images are very important, relating to many customer decisions and evaluations. So when designing websites, you should not use poor quality, irrelevant or dull images. Research from Skyword shows that if your content includes beautiful, professional imagery, you’ll get an additional 94% more views on average!

So instead of using dull imagery for web design, create high-quality, content-relevant, personalized photos. Remember: People choose brands that have emotions and values similar to themselves. If your brand imagery is too “robotic” or “stern”, chances are your customers will soon exit your website.

Here are some websites to search for free high-quality images you can reference:

Now that you have these 11 website design principles, put them to good use by evaluating your current web design to see what issues you have. Do you have too many navigation links? Not enough negative space? Or maybe no people images?

According to Mary Fernandez

...