Usability Guidelines for Web Designers and Developers

Sequel to our guidelines for designing accessible website and web applications, we are sharing usability guidelines for web designers and developers.

Before we actually dig into details, let establish a common understating of what usability is. Usability is mostly defined as ‘ease of use’, but this is over-simplification of the art and science of Usability. In a broader sense, usability is “effectiveness, efficiency and satisfaction with which a specified set of users can achieve a specified set of tasks in a particular environment.” – ISO 9241 Standard

Usability is ultimately concerned with the following factors:

• Effectiveness: Effectiveness is the completeness and accuracy with which users achieve specified goals. It is determined by looking at whether the user’s goals are met successfully and whether all work is correct.
• Efficiency: Efficiency can be described as the speed (with accuracy) in which users can complete the tasks for which they use the product. Efficiency metrics include the number of clicks or keystrokes required or the total ‘time on task’.
• Engaging: An interface is engaging if it is pleasant and satisfying to use. The visual design, graphic images, colors, use of any multimedia elements, language, font size and style, links, buttons all affect the relationship between the user and the application.
• Error Tolerant: An ideal system has no errors; and there is no ideal system. Errors are expected. An error tolerant program is designed in a way that it prevents errors in the first place and helps the user in recovering from any errors that do occur.
• Easy to Learn: Last but not the least; a ‘useable’ system is easy to learn. It allows its users to get familiar with different functions and perform them without much effort or the need of training.

Usability Guidelines

1. Design Process

• Set Primary Goals: Clearly define the primary goals of the website before starting the design process. Goals of a website may be education, information, entertainment, trade etc. Goals also determine the audience, content, look and feel and functionality.
• Set Performance Goals: Set performance goals that include the overall performance of the website in different scenarios. For example, the website will be displayed correctly in Internet Explorer 8.0 and above with screen resolution 1024×768.
• Set Preference Goals: Preference goals address end user’s satisfaction. Set preference goals such as allowing the user to view the website with small, medium and large font size.
• Create & Evaluate Prototypes: Create and evaluate prototypes in iterations. The iterative process ensures that all goals are met.

2. Design Considerations

• Establish Level of Importance: Establish a high-to-low level of importance for each category and carry this approach throughout the design. Important categories should appear higher on the page so users can locate them quickly. This is applicable to links, buttons, form fields etc.
• Reduce User’s Input: Automate as much of the site’s function as possible. Eliminate the need for users to perform tasks like performing mental calculations, making estimations, recalling account numbers and passwords, etc. This helps the user concentrate on main tasks.
• Be Consistent: Maintain consistency in page titles, font size, style, color, header, graphics, buttons, positioning, forms etc. A consistent website allows the users to get familiar with the environment and learn to retrieve information and perform tasks in less time.
• Provide Feedback: Provide appropriate feedback to inform users while they interact with the website. For example, intimate the users after they have successfully submitted any information.
• Include Logos: Differentiate your website from others by placing a logo in a consistent place on every page. This is useful when the user is browsing several websites at the same time.
• Limit Maximum Page Size: Keep Web page size at or below 30,000 bytes, which is maximum allowable time. Users do not wait long for a page to open in their browser and move on to other website.
• Limit Use of Frames: Do not use frames in websites, unless there is a strong reason to do so. Frames can be confusing and may behave unexpectedly in different context.

3. Content Organization

• Provide Useful Content: Provide useful and usable content that supports the Web site goal on each page. The content should be arranged logically and must be free from errors and ambiguity. Avoid irrelevant details.
• Use Short Sentence/Paragraph Length: Write sentences with 20 or fewer words and paragraphs with fewer than five sentences. Use lists to break up long sentences or display important points. This improves readability.
• Provide Printing Option: Many users want to keep printed copies of website for reference or taking notes. Provide printable version of all pages, files and documents on the website.

4. Title & Headlines

• Provide Page Titles: Put a descriptive and different title on each page. Title should be meaning and descriptive of the type of information the page. Meaningful title helps the user in creating and sorting bookmarks. Similarly, appropriate titles improve Page Rank on search engines.
• Use Proper Headlines: Use meaningful and descriptive headlines. A good headline is brief and clearly suggests the following text. It helps the reader quickly scan the page and understand the main theme. Headings can be used to classify information under different categories or break up long texts into small bits.

5. Page Length

• Determine Page Length: Decide length of page according to the information it contains. It is better to have short pages for home pages, navigation pages and pages that need to be quickly browsed. Use long pages for printable/downloadable versions or when you want to maintain, fewer web page files.
• Determine Scrolling vs. Paging Needs: If reading speed is important and response time is reasonably fast, use paging (linking) rather than scrolling. In this way, users will be able to move from page to page by following quick links without always scrolling to important information.

4. Page Layout

• Align Page Elements: Align text, elements, graphics etc consistently to improve readability and ‘look and feel’ of web pages.
• Reduce Unused Space: Reduce the amount of unused space on pages used for scanning and searching. On pages that are primarily links or categories, like a home page, the greater the density, the faster the scanning. “Density” is defined as the percent of the screen filled with categories and text. Density has no impact on user accuracy or preference. On content/text pages, using some white space to separate paragraphs and ideas is important.
• Format for Efficient Viewing: Determine actual utility of a web page before designing. Pages based on content do not need graphics. Similarly, pages based on graphics should not be filled with text.

5. Font Formatting

• Use Readable Font Size: Use at least 10-point familiar font style. Do not use fancy fonts unless there is a strong reason to do so. Use serif or sans serif font to achieve the best possible reading speed. Do not mix serif and sans serif fonts within the text, because it may decrease reading speed. Recommended fonts are: Times Roman, Georgia serif fonts, Helvetica, or Verdana sans serif.

6. Reading and Scanning

• Enhance Scanning: Users tend to scan, stopping only when they find something interesting. Enhance scanning by providing clear links, headings, short phrases and sentences, and short paragraphs.

7. Links

• Show Links Clearly: Hyperlinks should be clearly distinguishable from normal text. Preferably, use blue underlined text for all unused links. Do not require users to move the mouse over text to discover hyperlink. Avoid graphic link. If a graphic link is used, make sure that it is easily recognized. Usually, “click here” is used for graphic links. However, some automatic screen readers may have problems deciphering what “click here” refers to.
• Indicate Internal/External Links: Clearly indicate when a link will move users to (a) the same page, (b) a different page in the same Web site or, (c) a page on a different Web site.
• Use Descriptive Link Label: Link should be self-explanatory. User should be able to instantly guess what information in liked to the hyperlink. For example, use About Greepit instead of Company Information.
• Repeat Text Links: Ensure that the most important information can be accessed from more than one related text link. Some users find important links easily when they have a certain label, while others may recognize the link best with an alternative name.
• Present Tab Effectively: Place tabs (used for links) at the top of the page and ensure that they look like click-able.
• Show Used Links: Visited links should be clearly distinguished otherwise users repeatedly bounce among a set of pages not knowing that they are going back to the same page again and again. Make links that have not been clicked blue, and clicked links purple or red.

8. Graphics

• Use Graphics Sparingly: Excessive use of graphic increases download time of the web page. A graphic can be used only if it enhances content or leads to a better understanding of the information being presented. When using graphics, try to use small and few graphics in order to reduce download time.
• Avoid Graphics on Search Pages: Avoid use of graphics on pages that are primarily used for searching. In general, graphics do not have either a positive or a negative impact on the success of users when searching, but they take time to design, implement, and maintain and may slow downloading.

9. Search

• Provide Search Engine: Carefully consider whether there is any advantage to including a search engine. Search engines are helpful on some sites, but do not add value on others. Web sites that can benefit most from search engines are those that are large and complex.

10. Navigation

• Keep Navigation Consistent: Use consistent navigation aids such as menus, tab links etc on all pages. Common navigation type ensures that users can locate and remember frequently used links and explore the website easily. Prefer text-based navigation aids to graphic based aids.Group navigation elements in close proximity and place them with the right margin for the web page. Users may need to scroll to navigation elements, if they are placed with left margin.

11. Hardware and Software

• Consider Connection Speed: Design for connection speeds of 56 kilobytes per second (kbps). Remember that actual connection speed is about 38% lower than modem speed capability. This means that users with a 56 kbps connection actually have a connection averaging about 35 kbps.
• Reduce Download Time: Create web pages that load quickly. Slow download times may result from too many graphics, unnecessary use of applets and slow server performance. Average wait-time is 8.6 seconds.
• Consider Monitor Size & Resolution: For best results, design for computers with 17-inch monitors and screen resolutions of 1024×768 pixels.