May 10, 2008, 12:25 am

Website Design

Usability Guidelines

 

Here, in no particular order, are some guidelines and questions that you should ask yourself when designing for the Web:

• Does your website provide a consistent user experience? For example:
  • Are your navigation menus always in the same place?
  • Is the "Back to previous page" link (do you have one?) always in the same place on the page?
  • Have you consistently used the same font, font-size and font-colour for a quote or normal paragraph text?
• Is your website simple to use? Your web pages may, you think, be easily navigable. Of course those carefully crafted buttons are clickable. Are they? Think user!
• Providing a structure is important. Users are looking for information and need it quickly. Are you grouping your pages in some meaningful manner? On this site I have provided a structure for four topics. I have placed a menu at the top of each page. This provides an intuitive and quick means of access to any section. A sub-menu of navigation is placed on the left-hand side.
• Provide clear navigation. Is it clear to users as to how they can reach another page? Ensure that users can navigate quickly to another page - avoid unneccesary click throughs. Users can become easily annoyed; once that happens they are gone forever! (Go here for an example of how not to do it).
• Ensure quick access to your home page. On this site, my home page can be reached in a maximum of two clicks from any page (one for scrolling up to the top of the page and one to click the Home link).
• Employ text for links, rather than graphical buttons (some users are employing text readers). Text links should enable you to provide a meaningful description of where the link will lead the user (visibility). Is it clear to users what they will read when they get there? Buttons constrain the amount of readable text that can be planted as a label on the button. Icons, such as an arrow (meaning next page, but possibly little else), are often used, but there is an overhead with download times on slow connections.
• Underlined hypertext offers good affordance. The ubiquity of underlined links means that the convention is well understood. "Here is a hyperlink. I know this because I have seen this representation on many occasions. Hence I know that if I click on this text, I will go to another web page." (Note that cognition plays a significant role in user-centred design)
• Implementing CSS enables a designer to use coloured text for links to aid navigation. I use blue for non-visited links, purple for visited and red for active. It provides feedback; the purple colour provides visual information of a previously clicked link. Users don't waste time mistakenly returning to a page.
• Have you provided users with a quick means of navigating to another page, not necessarily one on your site? Can users go back to the page they previously viewed? Some designers attempt to trap users by removing the navigation bar from the browser window (this can be easily achieved using JavaScript). There are sometimes valid reasons for doing this, but generally one should avoid it. Provide clear exits for the user.
• Designers need to concern themselves with tolerance issues. How can a user recover from an error? Can a user clear the data entered in a form? Can he, or she, return to the form on the previous page? Will a user be prompted to enter the required data if a text field is inadvertently left empty?
• Keep download times to a minimum. Unless the quality of the image is of paramount importance, avoid large image files. Remember that not everyone uses broadband. Offer the user a thumbnail image first and indicate the size of any large file.
• Avoid unnecesary graphics. Form should be used at the service of content. Diagrams or illustrations can sometimes convey concepts more efficiently and effectively than text, but a poorly constructed diagram can just as easily confuse the reader. Does that Flash movie, or animated gif, really convey your content better than some text? (see form and content)
• If possible keep gifs and jpegs lower down the page, giving them time to load whilst the user is reading some text higher up the page.
• Note that when using tables, the browser must load all the contents of that table before they can be displayed. If you are employing a table to contain a lot of text and images, use several tables to break up the content; place the text in one table and the image(s) in another.
• Note that text readers may be unable to display text held in a table - go here to check with the Lynx reader
• Use the alt attribute in your <img></img> tags for all graphical content.
• Reading lots of text on a monitor can be tiring. Use a screen font - Trebuchet MS, Verdana, Lucida, Arial and Helvetica are all sans-serif fonts. They were designed for displaying text on screens.
• Try to avoid using a fixed size font. Let the user choose.
  By employing CSS, it is possible to provide users with the ability to change text size. In IE6 select View/Text Size from the menu bar to see this operation.
• Ensure that your reader knows what you are providing on your home page. A few lines of text will suffice.

Next page » Structure

Previous page « Usability

Copyright © 2008 John McSweeney