Guidelines, Principles, and Theories User Interfaces and Usability CS5153.
Usability Guidelines
-
Upload
homeplate31 -
Category
Technology
-
view
116 -
download
3
description
Transcript of Usability Guidelines
![Page 1: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/1.jpg)
Useability Guidelines
06/25/08
![Page 2: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/2.jpg)
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
![Page 3: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/3.jpg)
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
![Page 4: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/4.jpg)
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:
![Page 5: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/5.jpg)
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
![Page 6: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/6.jpg)
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
![Page 7: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/7.jpg)
Econfig ExamplesToo Many choices:
![Page 8: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/8.jpg)
Econfig Examples
Misaligned :
![Page 9: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/9.jpg)
Econfig Examples
Misaligned :
![Page 10: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/10.jpg)
Econfig Examples
Inconsistent Placement:
![Page 11: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/11.jpg)
Econfig Examples
Inconsistent Placement :
![Page 12: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/12.jpg)
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)
![Page 13: Usability Guidelines](https://reader033.fdocuments.in/reader033/viewer/2022061300/54c76c434a79595f128b457c/html5/thumbnails/13.jpg)
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)