Web Design Guidelines By ZhengHui Hu

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

References Jakob Nielsen’s Alertbox, IBM Web design guidelines Web Style Guide