Simply put, usability is making your website easy for your visitors to find the information they need when they need it. A common misconception about usability amongst web companies is that usability is expensive. Yes, there are multi-national companies that spend thousands of dollars on usability tests and research, but for an everyday company usability is achievable without the knowledge of usability experts or without expensive equipment for testing. Web designers have an even easier job to do, just by reading usability articles they can accumulate a fairly good knowledge about usability basics and how to implement them on a website.
1. Include a TaglineA tagline is a statement or a motto that represents a company's, or in our case a website's, philosophy and mission. It should be the most obvious element on a website's front page and it should clearly describe the website in one phrase. Statistics show that a website has just 8 seconds to capture a visitor's attention for them to browse the site further. Without a clear tagline a website would have a hard time keeping visitors long enough to browse the inner pages.
2. Implement Site SearchAs with taglines, site search is a very important element on a website. When users are looking for something they typically look for a text field where they can enter their search term. According to Jacob Nielsen's web usability tips, make this search box 27 characters wide in order for the text to be clearly visible and easy to use. Place the search text field on the top of your web page, because users tend to search a website according to the F pattern, meaning from the top left to the bottom right. Include a search button and clearly specify the search text, don't use text such as Go or Submit, because these expressions tend to mislead your website's visitors.
3. Don't Use Extensive GraphicsAbusive use of design elements and graphics are always bad for a website, they just mislead the site's visitors. Only design to improve the web page not just to decorate it. From a usability point of view, less is always more.
4. Use Site mapsSite maps are a relatively new website feature that improves web page navigation and also search engine optimization (SEO). Site maps in essence are a structural representation of a website's pages and architecture. It can be a document in any form, or a web page that lists the pages on a web site, typically organized in hierarchical fashion.
6. Create Easily Scannable Web PagesEasy to read web pages plays an important role in maintaining visitors' loyalty, keeping them on your site and reading your content. Usability tests show that the majority of users don't read web pages, they scan them, looking for titles, bold, emphasized text or lists. Eye tracking studies conducted by Jakob Nielsen show that users read content that resembles an F shape, meaning that the reading starts from the upper left of the web page, next it moves down a little starting from the left again. Nielsen also states the implications of this reading pattern:
- Users won't read a web page content word by word, they will extract important paragraphs, bold text, etc.
- The first two paragraphs are essential on a web page. These must contain the most important information that your visitors are looking for.
- Sub headings and lists stands out from the regular paragraphs. Use these elements to notify users on important information.
7. Don't Design Misleading UI ControlsBy user interface (UI) controls we mean web page elements, components and widgets that a user can interact with (e.g. a button, drop-down list). Don't design graphic elements that looks like a button, but is not. We often see text that is underlined and looks like links, but are not clickable. By not having the action that the users were expecting, they would think that the site is broken and eventually leave. One other important usability tip regarding UI controls is consistency: Make sure that your UI controls are consistent. Yahoo, as the above image shows too, is a good example of consistent UI control design. Every tab on the page looks and behaves the same, every link is underlined on mouse over, every button looks the same, etc.
8. Give Meaningful FeedbackMeaningful feedback is essential for a website. This is the communication channel between the site and the users, with the help of feedback we let the users know what's going on on the site. In case of an error on your web page, don't just print Error occurred, instead write meaningful error messages which tell the user what went wrong and what actions they can perform from there. Feedback works in both ways. When a user fills in a form they are essentially giving you feedback. Don't make the users have to fill in the same information twice. For example if a user has registered on a website and needs to fill in a form at some point, don't ask for their name or any other information that they have already supplied, because these details already exist somewhere in a file or database. By simply getting these details automatically we are simplifying the whole process.
10. Avoid CAPTCHAsCAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. Even the name sounds complex. The most general form of CAPTCHA is text embedded in an image and by testing visitors we can separate human users from spam bots. The problem with CAPTCHAs are that each form of human verification method triggers a complex process in the users' brains (e.g. figuring out the distorted text, adding two numbers, etc). Another problem with CAPTCHAs are the inconsistencies regarding different cultures. For example Chinese symbols, numerals are different from most western letters and Arabic numerals. Chinese people have a much harder time using CAPTCHA ‘enabled’ online forms.
- Always include a tagline which should be the most obvious element on a web page.
- Implement a 27 characters wide site search and place it on top of your website.
- Don't use extensive graphics and design elements.
- Include a site map page and register a sitemap XML document in search engines.
- Don't break a user's workflow. Allow every action to be canceled if necessary.
- Create easily scannable web content and place the most important information on top of your web page.
- Don't design graphic elements that looks like a button, but is not.
- Present meaningful feedback and don't forget that feedback works both ways.
- Avoid CAPTCHAs, use more usable methods instead.
So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…
Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…
By Max Walton
Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…