Web Usability

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

2. 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.

3. 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.

4. 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

5. 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.

6. 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.

7. 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.

8. 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. • <a href=“…”>How to create web links</a> • Highlighted links.

9. Links Cont. • Include link title. • <a title=“…” href=“…” /> • Information about the content of destination page. • complementary to the link text. <a title=“Master Student in CS” href=“www.chaoshomepage.com/intro”>Intro of Chao”</a> • Warning about the usage of the link:<a title=“Membership required” href=“https://www.acm.com/portal/index.cfm”> ACM</a> • 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.

10. Link and Style Sheets • Provide some free representative pages’ urls for linking if your site requirement a membership. • Example: http://www.ieee.org • Style Sheets: separate the content with the presentation. • Different forms of style sheet: • Embedded style sheet. • <style type=“text/css”><!-- .indent {margin-left: 3%} --> </style> • Linked style sheet. • <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" /> style.css: indent {margin-left: 3%} • Pages must work with and without style sheets.