9 Fundamental UX Principles That Will Boost Your Conversions

Tim Mehta Apr 30 2018

Fundamental UX Principles

Have you ever gotten mad at a website because you couldn’t get to where you wanted to go?

What did you do? You probably left, never to return.

Now flip the script. You’re in charge of improving the UX (User Experience) of your company’s website. You are amped.

You have been burned too many times by poor website usability, and you’re ready to make your website the most user-friendly site in all of the internets!

You sit down at your computer, pull up the site and take a nice big swig of coffee.

… Shit, now what?

Where do you start? How do you know exactly where the issues and opportunities exist?

This post is for you and anyone who is in charge of improving the UX of a website, app, or anything that human beings use.

These 9 principles are derived from pioneers of User Experience; Jakob Nielsen, Jill Gerhardt-Powal, Susan Weinschenk and Dean Barker. You might not know their names, but these individuals helped shape the landscape for what’s more popularly known as “UX” today.

Jakob Nielsen

Jakob Nielsen

We took their highly technical principles and simplified them, for you.

Things that are good to know before performing a UX review:

  • Business goals (KPIs)
  • Voice and tone/brand guidelines
  • High impact pages (pages with most visits or conversion assists) – engagement metrics, heatmaps.
  • Personas
  • User goals (through each phase of the buyer’s journey)
  • Most common device (mobile vs desktop)
  • 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)!

  1. 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.
  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.
  3. Each experience provides a logical next step in the user’s journey
    Ask 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.
  4. Ensure consistency in the language, tone, and design
    Use recognizable design and language that are consistent throughout the experience.
  5. Identify and eliminate friction
    Eliminate mental calculations, estimations, comparisons, and unnecessary thinking.
  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.
  7. Establish flexible journeys (Personalization)
    Make sure that you think about new users, expert users, and users with different needs.
  8. Have a minimalist mindset
    Experiences 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.
  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.

 

1. Assess Current State

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

1. Where they are
2. Where they were
3. 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.

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.

www.bestbuy.com

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

  1. They utilize breadcrumbs to tell us where we were and the path we took to get to our current state.
  2. It also clearly tells us where we are, with a bold clear headline “PS4 Games.”
  3. 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.

https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/

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 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

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.

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.

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.

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.

https://www.flickr.com/photos/m-in-berlin/425506396/in/pool-gendersigns/

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.

www.airbnb.com/ - Immediate access to start searching for your needs.

www.booking.com/ - Immediate access to start searching for your needs.

Do research on other websites in the industry you are evaluating. Make sure you aren’t changing the experience to the point where users can’t instinctually figure out what they can do.

5. Identify and eliminate friction

Eliminate mental calculations, estimations, comparisons, and unnecessary thinking.
Keep your eye out for unnecessary elements or copy that might distract users from what they are trying to achieve.

Ensure that every word, image, or element serves a purpose and adds value. If there’s anything that causes friction, remove it.

Take this homepage design from FreshBooks for example.

www.freshbooks.com

While the copy does an adequate job communicating directly, the imagery here has a lot of visual friction.

Visual friction is simply anything on an image that makes a user think about something other than what you are trying to communicate. It takes their mindset on an unnecessary tangent.

www.freshbooks.com

  1. Why is this croissant here? Does it have anything to do with what you sell? No. Does it even have anything to do with the message or feeling you are trying to evoke here? Nope.
  2. Thanks to the croissant, you might think that this yellow bright stack is cheese by association. Nope. Post-it notes. Oddly tasty looking post-it notes.
  3. 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.
  4. 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.
  5. 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.

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.

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.

Utilize tool-tips, directional cues and other supportive content for non-obvious elements.

Good tooltip example:

https://www.webdesignerdepot.com/2017/03/how-to-use-tooltips-as-microinteractions/

“Bounce Hook” is definitely not a common phrase, and the designers here understood that. This is an instance of when it’s appropriate to assume that the user does not know what you are talking about.

When you’re working with this principle, don’t assume that the user knows nothing.

Bad tooltip example:

www.paypal.com

Users don’t need a tooltip to know how to fill out an email address field, and they probably understand what “currency” means.

It’s important to know what the average person understands when it comes to typical web experiences.

Examples: They know that the navigation is at the top of a website, they know that when they click on a brand’s logo it will take them back to the homepage, they know what an ad looks like, etc..

7. Establish flexible journeys (Personalization)

Make sure that you think about new users, expert users, and users with different needs.

Having a base understanding of personas and their common questions will help direct this part of your evaluation.

During your assessment, ask yourself, “If I was a new visitor or a repeat visitor, could I easily find what I’m looking for?”

It’s tempting to put everything that everyone needs on one viewpoint, but there are much more user-friendly ways to achieve this principle.

Tableau does well in catering to its different user types, right on the homepage.

www.tableau.com

While the design makes it a little hard to see, the placement and content are exactly on point.

They provide a prescriptive (for who) and a descriptive (what it is) explanation within the content of each callout. They also give equal treatment to all three potential users.

It’s not hidden within the navigation or on another page either. Users can immediately start their customized journey without having to dig for the starting point.

This type of personalization also helps you identify and track how specific personas interact with your website.

8. Have a minimalist mindset

Experiences 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.

This principle is very similar to “eliminating friction.” In order to effectively identify and eliminate friction, it’s essential that you adopt this minimalist mindset.

Minimalism is one of the most important principles when it comes to UX. This is because choice overload is the biggest issue with designed experiences.

A good practice is to identify the purpose of an experience and start tearing down elements that seem unnecessary. Example: form fields, extra copy, content selection regions, etc..

Once you take an element away, assess whether a user still has everything they need to reach their goal.

A quick, real-life example of how this works is from Marketo and their lead generation form.

https://www.ventureharbour.com/how-form-length-impacts-conversion-rates/

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.

www.mulesoft.com/

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

  1. What do they do?
  2. How are they better than competitors?
  3. 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.

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.

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.

www.mulesoft.com - (Altered)

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

  1. Changed the copy to be less vague and more direct to what this business does.
  2. Sub copy is more direct to what they do and what makes them different (a directory that functions like a social network).
  3. Made the CTA more clear: What will you learn more about when you click there?
  4. 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.
  5. – 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).

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.

https://github.com/steelkiwi/SlidingSquareLoaderView

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.

Infographic

Principles of User Experience or UX Infographic

Fundamentals of UX Infographic

tags : digital marketingUser ExperienceUser Experience Optimizationux