Medium difficulty task – Search for the text “low-fi” in the current web page, copy it to the clipboard, and paste it into a text field in an input form on the same web page. This task tests our edit functions and pie menu implementation.
High difficulty task – Go the NFL homepage (www.nfl.com), and annotate that page with circles and arrows. This task tests our TopicChannels functionality and annotation capabilities.
Users can navigate web pages with both the traditional scrollbars and with stylus gestures. Similarly, Edit functions (such as cut, copy, and paste) can be performed through both the familiar Edit menu and the stylus-based pie menu.
Our revised interface can be used to quickly access pre-defined and user defined TopicChannels at the press of a button. Users can use the stylus to draw or write annotations directly on top of web pages, a feature also available simply by pressing a button.
User Interface
Navigating web pages is accelerated by allowing the user to use the stylus to make gestures on the screen that the browser will respond to. Drawing “?” and “?” anywhere on the web page will cause the page to scroll up and down (see sketch 1A). The gestures “?” and “?” are mapped intuitively to the navigational functions page back and page forward.
Edit functions can be accessed through the pie menu -- a user can hold down the stylus in the browser window for about one second, after which the pie menu pops up (sketch 2A). The user can then choose commands by either tapping the stylus on pie menu slices, or by dragging the stylus over the desired command.
TopicChannels are accessed by pressing the TopicChannel toggle button in the browser toolbar (sketch 3A). The TopicChannel hierarchy tree is displayed in the left portion of the browser window (sketch 3B). The user can access different web sites, including search engines, by expanding and collapsing the topic folders in the tree. When the user clicks on one of the “leaves” in the TopicChannel tree, the web page is displayed on the right side of the browser. The user can then hide the TopicChannels by pressing the button in the toolbar again.
The user puts the browser into annotation mode by pressing the annotation toggle button in the toolbar (sketch 3C). In this mode, the user can annotate the current web page by drawing or writing directly in the browser window (sketch 3D). The web page cannot be scrolled and text cannot be selected when in annotation mode. When the user is done annotating, the annotation button can be pressed again to return the browser to normal operation.
Differences As a Result of Low-Fi Testing
The first change we made as a result of low-fi testing was to re-add the scrollbar to the browser window. Having gestures is not sufficient as users might prefer to use the familiar scrollbar.
The next change was to the method of accessing TopicChannels. Originally
users could display the TopicChannel sidebar by using a pull-down menu,
which also contained a “Add current web site” command. We changed
the menu into a button and moved the command from the menu to the
TopicChannel sidebar itself. It is easier and faster to click on a
button with the stylus than to use a pull-down menu.
Finally, we changed our annotation feature by adding an indicator showing whether the browser is in annotation mode or not.
Task 2: Edit functions using the pie menu – Michael finds some text on the web page that he wants to save. He highlights the text with the stylus. Then he holds the stylus down on the screen for about one second, causing a pie menu with edit functions to pop up (sketch 2A). He clicks on the “copy” pie slice. Then he starts up his word processor and pastes the text copied from the web page into a new document (sketch 2B).
Task 3: TopicChannels and annotations – Teddy wants to use his web browser to find the current news in the world of football. He clicks on the TopicChannels button to display a hierarchy tree of topics on the left side of the browser window (sketch 3A/3B). In the tree he clicks on “Sports,” then “Football,” and finally on “NFL.com.” The official NFL homepage is displayed in the browser. He finds some stats on the webpage that he wants to make note of, so he hits the Annotation button to switch the browser to annotation mode (sketch 3C). The words “Annotation Mode” appear next to the URL at the top of the browser window, so he knows he can start annotating the web page. He draws circles around the stats he wants to remember (sketch 3D).
Gestures – Visual Basic let us use the mouse to simulate the stylus. We were able to use mouse movements to simulate the gestures (Fig 1, 2). The simulated stylus actions helped us to visualize how the gestures would look on the real machine. VB let us easily implement the scroll up and scroll down gestures. However, it did not let us implement these gestures with the flexibility we wanted. We wanted to be able to use the gestures anywhere in the browser window, but our implementation is only able to detect gestures in a small area on the right side of the window. Only certain VB components provide the mouse event procedures we needed to fully implement gestures. We did not add gestures for previous page and next page due to lack of time.
Pie Menu – VB helped us to simulate the pie menu. It let us draw the menu and the required pie slices (Fig 3), and we were able to easily implement the copy and paste functions. It helped us to see how fast and easy it is execute these functions through the pie menu instead of through the standard pull-down menus. We could not figure out how to use to help us test the feature of dragging the stylus over the menu slices instead of clicking on them. We were also unable to get the menu to pop up according to where the stylus was held down. We did not implement pie menu functions other than copy and paste because of time constraints.
Annotations – VB proved extremely helpful for annotations. In our current implementation, users can create free-hand annotations on top of arbitrary web pages (Fig 6). Users get much more visual feedback than with our low-fi prototype. We did not implement the “handwriting shrink” feature however, since it is hard to do given Visual Basic and our current knowledge of it.
TopicChannels – Visual Basic helped us to easily implement the TopicChannel hierarchy tree (Fig 7, 8). Our prototype has a working toggle button which displays and hides the TopicChannel sidebar. We did not make the tree user-modifiable due to lack of time
We used the wizard of oz technique with gestures and with copy/paste. We could not figure out how to detect gestures with the built-in web browser component, so we instead created “web pages” using rich text boxes on the left side of the browser and a picture window to detect mouse events on the right side. Similarly, we were unable to access the copy and paste functionality of the web browser component, so we again used rich text boxes to provide text that we could copy and paste.