1. Overview
2. Task Scenarios 
3. Revised Interface Design
4. Interactive Prototype
5. Screen Dumps 
6. Prototype Descritpion 

Who worked on what?  

• Petter: write-up (revised interface design, prototype overview)
• Hans: prototype creation, write-up (overview, prorotype overview)
• Masako: prototype creation, write-up (storyboard, tools, prototype description)
• Mohammed: demo preparation, presentation

1. Overview

2. Task Scenarios

A.   Adding, saving and sorting bookmarks and folders 
B.   Browsing with History Map view 
C.   Power search history records in calendar view 

1. Add this page to your bookmark. 
2. Create a new folder to store several newspaper web sites.  
    Name the folder "News". 
3. Put related bookmarks to the "News" folder. 

4. Open a history folder for yesterday. 
5. Find The Financial Times site in the folder. 
6. Move the site to the "Newspaper" folder. 

1. Go to the "Map" view.
2. Find and select The New York Times home page as the root document in the "Map" view. 
3. Find the second page of one of the articles you read.

1. Open Search dialog box to start a search on all pages from The New York Times. Select "Calendar" view as a result view
2. Change the view to "Week" and determine which day (not Fri and not Wed) it was when you visited The New York Times.

3. Revised Interface Design

According to our lo-fi testers, there should definitely be possible to add bookmarks directly from the Webmarking application. Consequently, an "Add bookmark" button has been added to the toolbar, allowing the application to add the current website by interfacing directly with the browser. If the user has several active browser windows, a dialog box with the names and URLs of each website will pop up, allowing the user to choose which one to add.  

Similarly, an "Open page" button has been added, giving the users an additional way of expanding (i.e., opening in a browser window) any selected bookmark or history file (the original way of doing this would be to double-click the icon). Also, when the user places the mouse pointer at any icon, information such as the URL, full site name and date will pop up (this will allow the interface to show more information than previously without increasing the icon size).  

For the calender view, the most important change is the inclusion of a time period selection field. This enables the user to easily choose between day, week and month view, which is obviously a required feature. We also decided to employ a shading scheme to indicate the number of times a particular site is present each day. This will simplify searching by allowing the user to focus on the days with most ’hits’ (i.e., days with dark grey shading). In a similar fashion, shading is used in map view to indicate the number of pages linked from one ’parent’ site. Furthermore, the testers’ ideas for the search dialog box have largely been incorporated. It is now possible to select view mode from this box, and the time ranges have been expanded (with ’anytime’ as default).  

In addition, we also have a number of less significant design changes. These include:  

• Automatic transferral of focus to new dialog boxes
• Revision of dialog box fields (i.e., ’Date’ field removed from ’New folder’ dialog)
• More visible tabs for changing view mode

In calendar view, the view spaces for Saturday and Sunday are extended 

Scenario A: Adding, saving and sorting bookmarks and folders
1.	add bookmark
2.	show the new bookmark in the main (right) window
3.	open "New Folder" dialog
4.	show the new folder in the bookmark (upper left) window
5.	drag & drop a bookmark to the new folder
6.	open a history folder > show its contents in the main (right) window
7.	drag & drop a history file to a bookmark folder
Scenario B: Browsing with History Map view
1.	click "Map" tab
2.	show the map view in the right window
3.	select the NY Times page as the root
4.	change the view
Scenario C: Power search history records in calendar view
1.	open search dialog box
2.	type search words and select "Calendar view" as result view
3.	change the view to "week"

4. Interactive Prototype

We have implemented the main application window as well as several important interaction methods to provide a way for test users to walk through the scenarios described above. Methods include menus, clickable icons and drag-and-drop operations. Dialogs for adding bookmarks and folders are implemented as well. Finally, we have included three different view modes: Main, map and calendar views. The basic operations and functionality required by test users should be provided in this prototype. 

What was Left Out and Why 

In our current prototype, we have severly limited the functionality of the various view modes. Moving files from a calendar view of history files to a bookmark folder, for instance, is quite restricted – only the file that our scenario calls for to be moved can actually be moved. Implementing an entire set of movable icons for several view modes would simply be too much work at this time.  

Though our Webmarking application is intended to function as an integrated part of the Web browser, the VB prototype we have at this stage is strictly stand-alone. This is mainly due to two reasons: First of all, this integration is not strictly necessary from a tester’s point of view – the application’s functionality can be adequately examined even if it is separated from a browser. Secondly, the integration of a VB program and a browser is, if not entirely impossible, well beyond our team’s abilities.  

Wizard of Oz 

The existing ’New folder’ and ’Add bookmark’ functions do not at all actually create any new objects. Rather, the object is already there – ’creating’ it simply makes it visible. This does of course mean that only a limited number of new items can be created. Similarly, our file structure and directories are completely fake – they appear to behave as their real counterparts as long as the user performs one of rather limited number of operations we support (such as moving the correct history file into the correct bookmark folder). Naturally, the icons are also fake - they don’t represent any data file (such as a Web site or an URL).  

Tools 

We used Visual Basic (VB) as the prototyping tool. VB offers an easy way to place and arrange different kinds of controls (command buttons, icons etc.) using mouse. This WYSIWYG feature makes it very easy to create and modify interface components in very short time. 

However, we found that it was not easy to create interface which was not "Windows standard." For example, "directory list box" supplied as a VB control looks into the actual directory in the hard drive of the executing machine. And the control supports standard behaviors of the folders such as changing directory by double-clicking and changing the face of an icon based on the state of the directory. For our prototype, folders represent the concepts of grouping of bookmarks and history files, not the actual directories. Therefore, we couldn't use the "directory list box" control and had to create a list of folders and their behavior from scratch.  

It is a great tool for the rapid prototyping of the interface thoroughly following the Windows convention. But for an experimental interface like ours, it requires additional coding. 

5. Screen Dumps

Screen Dumps 
Follow "next" links to view screen images in the order of the storyboard of three scenarios. 

6. Interface Descritpion

To start the program, go to the directory and double-click the file using the SIMS NT machines. If you have any problem, please contact Masako. 

Scenarios are available on thie page. Please note the prototype works only for tasks specified in the prototype. Refer to the storyboard if you have trouble finding what to do. The storyboard shows you the screen shot of each step you take to perform the scenarios.