Transcript Web Usability1-PPT

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
Ten-Second
Response Time Response Time
Modem 2 KB
34 KB
ISDN
8 KB
150 KB
T1
100 KB
2 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.


<a href=“…”>How to create web links</a>
Highlighted links.
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.
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.