Usability Guidelines


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Usability Guidelines

  1. 1. Useability Guidelines 06/25/08
  2. 2. Usability Standards <ul><ul><li>Father: JaKob Nielsen </li></ul></ul><ul><ul><ul><li>Website: </li></ul></ul></ul><ul><ul><ul><li>Newsletter: </li></ul></ul></ul><ul><ul><li>All usability is based on the application. No such thing as “web specific” usability. </li></ul></ul><ul><ul><li>Other Consulting groups </li></ul></ul><ul><ul><ul><li>Nielsen Norman Group: </li></ul></ul></ul><ul><ul><ul><li>Classic System Solutions: </li></ul></ul></ul>
  3. 3. Key Statistics <ul><ul><li>Avg stay for users on a new website = 1 minute and 49 seconds in that time that the website didn't fulfill their needs,users left. </li></ul></ul><ul><ul><li>For most computing tasks the threshold of frustration is about 10 seconds. </li></ul></ul><ul><ul><li>Users prefer menus that present at least five no more than 20 links without having to &quot;Scroll&quot;. </li></ul></ul><ul><ul><li>Three-click rule states that users will not stay onsite if it takes more than three clicks to access the information they need. Generally, No need for more than 3 nested levels with 3 to maximal 7 items per level. </li></ul></ul>* Source: Yale Institute Web Style Guide 2nd Edition
  4. 4. Web Site Structure Tips <ul><ul><li>Logical Structure: </li></ul></ul><ul><ul><ul><li>Keep a well-balanced and rather shallow than deep hierarchical tree. The directory structure and filenames should reflect the logical structure of a site. </li></ul></ul></ul><ul><ul><ul><li>Many levels of menus are NOT required to incorporate lots of choices: </li></ul></ul></ul>
  5. 5. Web Site Structure Tips <ul><li>2. Clear Navigation: </li></ul><ul><ul><ul><li>Always make it easy for the user to identify: Where am I? Where can I go from here? Where did I come from? </li></ul></ul></ul><ul><ul><ul><li>Common &quot;Site Navigation Systems&quot; (SNS): </li></ul></ul></ul><ul><ul><ul><ul><li>Navigation Bar: Top or left lists major sections of your site and should be global & static </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Site Map/Directory : Reflects the structure of your entire site, or the top levels if nesting is too deep </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Table of Contents: Lists the headings of one document, which could be split across several files. </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Index: lists clickable keywords of your site, offering the user another form of overview about what you have to offer </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Search Engine: user to type in the keyword he is searching for. </li></ul></ul></ul></ul><ul><ul><ul><li>No dead-end pages </li></ul></ul></ul>
  6. 6. Web Site Structure Tips <ul><li>3. Consistent: </li></ul><ul><ul><li>Website should follow the general navigation and layout conventions of major Web sites because your users will already be used to those conventions. </li></ul></ul><ul><li>Common footprints for websites: </li></ul><ul><li>LSD Logo -> Search box -> Directory Sample: google </li></ul><ul><li>LSN ->D Logo -> Search box -> News -> Dir Sample: Yahoo </li></ul><ul><li>LSTD Logo -> Search box -> Tabs -> Dir Sample: Amazon </li></ul>Logo Search Box Directory
  7. 7. Econfig Examples Too Many choices:
  8. 8. Econfig Examples Misaligned :
  9. 9. Econfig Examples Misaligned :
  10. 10. Econfig Examples Inconsistent Placement:
  11. 11. Econfig Examples Inconsistent Placement :
  12. 12. Industry direction <ul><ul><li>Interactive experience: </li></ul></ul><ul><ul><ul><li>Java, JavaScript, DHTML, Flash, PHP, Ajax, and other technologies allow application-specific methods such as </li></ul></ul></ul><ul><ul><ul><ul><li>drawing on the screen, </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Playing audio, </li></ul></ul></ul></ul><ul><ul><ul><ul><li>access to the keyboard and mouse. </li></ul></ul></ul></ul><ul><ul><ul><li>Services have worked to combine all of these into a more familiar interface that adopts the appearance of an operating system and does NOT require page reloading. Example: </li></ul></ul></ul><ul><ul><li>GUI Builders: Software tools that simplify the creation of GUIs. These allow designers to arrange widgets using a drag-and-drop editors. Typically XML us used to export GUI builder files. (New Yahoo Site) </li></ul></ul>
  13. 13. Samples <ul><li>NEVER require Scrolling: </li></ul><ul><li>good indexing Site: </li></ul><ul><li>Too Much content: (this was just fun to look at) </li></ul>