1. Web Design Guidelines By ZhengHui Hu

2. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation  URLs

3. Planning (cont.) Development technology  HTML  CSS  Frames  Scripting Languages  Java Applets  Flash  AJAX

4. Site design themes Generally speaking, web information presentation can be categorized into the following major themes Internet vs. Intranet

5. Structure Information organization  Easy to find desired topic  Grouping must make sense to users Recommendation  Create Flow Diagram  Breadth rather than depth

6. Site elements Home pages The master page layout grid Others  Menus and subsites  Sitemaps  "What's new?" pages  Search features  Contact information and user feedback  FAQ pages  Custom server error pages

7. Page Design Page Dimensions (screen and print) Page Header and Footer Layout  Tables vs. CSS Fixed elements Use subtle colors

8. Navigation Use Navigation Elements consistently Provide clear indication of where the user is in the site Avoid dead-end Pages Support Deep-Link Users Provide alternative to image maps

9. Textual Hyperlinks Must be clearly identifiable by underline or a distinct color Use different colors for visited and unvisited links Avoid color for text unless it's a link Use Link Title to help users predict destination

10. Textual Content TEXT IS IMPORTANT Legibility  Left align header and content for best Readability  Font face, font size  Capitalized text Printable Use CSS to maintain consistent look

11. Visual Layout and Elements F-Pattern: Use the top and left areas of the page for navigation and identity Maintain consistent visual identity Be simple, be predictable

12. Visual Layout and Elements Establish and/or comply with your organization's design conventions Draw attention to new or greatly changed content Avoid requiring users to scroll in order to determine page contents

13. Images Use meaningful graphics Keep it small Choose appropriate format  GIF vs. JPG Reuse Images Use alt text for all images 8.4k 3.4k

14. Media Provide user controls Provide text equivalents Information about content and size of media objects

15. AJAX Sucks - Jacob Nielsen AJAX breaks unified model of the Web  Content accessible through multiple navigation actions  Bookmark and URL Technical problem  Browser compatibility  Print  Search

16. AJAX Does not Suck Lack of usability is not because of technology but rather the misuse of the technology Technical difficulties can be overcome Ajax is perfect for creating web applications

17. XMLHttpRequest Guidelines Do not load entire pages Know the difference between a web application and a website Do not break user’s focus Do not overuse

18. References Jakob Nielsen’s Alertbox, http://www.useit.com/alertbox/ http://www.useit.com/alertbox/ IBM Web design guidelines http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572 http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572 Web Style Guide http://www.webstyleguide.com/ http://www.webstyleguide.com/