Web Usability

1
Web Usability

• By Chao Liang
• Based on Jakob Nielsens 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
  doesnt 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, navigationads - 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 ltinput type"image" src"image.gif"
• alt "a sunset picture" /gt
• 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.
• lta hrefgtHow to create web linkslt/agt
• Highlighted links.

9
Links Cont.

• Include link title.
• lta title href /gt
• Information about the content of destination
  page.
• complementary to the link text. lta titleMaster
  Student in CS hrefwww.chaoshomepage.com/intro
  gtIntro of Chaolt/agt
• Warning about the usage of the linklta
  titleMembership required hrefhttps//www.acm.
  com/portal/index.cfmgt ACMlt/agt
• 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.
• ltstyle typetext/cssgtlt!-- .indent
  margin-left 3 --gt lt/stylegt
• Linked style sheet.
• ltLINK RELStyleSheet HREF"style.css"
  TYPE"text/css" /gt
• style.css indent margin-left 3
• Pages must work with and without style sheets.