Hypermedia module
User System Interaction

This module is led by Lynda Hardman and runs from 30 August until 10 September 2004.

The Problem

Large amounts of information are available on the Web. How can we present this information to the user in the best way possible, making use of the information available, the most appropriate uses of spatial layout, synchronized information and hyperlinks?

Web sites under study

FOAF (Friend of a Friend) project, in particular the explorer.
Alternative display of FOAF information
Collection of royalty-free photographs from WWW conferences which make use of FOAF information. (You need to click on an individual image and scroll down to see the associated RDF.)
Alternative display of WWW photographs.
Experimental display of all information related to a single person.

Schedule

Assignments

Assignment 1 (1 day)
Individual assignment

The goal of this assignment is to analyse state of the art web sites which present information based on RDF information.

A list of observations made in the reports.

Go through the web sites listed above. (Feel free to find more, these are just a starting point.) Make notes on all of the following.
What information would you want to display? (Name of person and photograph of person are fairly obvious.)
What information do you think is irrelevant? State why.
Make notes on what you think is good graphic design, good use of links and good use of media (if you can find examples that use sound and/or video even better...).
More importantly, state what could be improved in these areas.
Write down one or two questions you would like the answer to from the site. (E.g. Which people does this person know?)
Discuss briefly in the report what you would have liked the site to provide. (For example, by combining different information from the different example sites.)
Produce the report in HTML (or SMIL or SVG or some other web format) of approximately 4 pages (max. 2000 words). Illustrations are desirable, and can be included or linked to. Publish the report on your web page and email the URL to Lynda.Hardman@cwi.nl before 10:00 Thursday 2 September 2004.

Assignment 2 (2.5 days)
Group assignment (4 people per group)

The goal of this assignment is to give you hands-on experience with using state of the art multimedia web technology.

Create a presentation in SMIL 2.0 using images and texts from the above web sites. You are encouraged to find relevant material from other sources and/or make your own audio recordings (e.g. language voice-overs in multiple languages).
Make sure the presentation runs in the RealOne player.
Create the same presentation in XHTML+SMIL (or HTML+TIME). Make sure it runs on Microsoft IE 6.
You can use a plain text editor (e.g. Notepad, emacs, vim) or an XML editor (e.g. XML Spy) to create the SMIL and XHTML+SMIL documents.

To view the XHTML+SMIL-encoded SMIL tutorial in IE 6.0 (or above) do the following:

1. Make sure the window content display is active by clicking on it.
2. Press alt-space to focus on the next link.
3. Press return to trigger the next link.
4. By default, the focus stays on the next link. From now on, all you should need to do is press return to go to the next slide. If this stops working, repeat steps 1 and 2.
5. To return to the first slide, reload the document by pressing F5.
6. The second sheet has hyperlinks to sheets throughout the presentation. Clicking on these will remove the focus from the next link, so you will need to repeat steps 1 and 2 to go further.

Example SMIL presentations can be found at http://www.cwi.nl/~lynda/USI03/SMIL/.
Patrick Schmitz's HTML+TIME examples can be found at http://www.ludicrum.org/demos/H+Tdemos.html (use IE 6 to view).
A trial version of the GRiNS authoring environment can be downloaded from the Oratrix web site.

Publish your working presentations on your web page and email the URL to Lynda.Hardman@cwi.nl. Don't forget to state the names of the people in your group in the email (even better - include them somewhere in the presentation).

Write notes about the problems you had in creating the different formats.
Make a comparison of the two formats you used. In particular, timing information, ability to include multiple languages, layout information, linking information.

Publish a written report in HTML of approximately 2 pages (1000 words) on your web page and email the URL to Lynda.Hardman@cwi.nl before 17:00 Monday 6 September 2004.

Assignment 3 (2.5 days)
Group assignment (same groups as assignment 2)

The goal of this assignment is to design a total of 4 interfaces to FOAF information tailored to 2 different users.

Go to the Cuypers page, http://www.cwi.nl/~media/demo/ and explore the different presentations that can be generated on the topic Rembrandt and Chiaroscuro (or Vermeer and Genre). In particular, observe what happens when selecting different screen sizes and user types.
Make notes on the use of layout, timing and links in the different versions, in particular when you feel this is appropriate or inappropriate for the different cases.
Based on these notes, and on your own analyses in assignment 1, create design sketches for 2 user types for 2 different devices (e.g. portrait and landscape, or PC screen versus handheld device). Assignment 1 was intended to give some insights into what to think about when designing the presentation of information. While general design techniques are valuable, assignment 3 should focus on three things:

• appropriate use of media;
• appropriate use of timing;
• different types of navigation structures, e.g. how much information should be shown at a time, how complex should the linking structures be?.

While graphic design issues, such as use of colour and fonts, are extremely important in a real-world setting, they are secondary in this module. To emphasize the difference in the above 3 aspects, use the same colour schemes and same (or sub-set of) media items for both user profiles.
Important points to be included in the report are:

• explicit descriptions of the two different users and
• explicitly argued design decisions for the two different devices.

Use the technology you feel most comfortable with for communicating your designs. (Make sure I can access the result.)

Feel free to mail me with questions.

The following are ideas which are meant to illustrate what you should try to come up with. Developing your own would, of course, be better:

• Use a voice over to pronouce a name.
• Include longer texts or add links?
• Use menus with thumbnail images or text descriptions?

Publish your presentations on your web page and email the URL to  Lynda.Hardman@cwi.nl.

Publish a written report on your design decisions in HTML of 2 pages (1000 words) on your web page and email the URL to Lynda.Hardman@cwi.nl before 17:00 Friday 10 September 2004.