Interaction Design for the Semantic Web
User System Interaction

This module is led by Lynda Hardman, assisted by Alia Amin, and runs from 11 until 22 September 2006.

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? How can we make use of Semantic Web technologies to improve the presentation of information to end-users?

Web sites under study

The Rijksmuseum collection, Louvre and The Artchive are cultural heritage collections.
mSpace, CHIP and /facet allow exploratory access to (cultural heritage) information.
FOAF (Friend of a Friend) project, in particular the explorer.
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.

• Seminal article on the notion of mechanised support for access to information. Quoted by both the hypertext and digital library communities.
  As We May Think by Vannevar Bush.
• "Understanding Comics" by Scott McCloud for a discussion of the whys and wherefors of text and images and mixes of the two.

Web Design

• Cool examples of CSS.
• "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.
• Usability for the Web: Designing Web Sites that Work, The Morgan Kaufmann Series in Interactive Technologies.

Semantic Web

• "The Semantic Web: an Introduction" by Sean B. Palmer
• Handy Semantic Web reference cheat sheet. Click on the pdf logo for an A4 version.
• Article explaining the (many) connections and similarities of hypermedia research and the Semantic Web.
• Article about Semantic Web applications
  "Usability and the Semantic Web" by Anthony Jameson. Slides of talk
• Semantic Web application examples RDFa bookmarklets
• Discussion of whether entities should be able to be modelled at the class and instance level simultaneously.
  Representing Classes As Property Values on the Semantic Web

Facet Browsing

• Flamenco paper Faceted Metadata for Image Search and Browsing and demo.
• Facet browsing at Ebay

Assignments

Assignment 1 (1 day)
Individual assignment

This assignment has two goals. The first is to analyse information available, and the way it is presented, from different repositories. The second is to explore the relationship between potential questions users may have and information available from the web sites. The example use case is cultural heritage collections.

Explore the provided example cultural heritage web sites and write an analysis (a brief description of what you are discussing, the advantages and the disadvantages) 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,
  • how does a user find other potentially related information;
• use of different media: images, text, sounds(?), videos/animations(?).

Use the following sites for your analysis:
the Rijksmuseum collection,
Louvre,
The Artchive then click on the Mona Lisa image.

Think of some questions you would like the answer to from each of the sites. 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 Alia.Amin@cwi.nl before 10:00 Wednesday 13 September 2006.

Assignment 2 (1 day)
Individual assignment

The goal of this assignment is to explore experimental interfaces partially facilitated by underlying ontologies.

List of comments from assignment answers and discussion.

mSpace, CHIP and /facet.

The relation search in /facet is a prototype which demonstrates how two entities (artefacts, people, places, concepts, etc.) can be related with each other. A user can specify two items of interest, e.g. two artefacts, or an artefact and a person. The system then provides several relationships as a result. See the tutorial for further explanation. If you encounter any bugs in the system then we would be grateful for a description of them. Please send them to Alia.Amin@cwi.nl.

Think of some questions you would like the answer to. Write about your experiences in finding the answer from each of the sites. Use the different facilities and provide comments on which were helpful and how.
Write down one or two questions whose answer requires information from at least two of the sites.
Give your comments on the very different interfaces of these 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 Alia.Amin@cwi.nl before 14:00 Friday 15 September 2006.

Assignment 3 (5 days)
Group assignment (3-4 people per group)

The goal of this assignment is to develop an understanding of the design space of semantic web applications. This is demonstrated through the design of a total of 4 interfaces to cultural heritage information tailored to 2 different users.

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. Assignment 2 was intended to give insights into the types of information available in semantic web applications and how this can be used to influence the end-user interface. The interfaces designed for assignment 3 should illustrate an understanding of the underlying information structures. Novel interfaces, rather than copies of the example interfaces, will gain higher marks.
While general design techniques are valuable, assignment 3 should focus on five things (from most important to least important):

• selection of information to display in any one screen;
• different navigation structures, e.g. how complex should the linking structures be;
• different ways of expressing the same underlying structural information (e.g. through the use of spatial grouping, synchronization, similar colours);
• appropriate use of media;
• appropriate use of timing/synchronization.

While graphic design issues, such as the aesthetic 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 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,
• description of users' tasks supported by the system and
• explicitly argued design decisions for the above 5 aspects 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 we can access the result.

Feel free to mail me or Alia with questions.

While the preferred domain is that of artworks/cultural heritage, this should not be seen as restrictive. An alternative example is a medical domain with interfaces for patients and doctors/specialists.

A potential scenario you could consider is that a museum would like to make an exhibition from artefacts in the collection. The organizers need to browse the collections, find artefacts belonging to a number of themes and build a story out of them. Design an application to support the task of the exhibition organizers in selecting and collecting artefacts, creating a theme and building a storyline for museum exhibitions.

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  Alia.Amin@cwi.nl. Publish a written report on your design decisions in HTML of around 4 pages (2000 words) on your web page and email the URL to Alia.Amin@cwi.nl before 09:00 Monday 25 September 2006. Don't forget to state the names of the people in your group in the email (even better - include them somewhere in the presentation and the report).