Web site Usability Guide
Have you ever left a website because it was difficult to make use of?
Maybe you couldn’t find the page you were looking for. Or maybe their navigation menus didn’t have what you needed. Or perhaps there were way too many take ups and advertisements.
Whatever the case, you didn’t put up with browsing a confusing website — even if it had something you know you wanted.
The same applies to your website. In case your website isn’t user-friendly, it can never succeed. That’s why website usability needs to be a top priority in 2020.
A poor user encounter impacts your site’s bounce rate, click-through rate, plus (ultimately) your bottom line. In case a user is unhappy having a website, they’ll just find a different website that will meet their needs.
Once they proceed, they’re gone: 88% of online users are unlikely to come back to a website after a bad experience.
But following website usability best practices will also increase your conversion rates mainly because visitors will be more likely to stay and be open to your calls-to-action and other offers.
Most website owners don’t realize that their site isn’t user-friendly.
Obviously, nobody is going to intentionally make things difficult on their customers. But sometimes, all of us get so used to our websites that we don’t realize that there’s something wrong with it.
It can also occur when we don’t make deliberate efforts to ensure our web site is usable and available to large swaths of people.
That’s my inspiration for composing this guide. I want to show you the best practices you need to follow in 2020 to make your site user friendly. Follow along and make certain these principles are placed on your website.
How to Make Sure Your Website Is User friendly
Below are our own eight best practices for making your site as user-friendly and available as possible:
- Optimize for mobile devices
- Follow WCAG requirements
- Stick to typical design elements
- Create a visual hierarchy
- Simplify the navigation
- Establish credibility
- Make sure your articles is legible
- Be consistent
Let’s dive within.
Optimize for mobile devices
This should go without stating but , surprisingly, I still find myself landing on websites online that haven’t been optimized for mobile users.
It’s wild, because 92% of all Internet users accessibility the Internet with a mobile device.
Those mobile customers are doing more than just browsing off their devices; they’re buying too.
In fact , cellular commerce is expected to increase by 22. 3% or even $3. 56 trillion by 2021.
Plus it’s not enough to just focus on audiences in your own country. Actually if you don’t look abroad, you will be leaving a lot of money on the table. For example , roughly 75% of ecommerce sales in China originate from mobile devices.
Therefore the first thing you need to do is ensure that your website is optimized regarding mobile devices. Even after that’s performed, there are still improvements you can make to improve the website usability for cellular users.
And there are a ton of different ways you can make your website mobile-friendly. For example , perhaps the quickest way is to use a responsive theme for your website. These are designs that will adjust your content to fit different screen sizes (see below).
When somebody is browsing from a desktop computer, it’s easy for them to click on nearly anywhere on the display screen. On a desktop, there’s absolutely nothing wrong with putting your own CTA or other clickable items in a corner.
That’s not the case intended for mobile devices where 75% associated with users navigate and click on using their thumbs and 49% click with just one hand. Think about it. How often would you browse on your phone making use of just one hand, especially whilst you’re walking or performing something else?
As you can see with this graphic, there are better locations on the screen to interact with one hand. If you have buttons in those red zones, it’s going to frustrate people on the mobile website.
It’s uncomfortable for them to try to reach the corners, and so they might even click on something else in error. If they navigate to the wrong page, it’s going to be frustrating, since it adds steps to their process.
So even if your website passes the mobile-friendly test, it doesn’t necessarily mean that it’s been fully optimized for the consumer experience. Your layout should be optimized and easy for people in order to navigate with one hand. Below is a good example of this from your NYT app.
Notice how all the most significant elements are centered and well within reach of your thumb as you scroll down.
Follow WCAG standards
The internet content accessibility guidelines (WCAG) were created so that web sites can meet the needs of people with disabilities. The WCAG gets updated occasionally too so it’s important to check back often to see what modifications have been made (the following update is due in 2021).
Approximately 1 . 2 billion individuals across the globe live with some form of a disability. You don’t want to discourage or discriminate against anyone visiting your website. Many people are entitled to a good experience.
Here are some of the types of disabilities that can affect just how people experience webpages:
Oral disabilities encompass those who are hard of hearing to fully hard of hearing. If your website relies on video clips, music, and other sound-related media, you’ll want to make sure that your web site design accommodates them.
For example , you need to add captions to all video content. Make sure that captions are usually displayed long enough for people to learn and process the information.
Those with cognitive afflictions might suffer from a wide range of issues including mental disabilities as well as neurological issues such as Alzehimer’s and dementia. As such, these folks might have a difficult time remembering things or focusing on a task for a prolonged period of time.
To accommodate them, you should simplify your website as much as possible. For example , don’t pack your own navigation menu with a bunch of different options. Web user friendliness expert Steve Krug says that a cardinal rule must be “Don’t make me think! ” That applies here.
Physical disabilities limit a man or woman ability to move. This might include their ability to walk, make use of their limbs, or have complete motor control over their body. It also includes people who have experienced dégradation.
Users have to be able to explore your website along with as limited movement as it can be. For example , don’t make them scroll endlessly to access a page they require. Make sure navigation buttons are within easy reach too.
Speech disabilities might include everything from stuttering to muteness. As such, programs such as voice command will be very difficult and even impossible for these users.
Make sure that any software your website has that requires a speech function furthermore accommodates those who cannot talk. You might add an option in order to type in what they need for illustration.
About 300 million people in the world are colour blind. That doesn’t necessarily mean that they see in black and white. It just means they process certain colors differently. You need to make sure your website isn’t using conflicting colors that can’t be processed by individuals with visual impairments.
Avoid alternating color skills and flashing lights on your own website. These elements can trigger seizures from people that suffer from light sensitivity.
The WCAC offers four main principles to meet their web accessibility standards.
If your website will be perceivable, operable, understandable, plus robust for as many individuals as possible, you’ll meet individuals standards.
Stay with common design elements
When you’re designing a website, it can be tempting to get creative. Maybe creativity will be part of your brand’s picture, or maybe you just want to experiment with something new. But creativity ultimately works more effectively for elements like marketing than it does for overall design and functionality.
There’s a reason these types of best practices are tried-and-true. So save that innovation for the products and marketing campaigns. With regards to usability, it’s in your best interest to follow common web design best practices.
Individuals have a certain expectation when they land on a website. Let me provide you with an analogy to showcase my point.
What do you expect when you enter a fast food chain, such as McDonald’s? You wait in line, order at the register, then they call your number when your food is ready. That’s a pretty standard experience.
But what if you wandered into a McDonald’s and a worker sat you at a table. They brought you some menus and asked you what you want to drink. Then they returned five minutes later to take your own order, emulating a fine eating experience.
That’s not what you expect from the McDonald’s. You want fast food and fast service. Sure, it is a creative and unique technique, but it disrupts the customers’ flow by negatively subverting their expectations for that encounter. In the process, it actually slows their experience.
Now, apply this same concept to your website. If you try to reinvent the wheel, this won’t be a good encounter for your visitors who are used to having things a certain way.
According to this particular study, these are the most standard elements people expect whenever they visit a website:
- Logo in the top of screen
- Contact information in best right of screen
- Horizontal main menu navigation in the header towards the top of each page
- Search bar in the header
- Social media adhere to icons in the footer
It’s inside your best interest to follow these types of best practices. Don’t put the search bar in the footer and position your menu vertically on the right side from the screen. This will only befuddle your visitors. That said, there are areas you can get a little more creative. Including things like your logo, CTA designs, and header images.
Here’s a good example from our friends at Crazy Egg.
This heat map was developed by tracking where people to QuickSprout clicked the most. Notice how this page follows the best practices for where to place navigational elements as well as the real content. That’s because it sticks to a common visual hierarchy — which brings us to…
Create a visual hierarchy
It takes 2 . 6 seconds to get a person’s eyes to land on an area of a website that will stimulate their first impact. This is something that happens involuntarily.
What does this mean in terms of your site’s usability? You need to make it easy for your visitors to understand what they’re taking a look at.
Imagine landing on a website that has twenty images on the homepage. Exactly where do you look first? Here is a good example of bad design from your friends in the Old Collection State:
It’s untidy, overwhelming, and draws your eye in so many directions, you don’t really know what to focus on. This is not a good user encounter.
Instead, make a visual hierarchy that displays users the most important pieces of your site. This means placing the most important components of a page (e. g. pictures, CTAs) in natural focal points.
Here’s an example. Look at these four circles and rank them on the order of importance.
Although you don’t know anything about these circles and what they will represent, you still know that the particular blue one is the most important, followed by the green one. That’s what a visual hierarchy looks like.
So if the most important piece of content on your homepage that will add value towards the visitor is positioned as the yellow circle, that hurts the consumer experience.
With no visual hierarchy, people might navigate to the wrong page or focus on unimportant components of your website. That’s not what you want to take place.
These are the factors that you need to keep in mind whenever you’re designing your visual hierarchy for website functionality.
- Size. Larger is better.
- Color. Bright colors will catch the visitor’ s eye.
- Contrast. Varied colors may emphasize (or de-emphasize) elements on your page.
- Negative space. The spaces that you simply don’ t use are just as important as the ones that you do.
- Alignment. Website visitors typically read from top to bottom and left to right whenever they get to a web page within an F pattern.
Keep these things in mind for simple, clean design. This will give your visitors a much better user experience — whilst increasing their chances to achieve goals like subscribing to a newsletter or purchasing a product.
Simplify the navigation
Ease of navigation is probably the most important aspect of usability, especially for ecommerce businesses. Simplifying your navigational elements not only makes for clean design, but it also helps direct your visitors to getting pages in order to convert.
How does a user get from the homepage to peruse? How long does it take? The number of clicks do they need to create?
These are every factors that need to be taken into consideration. Look at the top 10 reasons for shopping cart software abandonment.
As you can see, two of the top three reasons behind cart abandonment are related to navigation. Price was the just factor that ranked higher.
Though obtaining customers to sign up for an account might be crucial to your overall company strategy, you should find a easier, more user-friendly way of doing this.
Simple routing needs to be a priority for all sites, even if they aren’t offering products on an ecommerce system.
Let’s say you run a simple weblog. How do visitors get out of your homepage to your blog? How are your blog posts organized? Can they search for a particular publish?
All of these are related to navigation.
Clickable content also drops into this category. When the text on your homepage is certainly clickable and brings people to another landing page, it needs to be clear. Make it obvious that particular images, text, and other property are clickable. Change the colour, underline it, or turn that text into a key. Otherwise, it will be challenging for people to know where to click.
People won’t have a good user experience on your own website if they think it is untrustworthy. Credibility needs to be established right away. Otherwise, visitors can feel unsafe while they’re navigating.
Be clear about your content, prices, plus contact information. Don’t power people to hunt all of your internet site to find those things.
Here’s what people expect whenever they land on a homepage.
Keeping these numbers in mind, what do you think the understanding of a website would be if the homepage doesn’t include product information, contact information, or an About Us page? It’s going to be undesirable.
Prices needs to be clearly displayed next to every product. If the user needs to click or navigate to a different page to view prices, it isn’t really optimal for their experience.
There are conditions. For example , SaaS platforms along with other service providers sometimes have prices elsewhere. In these cases, having a dedicated pricing page that’s obviously labeled will help. This is mainly a workaround for offering deep discounts that they can’t advertise because of a relationship with all the manufacturer.
Making security elements clear plus visible (HTTPS/SSL, badges, etc) goes a long way in setting up credibility too. Once you’ve established credibility on your website, your visitors will be at ease. They will won’t be worried about getting scammed or clicking on a spam link. This will increase their likelihood of engaging with your content plus converting.
Make sure your content is legible
Just because a font might look cool for your following tattoo, it doesn’t imply that it belongs on your web site. If people can’t browse the text on your site, they are going to leave.
So , please, leave the Papyrus and Jokerman fonts for your fifth grader’s PowerPoint presentation. Instead, take a look at some of the best fonts that go with each other in 2020.
Even after you pick a typeface, it doesn’t necessarily mean that the content is legible. You also need to think about your color choices, paragraph length, kerning, and your spacing.
Let’s say you pick a typical font, like the one I’m using for this blog post at this time. It’s clearly legible, but not if you make the text yellow and put it over an orange background.
People don’t read word after word. Think about it. When you’re dealing with a website, you’re likely simply trying to find the information that’s most significant to you. Your reader will do exactly the same.
So your articles needs to be highly scannable. You could be scanning this blog post right now. That is why I write with short paragraphs and include plenty of headers, images, and topic points.
In the event that each section was only one big block of textual content, it would be tough to read. But making it legible and scannable improves the user experience.
Your website needs to have regularity from page to web page. If you’re always switching your own themes and layouts, it is going to be too complicated.
For example , let us analyze this product page through Lululemon.
You’ll see all of these elements on item pages:
- Product images on the left
- Product title in on top right
- Price below product name
- Description on right
- Color choices below explanation
- Add to trolley on bottom right
This is most very simple and straightforward. There are absolutely nothing wrong with this design.
Now, suppose you’re browsing on this internet site and you land on this web page. Maybe you add the item for your cart; maybe not. But either way, you decide to look at some more products.
If you navigate to another product page and yes it doesn’t look identical for this, you’re going to be extremely confused. All of these elements have to be consistent on each web page.
Website usability could make or break the success of your blog. If visitors don’t have a great experience, they aren’t going to come back.
That’s why you’ll want to keep in mind the best practices for internet site usability. These will help you develop a website that’s not only available to more visitors, but will help accomplish sales goals and generate leads:
- Mobile optimization. Keep your website elements where the browse can reach.
- Website accessibility. Ensure that your website can be read and accessed simply by more people.
- Common design components. Familiar design lets new visitors very easily navigate your website.
- Visual hierarchy. Helps keep your readers focused on what’ s most important on your website.
- Simple navigation. Make sure that all your navigation buttons are intentional and lead your readers down the right path.
- Credibility. Satisfy your readers’ expectations for every of your pages.
- Legible and scannable content. Don’ t hit your reader using a bunch of text they won’ t read.
- Consistency from page to page. Keep a consistent theme, layout, and color throughout your whole website.
Use this guide as a mention of the implement these components on your own website. Once you’ve achieved this, you’ll benefit from happy website visitors that will convert and keep coming back in the future.