Hypermedia module
User System Interaction

This module is led by Lynda Hardman and runs from 4 until 15 July 2005.

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

The Rijksmuseum collection, Instituut Collectie Nederland and The Artchive are cultural heritage collections.
mSpace and Topia are systems which allows flexible access to information.
FOAF (Friend of a Friend) project, in particular the explorer.
Experimental display of all information related to a single person.
Vox Populi, a system for generating video sequences based on argument structures.

Schedule

Random Useful Links

These are some links that may not be useful now for the course, but are useful resources about relevant topics.

• Article explaining the (many) connections and similarities of hypermedia research and the Semantic Web.
• Cool examples of CSS.
• Handy Semantic Web reference cheat sheet. Click on the pdf logo for an A4 version.
• A couple of books I have found useful. "Don't Make Me Think : A Common Sense Approach to Web Usability" by Steve Krug for a simple but fundamental approach to information design work and "Understanding Comics" by Scott McCloud for a discussion of the whys and wherefors of text and images and mixes of the two.

Assignments

Assignment 1 (1 day)
Individual assignment

A list of observations made in the reports.

The goal of this assignment is to analyse access to information available from different repositories. The example use case is cultural heritage collections.

Explore the provided example cultural heritage web sites and write an analysis of the following:

• information provided,
• navigational structure of the site (how is information grouped, how are the relations among different pieces of information made clear),
• use of different media: images, text, sounds(?), videos/animations(?).

Use the following sites for your analysis:
the Rijksmuseum collection,
Instituut Collectie Nederland (this is in Dutch, but it is the structure that matters. "Geen objecten gevonden" means that nothing was found),
The Artchive then click on the Mona Lisa image.

Think of some questions you would like the answer to from the site. Write about your experiences in finding the answer. Try using search facilities on the site. Try exploring the site through navigation.
Given the information available from these three sites, how would you want to access all the information?
Write down one or two questions whose answer requires information from at least two of the sites.
Write down an example of extra information you would want that is not available from these three sites.

Produce the report in HTML (or SMIL or SVG or some other web format) of approximately 3 pages (max. 1500 words). Illustrations are desirable, and can be linked to or included. Publish the report on your web page and email the URL to Lynda.Hardman@cwi.nl before 19:00 Wednesday 6 July 2005.

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 11 July 2005.

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 cultural heritage information tailored to 2 different users.

A number of smil presentations with different aspect ratios have been generated.

• Very tall and narrow
• Tall and narrow
• Tall and wide
• Short and very wide
• Short and wide
• Short and narrow

Make your own notes on the use of layout and timing 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 four things:

• appropriate use of media;
• appropriate use of timing;
• different navigation structures, e.g. how much information should be shown at a time, how complex should the linking structures be?;
• different ways of expressing the same underlying structural information (e.g. through the use of boxes and alignment, synchronization, use of captions/titles).

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 4 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. If you feel SVG or Flash is appropriate, then you can use these. Just make sure that 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 15 July 2005.