SIMS 202 Assignment 7 

Readings:   Sano, Newman & Landay, Hauser & Clausing, Nielsen

The goal of this assignment is to give you exposure to the process of participatory design of an information organization.

For this assignment, work with two other students (we'll set this up in class). This is going to require a bit of scheduling, so we've allocated some extra time, but you need to plan ahead.

1. First, read the Sano chapter in the reader and Card Sorting section in the following excerpt from: SunWeb: User Interface Design for Sun Microsystem's Internal Web Jakob Nielsen and Darrell Sano, in the Electronic Proceedings of the Second World Wide Web Conference '94: Mosaic and the Web, 1994.

2. Next, with your partners, choose a topic. This should be a fairly rich set of information that is to be used to organize information on a web site. Don't make it too complicated, however. Choose something that can be characterized by about 50 concepts as described above. In order to aid in the information organization part, you also need to specify what type of tasks a person using the site might wish to accomplish using this information. Focus on sites that show information, rather than those that require user interaction other than following hyperlinks and reading. For example, for an ecommerce site, you would focus on the catalog rather than on the purchasing portion of the site.

   Be sure to choose a topic that classmates will be able to understand. Example topics from last year: national parks, sportswear catalog.

3. After choosing the topic, do the brainstorming step in which you generate a list of categories as described in the excerpt above and the Sano chapter in the reader. You should have around 45 or 50 concepts. [This part should take about 2 hours.]

4. Then exchange information with another group. Each person in group A should individually organize the cards of group B, and vice versa (without looking at what the others are doing). You don't have to all be physically present at the same time -- just do the exchange in some way. You can give the other groups whatever instructions you feel will be helpful, although you may want to use the methodology described in the excerpt above ("not too few, and not too many" categories). [This should take 40 minutes to an hour per person.]

5. Get back together with your original partners and make a final classification system based on the results of all three of the sorts. You don't have to use a clustering algorithm or other fancy statistical techniques; instead try to ``eyeball'' where the best similarities are. You can also exercise your judgement and override or discard some of the results. Create an organization like that in Table 3.1 of the Sano chapter. (Optional: You can use a software tool for this: see bottom of this page.)

6. Now that you have the information architecture for your site, sketch out the navigation architecture. For this last part of the assignment, use the DENIM sketch-based design tool to make an initial navigation design. This should include a site map and a story board showing at least one set of interactions. The sitemap should show at least 10 pages and 3 levels (including the home page). The storyboard should illustrate how a user would start from the home page and follow links to find a particular item on the site. It should follow at least three links.

7. Write a paragraph describing what you did and did not like about using DENIM, to be used by the developers (it is ok to criticize it if you find problems). How do you think it compares to using pen and paper? To using a more formal interaction tool?

   You first have to install DENIM. I had a MIMS student try this in room 210 and it worked for her. Download version Beta 4 - SIMS from http://guir.berkeley.edu/projects/denim/download/sims270 and install it in your home directory. You can also run this on your machine at home. If you have problems, this page has support information: http://guir.berkeley.edu/projects/denim/support/

   Here are some hints and tips on how to use DENIM.

   • First read through the tutorial. It is very helpful.
   • Although DENIM is designed to be used with a computerized tablet and pen, it now works pretty well with a mouse. The key thing to realize is that you can use a caret gesture to bring up a dialog box that lets you type in words. I found that it took me about 15 minutes to get used to using the mouse for drawing and gesturing, but after a while I got pretty good at it.
   • When you make the caret gesture, make the angle wide. I found this made it easier for the system to recognize the gesture.
   • Start with the site map first. There are two ways to do this. You can draw narrow boxes for pages and then use the caret gesture to let you type in words to label the pages (select the "heading" option). Or you can just use the caret gesture to type in labels. They will automatically be converted into labels when you do this at the site map level. Draw lines to link the boxes into the main organizational structure. Use your information architecture to decide how to organize at this level.
   • Then move to the page level and sketch in wavy lines to indicate text, to indicate images, etc. You can use the text tool at this level too to type in words. This is especially useful for labeling the hyperlinks that you'll want to use to make the storyboard.
   • Next do the storyboard. Move to the storyboard view. You make a storyboard link by drawing a line (using the pencil tool still) from the "ink" on one page to any part of another page. This should produce a green arrow, which is different than the organization arrows that you drew at the site level. The storyboard is supposed to show the sequence of links a user would follow while using the site.
   • Finally, run the storyboard. Move to the storyboard view, and bring up the pie menu (by right-clicking). A new window should appear. Select a link highlighted in blue from that window and the system should show the page that the user would end up at after selecting that link.