Useability Guidelines

06/25/08

Usability Standards

•Father: JaKob Nielsen •Website: Useit.com •Newsletter: http://www.useit.com/alertbox/subscribe.html

•All usability is based on the application. No such thing as “web specific” usability.

•Other Consulting groups •Nielsen Norman Group: http://www.nngroup.com/ •Classic System Solutions: http://www.classicsys.com

Key Statistics•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.

•For most computing tasks the threshold of frustration is about 10 seconds.

•Users prefer menus that present at least five no more than 20 links without having to "Scroll".

•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.* Source: Yale Institute Web Style Guide 2nd Edition

Web Site Structure Tips

•Logical Structure: •Keep a well-balanced and rather shallow than deep hierarchical tree. The directory structure and filenames should reflect the logical structure of a site.•Many levels of menus are NOT required to incorporate lots of choices:

Web Site Structure Tips

2. Clear Navigation: • Always make it easy for the user to identify: Where am I? Where can I go from here? Where did I come from?•Common "Site Navigation Systems" (SNS):

•Navigation Bar: Top or left lists major sections of your site and should be global & static•Site Map/Directory: Reflects the structure of your entire site, or the top levels if nesting is too deep•Table of Contents: Lists the headings of one document, which could be split across several files.•Index: lists clickable keywords of your site, offering the user another form of overview about what you have to offer•Search Engine: user to type in the keyword he is searching for.

•No dead-end pages

Web Site Structure Tips

3. Consistent:•Website should follow the general navigation and layout conventions of major Web sites because your users will already be used to those conventions.

Common footprints for websites: LSD Logo -> Search box -> Directory Sample: google LSN->D Logo -> Search box -> News -> Dir Sample: Yahoo LSTD Logo -> Search box -> Tabs -> Dir Sample: Amazon

Logo

Search Box

Directory

Econfig ExamplesToo Many choices:

Econfig Examples

Misaligned :

Econfig Examples

Misaligned :

Econfig Examples

Inconsistent Placement:

Econfig Examples

Inconsistent Placement :

Industry direction

•Interactive experience:•Java, JavaScript, DHTML, Flash, PHP, Ajax, and other technologies allow application-specific methods such as

•drawing on the screen,•Playing audio,•access to the keyboard and mouse.

• 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: www.280slides.com

•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)

Samples

NEVER require Scrolling: www.ibm.com

good indexing Site: www.adobe.com

Too Much content: www.qq.com (this was just fun to look at)