Webmarking:
Managing Web Bookmarks and Browser History Files in One Interface
  Interactive Prototype #2
home
  1. Overview
  2. Heuristic Evaluation Results
  3. Interface Redesign
  4. New Prototype (Screen Dumps)

    Who worked on what?

    • Petter: Prototype coding (GUI), Documentation
    • Hans: Prototype coding (functionality)
    • Mohammed:Documentation
    • Masako: Prototype coding (GUI)

1. Overview

Based on the heuristic evaluation, we have revised our first prototype. Major points of the redesign are

  • help menu/icon is added
  • previous/next buttons are added to the Calendar view
  • tree structure is introduced to the Bookmark/History folders

The new prototype has been created using Java.

2. Heuristic Evaluation Results

Severity 3  - 7 violations
It is hard to drag and drop bookmarks. E.g., it took me several attempts to place a bookmark into a folder because there was no visual feedback to tell me when I had dragged the cursor to the correct position over the folder in order to be able to drop it in.  
   HE1: Visibility of system status  found by 2 evaluators
  In general, VB does not provide all the drag and drop functionality that our application requires, which is probably part of the reason that "drag and drop" was found to be somewhat problematic. In the final product, the solution in this case will be to highlight the (legal) targets of the dragged icon as the mouse pointer passes over them. 
It is hard to tell if drag and drop is a "copy" operation or a "move" operation. E.g., Because the original bookmark didn't delete, I thought I was copying it. But the next time I opened the folder the bookmark was gone indicating that it had been moved.  
  HE1: Visibility of system status found by 2 evaluators
  The idea for our system is that bookmarks will be moved (as you probably only want one instance of any bookmark), while history files will be copied (as they might potentially be of further use). One way to indicate exactly which operation is taking place is to change the mouse pointer while dragging icons to include the word 'Moving' or 'Copying'. Alternatively, a small feedback screen could provide closure by stating something like 'Bookmark successfully moved', though this might be annoying to experienced users.
In the second map view, it is unclear what the children of the root node are. E.g., it is hard to tell that both "NYT: Quake hits bay area" and "NYT: Nato forces attacks Serbs" pages were both under the NYT root page. This is because the latter node is not directly connected to the root page rectangle.  
  HE2: Match between system and the real world  found by 2 evaluators
  We are aware that more user feedback must be included in the "map" view. There is also the information about the sequence and the reference of the pages being downloaded that needs to be addressed.
The first map view page (with "my yahoo" as the root) is not consistent with the second map view page (that has "NYT" as the root) because the subnodes attach differently to the root node.
  HE4: Consistency and standards  found by 2 evaluators
  Yes, this is true. It will be corrected in the final version.
It is hard to "select" bookmarks. E.g., I kept clicking on the Bookmark title "New York Times". Then I finally figured out that I needed to click on the document icon which appears next to the title. This icon is small and it was not obvious that I could click on it. 
  HE4: Consistency and standards  found by 1 evaluator
  Clicking either of the icon and the title will now select the bookmark.
There are two icons on the "map page": one is a rectangle, and the other is a square with an "H". What does the latter denote? It seems as if it's a subset of bookmark, but conceptually this does not fit my mental model. That is to say, I'm not sure how to define a subset of a bookmark. What's more, I'm not really sure if the concept of a second page exists when speaking about hyperlinks. Web pages, in other words, are not arranged sequentially.
  HE2: Match between system and the real world  found by 1 evaluator
  The 'H' icon indicates a history file....
Does "search" only search Bookmark titles? Or, can I also search through the corpora?
  HE2: Match between system and the real world  found by 1 evaluator
  'Search' is primarily intended for history files, but will also work for bookmark files.
Severity 2 - 19 violations
The Search dialogue selection "visited" restricts users to choosing values from a drop down list.
  HE3: User control and freedom  found by 3 evaluators
  Our final application will allow users to specify any set of dates as search criteria. Due to limited time, however, this feature has not been implemented yet.
It may be confusing if you perform a search, select "visited: last week" and select "view results in: calendar view", that the calendar view defaults to month view.
  HE2: Match between system and the real world  found by 2 evaluators
  Ideally, calendar view should default to the view that is appropriate to the search criteria (day, week or month, as the case might be). Time permitting, this will be incorporated in our final version.
There is no help feature.
  HE10: Help and documentation  found by 2 evaluators
  Designing a help feature will not be prioritized for this project, as it requires rather excessive amounts of work. For a real application, some highly trained individuals would of course already be assigned to create such a feature.
The ability to sort bookmarks may help avoid the user's need to use "search".
  HE7: Flexibility and efficiency of use  found by 2 evaluators
  Sorting bookmarks alphabetically or by date etc. (as in Microsoft Windows) would be useful, but will probably not be implemented due to lack of time. The 'search' feature would in any case still be needed for history files.
In the list of bookmark folders, there is a default folder called My bookmarks which contains all pages that are newly added and have not been moved to other folders. However, this folder appears on the top of the list and, unlike other folders, does not have a folder icon in front of it. This may mislead the user to think that it is just an title, not a folder, and its lack of affordance of a folder and its dissimilarity with other folders discourages the user from clicking it.
  HE4: Consistency & standards  found by 2 evaluators
  The title "My bookmarks" was changed to "bookmarks."
A folder named "Search" appears under Bookmarks. Users may be confused by this if this is a default folder name (At first, I thought this might allow you to search through your bookmarks).
  HE2: Match between system and the real world  found by 1 evaluator
  It is not a default folder, but merely an example of a typical folder users might create.
It is hard to navigate (browse rather than search) through my history folders using the calendar view. Currently I can only look at today's or yesterday's bookmarks very easily (without searching).
  HE7: Flexibility and efficiency of use  found by 1 evaluator
  Navigation in calendar view has been improved.
I could not find any bookmark entries in the month view.
  HE1: Visibility of system status  found by 1 evaluator
  We are aware of the asymmetric aspects of the various tasks allowed for bookmarks and for history files. We did not intend for bookmarks to be represented in the calendar view simply because we did not know what to use as the "date" of a bookmark. We could use the date the bookmark was created, but this may due to the different meaning for date attribute.
I don't know what the "+" icon on the toolbar is supposed to do. It always takes me back to "My bookmarks".
  HE2: Match between system and the real world  found by 1 evaluator
  It supposedly adds a bookmark, which is a severely limited function in the VB version. Placing the mouse pointer over the icon will cause a little help line to pop up.
When adding a new folder there is a field labeled "Description" which may be confusing. I think this is to describe the folder, but am not sure.
  HE2: Match between system and the real world  found by 1 evaluator
  Yes, the field was intended for the user to enter any descriptive comments for the folder.
There is no way add a description or note to a bookmark, which would be a useful feature of this interface.
  HE7: Flexibility and efficiency of use  found by 1 evaluator
  Since this was not included in our scenarios we chose not to implement this feature. It is our intention that this feature be present in the final version.
Ability to undo would be a helpful feature.
  HE3: User control and freedom  found by 1 evaluator
  Yes, we agree. However, we did not implement this since it was not in our scenarios.
The system has a Map view where the user can examine the temporal relationship between pages visited on a certain date. While in this view, after the user bookmarks a new page, it is not shown visually. The user may attempt to bookmark the same page several times, thinking that the previous action was not successful.
  HE1: Visibility of system status  found by 1 evaluator
  This was not implemented, because it was not in the scenarios.
While examining a history folder in the map view, after the user clicks the main view tab, the user interface changes to display the contents of the My Bookmarks folder in the main view window. However, the user expects the user interface to keep displaying the current contents of the history folder in the main view.
  HE2: Match between system and real world  found by 1 evaluator
  This was not implemented, because it was not in the scenarios.
In the map view, the user can go forward or backward. While the user clicks the icon representing the last page in the view to go forward, he clicks the summary icon representing the previous pages not visible in the current view to go backward.
  HE4: Consistency & standards  found by 1 evaluator
  Yes, good point. We intend on fixing that in the final design.
These folders should be hierarchical and have drill-down/"collapsible" capabilities. Isn't, for instance, the "UC Berkeley" folder a subset of "My Bookmarks"? If so, include a level below with perhaps a "+" denoting drill-down capability.
  HE4: Consistency & standards  found by 1 evaluator
  Yes, this has been fixed in the second interactive prototype.
I've added a new folder with a description. How do I access the description?
  HE4: Consistency & standards  found by 1 evaluator
  This was not implemented, because it was not in the scenarios.
I'm not sure if it's a bug in the program, but when I drag and drop some of these bookmarks, sometimes the source bookmark is moved and other times it is copied.
  HE4: Consistency & standards  found by 1 evaluator
  Yes, this was both a bug in the program and a limitation of the prototype.
Use a consistent color for bookmarks. If you are trying to integrate bookmarks and history, why make the distinction between "B" and "H"?
  HE4: Consistency & standards  found by 1 evaluator
  We felt that color shouldn't be the only indicator of a bookmark or history file. Icons can also aid those whose ability to distinguish color is impaired.
Severity 1 - 3 violations
It is unclear whether you can use the map view to view only history or also to view bookmarks.
  HE1: Visibility of system status  found by 1 evaluator
  We are aware of this problem and we are trying to incorporate a method of feedback that informs the user that bookmarks cannot be viewed in the map view.
The word "map" isn't all that intuitive. "Maps" are used for depicting space and geography.
  HE4: Consistency and standards  found by 1 evaluator
  The word "map" does have a heavy connotation to it, but whether or not it refers to space and geography is debatable.
To continue with the bookmark metaphor, use a magnifying glass instead of binoculars. Even pince-nez or reading glasses would work. By the way, I know MS does this, by why is "Search" under "Edit" and not under "Tools"?
  HE3: User control and freedom  found by 1 evaluator
  Good observation. We have included this in our second prototype.
Severity 0  
Navigation through the interface is very good. I can always tell where I am because the views and folders are highlighted in white. I like this!
  HE5: Error prevention  found by 1 evaluator
  Thanks for the positive feedback, we will definitely pay more close attention to these features so that they remain in the next version.
I like that I can easily switch between month, week and day in calendar view.
  HE5: Error prevention  found by 1 evaluator
  Of course, we thought that would almost be a necessity.

3. Interface Redesign

 

In general the interface was improved considerably after rebuilding the prototype from Visual Basic to Java. Many of the usability violation in the first interactive prototype were due to the fact that it was built in Visual Basic which is not as flexible as Java. Java has made it easier to perform more realistic "drags and drop" features. In addition to that a "Help" menu/icon was included it the taskbar. Finally, it should be noted that most of the usability violations mentioned by the evaluators were merely limitations of the prototype. Many features were intentionally left out since they were not intended to be used in our scenarios.

One problem that was noted by the evaluators was that the "+" icon (intended for adding the current browser page as a bookmark) was not intuitive. This icon was changed to that of an image of a paper with the letter "B" on it. Although it conveys more information, it can still be debated as to whether or not this is more intuitive. Perhaps the pilot user study will provide more feedback on the usefulness of this icon.

The first interactive prototype did not include an inverted tree structure for manipulating files in the left margin containing both history and bookmark files. The second interactive prototype has included this feature thus allowing the user to expand and collapse any of the branches in both bookmarks and history files.

The helpful comments from our evaluators allowed us to improve upon other useful features. Specifically, we included browse buttons within the "calendar" view that lets the user scroll back and forth between days, weeks and years.

 

4. New Prototype

Screen dumps of the new prototype

* Please note that some of the functionality of the interface are not fully implemented at this time due to the programming difficulties. They will be fixed as soon as possible.

To run the program, you have to use the SIMS UNIX machines or NT machines running Exceed. From these machines, please go to our project directory by typing the following command (in one line) at the command line;

cd /www/docs/courses/is213/s99/Projects/P1/interactive/javaswing/

Then type the following command to start the Java program;

java WebMarking

It may take few seconds before the interface shows up. You may also see the error messages - you can ignore these.

The program is slow - please be patient. To exit the program, select "File" > "Exit" from the menu bar.

Contact Masako if you have any problem.

task analysis
low-fi prototyping
interactive prototype #1
interactive prototype #2
last updated:   
04/20/99