This guide contains everything you need to about website usability in 2019.
If you want to improve website usability, you’re going to see my proven tactics.
And if you’re new to web usability, I’ll show you how to solve each issue.
You’ll find my 155 winning formulas for website usability.
You can apply them right after reading and improve conversions.
Let’s get started!
- Chapter 1 – Website Usability Fundamentals
- Chapter 2 – Website Usability Guidelines
- Chapter 3 – Home Page Usability
- Chapter 4 – Design and Page Layout Usability
- Chapter 5 – Navigation Usability
- Chapter 6 – Contents Usability
- Chapter 7 – Search Usability
- Chapter 8 – Web Forms Usability
- Chapter 9 – Error Tolerance Usability
Website Usability Fundamentals
In this chapter, I’ll cover the basics of website usability.
You’ll learn what web usability is and how it benefits for your business success.
What is Website Usability?
Website usability is one of the most critical elements for your online business. It makes it clear for your audience to find what they’re looking for on your website.
If your website is easy-to-use, people can complete tasks without leaving your site. That should be your ideal website.
The question is:
What makes a good website anyway?
When it comes to website improvement, you’ve heard enough about accessibility and SEO.
But, there are more and more factors you need to understand.
For example, you add alt texts to an image and users have bad internet coverage. He won’t see the picture but knows what it is.
Also, your site gives error messages when users are typing. It has a high error tolerance, and he knows what to fill in.
These elements are all website usability components.
Thus, having good usability on your website can lead to promoting user satisfaction.
Why is website usability important?
Website usability plays the role of your customer service.
Completing error-free tasks on your website promotes engagements. By using bold texts, users can quickly scan and consume what your contents are.
Thus, website usability is all about providing a better user experience (UX). From your point of view, it is about customer service. Improving website usability can create a win-win situation.
Benefits of web usability
- Offer online customer service
- Enhance user satisfaction
- Engage better
- Improve conversions
- Increase SEO rankings
- Upgrade UX
- Decrease expenses for customer support
Thus, it is vital for online businesses to make websites easy-to-use.
Website Usability Principles
Many factors compose website usability.
In this chapter, I’m going to show the most critical eight principles that you cannot ignore.
To have good website usability, you need to design your website user-centered. It means to understand user intents and structure your page.
Let’s dive right into what principles improve usability.
The following are the eight most important factors.
Website accessibility means how equal it is for users to consume your web contents. This ‘users’ include people with disabilities. It helps to deliver messages in any environment.
How you can improve:
- Use proper font size for seniors and who have low visions.
- Give options for users to change your font size.
- Add alt text on visual contents when they don’t get loaded.
- Avoid opening new windows if possible.
It describes how convenient it is for users to use your website. In particular, when you browse from mobile devices.
How you can improve:
- Speed up your loading time to prevent users from waiting for seconds.
- Develop a responsive design to access from any devices.
- Fix broken links and redirection issues.
Clarity is how simple and clear it is for users to complete tasks on your website. It also induces familiarity as other websites.
How you can improve:
- Build easy navigation to decrease steps to users’ goals
- Design information architecture to avoid users’ confusion.
- Avoid unnecessary animation, popups, and advertisements
- Use different colors for links and call-to-actions
Learnability is about how easy it is for a new user to complete tasks during his first visit on your website.
How you can improve:
- Apply intuitive design and user interface.
- Use a global navigation
- Show users their next steps for in-cart page
- Place a search functionality at the top-right corner
It indicates how comfortable it is for users to use your website. Website credibility creates trust in the users’ mind.
How you can improve:
- Display your detailed contact on every page
- Insert testimonials and social proof to build a reputation for your performance
- Add 5-stars reviews from local business directory sites
- Show real photography of your business
Website effectiveness means how fast it is for users to achieve their tasks on your website.
How you can improve:
- Create FAQ sections to keep users’ concerns away.
- Show error messages and suggestions to fix when users make mistakes.
- Make buttons and checkboxes easy-to-click
- Manage display methods for your search box
It shows how appropriate it is for users to consume contents on your website.
How you can improve:
- Label your content categories and user status.
- Personalize your messages to each customer
Readability expresses how easy it is for users to read and understand your contents.
How you can improve:
- Add subheadings and bulleted lists for scannability.
- Insert a proper margin between texts, lines, and paragraphs.
- Avoid writing long sentences by splitting and shortening them.
- Make links easy to recognize and consistent.
Now that you understand what factors can affect your website usability.
It’s time to get started with my website usability guidelines.
Home Page Usability Guidelines
Website usability helps you to improve your engagement rates.
First, you need to apply on your home page where the face of your business. Most people determine whether to engage with you in the first impression from the home page.
In this chapter, I’ll cover what you can do for home page usability.
A home page is the most important page on your website.
You must help users to complete why they come to your page. It requires you to grasp user behavior and give better paths.
At the same time, you should tell your unique selling proposition and guide them for your goals.
A home page cannot cover all your information but should offer links/navigation to get.
The leading UX company, Nielsen Norman Group shares these ten homepage usability strategies:
- Start a one-sentence tagline on each webpage.
- Your webpage tag titles have excellent visibility in search engine
- Place all your corporate information in one place (About Us)
- Emphasize the website’s starting points for users
- Place a search functionality
- Display your best or most recent contents
- Start links with the most important keywords
- Shows how to find the featured contents of your home page
- Don’t over-format your standard elements like a navigation bar
- Use meaningful graphics, not catching the attention
16 Home Page Usability Tactics
- There is a clear value proposition on the home page.
- Your home page provides all the main options (with links) for use.
- The design of your home page encourages users to explore more of your pages.
- Your home page has a professional design.
- There is a favicon on the tab.
- The title of your home page has good visibility in search engines.
- Your website has an SEO friendly URL.
- Always your logo is at the top-left corner.
- Your logo is clickable and makes users go home page wherever they are.
- Navigation areas on the home page have no distraction.
- Navigation choice order is in a task-oriented manner.
- If you sell products, you should offer product categories on your home page.
- The first-view design contains meaningful graphics and clear call-to-action
- Your home page creates a positive first impression.
- The area or links of your corporate information is accessible from your home page.
- There is a search box at the top-right corner.
These functions tell you what you need to do on your home page.
Design and Page Layout Usability Guidelines
Designing your website considering user intents is key to success.
If you want people to spend time and consume your contents, you need to optimize page layouts.
In this chapter, I’ll share the 5 actionable usability design strategies.
Let’s see some of the web design statistics.
- Web pages that load over 2.5 seconds increases bounce rate
- A non-responsive site is a back button magnet.
- 38% of people will leave a website if it fails to deliver an attractive content/layout.
- 94% of the visitors closed websites and stopped trusting the site if it has a degraded web design.
- 95% of the visitors agreed that good user experience is everything that matters
As you can see, web design affects business success. You must improve your web design and layout to create a positive impression.
Here are the six most essential area for web design usability.
Each page on your site should have the same layout design. This consistency increases your website usability and helps users to understand contents better.
Also, you can use a grid-based layout to ensure you have a clean and organized design.
Navigating users around your website helps users to browse more.
For example, you can provide users with a simple line of the breadcrumb trails. It gives users the information of where they are and options to get back to previous pages.
3. The user interface (UI)
UI is anything users communicate with your website. Like carousels, scrolling, buttons, accordions, and more.
Keep in mind that over-formatted design makes it hard to perform.
The right UI elements help users to complete tasks with satisfaction.
4. Visual design
It has a significant impact on how users feel about you.
For example, the consistent use of your branding colors helps users to engage better.
Make sure to use the high levels of contrast with the background colors and texts is appropriate.
HTML helps users to consume contents the way you design.
Using the right tags for headings and images make your contents easy to read and understand.
Also, it’s helpful to provide appropriate supports for broken links and 404 pages.
Besides, optimizing contents including images improve your page loading speed.
Links on your website allows you to lead users to a specific page.
You can use different colors or underlines to stand them.
Anchor texts are useful when you link to other pages or websites.
30 Web Design and Page Layout Usability Tactics
- Your web design creates a consistent and recognizable look and feel.
- The layout encourages users to focus attention on what to do next.
- Each page shares a consistent layout.
- On every page, your logo is clickable at the top-left corner.
- Your logo leads to your home page.
- The background color groups items.
- If you use several colors, make sure they work well together.
- Your website avoids complicated backgrounds.
- The most critical information is in the first view.
- Your website avoids a long scroll-down as much as possible.
- Users can use the site without scrolling horizontally.
- Clickable items look pressable.
- Hypertext links are easy to identify.
- Your website avoids blue text or underlining for non-linked elements in sites.
- Underlining is only for hypertext links.
- The functionality of buttons is evident from their labels and design.
- Clickable images include alt texts.
- Buttons and links show different once users have clicked them.
- The link users have clicked turns a different color.
- Your website uses margins, especially near buttons.
- GUI components are with appropriate use.
- Fonts are consistent and readable.
- Your website avoids capital letters and italic texts if possible.
- Bold texts are for emphasizing important topic categories.
- All graphics are standard and intuitive.
- Graphics don’t get users confused with banner ads.
- There’s the right balance between information density and the use of white space.
- Labels, background colors, borders, and spacing make it easy to identify grouping items.
- Each icon has a distinct look, but it makes good harmony.
Navigation Usability Guidelines
Now that you have a rough design for your page. It’s time to identify how you navigate users to what they want to do.
To ensure users complete their tasks, following this website navigation guideline is fundamental.
In this chapter, I’ll show you how to design navigation that works.
For good web design, it is critical to understand users’ expectation for your web page. The intuitive and well-designed website helps your audience to focus on completing tasks.
Also, excellent information architecture helps users to find information faster and browse more.
For example, if you disable the “Back” button, you’re limiting navigational options to users.
Also, a clickable list reduces users’ actions and quickly see the desired contents for a long page.
Also, you can improve your navigation usability from the mistakes many people make.
These are the typical six navigation design errors:
- Your navigation menu has too many options
- There are enough options on the navigation menu
- Users cannot find the navigation menu
- You are trying to reinvent the navigation wheel
- There are unfamiliar icons
- You don’t tell users where they are
Those common mistakes keep users away from their desired task.
It is important to understand users’ goals and needs to improve usability. Then, you should design a website that users can browse seamlessly.
Remember that the shorter web page engages more than the longer one.
31 Navigation Usability Tactics
- The information that most users consume is easy to navigate from most pages.
- Website structure is simple.
- It is convenient for users to consume appropriate information and pages.
- Your logo always locates at the top-left corner.
- Global navigation choices are in a task-oriented manner.
- The navigation system is broad.
- Menu dropdowns should be vertical.
- Your website uses local navigation if necessary to assist global navigation.
- The standard elements of your website are available from every page.
- Your website uses a sticky menu if needed.
- There are no dead-ends pages to prevent users from doing extra work.
- Your website locates navigation tabs at the top of the page.
- Navigation items and hypertext links are jargon-free.
- Icons make users understand the features intuitively.
- The sitemap provides an overview of your website.
- From every page in the footer, your sitemap is accessible.
- Always users can see where they are on the site.
- Your website avoids opening new windows.
- Instructions and messages appear in the same place.
- The site does not disable the browser’s “Back” button, and it appears on the browser toolbar.
- Clicking the back button takes the user back to the page users were.
- Pagination is useful to organize.
- Links and navigation labels contain the words that users use.
- Links are consistent and recognizable from regular texts.
- Links look same in the different sections.
- The hypertext links that open new windows are different from the ones that load another page.
- A link to both the basket and checkout is visible.
- Product pages contain links to related products for cross-selling.
- Users can sort and filter pages.
- When a mouse hovers something clickable, there’s a visible change.
- Users can navigate by arrows buttons and the enter key.
For more details of navigation, check out this interface design tips.
Search Usability Guidelines
In-search allows users to find what they are looking for faster and more comfortable.
If you have many pages, search functionality is a must.
In this chapter, I’ll show you what to apply for your search box.
Search capability is another way of navigation.
Although there’s no need for a website which has less than 100 pages, it is still useful. And some people prefer searching instead of navigations.
Thus, in-search plays an essential role on your website and improves usability.
Search functionality helps users to find specific contents faster (than navigations). Also, they can compare several posts at a time and consume the contents they like.
Besides, you have one big advantage of having search functionality.
You will know what exactly users are looking for on your website. It helps you to improve your content marketing strategies.
Here are the three most critical area for in-search usability.
1. Search appearance
The appearance of your search box should be intuitively recognized. If users don’t know where to search, you are losing the conversion chances. Like most of the websites, you should place it at the top-left corner on every page.
Also, the icon that can go with the box is ONLY the simple design of magnifying glass.
2. Search behavior
The in-search should pick up synonym in the search query and use auto-suggest.
You can also show snippets and image previews in the result pages. It will give users more options to browse and reach their most relevant contents.
3. Search results
The search results should be concise and straightforward.
You should display some details like a short description and a featured image. In case there are no results on a keyword, you can offer suggestions.
Make sure to test if your results are accurate and relevant over time.
Well-designed search makes it user-friendly to complete tasks on your website.
Google is an excellent example of the best design for search usability. It is crucial to deal with typos and synonym and shows users the best results.
15 Search Usability Tactics
- It is easy to edit and resubmit the search.
- Search results are clear, useful and ranked by relevance.
- The search interface contains the search box and a clickable button.
- Your website places a search box at the top left corner on all pages.
- Searches cover your entire website, not outside of the site.
- The search results page makes it clear on the number of results.
- Users can configure the number of results per page.
- If there are no results for the search, the system offers suggestions for improving the query.
- Search results page does not show duplicate results.
- Your search box is long enough to see the entire search query.
- The search field on mobile should be the entire width of the screen.
- The search results page displays with useful information.
- Search functionality provides automatic spell checking and gives synonym suggestions.
- Search result pages highlight exact match keywords or synonym on the result pages.
- If you want to use an icon, the simple magnifying-glass icon should be.
For more detail about search usability, check out this useful design tips.
Content Usability Guidelines
Content is king. The contents that engage your audience matter on the web.
This guideline explains how to provide “barrier-free” contents online.
You’re going to see techniques for content usability guidelines.
When it comes to contents on the web, most people optimize for SEO.
It allows you to rank higher in search engines and drives more organic search traffic.
Now that RankBrain and many of the other algorithms focus more on users. SEO strategies have common practices as usability.
For example, you use proper heading tags. Heading tag helps users to grasp your page structure and contents as well as search engines.
Thus, the right mixture of usability and SEO improves UX and your ranking in SERPs.
To provide engaging contents, you need to understand how people read your texts.
These are the five patterns of how people scan web contents.
- Layer-cake pattern
People scan heading and subheadings.
- Spotted pattern
People scan for something specific like links or a keyword.
- Marking pattern
Eyes focus on one place as mouse or finger moves.
- Bypassing pattern
When lines start with the same words, people skip the first few words of the line.
- Commitment pattern
People read almost everything on the page.
21 Content Usability Tactics
- Your website offers unique and compelling content.
- The texts on your website are clear and concise.
- Texts align left, not right.
- The minimum text size is 14 px.
- Your font reflects your brand personality.
- Contents have a clear information hierarchy.
- Texts are an inverted pyramid style.
- The writing should be the 8th-grade level.
- Texts should avoid long capital-letter words if possible.
- Your website uses the active voice.
- Texts avoid difficult terminology, abbreviations, and acronyms.
- Pages use bulleted and numbered lists for readability.
- Contents are quick to scan, with ample headings and short paragraphs.
- Your website uses maps, diagrams, graphs, flowcharts, and other visual contents.
- Each page has a descriptive and useful title.
- Links and link titles are descriptive and predictive.
- Headings and subheadings are short, straightforward and descriptive.
- Numbered lists start at “1” not at “0”.
- Your website uses easy-to-read text colors against a background.
- There are proper margins between texts, lines, headings, and paragraphs.
- The web contents on your website are print-friendly.
If you need more details of SEO contents, check out this guide to creating content for SEO.
Web Forms Usability Guidelines
Web forms are the place where your conversion happens.
Many people fail to optimize your forms enough for users to fill up.
In this chapter, you’re going to learn how your web forms usability work for you.
Web form optimization is vital to convert users into customers, leads, and subscribers.
The most website utilizes it to gain customer information, engaging and increasing sales.
For example, contact forms, registration forms, surveys, quizzes and much more. These forms help you to track online leads and provide a better user experience.
But it is difficult to encourage people to fill up online forms and submit. Nobody likes to give personal information on the web.
To make this work, you need to improve web forms usability. It will make more people submit your forms and increase conversions.
Depends on your business purpose, the format, length, and content types will vary.
There’s no “one size fits all” solutions for web forms. So, it is vital to learn web form usability guidelines and apply them.
22 Web Forms Usability Tactics
- When a form is incomplete, your website makes it easy to correct errors.
- There is consistency between data entry and data display.
- Users can submit forms by entering essential requirements.
- There is a clear distinction between “required” and “optional” fields.
- Your website states what information is requiring for the form.
- Text entry fields tell the amount and the format of data that users need to enter.
- Field labels should be outside the text field.
- The fields on forms contain hints or examples.
- Forms allow users to stay with a single interaction method.
- Your website shows the steps to completion.
- Before users submit forms, your website validates the form entry.
- After users complete forms, your website doesn’t ask for extra information.
- The site automatically enters formatting data such as $ and %.
- Field label texts on forms explain what the entries are.
- The form boxes on forms are long enough to see what users answer.
- The form grouped questions on forms logically.
- Each group on forms has a heading.
- Form labels and fields align in a single vertical line for fast scanning
- The questions are in clear, simple language.
- Your website avoids only text entry fields by using radio buttons and checkboxes.
- If users click the “Back” button, your website restores the information and doesn’t ask them to re-enter.
- An error message appears when users make mistakes.
For more details of web forms usability, check out this form design best practices.
Error Tolerance Usability Guidelines
It is scary:
Just one error on your website may destroy your credibility and your business.
The error could be the technical terms that make people feel hard to understand you. Or it could help your page loading speed that make people wait for more than 3 seconds.
In this chapter, you’ll learn how to prevent errors and be ready to fix the problems.
Error tolerance usability detects and handles human errors on the web.
Well-designed error tolerance makes it easy for users to collect their errors.
Even though it’s hard to cut these errors, it is possible to reduce them to the least possible.
Here are the three main error tolerance ways you can apply:
Web page validation is vital to provide users with quality web pages.
It ensures your code is correct and prevents poor formatting and readability.
Also, this helps users to access and browse your website from multiple devices.
When users submit inputs or actions, your website should show error messages. It will let users understand what and why is happening on the site.
You should also display a clear warning when and where the error occurs.
3. Input correction
It includes auto-suggest and dealing with synonyms. It prevents mistakes and collects inputs.
The wide range of input understanding improves usability and UX.
20 Error Tolerance Usability Tactics
- Users can use your website intuitively.
- Your custom 404 page shows how to find the missing page and links to a search.
- When users completed tasks, your website provides clear feedback.
- There is helpful and immediate feedback on user input or actions.
- The FAQ or help provides step-by-step instructions to help users for task completion.
- It is easy to get help in the right form and at the right time.
- Confirmation pages are clear.
- Before changing a page with new formats, it requires user confirmation.
- It is obvious when and where an error has occurred.
- Error messages contain clear instructions on what to do next.
- Your site informs users when the response takes time.
- Pages load as quick as possible.
- When you give instructions, pages tell users what to do rather than what to avoid doing.
- Help is clear and direct without jargon and buzzwords.
- No quick timeouts are requiring the user to write down information.
- Appropriate selection methods are available as an alternative to typing.
- There is a line space between clickable items to avoid multiple or incorrect hits.
- Your website uses auto-suggest and prevents users from making errors.
- The site provides more detail about error messages if required.
- It is easy to undo and redo actions.
Keep in mind that the perception of website speed is based on load time, waiting time, and load behavior.
Use tools like Google PageSpeed Insights to ensure you have optimal loading speed.
I would like to hear from you!
There you have my 155 actionable tactics for website usability.
I hope you find this guide useful.
Now I would like to hear from you!
Which of the web usability guidelines in this post are you going to apply?
Are you going to start checking your content readability?
Leave a comment to let me know what you think!