In conversion trouble? Better call the Laws of UX.

By
Robert

In UX, we have the 'Don't make me think' concept. The idea that great UX is about minimising the cognitive load: eliminating friction, anticipating user needs and delivering the job the user came to do. This essentially sums up the Laws of UX. We don't do this to be kind. We do it because it has a direct correlation with the commercial performance of a website. As a business, understanding the fundamentals of UX is the key to driving website performance.

Key points:

  • The Laws of UX instruct us in the psychology of how users interact with websites and interfaces. But they are more than theoretical.
  • Businesses should understand these Laws.
  • You’ll be able to have an objective conversation with your agency or team about improving your user experience and thus growing your website's performance.

Conclusion: By understanding the Laws of UX, you can make immediate and actionable changes to optimise your website. The ROI and improvement could be considerable.

What are the laws of UX?

The Laws of UX are guiding principles for best practice UX and UI design. The Laws are grounded in an understanding of human psychology.

The Laws of UX fall into four buckets🪣:

1. Heuristics

  • The correlation between visually appealing design and usability.
  • The shorter the time the better.
  • The closer a user is to completing a task, the faster they will work.
  • The Paradox of Choice.
  • The 7 +- 2 rule of short-term memory.
  • Users will typically take the allotted to complete a task.
  • Prototypical website: give people what they expect.

2. Gestalt Principles

  • When we see elements on a page with a similar treatment, we group and relate them.
  • The proximity of visual, like-elements in your design.
  • Grouping like-objects within a visual boundary to instruct users that the objects are similar.
  • Users use less cognitive processing to view simpler, softer visuals.

3. Cognitive Bias

  • Users don't look back on a journey as a whole; instead they remember the peak and final experience.
  • Put things in priority order and end with a bang.
  • We are more drawn to and remember elements that differ from others.
  • In the art of 'conversion, we have two evils we want to mitigate: anxiety and friction.

4. Further Laws of UX considerations

  • Be fast.
  • Keep it simple.
  • Prioritise your efforts.
  • Be lean and flexible with user data.
  • There is only so far you can go to simplify.

Why should a business understand the Laws of UX?

At face value, the Laws of UX sound pretty theoretical and deep in the fundamentals of UX and UI design.

But they’re not.

The Laws of UX are not only pretty interesting to know, though understanding them gives a business the prima facie ability to challenge the UX and UI design of your digital agency or team.

In optimising your website or building out a new page, research, data, and testing are also part of the mix; though having a handle on the Laws of UX will give you a grounding in good practice and point to where to optimise.

1. Heuristic Laws of UX

Aesthetic-Usability Effect

Users see a correlation between visually appealing design and usability, even if the correlation isn’t there, i.e. UX is not as strong as the visual design.

The argument here is not to discount your UX but to consider your visual design, especially when testing prototypes.

Design is unarguably important though it shouldn't be a crutch. Get it right together with great UX and you're onto a thing.

Fitt’s Law

The shorter the time it takes a user to reach a particular target to engage it, the better.

Buttons are an often-cited example: make your call-to-action (CTA) button easy to identify as the target and inviting for users to click:

MYOB and their great CTA.


💡The best CTA buttons include words like ‘get’, ‘reserve’ and ‘try’ rather than ‘submit’ or ‘enter’ (
Wordstream).
💡Increasing the white space around CTAs can increase conversion rates by 200% (
VWO).

Goal-Gradient Effect

The closer a user is to completing a task, the faster they will work and the more motivated they will be.

In UX, we achieve this by signposting the finishing line of a task and the user’s progress in getting there:

amazone-progress-bar

We also do this by breaking up tasks and data collection where appropriate.

We do this by collecting less data in any given transaction.

We make tasks appear doable and rewarding to complete.

Hick’s Law (or Paradox of Choice)

Hick’s Law, or the Paradox of Choice, is an understanding that the more options a user is presented with, the harder it is to make a decision.

If presented with three pairs of sunglasses, choosing one is relatively easy.

Presented with 300 sunglasses, and there is a chance none are chosen.

💡In a 2000 experiment, Lyengar and Lepper presented buyers with either six or 24 jars of jam to buy. Of those presented with six jars, 30% proceeded to purchase. Conversely, only 3% of those presented with 24 jars of jam went on to purchase.

That is a significant ROI from reducing choice.

Reducing the choices reduced cognitive load and anxiety, allowing us to decide faster.

Miller’s Law

Miller’s Law states that users can only hold so many concurrent items in their short-term memory until they forget them all.

The law says that seven items are optimal with no more or less than two either size: the 7 +- 2 rule.

For example, a user is presented with a navigation holding 15 links. As they read each link and place it in memory, ready to decide which link to click, they pass nine links in memory, and all the links are forgotten.

Jakob’s Law

I mentioned prototypical websites, which is what Jakob’s Law is about.

We are familiar with how marketplaces look and work. We expect the shopping cart icon to be at the top of the screen and know what will happen when we click it.

This is why a hardware store being clever with its shopping icon and making it a wheelbarrow is not being clever by half.

This is why we try not to mess with the design of forms.

We are otherwise causing anxiety or even disappointment as we mess with the expectations of users.

💡Users spend plenty more time on sites other than yours, meaning they would prefer it if your site worked as expected, especially on mobile.

Parkinson’s Law

This law states that users will typically take the allotted time to complete a task, even if the task does not require the allotted time.

Applying this law in UX means making tasks faster than the user anticipated.

In the art of MicroUX, ‘surprise and delight’ is often associated with actions like auto-completing forms based on known information. The user is left with ‘surprise and delight’, which is the sort of user you want.

2. Gestalt Principles Laws of UX

Law of Proximity

The Law of Proximity is about the proximity of visual elements in your design, and that close proximity instructs that the elements are related.

This allows users to focus on a form, for example, and see all the labels, form elements, and form messaging together to easily and quickly complete the form.

Law of Common Region

We apply the Law of Common Region in UX and Information Design by grouping like-objects within a visual boundary to instruct users that the objects are similar and no further breakdown is needed.

A typical example is grouping blog posts so that users can quickly determine that they are looking at many blogs and do not need to think further.

The upside of this law is evident in information design, reducing the cognitive burden on users trying to understand the different elements of your page.

wedsure-blog-listing

Of course, if you wish to highlight a particular blog, grouping it similarly with your other blogs won’t work.

This is where information design instructs highlights and emphasis.

Law of Prägnanz

Users use less cognitive processing to view a square with rounded edges than a square with hard edges.

Users can compute a circle far more straightforward than a starburst with 18 points.

Complicated and unclear imagery requires more time to break down, simplify and understand.

By incorporating softer, simpler imagery and shapes into your design, you reduce user anxiety and improve user engagement and retention.

Law of Uniform Connectedness

When we see elements on a page with similar treatment, we group and relate them to their function, e.g., consistently coloured calls-to-actions or links.

Elements with unique treatment require more investigation and, therefore, time.

Consistency in your design reduces anxiety and gives users confidence to rely on your interface.

Another example is knowing how to go backwards or forwards in an interface.

3. Cognitive Bias Laws of UX

Peak-End Rule

I previously mentioned MicroUX, and here is an example of how it can be applied to your UI and UX.

The Peak-End Rule tells us that users don’t look back on a user journey as a whole; instead, they remember the experiences they had at:

  1. The ‘peak’ (the peak experience); and
  2. The end (the conclusion of the process or journey).

Grouping the peak and the end of the design experience leads to ‘surprise and delight,’ which users will remember.

Think of a hotel booking app where on the final screen, you hear and see a pop: “Yay - Booked!”.

That is MicroUX and taking advantage of the Peak-End Rule.

This is not to say that the rest of your processes and forms should not also be polished and memorable: consider the highlight in the process and where that is experienced.

The Serial Position Effect

It is a complicated name for putting things in a logical order.

Why?

If you have ever been media trained, you’ll know that your first answer to a question is “yes” or “No.” Then, you elaborate through to a clear conclusion.

You do this because users remember the first and last thing you say.

UX, UI and content design are no different, especially considering how users now skim and swipe through pages and content.

Start with a bang and end with a bang.

💡Forms and other content above the fold capture 57% of page viewing time (Nielsen Norman Group).

The Von Restorff Effect

Several Laws of UX slightly overlap here, and I mentioned the need to highlight the content you want to stand for when dealing with the Law of Common Region.

That is the Von Restorff Effect, where we are more drawn to and remember elements that differ (even slightly) from the other elements presented on the page.

It’s why we highlight buttons we want users to click. That’s why we have featured products. That is why we highlight plans we want users to click:

Zeigarnik Effect

In the art of ‘conversion’, we have two evils we want to mitigate:

  • Anxiety: cognitive anxiety that impedes a user’s ability to complete a task.
  • Friction: roadblocks that make a task harder or impossible to complete (e.g. CAPTCHa on a form).

The Zeigarnik Effect tell us that whilst completing a task, establishing task-related tension in the user will help them complete a task.

Without this tension, you have anxiety, stress and a lack of incentive to keep pushing on.

A progress bar on an application form is a great example, where the user is cognitively incentivised to complete the task and, in doing so, is freed of the tension of completing the task.

💡CAPTCHAs can reduce form conversion rates by as much as 40% (Inc.).

4. Further Laws of UX

Doherty Threshold

The Doherty Threshold instructs that users have high expectations about the speed of interacting with a website and the need to know whether the interaction was successful (or not successful).

💡We know that users expect interactions to be instant or less than 400 milliseconds.

It is not good enough that your website is fast. Users want gratification for their interaction through cause and effect.

If I press ‘Save’, I need something to tell me my form was saved.

And if saving the form is not instant, tell me clearly so that I know I have clicked the right button and my form will be saved.

Occam’s Razor

As a parent, I am regularly citing Occam’s Razor. The simplest answer is usually the answer.

Why is that window broken? Why were you late to school? Where is the chocolate that was in the pantry?

When it comes to UX, we apply Occam’s Razor to help us simplify the user experience to the simplest it can be.

Could this be simpler? Are these icons adding value or are they just visual clutter?

Pareto Principle

When I first learnt of the Pareto Principle, it immediately made me think about website and page optimisation.

Essentially, on any given page of your website, about 20% of the page (and its functions, content, etc.) will do 80% of the lifting.

Changing or optimising everything in the name of improving the page will have far less effect than working on the 20% of the page that is really pulling its weight.

(Moreover, change more than one thing at a time, and attribution becomes far more difficult).

Of course, research and data should help you identify what is working and what isn’t and proceed from there.

Step back further, and the principle will help you identify which pages are doing the heavy lifting and which might actually be dragging you down. It never surprises me to find a single blog post on a client site that is getting 1% of their traffic, but driving 10% of their leads.

Let those insights drive your optimisation.

Postel’s Law

Form design is often where the rubber hits the road and it is here that Postel’s Law instructs two things:

  1. Be flexible in accepting user data.
  2. Limit the data you collect (at least in any given transaction).

To illustrate flexibility in the data you collect, when collecting a mobile number from a user, do not force them to omit ‘0’ at the beginning of their number simply because the field wants them to do that in the name of standardisation.

Let them enter their number as they regularly refer to it.

And limit the data you need to collect in any given transaction.

You can always collect additional data down the track, implicitly or explicitly.

Less is more when it comes to data collection.

💡The average checkout form takes three minutes and 21 seconds to complete (Zuko Analytics).
💡The average checkout conversion rate is 2.96%, varying widely by industry (
Simpler).
💡Multi-step forms are less used, but their conversion rate is 86% higher (Hubspot).

Of course, with the initial data you have collected, you can recover abandoned users through mechanisms such as push notifications and cart abandonment emails:

💡Over 44.1% of cart abandonment emails are opened, and almost a third of clicks lead to recovered sales (Dynamic Yield).


💡On average, A/B tests on forms lead to a 10% improvement in conversion (
Hubspot).
💡Reducing a form field from four to three fields can increase conversion by almost 50% (
Quicksprout).

Tesler’s Law

It might seem a truism, though every process and function has some complexity that cannot be fully mitigated.

This could be in the function and functionality themselves, the premise of the function being presented to the user, or both.

To illustrate what I mean about the premise of the function being the complexity, years ago, the booking site Wotif had a brilliant feature where you could compare international flights and see when they took off and landed relative to each other.

This enabled users to not only make a decision based on price, but also on when they would arrive.

Is a 12-hour layover in Helsinki worth a $600 saving?

Except despite how good the UX was - or at least I thought it was - the feature was a bomb.

Their research found that users couldn’t wrap their heads around it.

Attempt to simplify things as much as possible, functionally and non-functionally. However, know that there is a limit to how far you can go, and either don’t cross that line or abandon your efforts.

We acknowledge the Traditional Owners of country throughout Australia and recognise their continuing connection to land, waters and culture. We pay our respects to their Elders past, present and emerging.
Let's talk about your product.