9 Fundamental UX Principles for UX Designer
Iosi Pratama
Iosi Pratama
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.
[caption id="attachment_727" align="alignnone" width="600"]
Jacob Nielsen[/caption]
We took their highly technical principles and simplified them, for you.
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 in the shoes of your users and go through their experience.
*FYI: These 9 principles are in no particular order. Table of Contents
At any point in each experience, a user needs to easily understand:
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.
While the “where you are” rule sounds simple to accomplish, you would be surprised at 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. [caption id="attachment_728" align="alignnone" width="600"]
http://www.evernote.com[/caption] 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.
Using breadcrumbs on your website is an easy way to help satisfy this principle. Take Best Buy for example. [caption id="attachment_729" align="alignnone" width="600"]
http://www.bestbuy.com[/caption] As highlighted above, Best Buy nails all three rules for this principle.
The easiest way to apply this principle is to ask these three questions at every point of your UX assessment.
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.
does a great job breaking down the best way to go about choosing icons for your design.
–
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.
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.
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.
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.
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 your 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
on their homepage alone.
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.
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!
Use recognizable design and language that are consistent throughout the experience.
Ensure that your visual design has consistency throughout the site. Even subtle differences, such as CTA treatments 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 the blog.
Look at GoToMeeting for example. On the left is their homepage. To the right, just one click away is their blog.
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 grey 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.
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.
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!
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. [caption id="attachment_740" align="alignnone" width="608"]
http://www.airbnb.com/ – Immediate access to start searching for your needs.[/caption] [caption id="attachment_741" align="alignnone" width="608"]
http://www.booking.com/ – Immediate access to start searching for your needs.[/caption] 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.
Eliminate mental calculations, estimations, comparisons, and unnecessary thinking.
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. [caption id="attachment_742" align="alignnone" width="608"]
http://www.freshbooks.com[/caption] 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.
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.
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. [caption id="attachment_744" align="alignnone" width="608"]
http://www.dropbox.com[/caption] 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.
This example gives the user something tangible to comprehend, as opposed to just “the best way” to execute something.
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?
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.
“Bounce Hook” is definitely not a common phrase, and the designers here understood that. This is an example 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.
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..
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 from 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. [caption id="attachment_749" align="alignnone" width="608"]
http://www.tableau.com[/caption] 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.
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.
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.
Ready. Set. Go.
Now, try to answer one of (or all of) these questions about this website…
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.
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.
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.
Here’s a breakdown of how we applied the “minimalist mindset” and achieved this new design.
Applying this principle will help mitigate the issue of choice overload while improving the aesthetic of your experience at the same time.
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 colour 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).
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.
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.
The post
9 Fundamental UX Principles That Will Boost Your Conversions
appeared first on
.