InteractivePrototype-Group:ThePenIsMightier

From CS160 User Interfaces Fa06

Contents 1 Group Contributions 1.1 Project Code and ReadMe.txt 1.2 Powerpoint Presentation Slides 2 Problem and Solution Overview 2.1 Problem 2.2 Why We Care 2.3 Solution 3 Tasks 3.1 Task 1 3.2 Task 2 3.3 Task 3 4 Revised Interface Design 4.1 Changes since low-fi testing 4.2 Unimplemented Portions of the Interface 4.3 Storyboards of Tasks 4.3.1 Task 1 4.3.2 Task 2 4.3.3 Task 3 5 Prototype overview 5.1 Overview of current UI 5.2 What was left out and why 5.3 Wizard of Oz used in this version

Group Contributions

• Charles Lee - Charles authored the Problem and Solution Overview, Tasks, Prototype Overview, PowerPoint Presentation, and Presentation Script/Demo Plan. He also contributed to the revised interface design, and will present the interface.
  
• Vahe Oughourlan - Vahe authored the windowing system in Java swing. His portion is responsible for linking all the windows together. He also wrote the Walkthrough section of tasks on the wiki.
  
• Tom McClure - Tom authored the link between the pen interface and the program, responsible for importing strokes into the BlogPad software, converting them to images and uploading them to an intermediary server where they can be linked to from a blog entry. Tom also contributed to the UI code (Library preview panel) and designed a framework of classes for the application business logic.
  
• Tony Lai - Tony authored a portion of the wiki page, contributed to the PowerPoint presentation, and will help present our project.
  

Project Code and ReadMe.txt

• [TPIM BlogPad Source code v.01]

• [Build/Run instructions ReadMe.txt]

Powerpoint Presentation Slides

• [Presentation Slides]

Problem and Solution Overview

Problem

Blogging is a popular pastime for many casual computer users in addition, or in place of, handwritten journal entries. However, in the translation to digital media, some popular affordances of pen-and-paper journals have been lost. Consequently, things easily done with the paper-and-pen interface sometimes just don’t happen. Drawings, doodles, sketches, and impromptu notes just cannot happen as often as they would with a small pen and pad, especially since they need half an hour and a computer with an internet connection to post their thoughts. Who knows what countless ideas are lost from having to remember them until you have enough time to blog?

Why We Care

Reintroducing the pen-and-paper interface with blogging revives affordances of the pen-and-paper interface. As well, the Anoto Digital Pen is more convenient than its heavy electronic competitors, and more convenient than its paper-and-pen competitors that are stuck in the physical world. We want to connect the affordances of the Anoto Digital Pen to blogging with an interface pen-and-paper users would enjoy.

Solution

With BlogPad, we use the Anoto Digital pen to bring the pen-and-paper interface to blogging, allowing users to create entries at anytime. No longer will users forget ideas during the “time-lag” between inspiration and blogging, and unlike its physical competitors, the Anoto and BlogPad system does not even require preserving or caring for the paper afterwards. Users can post drawings with ease, without worrying about scanning sketches or uncomfortably drawing with a mouse.

Tasks

We felt that the tasks from the lo-fi prototype's interviews were representative of the average user's actions, and did a good job of demonstrating the essential features of BlogPad. Thus, we used the same tasks as example tasks for the interactive prototype, as they will be used to show that the changes we have made since user studies from lo-fi prototype are effective in fixing the interface's flaws.

Task 1

Save writing to local computer as image.

We believe this task is a perfect example of a representative easy task. This is because we observed the users in the quick iterations of the lo-fi paper prototype. This is a short, easy task, but not too easy because new users would still need to internalize a new interface. Even when an environment is familiar and intuitive, users tend to act slower and read more carefully when presented with a new application.

Task 2

Save writing and upload writing to a blog as a single posting.

This task is a representative example of a medium task, as this is the task that we anticipate most users will use often. The real inspiration behind BlogPad is to allow its users to post his blog entry directly from his hand written journal. In this task, we ask the user to post everything that he has written to his online blog. This task is slightly harder than the first task, but users should not have trouble completing it, as suggested by the lo-fi prototype user studies. However, it will be interesting to see if the new placement of our buttons for the 'posting interface' (see Revised Interface Design) would cause any trouble to user.

Task 3

Save writing and upload writing to a blog as multiple separate posts.

This task uses most of the more complicated functionality we have available. Perhaps before the iterations with real users, it could be called “too hard” or confusing, but the input we received both directly from the users and from observations of the users allowed us to make some small changes to make this task more comfortably doable. This is the most difficult task of the three tasks - we ask the user to post what he has written as multiple blog entries. The hardest step is when the user has to use the 'posting interface' to select the beginning and end of the entries, and one that is still an ongoing study within our group. Our temporary solution is to take advantage of the fact that most text on computers is read left-to-right. The user will be naturally drawn toward the left side of the screen first, seeing the modal buttons and using them to mark the start and end for one of multiple blog postings. This step is discussed in more detail in the prototype overview.

Revised Interface Design

Changes since low-fi testing

We have made two major changes since the lo-fi prototype user studies:

Interface for "splitting post"

Our original design for this particular action was to have the modal buttons on the right of the page previews (see below). However, the user study suggested that it is problematic, since a lot of our users did not even notice that the buttons were there. Our temporary solution is that we reversed the order of the buttons- modal buttons on the left, page preview on the right- to take advantage of the fact that our application is written in English, and even in other languages, text is customarily read left-to-right when on computer. After the change, users should now see the modal buttons first and bring them into their locus of attention. Other alternative solutions that we have considered were click and drag, eliminate modal buttons and have the first mouse click to mark as beginning and second mouse click to mark as end, and making speech balloon with instructions (i.e.- tooltips). However, after evaluating the pros and cons, we decided on our current solution, but we are still considering all options, as there is no one solution that is a clearly superior.

--------------------------->

Where we should ask the user to view blog after posting

For the current design, we have changed the “open blog in browser window after posting” from an option decided at install-time to a checkbox available at time of posting as well. One problem that we experienced during the lo-fi prototype user study was that users' locus of attention at install time often did not include reading the configurations. And when the browser with the user's blog pops up after posting, the users were surprised by the action and have no clue why it happened. In order to help users notice this feature, we decided to ask the user at the time of posting, where the interface has fewer widgets, and thus is more simple.

------------------------>

Unimplemented Portions of the Interface

• Page selection widget is currently a static image placeholder.
• Docking functionality is working but is not yet connected to the UI
• Save to jpeg functionality is working but can not yet be activated from the UI
• Delete Library Entry not yet implemented (button does nothing)
• About tab is currently blank

Storyboards of Tasks

Task 1

During this task, we are asking the user to save his or her blog entry to a file. This process begins by starting the program, at which time the main window will be displayed. To begin, the user shall dock their pen and click the "Import from Pen" button to the right (at this time, batch import is functional but not connected to the button). Then he or she will select their document from the table to the left that contains some information in regards to blog entries they have previously entered. They shall choose a pertinent entry and click on the "Publish/Export" button, which will lead them into the Post/Write-to-file Wizard.

The next step involves choosing the pages to export using the page selection tool. At this time, this is Wizard of Oz. The page to the right is currently a placeholder for this feature.

Here, the user is able to choose between posting to their blog or posting to a file. Here, they will have selected the second radio button: the post to file entry.

In this next window, the user will be able to choose the filename and directory where to save their post. The text box will display the filename and location where the file is to be saved, and when the user clicks "Finish", the file will be saved.

This completes the walkthrough of this task.

Task 2

During this task, we are asking the user to post his or her blog entry to their blog. This process begins by starting the program, at which time the main window will be displayed. To begin, the user shall dock their pen and click the "Import from Pen" button to the right (at this time, importing strokes from a batch xml dump is functional but is not yet hooked up to the button). Then he or she will select their document from the table to the left that contains some information in regards to blog entries they have previously entered. They shall choose a pertinent entry and click on the "Publish/Export" button, which will lead them into the Post/Write-to-file Wizard.

The next step involves choosing the pages to export using the page selection tool. At this time, this is Wizard of Oz. The page to the right is currently a placeholder for this feature.

Here, the user is able to choose between posting to their blog or posting to a file. Here, they will have selected the first radio button: the post to blog entry.

In this next window, the user will be able to choose the Title for their blog entry, the date for the entry, and the privacy level for this posting, which will be their default setting from the settings pane. When the user clicks on the "Finish" button, the entry will be posted to their blog. If they have selected the option to show the post on their blog after posting, a web browser will open with their blog page (this is Wizard of Oz currently).

This completes the walkthrough of this task.

Task 3

During this task, we are asking the user to post multiple blog entries to his or her blog. This process begins by starting the program, at which time the main window will be displayed. To begin, the user shall dock their pen and click the "Import from Pen" button to the right (at this time, importing strokes from a batch XML dump is functional but is not yet hooked up to the button). Then he or she will select their document from the table to the left that contains some information in regards to blog entries they have previously entered. They shall choose a pertinent entry and click on the "Publish/Export" button, which will lead them into the Post/Write-to-file Wizard.

The next step involves choosing the pages to export using the page selection tool. At this time, this is a placeholder static image representing the current dialog design under consideration.

Here, the user is able to choose between posting to their blog or posting to a file. Here, they will have selected the first radio button: the post to blog entry.

In this next window, the user will be able to choose the Title for their blog entry, the date for the entry, and the privacy level for this posting, which will be their default setting from the settings pane. When the user clicks on the "Finish" button, the entry will be posted to their blog. If they have selected the option to show the post on their blog after posting, a web browser will open with their blog page (this is Wizard of Oz currently).

After the "Finish" button is clicked, a dialog will appear, asking the user if he or she would like to post another entry. If he or she clicks yes, then the wizard will reset back to the first screen, allowing the user to repeat the process and post another part of their entry. At this time, this feature is Wizard of Oz.

This completes the walkthrough of this task.

Prototype overview

Overview of current UI

• The current UI is the culmination of weeks of research, testing, observation, and interviewing. We decided to implement a "wizard"-based process, so that instructions for each step are readily available to the user without overcrowding their short-term memory, the human equivalent of RAM. This readily keeps each step's subtasks in the user's locus of attention, with some semblance of direct manipulation within each step. As well, a wizard provides an analogy, or natural mapping, with a pages in a book: we flip through the book as we proceed.
• The wizard for processing the user's last writings starts upon docking the Anoto pen. Alternatively, the application can be opening the application via Start Menu or Desktop shortcut for book-keeping purposes. The application begins with a library of previous writings, available for viewing or using as the user wishes. The user can select the "Import from Pen" button on that page, bringing up:
• The page selection tool: This window allows the user to preview his writings, providing comfort and a way to see the writing that he is about to interact with. The default setting is for the entire piece of writing to be treated as one post, but the user can select portions of the writing to be used for separate posts if he wishes. The next step would be:
• Destination Selection: The user now decides can name his work of writing, and either post his writing to a blog, or merely save his writing to his computer's local drive. The option is provided because the user might not want to post all his writings, and also might not be online. If he selects his local drive, he chooses a name and location via normal Windows "Save File" interfaces that he has already internalized, and is done. If he selects the "Post to Blog" option, he proceeds to the next step:
• Blog-side saving: The user names and titles his posting, and hits "finish," and is done. If the user has not yet set up an account (first-time user), we provide a dialog for the user to enter his blog account's information. This will allow BlogPad to automatically log in and post blogs under his name, saving him the trouble of navigating through his blog's interface on top of his pen's interface. We aim to make processes as short as possible, while still automating commonly used tasks, so that we save the user time and make our application worth using. A complicated process would discourage users, and they likely would never attempt to use the application again. The one-time setting-up of his blog account completes the blog posting. If the user had selected the option of separating his writing into multiple blog postings, he is brought back to the page selection tool, and then proceeds through the same process for his next posting.

Our largest concerns were about the page-selection tool. It began as a modal interface, but after observing test-users and accounting for their input, we decided that we could improve that dialog in several ways, as discussed in our changes below.

What was left out and why

Our original plan intended to use OCR to capture the writing, but we did not find reliable and easy-to-use OCR software before we had to produce a design. We have not yet conducted research on usability of existing OCR software, but widespread figures show accuracy at the 70-90% range. A decision to add OCR capability to BlogPad and store blog posts as text depends on testing with real users, and user input on how useful OCR is even at 90% accuracy. It may be that users prefer images for 100% accuracy, as well as a personal touch.

As well, we are in the process of deciding whether or not we should leave out a current feature - the ability to split a writing into separate blog postings mid-page. Future versions may or may not allow for mid-page splitting, depending on user data on what would be easier to use. A simpler alternative might be to allow users to just pick page numbers, as picking specific spots mid-page on a small "preview" window may be ineffective anyway, and it is possible that users do not write straight enough to make a horizontal line an effective delineator. As well, many users naturally start writing on new pages - we believe this would be the preferred method, thus making mid-page splitting unneccessary. Again, a final decision rests upon testing with live users, and accomodating for their input.

Wizard of Oz used in this version

In this prototype, we used Wizard of Oz in two main modules. The "split writing into multiple blog postings" module is our hardest task, and not yet complete. If we choose to allow the functionality of splitting postings through the middle of pages, we will have to implement a tool capable of arbitrarily splitting and storing sections of images, which we do not yet have implemented. This tool is perhaps a lower priority, because as mentioned above, this functionality may be unneccessarily confusing for the user, in relation to the benefit gained by slightly higher precision when splitting into multiple blog posts.

The other Wizard of Oz instance is the connection between offline BlogPad and online blogs. We have not yet implemented a module for interfacing with LiveJournal or Blogger, but that module is coming soon.

---