Web Printing Continue on Web Usability

1
Web PrintingContinue on Web Usability

• It is a good idea that web sites can provide a
  printing version and browsing version for the
  same document.

2
Content Design

• Content is the most important thing on a web
  site.
• Guidelines for the web content
• Concise, scannable, and suitable for online
  viewing.
• Besides confirming essay writing standard, web
  content writing has its own distinctive style.
• Split the content into multiple pages and connect
  them by links, but each page should still contain
  a complete topic.
• Make the important contents and links to be the
  first things we see on the screen when the page
  is first loaded.
• Use well-designed headings.

3
Page Contents

• Example

Highlight keywords and make text scannable
Use bulleted list
Keep paragraphs short and concise
Use subheadings
Navigational links
4
Page Title

• Use good page title.
• Syntax ltheadgtlttitlegtMy Page Titlelttitlegtltheadgt
• Page title should be kept between 40 to 60
  characters, but still explains the contents well.
• Different pages use different page titles.
• Page title words should be precise and
  meaningful, and put the most important word in
  the front of the title.

5
Web Text and Documentation

• Visibility of web text
• Make the text stands out with the surroundings.
• Limit the usage of background patterns.
• Use fonts that even vision-impaired people can
  view.
• Do not move the text around.
• Online documentation
• Make it easy to navigate to different parts of
  the document.
• Use examples to clarify the ideas.
• Provide clear step by step instructions if
  necessary.
• Be concise and simple to use.

Java 2 online documentation
Navigational Features
SortedList Example
6
Multimedia on the Web

• Indicated the file size when it required more
  download time than the standard.
• Use still pictures and summaries to help
  understand what the multimedia objects are about
• Minimize graphics generally on every page. If
  graphics are necessary, use less on the top level
  pages and relegate the rest to lower level pages.
• Use different techniques to reduce the image
  size cropping and scaling.

NASA Multimedia Site
Scaled-down still pictures
Summaries
Download size
7
Animation

• Minimize the use of animation
• Animation should be used for certain amount of
  time and stop
• Criterions for use of animation
• Show continuity in transitions
• Indicate the dimensionality in transition
• Illustrate change over time
• Multiplex the display
• Enrich graphical representation
• Visualize 3D structure
• Attract attention

This animation illustrates the building of
ChemPen3D molecular model over time
8
3D Graphic and Audio

• 3D on the web
• Difficult and hard to use
• Error-prone, confusing and poor display
• Not supported by commonly used hardware and
  software
• Use 3D graphic when you need to demonstrate a
  physical object in its solid form
• Use of audio on the web
• Provide commentary and help
• Music promotion
• Pronunciation teaching, sound effect for a new
  event

Pronunciation help provided on dict.cn
9
Web Video

• Problems associated with online videos
• Poor quality.
• Long download time.
• Subtitles need special care on the web
• Always provide a higher quality clip for download
  rather than just a streaming video
• Most video clips should be less than one minute
  length
• Put up some still pictures, text summary along
  with a clip that is a condense and shorter
  version of the original longer video
• Segment it into different chapters when a long
  video must be put on the web, and provide menu,
  summaries and thumbnails of different segments
  for user control

10
References

• Designing Web Usability. Jakob Nielsen. New
  Riders, Berkeley, California. U.S.A. 2000.
• http//www.chempensoftware.com
• http//www.nasa.org
• http//java.sun.com/j2se/1.4.2/docs/api/
• http//www.useit.com
• http//sports.yahoo.com
• http//www.ieee.org
• http//us.dict.cn