Web design is both a science and an art. While you could be very talented and creative when it comes to web design, there are scientific principles you must never, ever violate.

For example, do you know that there is a right and a wrong way to go about redesigning a website — and that there is a principle you must never violate? Snapchat wouldn’t have suffered badly after its redesign if it operated in accordance with this principle. Do you also know that you shouldn’t just design CTAs because you like a color, or because a particular color performed really well according to an article comparing the performance of different CTA colors? Instead, there is a principle you must follow.

While there are many web design principles you should gradually familiarize yourself with, there are four key principles you must never, ever violate as a web designer. The principles are listed below:

Principle #1: Fitts’ Law

In the most basic sense, Fitts’ law states that the time it will take a person to move a pointer to a target area will be determined by the distance to the target divided by the size of the target. Consequently, a small target size over a long distance leads to poor UX, a big target size over a long distance leads to better UX, and a big target size over a short distance leads to the best UX.

Image Credit

When you design important elements in violation of Fitts’ law, it becomes increasingly difficult for users to interact with key elements in your design and conversion offers. 

The core lesson is this: when designing elements that will require quite some distance to interact with, make them bigger. If your elements cannot be bigger, then try to reduce the distance required by a user to locate them.

Principle #2: Law of Neural Adaptation

There has been a lot of debate in the web design world about the use of color when it comes to CTAs; in particular, designers are crazed about whether the color red, or blue, or orange is the best when it comes to CTAs, but it wouldn’t really matter once you understand the law of neural adaptation.

In essence, the law of neural adaptation states that we eventually tune out stimulus after repeated (or long) exposure to it. For you as a web designer, this affects your use of color. For example, if you designed a long sales page with the blue color scheme in which most of the elements are blue, using a blue CTA as well will result in poor conversions. This is because users are already accustomed to the blue color and are less likely to pay attention to the blue CTA; it doesn’t stand out to them and as a result is ignored.

The solution is simple then: use a color that contrasts with the main color of your design. In our example, a site that uses a blue color scheme that then uses an orange CTA is likely to perform better. This is because the orange color is different from the main color scheme used on the site — users are yet to adapt to it — and it is likely to stand out and be noticed when it is suddenly introduced.

The comparison of website builders in the screenshot below is a very good example that illustrates this point. The site generally uses a blue color scheme but uses an orange CTA that stands out and is easily noticeable.

The lesson for you as a web designer is simple: pay attention to neural adaptation and learn to make use of the power of contrast when designing key elements. Important elements of your web design should use a different color from that of the main color scheme to help them stand out.

Principle #3: Hick’s Law

If you want to design websites that convert, your website must be designed with an understanding of the principle of choice. More importantly, you want to understand Hick’s Law and design your website based on it.

Image Credit

Named after British psychologist William Edmund Hick, Hick’s law states that the amount of choice a person is given will logarithmically influence how long it will take the person to reach a decision: in basic terms, increasing the number of choices presented to users will logarithmically increase their decision time and decreasing the number of choices will likewise decrease users’ decision time logarithmically.

While it might be a bit difficult to truly understand this concept just yet, take a look at the following interesting facts:

• A one-second delay in how long it takes a page to load will result in a 7 percent decrease in conversions.
• Removing just one form field can boost conversions by up to 50 percent.
• 60 percent of online job seekers abandon a web form due to its length or complexity.

As you can see from the above statistics, true to Hick’s law, increasing the number of your form fields will increase the time required to complete the fields and bring about a resulting drop in conversions while decreasing the number of your form fields will reduce the time required to complete the fields and bring about a drop in conversions.

As a web designer, you should avoid violating Hick’s law by limiting the choices presented to users when designing options that will give them choices that they have to act on.

Principle #4: Weber’s Law of Just Noticeable Difference

While, as web designers, we’re very familiar with more than a few instances of backlashes as a result of a web design change, perhaps no web design woe stands out in recent memory like that of Snapchat.  

Snapchat’s redesign was such a failure that it got public condemnation from highly-influential celebrity and one of its most high-profile users, Kylie Jenner, resulting in a $1.5 billion loss in Snapchat’s value in just one day!

What web design principle did Snapchat violate to bring about such wide public rebuke? It is Weber’s Law of Just Noticeable Difference.

In Weber’s law of just noticeable difference, “just noticeable difference” refers to the minimum amount by which stimulus intensity must change before it can be perceived by the senses. In other words, if the change is barely noticeable then there won’t be a reaction; if the change is too drastic, however, there could be a backlash.

For you as a web designer, the key lesson is to embrace an iterative approach to web design: spread out your design changes and introduce them gradually until users have a completely new design that they gradually grew accustomed to. Depending on the size of your audience, making design changes that are too drastic can easily backfire.

Ayodeji Onbalusi is the founder of digital marketing agency Effective Inbound Marketing and online reputation management agency BoostMyMedia.com. He’s an experienced content marketing strategist and can be reached via LinkedIn.

If you want to increase ROI from your website, you can go about it in two ways: increase traffic or increase conversions.

It is much easier to increase conversions, however. Depending on what you do, it costs little to nothing to increase conversions and the resulting increase can have a compounding effect. The best way to increase conversions, by far, is by tinkering with your design; if done the right away, there are design hacks that can give your conversions an immediate boost.

Simple actions like tweaking the color of your CTA, tinkering with the default option in your design, and literally using a “compromise” can go a long way to boost your conversions. Below are five design hacks guaranteed to boost your website conversions:

1. When Designing CTAs, Always Make Sure They Contrast WithYour Site’s Color Scheme

When designing a page, it is important to realize that there’s no one-size-fits-all format or color for a CTA. You might have read one of those articles in which a CTA was successful because it uses the color red, or the color green, or the color blue, or any other “special” color. More often than not, these articles are missing a key fact: the CTA worked because it contrasted with the site’s color scheme.

Take a look at the following example from one of the most popular case studies on CTA design:

The study concluded that the red CTA outperformed the green CTA, and as such red “beats” green! When you pay careful attention, however, you realize that the color scheme of the page used the color green. As such, the color green will blend in while the color red will stand out — making the color red more likely to convert. This is in line with a principle of psychology known as “sensory adaptation.”

When designing CTAs, make sure your CTAs use an entirely different color that contrasts with the actual color scheme of your page. When you do this, your CTA will stand out and become more noticeable, and your conversions will improve.

2. Use The Bandwagon Effect to Indicate that You Are Popular

The “bandwagon effect” occurs when there is mass embrace of an idea that might ordinarily have been ignored due to the fact that a lot of other people are doing it. When this effect comes into place, it doesn’t really matter whether people agree with the idea — they are going to subscribe to it simply because a lot of other people are doing so.

There have been several mainstream examples of the bandwagon effect, including the hit K-Pop music video Gangnam Style. Even though the video originated from South Korea, it quickly became such a big hit and was on everybody’s lips; people were singing in Africa, Asia, and all over the world, regardless of whether they liked pop or South Korean music. Everybody began to sing it to appear cool and socially relevant, and it quickly became the first Youtube video to reach 1 billion views.

Then there’s also the popular yanny or laurel audio clip that trended and pretty much broke the Internet.

That’s the bandwagon effect in action. People join not because they are interested in a concept or agree with it. They join because a lot of other people are involved.

There are many ways you can integrate the bandwagon effect into your design to boost conversions:

1. Highlight major media mentions/industry recognitions above the fold of your design. The following screenshot shows an example from Website Setup.

The “Mentioned on” section features prominently on the homepage and communicates that top publications like Forbes, wikiHow, Entrepreneur, and Moz (individually read by millions) have endorsed the website. That automatically communicates popularity, and makes people more likely to follow.

2. Showcase key metrics (subscriber count, traffic figure, sales, or other important metric). The following example from Problogger shows how that works. As a blogger looking for a blogging community to join, realizing that over 300,000 bloggers are in a community makes it a lot more attractive.

3. Leverage the Default Effect to Boost Sales and Conversions

One of the most powerful design hacks you can leverage to boost conversions is the default effect. The default effect refers to people’s tendency to reflexively go with the default choice, and so many studies have shown just how powerful this can be.

In a particular experiment, Walt Disney found that by changing the default choices in kid’s meals to swap out soda for juice and french fries for fruits and vegetables, it was able to automatically result in kids consuming 21 percent fewer calories and 44 percent less fat. Vanguard was also able to double participation in employee retirement plans by opting people in for the plans by default and giving them an option to opt out rather than opting them out by default and requiring them to opt in.

How can this be used in your design?

Checkboxes, form fields descriptions, and placeholder content can be effectively used in such a way that what you really want people to do is included by default — and they have to take an extra step to opt out if they are not interested, rather than being opted out by default you having to prompt them to opt in.

4. Understand the Power of the Middle/Compromise Option in Web Design

When given extreme options, many people are likely to go for an intermediate option or what they feel is a compromise between two options.

For example, if given three packages with the costs below:

• $100
• $50
• $10

Many people will go for the middle option (the $50 option) instead of the cheapest or the most expensive. This is known as the “compromise effect.” To really leverage this effect to boost your conversions, you can take the compromise effect not just figuratively but also literally. The below example is courtesy of Aha!.

As you can see, the middle option isn’t just a compromise between the two extremes, it is also specially designed and highlighted in a way that it sticks out.

When designing pricing pages and options for people, you want to design the option you really want people to select such that it is literally placed in the middle. Not only does this draw more attention to it, but it draws special focus on it as a clear compromise between the other options and as a result makes people more likely to select.

5. Optimize Your Design For Speed

In an age of rapidly declining attention spans, it goes without saying that every design changes should be made with speed in mind.

Here are some key facts you want to take note of:

• A simple one second delay in how long it takes for your design to load can make conversions to suffer. Even longer delays will be more detrimental.
• Search engines use a page’s speed as one of the major factors when determining how to rank it.
• 47 percent of people expect a web page to load within 2 seconds.
• 40 percent of people will abandon a website that takes longer than 3 seconds to load.

In essence, speed shouldn’t be a compromise when making design changes. Rather, actions taken to optimize your design for speed in and of itself can go a long way to boost your conversions.

Ayodeji Onbalusi is the founder of digital marketing agency Effective Inbound Marketing and online reputation management agency BoostMyMedia.com. He’s an experienced content marketing strategist and can be reached via LinkedIn.