Most common contexts (channel/source of visit, user environment, etc.)

Competitors (specifically the experience they offer)

Don’t get overwhelmed though. For a UX review, you don’t need to memorize these things. Just become familiar with them.

This base knowledge needs to marinate in your mind as you put yourself into the shoes of your users and go through their experience.

9 Fundamental UX Principles That Will Boost Your Conversions

*TL;DR? Here are the 9 principles with a brief description. Careful though, you’re missing out on some sweet examples (and a useful infographic)!

Assess Current State At any point in each experience, a user needs to easily understand where they are, where they were, and where they can go.

Use symbols, language, and imagery that match the user’s real worldThe experience should speak the users’ language with words, phrases, imagery, and concepts familiar to the user.

Each experience provides a logical next step in the user’s journeyAsk yourself, “Does step lead users to a logical next step?” Ensure that there are no “dead ends,” so a user never feels trapped or lost.

Ensure consistency in the language, tone, and designUse recognizable design and language that are consistent throughout the experience.

When in doubt, assume the user doesn’t know.Don’t rely on the user’s knowledge base. If you are unsure whether they will understand an action, language, or layout, then it’s best to assume that they won’t.

Establish flexible journeys (Personalization)Make sure that you think about new users, expert users, and users with different needs.

Have a minimalist mindsetExperiences should not contain irrelevant or rarely needed information. Every extra unit of information competes with the relevant units of information and diminishes their relative visibility.

Give the user feedback/validation their actions are being activatedWhether you’re interacting with a website or a person, your brain is wired to look for confirmations that your interactions are being received.

1. Assess Current State

At any point in each experience, a user needs to easily understand:

1. Where they are2. Where they were3. Where they can go

When you navigate anywhere (physically or mentally), your brain desires the understanding of where you currently are, where you were before, and where you can go.

This is especially important when navigating a website or app for the first time.

There is no clear map laid out for visitors, so it’s your job to make sure that they always understand their current state.

How Companies Get it Wrong

While the “where you are” rule sounds simple to accomplish, you would be surprised on how often designers fail to follow this rule.

In headlines, it’s tempting to put something clever to try and impress the user with puns or witty statements.

Don’t label your case study page “Art in process” or “Masters of our universe.” Just be straight with your user!

Even the best can get this wrong. Check out the “features” page on Evernote’s website.

Evernote

www.evernote.com

To get to this page, we clicked on “Features.”

The site does a good job with the green underline in the navigation to help a user confirm where they currently are.

But the headline copy and URL address tell us that we’ve entered the “business plan” section.

So where are we? Are we in the features section or the business plan section?

It doesn’t matter at this point. Evernote has already caused friction in our experience.

How To Get it Right

Using breadcrumbs on your website is an easy way to help satisfy this principle. Take Best Buy for example.

Best Buy

www.bestbuy.com

As highlighted above, Best Buy nails all three rules for this principle.

They utilize breadcrumbs to tell us where we were and the path we took to get to our current state.

It also clearly tells us where we are, with a bold clear headline “PS4 Games.”

They then hit a home run with the third part of this principle, where we can go from here by clearly laying out our options.

The easiest way to apply this principle is to ask these three questions at every point of your UX assessment.

2. Use symbols, language, and imagery that match the user’s real world

The experience should speak the users’ language with words, phrases, imagery, and concepts familiar to the user. Avoid terms that are too complex or too vague.

A common instance of this principle is the use of icons.

Nick Babich does a great job breaking down the best way to go about choosing icons for your design.

“A user’s understanding of an icon is based on previous experience. If you decide to include icons in your interface, research first. Familiarize yourself with icons used by your competitors and with icons commonly used on the platforms you’re targeting (i.e. system icons), because those will be most recognizable to your users.” – Icons As Part Of A Great User Experience, Smashing Magazine

If there’s any chance your icons aren’t 100% clear, pair them with text to help define the icons’ identity, as illustrated below.

labeled-icons-large-opt

Another way to apply this principle is to follow units of measurement that are recognizable and important to your user.

For example, imagine you provide a cloud hosting platform.

You have a promotion going on for $20 off when a user signs up from a specific landing page.

20 dollars off

$20 Off

But when you think about it, $20 means a lot of different things to different people.

In this case, dollars don’t explain the actual value a user gets. A user doesn’t understand what $20 translates to in reference to your offering without doing some further research.

Instead, you should define what $20 means in relation to what they know and care about.

Let’s say that $20 equals the monthly cost of using this cloud hosting platform.

1 month free

1 Month Free

You have now saved your user the effort of equating what $20 gets them, and they can understand the value of the deal right away.

Always double-check what you are describing versus what the user can immediately comprehend.

Refer back to your persona and competitor research for this principle. This is a great opportunity to come up with ideas of what to ask during your user research phase.

3. Each experience provides a logical next step in the user’s journey

Ask yourself, “Does each step lead users to a logical next step?” Ensure that there are no “dead ends,” so a user never feels trapped or lost.

Not all experiences have the convenience of a “back” button like websites have. Although, it should be a goal for websites that users will never need to use it.

Do not push users to a next step that you want them to take. You should provide the next step that is most logical based off of the user’s needs.

A very common mistake made here is when you are using a website to try and push users down the sales funnel.

A lot of sites have the bottom-of-funnel CTA on every page or in every region.

Take Wix for example. They have their “Get Started” CTA 8 times on their homepage alone.

WixCTAs

www.wix.com

All 8 of the red circles identify the “Get Started” CTA that Wix throws at their users in every single region (sometimes twice within the same region!).

In reality, if a user didn’t choose to “Get Started” right away, they are looking for more information before they make that decision.

The answers to their questions won’t be miraculously answered within a paragraph on the homepage. On top of that, users develop a “banner blindness” to redundant CTAs.

So in Wix’s case, this strategy backfires twofold.

What you should do here is provide one CTA per region (which is still pushing it) that brings the user to a more in-depth informational page relevant to the region that they are viewing.

Your CTAs should also be clear. Once a user clicks on a CTA, they should know what is going to come next. “Get Started” is vague, and doesn’t tell the user what will exactly happen when they click on the button.

Here’s a great example of providing logical next steps on your website and giving your users clear expectations from Zendesk.

ZenDeskCTA

www.zendesk.com

Looking at their customers? Check out their case studies! Made it to the bottom of the homepage? You must be interested. Sign up for a demo!

4. Ensure consistency in the language, tone, and design

Use recognizable design and language that are consistent throughout the experience.

Ensure that your design has consistency. Even subtle differences, such as poorly contrasting colors or font type, can cause a user’s brain to experience friction.

If you speak in the 2nd person, keep it that way throughout the site. If you use icons or labels, make sure they receive the same treatment throughout the site so users can recognize and find them easily.

A very common mistake that websites overlook is the look and feel of the homepage compared to their blog.

Look at GoToMeeting for example. On the left is their homepage. To the right, just one click away is their blog.

GoToMeeting

www.gotomeeting.com

Now, this game is fun. Can you spot out all the differences in the blog design compared to the homepage?

There are two major differences that can be a potential user experience drawback: The navigation completely changed, and the website now lives in this box surrounded by an eerie gray background.

Why is this bad? Because it’s causing a user to momentarily question where they are. And the last thing you want is to have the user question themselves during their experience because one question of doubt usually leads to another.

“Am I on the same site? Why am I here again? How do I get back? Should I just look somewhere else?”

The goal of UX is to give users a smooth, predictable ride while navigating the world you’ve created for them. As soon as that ride seems like it’s off-course, people will start to doubt their decision to be there in the first place.

Now, most of this is subconscious. No one will ever say “wow I love the consistency of this design!”

But they WILL call you out if consistency is lacking. That reason alone is enough for you to pay special attention to the detail of the experience you are creating.

Your design should also follow a similar format/heuristic that your users are used to seeing.

Examples: Having your hamburger menu on the top right for mobile, having your logo send a user back to the homepage, or finding a form on the contact page.

Don’t get too ambitious if you want to try something new. A very common mistake here, that we’ve all experienced, is the design of “Mens” and “Womens” bathroom icon.

bathroom

It takes a second glance to figure it out, and it’s definitely not an ideal scenario to stumble into the wrong bathroom if you’re in a rush!

The same rules apply to specific industries.

Certain industries have a general template that users are used to seeing. For example, restaurant websites should have the menu readily available from the homepage. Theatre websites give users easy access to showtimes and ticketing schedules.

Also, think about online booking websites. They usually have a search/filter function on the homepage so users can immediately start looking for accommodations.

This plant is practically smack dab in the middle of the page, and has a pretty high contrast. You might recognize this plant from someone’s desk in your office. But it has nothing to do with FreshBooks or their message.

Wow, books! Wait, there’s some small text on those books. You might be tempted to tilt your head or zoom in to see what book it is. Another visual friction point that adds no value.

Really? Terms of service agreement AND a security link on the HOMEPAGE? Is that really necessary to do at this point? In all likelihood, seeing those disclaimers probably increases the anxiety of users who think about filling out the form. It’s much more acceptable to see this type of treatment further down the funnel, but not for a one-field form on the homepage.

Not only do these elements fail to add value, they actually take value away from the other elements on the page by deviating the user’s attention.

Another example of friction is using abstract statements.

Instead, use concrete language that will help a user create a picture in their head.

See an example of how Dropbox misses the mark, and how they could fix it.

Dropbox

www.dropbox.com

This statement doesn’t really communicate anything concrete to the user. They have to read the subtext to understand what the website is trying to tell them here.

Dropbox

www.dropbox.com

This example gives the user something tangible to comprehend, as opposed to just “the best way” to execute something.

Identifying and removing friction is a fun principle to apply, where you get to be an active skeptic.

You should constantly question designs, content, and experiences: Is this necessary? Is there a quicker or clearer way a user can consume/transition here? Are there any elements that distract from the core message/experience we are trying to serve?

6. When in doubt, assume the user doesn’t know.

Don’t rely on the user’s knowledge base. If you are unsure whether they will understand an action, language, or layout, then it’s best to assume that they won’t.

It’s okay to simplify the language to cater to more users. Don’t fall into the Curse of Knowledge, which has the potential to isolate a large chunk of your users.

formexample

As you can see from above, they were able to increase their conversion rate 34% just by eliminating unnecessary form fields.

But don’t have a knee-jerk reaction. Always test the original versus the trimmed-down version. Some users will expect to input more form fields if it’s relevant to their needs, so removing necessary fields can actually hurt your conversions.

The same goes for your design. Trying to say or show too much within one view will greatly reduce the attention the user pays to what you’re trying to communicate.

Let’s look at some examples.

The first is from MuleSoft’s home page. I’m not going to tell you what they do, because I want to see if you can figure it out yourself.

Look at this screenshot for 5 seconds.

Ready. Set. Go.

MuleSoft

www.mulesoft.com/

Now, try to answer one of (or all of) these questions about this website…

What do they do?

How are they better than competitors?

What value can they provide you?

Not so easy, is it?

That’s what happens when you have 13 different elements on your landing screen.

These are 13 different viewpoints of content or actions that a user is exposed to all at the same time, battling for attention.

MuleSoft After

www.mulesoft.com

It also doesn’t help when you use vague, common hyperboles in your main headline. We also want to minimize how much the user needs to think in order to understand something.

Let’s cut this number in half and try the same thing.

Mulesoft After After

www.mulesoft.com (Altered)

Just looking at this image, you can feel the legroom your brain has gotten to actually comprehend what is going on here.

We went from 13 elements down to 8.

Mulesoft After After After

www.mulesoft.com - (Altered)

Here’s a breakdown of how we applied the “minimalist mindset” and achieved this new design.

Changed the copy to be less vague and more direct to what this business does.

Sub copy is more direct to what they do and what makes them different (a directory that functions like a social network).

Made the CTA more clear: What will you learn more about when you click there?

Removed the “How it works” text near the play button, centered it and increased its size so it stands out more and increases chances of the user noticing/clicking on it.

– 7. We pushed these regions down, which also show the image more. This is a twofold win: We minimize the amount of content exposed and show just enough to entice users to scroll down.

Applying this principle will help mitigate the issue of choice overload while improving the aesthetic of your experience at the same time.

9. Give the user feedback/validation their actions are being activated

Whether you’re interacting with a website or a person, your brain is wired to look for confirmations that your interactions are being received.

Be it eye contact, a hover-effect, a head nod, or a confirmation message.

The most commonly known digital feedback elements are these two little widgets:

When a user takes an action, they subconsciously expect validation that their request was received. Think about when you are having a conversation. A subtle facial expression or comment from the receiver helps communicate that they’re listening. The same principle applies to the website experience.

This could be as simple as loading animations or a button that changes color when a user clicks it.

A great example of feedback is validation check marks upon completion of a form field and a clear confirmation message once they submit the form (see below).

Twitter Form Validation

www.twitter.com

Another example: If a page takes longer than usual to load, include a pre-loader so the user knows their click was registered and that the website is working on bringing up their request.

Pre-loader example

https://github.com/steelkiwi/SlidingSquareLoaderView

Pre-loader example 2

https://dribbble.com/shots/2942125-Simple-Loader-2

Immediate feedback and validation from website experiences snowball a user’s gratification. It gives our brains a sense of comfort and validation, which are the most influential feelings you can provide when trying to get people to convert on your website.

Tim considers himself an “optimization” strategist. His biggest motivation is to craft an optimized experience for clients and their customers. In order to do that, he delves into books written by behavioral psychologists and is constantly reading UX blogs. His interest in analytics stems from the ability to track user behavior and develop insights on how to improve their experience. He also is a big fan of avocado toast.