Web Usability By Chao Liang Based on Jakob Nielsen’s Book “ Designing Web Usability”

Why web usability The web continues to grow. A lot of people doing business on the web. It is very easy to access other sites if a user doesn’t like the one he/she is looking at.

Web Design Principles and Common Errors Principles:  Meaningful design rather than art or new technology.  Make it easy for users to perform useful tasks.  Gather real survey data from regular users.  Show some interests and creativities.  Execute these principles on your own site. Common Errors:  No proper links to other sites, does not provide convenience for others to link to the site.  Design for their own pleasure, not for users’ needs.  Good for demo, but not easy to use, and long download time.  Not adapt to new style of web writing: emphasized, and create site structure to divide the site into different but connected pages.

Page Design Standard Focus more on content and limit navigation. Include necessary amount of white space to separate the grouped content. Rule of thumb: content- 80%, navigation+ads - 20%, simplicity over complexity. Facilitate user-controlled navigation. Use a single page design for all different display devices. Bad design: Navigation and ads occupy more than 20% of the page

Page Design Standard Cont. The page should be resolution-independent. Wait for a year before using a new web technology and avoid non-standard codes. Separate the presentation from the semantics. The response time should be no more than 10 seconds.

Page Design Standard Cont. Stabilize the response time.  Show file size. -- color-coded links. Keep download time as low as possible  Speed over design.  Low on graphic.  Limit the number of images used, and use the same one if it is ok.  Clearly state standard download time and page size.

Page Design Principles Cont. Make the top page meaningful. Use ALT attribute to support old browsers.  Syntax: <input type="image" src="image.gif" alt= "a sunset picture" /> Draw the first page quickly. Limit the rendering time of tables, and split them if necessary. One-second Response Time Ten-Second Response Time Modem2 KB34 KB ISDN8 KB150 KB T1100 KB2 MB

Links Main forms of links:  Links for navigation purposes.  Links to the next page that is continuation of the current page.  Links to other sites of similar content. Guidelines for the web links:  Keep the text simple and short and informative.  How to create web links  Highlighted links.

Links Cont. Include link title.   Information about the content of destination page.  complementary to the link text. Intro of Chao”  Warning about the usage of the link: ACM Color-coded the links.  Standard: blue for not used and red for used  Link not yet visited and Link visited Use a fixed url for all the links for the same page Good links will add value to your site.

Link and Style Sheets Provide some free representative pages’ urls for linking if your site requirement a membership.  Example: Style Sheets: separate the content with the presentation. Different forms of style sheet:  Embedded style sheet.   Linked style sheet.  style.css: indent {margin-left: 3%} Pages must work with and without style sheets.