DMP

Designing More Usable Websites

What is usability, and what is considered good practice?

"Bleeding-edge designers and simplicity gurus don't often see eye-to-eye when it comes to website design"  - www.usabilityfirst.com

The guru of simplicity gurus: Jakob Neilson - www.useit.com

There's a mountain of literature and research! Do not get bogged down in it. Demonstrate common-sense when designing your sites and apply these rules, and you won't go far wrong:

1. Keep it simple
2. Follow established web conventions (don't be afraid to get creative though!)
3. Design for your intended audience

How to test for usability

A reasonably useful overview, from the US Dept of Health & Human Services:
http://usability.gov/methods/test_refine/learnusa/index.html

In class we demonstrated the value of:

• Scenario/task-based testing, measuring number of clicks, speed and use of search criteria.
  Jakob Neilson suggests we can do this successfully with just five people (www.useit.com/alertbox/20000319.html)
  
• Observational testing, getting participants to think out loud as they work

How to achieve an effective design

Before you get anywhere near Dreamweaver:

• The key to any good website is planning. The first step is to make sense of and organize your content. This process is often known as Information Design. Badly structured content will lead to huge usability problems (such as complicated navigation and users not finding what they're looking for), so do this right before attempting anything else. And remember, pencil and paper are your good friends in the very first steps of illustrating your thoughts.

In Dreamweaver (or your favourite web authoring tool):

• Navigation - Should follow conventions, be consistent and clearly visible.
  • Buttons/icons should have unambiguous labels (based on analysis/testing done in the planning stages). Some may benefit from being accompanied by a brief summary/description.
  • Menus are best presented in categories/themes. Alphabetical lists are bad. Minimize"link crowding".
  • Textual links should be blue and underlined, unless there's a really good reason not to.
  • Links to external sites are often best received when they launch in a new browser window.
  • Breadcrumbs (an integral part of the (old) Ryerson template) may help to reduce user disorientation with the structure of a site. It helps a user answer the very important question, "Where am I?"
  • Check all your links. Use Xenu Link Sleuth (home.snafu.de/tilman/xenulink.html) or similar.
    
    
• Page Dimensions - There are tools available to list surfer stats, including the insight into the most common screen resolutions. At the moment, most sites (including all but a couple at Ryerson) are designed for a screen resolution of 800 x 600 pixels. The actual available real estate at this resolution (minus toolbars, scrollbars etc) is 760 x 420. You can control page width best by using fixed width tables. 
  
  
• Page layout - follow conventions. People have an expectation of where they will find the menu, home page link, modified date and author link etc.
  
  
• Text - should be clear and concise. Assume users will scan, so chunk your content in short paragraphs. Make good use of lists and headings, and highlight key points. Hyperlinks make a good natural highlight. Keep your content accurate and current.
  
  
• Printing web pages - While we're on the subject of dimensions, printing web pages is a problem for some users too. The problem is, if you want to accommodate safe printing of all your pages, they have to be about 500 pixels wide. That's just not sensible, so what most developers suggest is creating a second "print friendly" version of pages that will likely be printed out. Suggestions and details at:
  webdesign.about.com/cs/printerfriendly/a/aa041403a.htm
  www.accordmarketing.com/tid/archive/printable.html

• Speed - keep an eye on the overall download time of your pages, by referring to Dreamweaver's status bar (bottom right hand corner of the main editing window).
  
  
• Cross-platform compatibility - There is no cheap or quick alternative for testing. Collect browsers and test your pages thoroughly. As a minimum, pages should be tested in Internet Explorer and Netscape/Mozilla.

Web Accessibility

In order to reduce potential barriers and to ensure that we provide inclusive learning environment, Ryerson is working to improve accessibility for people with disabilities, including access to web-based resources. When designing and developing resources that are to be distributed across the web, certain strategies can be employed to ensure you are reaching the widest possible audience.

For further details refer to the DMP's (Guide to Web Accessibility).