When we think about improving website conversions, the standard best practices come to mind. Change the colour of the button, add social proof, write a clearer headline… These are all valid suggestions (although they always need to be tested). But what’s often overlooked is user experience.
I’m a firm believer that if you improve the overall experience for your website’s visitors, you’ll also have a much higher conversion rate. In this article, we’ll have a look at some UX laws that could have a significant impact on your conversions. Each law is accompanied by good and/or bad examples that I’ve collected while analysing hundreds of websites in the past two years.
10 UX laws and principles to boost conversions
1. Miller’s Law: obviously overwhelming
I’ll use an image to introduce the first UX Law. It’s taken from a website that wants to promote language studies. (Thankfully, they aren’t promoting design studies). Have a look at it. What’s your first impression?
It’s too much, right?
There are so many things going on here. (And wait until you see all the moving elements on the website…)
Clearly, they forgot about a few UX Laws. But most importantly, they forgot about Miller’s Law.
Miller’s Law: “The average person can hold about seven (plus or minus two) pieces of information in their working memory at one time.”
When we need to remember or consider more than seven elements, our brains might start to cook. So when we get to see a website like the one above, we’re overwhelmed. We don’t know where to look first. And we leave. Bye conversions. 👋
The solution is easy: keep your website design simple. Here are a few ideas to make your website less overwhelming:
- Avoid moving elements.
- Minimise choices. (See Hick’s Law)
- Chunk information that belongs together. (See Gestalt principles)
- Use recognised design patterns. (See Jakob’s Law)
- Add more white space.
It’s pretty simple. Just avoid doing everything they did in the example.
In practice, you’ll see Miller’s Law everywhere. Here are a few more tips to improve your user experience and increase conversions:
- Split larger numbers and text fields for numbers such as credit cards and phone numbers.
- Use different background colours to chunk elements together.
- Organise images in galleries or sliders.
2. Gestalt principles
There are anywhere between six and ten (or even more?) Gestalt principles. The exact number doesn’t really matter because only a few apply to web design. To be exact, I’ve selected four.
In general, they apply to the placing of elements on your page. By applying these principles, you can group information on a page and create chunks of information. This helps to reduce the cognitive load, i.e. make your page less overwhelming. Hello, Miller’s Law!
The Proximity Principle: “Objects that are close to each other are perceived as related.”
It’s pretty clear how to apply this. Put elements that belong together close to each other. It will create a visual hierarchy and make the website less overwhelming.
In these two examples, there’s no title or border or anything to introduce the client logos. In the second example, there isn’t even a different background colour. Nevertheless, we still automatically group these elements together because of the proximity principle. (But also because they look similar in size.)
The Common Region Principle: “Elements are considered part of a group if they are put together in an area with clearly defined borders.”
This is not too different from the proximity principle. If you want elements to be considered as one chunk of information, create a border around them.
In these two examples, Winwinner and Payhawk used the Common Region Principle to group information together. Winwinner created two blocks to address two different target audiences. Payhawk grouped information on the right to create a short animation with four parts.
The Similarity Principle: “Items sharing similar visual attributes (color, shape, size, etc.) are perceived as related.”
You don’t always need to put elements closely together to group them or give them a specific use. A good example of this principle at work is to use a specific colour for links.
In these two examples, we can see the similarity principle at work. In the Lemonway example, all the logos and icons are round and more or less the same size. Even though they don’t form a regular shape, we group them together and they make one block of information.
The other example is a very interesting one. The four blocks at the bottom look similar, so we can conclude that they’ll have the same sort of information: social proof. (Ok, there’s also proximity and common region here). The funny thing about this design, though, is that the call-to-action buttons have the same design with brackets in the corners. So are these also social proof? Or are the blocks at the bottom also buttons? Nope, they need to fix their design.
The Continuity Principle: “People are more likely to follow continuous and smooth patterns than discontinuous ones.
Your design should make the process as smooth as possible for website users. The next action you want them to take should be the easiest action to take. You have to put yourself in the mind of your visitor to make this work. But of course, it’s always going to be guesswork unless you do user research, such as shadowing someone.
The continuity principle is a bit harder to show in a simple design. In my opinion, it’s more about the UX when interacting with a website and navigating from one page to another. However, these are two home pages where we can recognise some sort of continuity.
On Softr’s home page, the video isn’t fully displayed, suggesting there’s more content below the fold and thus encouraging us to scroll. This reminds me of the Zeigarnik Effect. In the other example, the principle shows itself in a tiny detail. Notice how the arrows nudge us to click or scroll on?
3. Hick’s Law: challenging choices
The more elements you put on a page, the more overwhelming it becomes. That’s not just because there’s a lot of information to take in but also because it becomes more difficult to make a decision. What do I read first? Where do I click now?
We’re moving into the territory of Hick’s Law.
Hick’s Law: “The time it takes to make a decision increases with the number of choices available. It emphasizes the importance of simplifying choices to avoid overwhelming users and promote decision-making.”
In short, offering too many options will freeze your visitors. If they are not sure about what to do next, they usually make one decision: they quit.
How does this occur in web design?
Most companies make these mistakes:
- More than five menu items.
- Social media buttons in the hero section.
- A chatbot or pop-up that opens automatically.
- Three or more different call-to-action buttons.
Here’s a website that shows all of the problems.
Any idea how many possible choices on here?
- Top menu: 4 (Call + 3 social media links)
- Navigational menu: 7 (6 links (plus sublinks) + call-to-action button)
- Hero: 3 (2 call-to-action buttons + chatbot)
That’s a total of 14 choices. I don’t know where to start, so I’m leaving.
When someone visits your website, there’s usually only one thing you want them to do: you want them to become a customer.
Sometimes, they might not be ready to become a customer, so you want to give them more information.
Finally, they might already be customers, and they need to log in or reach support.
That’s four choices, although the “more information” could be split into several links. So, when it comes to creating a hero section for your website, these are the only elements you need:
- Primary button (and secondary button).
- A menu with no more than five options (plus support or log-in if applicable).
What it definitely doesn’t need is links to your blog or social media. If they want to read your blog, find your contact or get to know the team, they’ll scroll to the bottom to find the links. No need to distract them with this in your header. And if they want to find you on social media, let them go to that social media page on their own—in a new tab.
In some cases, you might even want fewer menu options. For example, on a landing page or sales page.
Some sales pages might not have any or just a single action button above the fold.
The fewer choices a visitor has, the easier their experience is, and the more likely they are going to click the buttons you want them to click.
4. Fitt’s Law and Von Restorff Effect: better buttons
Speaking of buttons, how do we make them more effective? We mentioned changing the colour in the introduction. That could work. But why? Let’s have a look.
Von Restorff Effect (Isolation Effect): “Elements that are different from the rest are more memorable.”
All buttons are made to make people click.
Yet some buttons get the job done a lot better than others. It’s because they stand out more or because the copy is more convincing/clear.
Here’s a gallery of some CTA buttons:
You’ll notice some stand out more than others. And I haven’t even included the entire page. Imagine how easily some might disappear on a full screen.
So how do you avoid that? You need a clear contrast between the button and the background. In fact, you don’t just want a contrast with the background; you want a contrast with everything. If your button has a colour that isn’t used elsewhere, it will definitely stand out.
Apart from contrast with the background, you also want to make sure it looks like a clickable element. The usual shape for a button is a rectangle or pill. Don’t go crazy. Do add a drop shadow to make the buttons appear raised. (See Skeuomorphism)
But the colour and design of your buttons aren’t the only things that will increase the user experience. The position might matter just as much…
Fitts’s Law: “The time it takes to move to a target is a function of the distance to the target and the size of the target.”
Simply said, this means that the bigger and closer your button is, the more likely people will click. That doesn’t mean you should put buttons all over the place. Stick to familiar positions, such as the top right corner. Let’s have a look at an example:
This hero section has four buttons. The bottom left ones are most likely to be clicked because of their position. Then, the top right one. And finally, if people even manage to find it, the bottom right one.
Finally, while we’re talking about buttons, make sure people know what’s going to happen after clicking. And when you promise something, deliver it immediately. Don’t put it behind a sign-up form. Not having a sign-up form might get you fewer emails, but it will greatly increase UX. And if your offer is good enough, they will give you their email anyway.
5. Hick’s Law bis: minimal menu
There’s a general rule that says there should be no more than six items in your navigational menu. I’d argue you should aim for four. But what should they be?
I did some extra research for this one. I analysed 58 SaaS and Fintech websites to get a feel of all the different options and the most popular choices.
Most popular menu items
These are the top 10 items from the 58 navigational menus I’ve analysed. Number one was a positive surprise.
- Pricing: 32
- Resources: 26
- Product(s): 20
- About (us): 20
- Solutions: 18
- Blog: 13
- Partners: 9
- Contact: 8
- Customers: 6
- Why us: 5
Other items included: Developers, use cases, FAQ, Learn, How does it work, Enterprise, Templates, Invest, Support, Who is this for, Services, Home and about 20 items that only featured once.
So what should you do? Just take the most popular ones? Not exactly. Some things don’t belong in a navigational menu, other things are overlapping, and a couple of things won’t even apply to your business.
The only time items like “jobs” or “invest” make sense in your top menu is when you have an urgent need to fill vacancies or complete your funding round.
So what’s the ideal menu?
The perfect minimal menu doesn’t exist but this is how I’d go about it:
- Why us?
- Use cases / customers
6. The Zeigarnik Effect: Little by little
The Zeigarnik effect doesn’t influence the first impression of your website but it’s something more engaged users will benefit from.
The Zeigarnik Effect: “People tend to remember tasks in progress better than finished tasks.”
Showing clear progress helps them to keep moving.
It’s a bit like Newton’s first law of motion: “a body in motion will continue moving unless acted upon by another force.“
So imagine this situation: you’re reading an e-mail with two interesting links. You click both. The first leads you to an article in The New York Times and the second to a Techcrunch+ article.
This is what you see first:
I can start reading the first one, but the second is immediately blocked from view. I’m out.
But the second one isn’t free either. The difference is that my view is only getting blockd once I’m well into the first article. By now, I’m already invested, so I’m much more likely to pay.
This is the Zeigarnik Effect at work.
You see it with (smart) newspapers, paid newsletters etc. I’m sure it could work for other gated content such as e-books and whitepapers. Yet I’ve never seen it.
Anyway, there’s another element to Zeigarnik’s effect: progress bars.
Progress bars are common while reading. Many websites have a scroll bar on the right or on top that shows your progress.
But even more important is the progress you see when checking out or signing in. Showing where you are and what’s left to do keeps you in the middle of the task. It keeps you active.
7. The Law of Contrast
Most websites have a white background and black words.
That’s great. That’s a good contrast. It’s easy to read. Even better is a slightly off-white background like #EEEEEE and a dark grey contrasting colour like #111111
Now some people want to get fancy and do it the other way around. It’s a bit of a trend these days.
The contrast is still good but it’s not as easy on the eye anymore.
For design-focused websites, this may work. For text-heavy websites, it’s a pain.
If you want to be different, use a colour. Like Wynter:
The background stands out but it’s light with dark text, so there’s still a good contrast.
It’s easy to read but maybe a bit too bright on the eyes if you watch it for too long. That’s why the rest of Wynter‘s page is white, not yellow.
The problem with a colourful background is that many don’t get the contrast right. The title might be difficult to read, or the buttons might be hard to see. The rules state that you should use white text on an image background. My rules say you shouldn’t use an image as a hero background. Even though contrast-checking tools will tell you the contrast is fine, it isn’t. Readable? Yes. Inviting to read? No.
So if you ask me, it’s best to stick to the basics: light background and dark text. This also makes it easy to use contrasting colours to make your buttons and visuals stand out.
8. Jakob’s Law: feeling familiar
When people browse your website (which probably looks a lot like other websites), they have certain expectations.
They’ll probably expect to see a button in the top right corner. That’s because of Jakob’s Law. Most users spend most of their time on other sites. That’s why they prefer sites that work the same way as all the other sites.
Jakob’s Law: “Users spend most of their time on other websites. Therefore, they are most comfortable with familiar user interfaces.”
Users want your site to work like the other websites they visit. So you should not deviate too much from standard practices without a good reason.
A common way of trying to be clever is to put the menu on the side or at the bottom.
Another problem is trying to be too clever with copy. Even though “client access” means the same as “log in”, it’s not what people expect. Use the familiar. No need to break your head over UX copy when many websites have already created a certain standard. Sometimes “book a demo”, should just be “book a demo”.
You should always be careful with familiarity, though — especially when there is none.
When you’re introducing something new — something other websites don’t tend to have — there are no expectations. Instead, there’s confusion. There’s unknown territory. Guide your visitor. It’s better to use more copy. And it’s crucial to avoid clever copy.
Fortunately, there’s another way to deal with new concepts on your website. It’s called Skeuomorphism
Skeuomorphism: “A design practice in which (interface) objects mimic their real-world or already-known counterparts in how they look and/or how you can interact with them.”
Here are some examples:
- The trash icon looks like a trash can
- Apple’s original note app looked like a notepad
- The mail app icon is an envelope
- The contacts app icon looks like an address book
- And guess what your calculator apps look like?
Clearly, this design tip leans on familiarity. Visitors have certain expectations and when you match them, you make life easier for them.
A more traditional way of using skeuomorphism is a call-to-action button that looks like an actual button with shiny colours and an elevation created with a drop shadow.
10. Postel’s Law
So far, the laws have relied on principles that make understanding and navigating your website easier. The logic is that more people will convert when they have a better website experience. The final UX law we’ll discuss applies at the time of conversion. So arguably, it’s the most important law of all.
Postel’s Law (the Robustness Principle):
“1. Accept the format of the information that users share with you.
2. Ask for limited information.”
It’s pretty clear, right?
if you’re asking for credit card numbers, dates, or even addresses, accept as many formats as possible. Don’t be the jerk who doesn’t accept a credit card number because the space isn’t in the right place. These tiny details make it annoying to fill out your forms. And guess what? People will abandon their purchase. It sounds stupid. But remember, people are stupid. We have to make everything nice and smooth for them to optimise conversions.
Secondly, think carefully about the information you need from buyers. Do you really need their phone number? Do you really need to know the province? The fewer form fields, the easier the checkout experience. It’s not only easier, but also faster, meaning buyers have less time to overthink themselves.
Don’t trick people into converting, delight them with great UX
If you’re serious about increasing conversions, there’s only one way forward: make a visit to your website a much more enjoyable experience by improving the user experience.
Of course, discounts, social proof and other conversion best practices will also have an influence, but they are secondary factors. Improve your website first, then you can make the offer more appealing.