18 Web Usability Principles You Need to Know

You can have the best visual design skills in the world, but if you build a site that doesn't allow visitors to comfortably navigate from page to page or item to item, then you've missed the point of a good website. So, in today’s article I’m going to tell you 18 things you need to know about web usability dos and don’ts .

Use grid lines to structure your website

When you are excited and screaming about a creative grid page box layout, you must make sure that the page layout of your entire website is within the box . The grid structure keeps the visitor's line of sight fixed on the page, which is critical. Once you pull the page down, it’s clear and concise - to create something interesting you need to put in good design and put it in a grid.

Don't forget the search form

When you are excited and screaming about a creative grid page box layout, you must make sure that the page layout of your entire website is within the box . The grid structure keeps the visitor's line of sight fixed on the page, which is critical. Once you pull the page down, it’s clear and concise - to create something interesting you need to put in good design and put it in a grid.

Keep navigation findable and readable

If you were designing a website and your navigation was supposed to guide users from point A to point B , how would you do it? Would you use some weird text or images instead of traditional links ( for example: a house logo for the homepage, but a lightning bolt inside a circle is not a good idea ) . Try to keep the navigation easy to read so that visitors can easily navigate your website.

Do not use a " Mail to " link for contact information

Many of us (myself included) hover over a link and look at our browser status bar before clicking on it, especially contact links, which some people think are a good idea because they open an email program directly to an email address. But I have to tell you that this is not a good UX practice. Create a contact page that takes your email address and adds a contact form – your users will thank you for it – and actually email you more often.

Use UX applications for web testing whenever possible

If you're not sure about the content, it's a good idea to record data in various forms. Google Analytics is a perfect way to see what pages your website visitors come from and how long they stay on your site. You can also use a site like Feedback Army to test how users browse and use your site. Knowing these website records can help you make the most of your site to display good content to those who need it.

Don’t abuse widgets on your site’s sidebar

If you are working on a blog and there are 10,000 widgets in it, you may use some of them , but not all of them. You can think of a blog as a bedroom. If it’s cluttered and disorganized, your guests may not like to stay. So you need to keep it clean and organized. Blog visitors don't (in most cases) need to see your Google friends, mybloglog friends, FriendFeed friends and other various social situations, so don't worry about them. What matters is the user experience of your site, not the stuff of other sites.

You need to make sure your website is displayed in all browsers

We all know that IE6 has held its funeral and no one is complaining, but don't forget that there are still many users using IE7 , IE8 , Opera , Safari , FF and other browsers. Just because your site looks good with one or two highlights, it doesn’t mean visitors will tolerate the messy interface that appears when using other browsers. Spend an hour or two analyzing your code and making sure it displays properly in a variety of browsers.

Don’t assume users will go through fire and water for your form

Your site’s contact form shouldn’t be too long, and the same goes for your sign-up form. Keep things as simple as possible. Simplifying the form to just three questions (name, email , content) may help win back previously lost users.

Make sure that each page is consistent in structure

Unless you are a blogger and your structure is designed to accommodate multiple users, you have to remember that your visitors want to see a familiar and consistent structure. If they feel like they are in a different place when they load a new page, they will quickly hit the back button.

Don't forget to use the stylesheet for print content

This is for blog / content sites. If your visitors are going to print content (and believe me, many still do, especially older travelers), you shouldn’t be asking them to print the entire page, with the review and all the ads. This is very messy and unnecessary. If you have read the article " better blogging equals better business for freelancers ", you will know that printed text is very clean and clear, without black and white, no images, no comments, and no toolbars. Content is a matter of typography, so make sure it stands out.

Make sure your content is laid out for scanning and fits the viewing angle

Generally speaking, people's attention span does not last long. Therefore, use section headings ( h2 , H3 or H4 tags) to separate your articles, allowing visitors to quickly scan the article and find the content he is concerned about. When you write your content, you should also be aware that users may become visually fatigued after reading a paragraph of 20+ lines, so 5-10 lines is generally more appropriate.

Don't stuff it full.

simplify. A crowded small space does not allow users to focus their eyes on important things, but has the opposite effect. Yes, you have a lot of information, but it's not like you have to fold that information in half? Try to allow your design and content to breathe. Your users will thank you.

Always use breadcrumbs

Breadcrumbs are for users to tell them where they are and where to go next. If they are visiting a subpage of your site, your breadcrumb navigation might look like this (Home > Subpage Title > ). This tells the user exactly what page they are on, and how to go back levels if they want.

Don’t forget to use color contrast to shift focus

If you use a large title, and a section title, try various shades of color to let visitors know what’s important first (ie: # c1c1c1 for the title and # 464646 for the subtitle). These changes in color and contrast will determine whether your user knows where to go next.

Make sure your site has no broken links and images

It is important to check for broken links and images in your old articles because you may have visitors coming to your site from search engines and if there are broken links they will assume one of two things: 1 ) that you are an old site that is no longer updated or 2 ) that you are not doing enough to maintain the value of your content so they will go elsewhere. If you are a WordPress user, there is a plugin for this: Broken Link Checker . You can also go to iwebtool and use their free broken link checker (up to 5 requests per hour).

Don’t neglect your footer and its role

So when users scroll to the bottom of the page, they see a plain, single-line text website copyright statement, which is a very boring thing. Why not spruce up your footer by adding some extra content like popular posts, a search box, email subscription, etc. If you want some ideas on how to design a killer footer for a website, you should check out Footer Fetish , don’t confuse it with the others.

Use wireframes as much as possible during the design process

Using wireframes on paper allows you to visualize the most important elements and how they will be presented. By doing this, you can also freely experiment with various layouts without having to worry about breaking the design. For wireframe inspiration I looked at I love Wireframes - the wireframes are amazing.

Write content for your readers, not search engines

You should write for your readers, not for search engines. Keywords may have worked in the past (and probably still work today), but if a real visitor comes to your page and sees the word “designer” 100 times within 3 paragraphs, do you think they’ll hit the back button, or keep reading? Undoubtedly, the likelihood of clicking back is very high.

You can read it out loud before writing it. If you feel that it is not natural and smooth enough, just rewrite it until it is smooth. When people read your content, they expect it to feel like a real person is talking to them, so make sure it is.