10 Tips to Improve Website Usability

Whether it is a corporate website, a personal blog, a shopping website, or a gaming website, we all hope to attract visitors and leave them with a pleasant visiting experience.

Usability is a measure of user experience that describes how easily visitors can complete a website's functions—either through their own knowledge or by learning a new way to do so. I think Jakob Nielson explained it very well when he said:

Usability is a property that measures how easy a website is to use. The term "usability" also refers to methods used in the design process to improve ease of use.

In this article I hope to provide a usability checklist that covers everything from visual design to simple navigation cues that can be used in any project .

1. Current location navigation

Let users know which module they are in or which category they are browsing at any time. This can greatly improve the usability of any website. At this point, creating a current location navigation can be considered the most effective way to improve usability.

The ideal way to create the current location navigation is to create it on the server side, which can save a lot of HTML and CSS code. If it is not convenient to create navigation on the server side, it is also a good idea to use CSS to manipulate your body element to directly define each navigation tag.

In addition, you can easily use JavaScript to create a current location navigation menu .

Please note that your current location navigation is best kept different from the mouse rollover style, which is something many websites don’t pay attention to.

 label, button, input[type="submit"]{cursor:pointer;}

Nowadays, more and more websites realize the importance of adding links to their LOGOs. Users are no longer satisfied with a text link marked as "home page". They want to return to the home page by clicking on the logo.

Take Facebook, for example, which adds a “ref” attribute to every navigation element to track user clicks. As shown below:

4. Increase the clickable area of ​​the link

About a year ago, Ryan Singer of 37Signals wrote a post about how they increased the clickable area of ​​links in the Basecamp project. This is another small detail that improves the usability of the website. It only requires you to increase the padding value around the link to effectively increase the click area.

This is a worthwhile approach for any website to try, as it can prevent users from clicking on links by mistake or not. And it is even more important for mobile web design, because many users use their fingers to click links on the touch screen, and increasing the area can help them browse the web more conveniently.

5. Form element focus display

Adding focus display to active form elements is becoming a trend in UI design. It lets users know what they have done and what they are doing. This is a simple but effective way to deliver useful details to the user.

6. Provide a useful 404 error page

Having your website present a big Apache error message to your users can be frustrating, so creating a friendly, useful 404 error page is a good solution. Because for non-developers, numbers like "404" have no meaning or value. Users just want to find the information they need on the website.

Create an error prompt page that can help users find the information they need correctly, such as displaying an apology while adding a search box, recommended articles or home page links, etc., and try to keep users on the website instead of putting all the blame on users for entering the wrong link.

Here are some excellent 404 pages to enjoy: Very creative 404 error page appreciation

7. Create a comfortable writing environment

Nowadays, website copywriting has become a big topic, and there are more and more details to consider when building a website.

From ancient times to the present, the discussion about website text content has never stopped and its standards have been changing. Steve Krug once advocated reducing the text content by half and presenting it in the form of lists.

But now it’s different. We need to write copy in the way we talk to friends, so that users can feel a comfortable and warm atmosphere. This way, users will feel less constrained, and even if they encounter problems with the app, they will be happy to find solutions in the website help.

8. Adjust line spacing to improve readability

Line spacing is one of the elements that can be directly transitioned from traditional media such as books, newspapers and magazines to web pages. The research and improvement of these contents have been carried out for hundreds of years, and a lot of excellent experience has been accumulated. So before you design next time, you can look for inspiration in a magazine.

Line spacing is an often overlooked or abused aspect of web design. I usually start with 1.4x line spacing and then adjust based on the design and content.

9. Use whitespace to differentiate and categorize elements

Grouping content elements into categories is one way to display content. You can use images, borders, or just white space to create categorization. Using whitespace to group content elements can create a natural and harmonious user experience, making the content clear even at a quick glance.

When users scan a web page (such as when reading a TOP10 list), they first pay attention to the title. We first hope that the content of our website is interesting and can entice users to read further. However, correct guidance of users will promote and complement the display of content.

10. Accessibility

This does not refer to the "508 Act" (section 508, a US law that generally states that if certain special user groups, such as people with disabilities, cannot obtain the expected information when browsing a website, they can sue the website in accordance with relevant laws and regulations.) The "barrier-free" mentioned here means taking all aspects into consideration for your users so that they can easily find what they need.

If ensuring accessible browsing can prevent your users from getting angry and leaving, then "quick response" is your last line of defense to retain users.

If you are determined, you can do all the tests you can think of and then refer to the user's trial opinions. The purpose is to retain users to the greatest extent possible, because there are differences between individual users' awareness and habits, and it is difficult to find a way to satisfy all users.

When you think of “accessible browsing” and “responsiveness,” you might first think of people with visual impairments, but there’s much more to it than that. For example, you must adapt your website to users with limited bandwidth (dial-up, cell phones, slow internet, etc.) and older browsers (some companies won't let their employees upgrade their browsers).

If we do our best to remove barriers to using the site and respond quickly to site issues, we can build a seamless user experience that leaves users with a good impression and keeps them coming back.