From CS160 User Interfaces Fa06

Contents 1 Member contribution 2 Problem and solution overview 3 Target user group 4 Tasks 4.1 Task 1 4.2 Task 2 4.3 Task 3 5 Design Evolution 6 Major Changes and Rationale: 6.1 Choice to go to blog site after post: 6.2 Page selector in “posting interface”: 6.2.1 Problem 1: Placement of Buttons 6.2.2 Problem 2: Selector Design 7 Most Valuable Evaluation Technique 8 Final UI Design 8.1 Functionality and user interface design: 8.2 Difficulty of our implementation 8.3 What was left unimplemented 8.3.1 Blogger 8.3.2 Partial Page Selection 8.4 What was left out and why 8.4.1 Gestures 8.5 Wizard of Oz required 9 Screen Shots 10 Powerpoint Slides 11 Final Poster 12 Source Code

Member contribution

• Tony Lai- authored 'Problem and solution overview', 'Target user group', parts of 'Design Evolution', and parts of 'Final Interface' of the report
• Charles Lee - authored Tasks, co-authored Problem and Solution Overview, Target User Group, parts of Design Evolution, parts of Final Interface, Oral Presentation
• Tom McClure - completed back-end of application - connected app to LiveJournal with APIs, presented Live Demo during Oral Presentation, parts of Design Evolution
• Vahe Oughourlian - cleaned up aspects of back-end of application, wiki editing: Final Interface Design (see wiki history for more details)

Problem and solution overview

Computer journaling, or "blogging" (a shortening of "web logging"), has become a popular pastime for many casual computer users. Once dismissed as a fad, blogging bridges the gap between private handwritten journals and full-blown published work.

But is blogging all that it could be? While blogging empowers people to instantly share their thoughts with a select community, many of the pen-and-paper affordances have been lost in the transition to computer-based journaling. Drawing and sketches, which can be done with ease using a pen and a notepad, are currently too time-consuming or too difficult for time-challenged and tech-challenged bloggers to scan and include in their posts.

Additionally, the inability to blog spontaneously -- without a networked computer at hand -- is a common blogger complaint. Who knows how many ideas have been lost during the delay between idea conception and internet connection? Bringing blogging back to its pen-and-paper journal roots revives the affordances of the pen-and-paper interface. 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 link the affordances of the Anoto Digital Pen to blogging with an interface pen-and-paper users would enjoy.

With BlogPad, we hope to combine the convenience of blogging and the affordances of the pen-and-paper interface. Using the Anoto pen system, bloggers can create or enhance their blog entries using the already familiar pen-and-paper interface, anytime, anywhere. There will no longer be delay between inspiration and blogging, no more limitations on what the blogger can write, draw, or sketch.

Target user group

Groups that will benefit from BlogPad include bloggers who spend a lot of time on the road, where there is limited access to internet-ready computers. Bloggers who would like to include drawings and sketches in their blogs will also find BlogPad useful. In addition, by supporting the use of the pen and paper interface, BlogPad enables journal-keepers who are not computer savvy to join the blogging community as well. We have intentionally designed the Blogpad interface around three example users chosen during our Contexual Inquiry, ranging from technological "power users" to users with limited exposure to computers. In fact, the streamlined process can be done in minutes from an internet cafe with a docking system, for users who do not actually own a computer.

Tasks

Task 1

Save writing to local computer as image

We believe this task is a perfect example of a representative easy task. This is a short and easy task, and gives the user a chance to be familiarized with the BlogPad interface. Also, this task goes over one of the most important features of BlogPad: storing physical writing to the computer as an image file.

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 as a single entry. This task is slightly harder than the first task, but our previous user studies suggested that users should not have trouble completing it.

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. The hardest step in this task is when the user has to use the 'posting interface' to select the beginning and end of the entries. After reviewing the results from our previous user studies, we believe that using checkboxes as the ‘posting interface’ selectors is the best choice. A more detailed discussion of our reasoning behind choosing checkboxes as our selector can be found in the Design Evolution section.

Design Evolution

Initial Sketches --> Low-fi Prototype

Because there was no user testing in between our initial sketches and the low-fi prototype, not many changes took place. However, as we were creating the low-fi prototype, we realized that the users will want a tool for navigating all the content that had ever been imported into the system. For this reason, we created a library window to be our "Main" screen display, and two other tabs to allow users access to other functionality - "Settings" and "About". The "Library" tab shows a list of all the documents that were ever imported to the system. The user can select the name of the document and view a document preview on the right of the window, as well as see when the writings were first imported. The "Settings" tab is where the user can setup his/her account information, including the choice of blog site, user name, password, the default privacy level of the blog and whether he/she wants to view the blog entry after posting. The "view blog entry after posting" feature eventually was moved after the user testing revealed it to be too far outside the user's locus of attention, so it was moved next to the finish button for the posting interface. The "About" tab simply returns information about BlogPad.

Low-fi Prototype --> Pilot Usability Test

Quite a few changes were made in between the low-fi prototype and the pilot usability test. First of all, the option to pre-set if the user would like to view the blog entry online after posting is no longer in the 'Settings' tab within the main window. Instead, it is now a pop up that appears after the post is completed (see 'major changes' for more information). Also, for the "Posting Interface", instead of using the marking the beginning and end of an entry by first clicking either 'start' or 'end', and then clicking on the corresponding area of the the page preview, user will now select pages to be posted as a single entry via checkboxes, detailed in the 'Major Changes' section of this report. Some of the names for buttons were also changed for clarity when users showed confusion or asked questions about features we intended to be natural.

Pilot Usability Test --> Final Prototype

This change included our current and final solution for the Page Selection Interface.

During the pilot usability test, user confusion was observed on several points. Fortunately, most of the issues that arose were addressed with some simple cosmetic fixes.

One of our tasks was to save an imported page to an image. We were alarmed to discover that the main screen of our application did not advertise this functionality plainly. The button that enabled this action was named "Publish..." -- not something that our pilot users associated with exporting an image.

• The quick fix: rename the button to a more unwieldy (but more user-friendly) "Publish Pages or Export to Image..."

Another source of confusion was a lack of feedback explaining the delay related to uploading the post to the user's blog account.

• The quick fix: Add a wait cursor.

Major Changes and Rationale:

Choice to go to blog site after post:

In our original design of the interface, the user was asked if he/she would like to activate the “open blog in browser window after posting” option during install-time in the form of a checkbox. However, 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 available options at all, much less remembering their selections. When the browser with the user's blog popped up after posting, the users were surprised by the action and had 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. As well, this allows more direct manipulation of the feature, and it is more intuitive to decide whether a pop-up is desired right before the pop-up is to be displayed. After the change, users that participated in the later user studies were not surprised by the user’s blog pop up after posting. Our initial attempt to tuck this feature away in settings was so that a frequently used feature would only have to be setup once, but we maintain this feature by remembering the user's last decision and presenting it as a default. Thus the user does not have to re-answer this question each time he sees it, but is not confused by a far-removed option.

Page selector in “posting interface”:

The choice for page selector in “posting interface” has plagued our group since our initial user evaluations. For background, this is the step in which users decide how much of their previous writing they wanted to put in one post, thus requiring some way to select the beginning and end of their post. We mulled over many ways that we could design this selector, such as modal buttons for the mouse, click and drag selection, changing the mouse icon to include instructions, having the first mouse click to mark as beginning and second mouse click to mark as end, and making speech balloons or tooltips with instructions. Our original design used modal "beginning"/"end" buttons to alter the mouse cursor's actions, and allow users to click on smaller previews of their writing.

Problem 1: Placement of Buttons

In our low-fi design for this particular action, we have the modal buttons on the right of the page previews (see below). However, during our Low-Fi Prototype interviews, it was noted as a major usability issue, since a lot of our users did not initially notice that the buttons were there, thus making it difficult and much slower to complete the "Hard Task". Our temporary solution was to reverse the left-right placement of the buttons and the previews - 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 would see the modal buttons first, bringing them into their locus of attention.

Problem 2: Selector Design

After the making the changes from low-fi prototype, we are still not convinced that our start and end entry selection method is suggestive through our interface design. As a result, we have decided to change the design of our selector. Instead of letting the users indicate where they would like the entry to start and end on the page preview, we thought that selecting which pages to be in the entry using checkbox is much more clear. The user studies result from the pilot study was encouraging, as none of the users had any trouble with the page selecting process using the checkbox system.

Most Valuable Evaluation Technique

The low-fi prototype testing is by far the most valuable evaluation technique that we have used for the project. Being the first prototype of our project, a lot of the basic design problems were revealed during the low-fi prototype testing, such as scenarios where users would 'click' on a certain option and our system would have no response to it, and the name for certain button is not descriptive enough. Also, because of the appearance of low-fi prototypes in general, participants tend to be able to focus more on basic design level problems rather than details such as the choice of color. The best part about low-fi prototype testing, though, is the fact that we were able to fix many of the problems that we have just discovered within minutes, and have the ‘system’ ready for the next participant. These quick fixes enabled us to get feedback on our latest design instead of hearing the same problem from all three participants and not know how our proposed fix would work out.

Final UI Design

Functionality and user interface design:

• Save writing in the hand-written journal to local computer as an image file

1. Dock the pen and click the "Import from Pen" button to the right. Then select the document to be saved from the page selection dialog. Click on the "Publish Pages or Export to Image..." button, which will lead them into the Post/Write-to-file Wizard. (Fig 1)

2. Next, choose how many pages of the writing were to be saved as image file by checking the checkboxes (default to be all checked)(Fig. 2)

3. Select the second radio button: post to selected entry to a file. (Fig. 3)

4. Choose the filename and directory where to save their post. Click "Finish", and the file will be saved. (Fig 4)

• Post writing to blog site using different privacy level ('friends', private', 'public')

1. Start BlogPad, and the main window will be displayed. Select the previously imported document for posting, then click on the "Publish Pages or Export to Image..." button. That will lead user to the Post/Write-to-file Wizard. (Fig. 1)

2. The next step is to choose the pages to export using the page selection tool. Check the checkboxes of the pages to be post as an entry (default to be all checked) (Fig. 2)

3. Selected the first radio button: post the selected entry to your blog. (Fig. 5)

4. Choose the Title for the blog entry and the date for the entry, which will be their default setting from the settings pane (Fig. 7). Change privacy level to the desire setting for this posting (Fig. 6). Click "Finish" button, and the entry will be posted to their blog. If selected the option to show the post on their blog after posting, a web browser will open with their blog page. (Fig. 8)

• Post all writing from a single import as a single post to the user's blog site

1. Start BlogPad, and the main window will be displayed. Dock pen and click the "Import from Pen" button to the right. Select the document for posting, then click on the "Publish Pages or Export to Image..." button. That will lead user to the Post/Write-to-file Wizard. (Fig. 1)

2. The next step is to choose the pages to export using the page selection tool. Check the checkboxes of the pages to be post as an entry (default to be all checked) (Fig. 2)

3. Selected the first radio button: post the selected entry to your blog. (Fig. 5)

4. Choose the Title for the blog entry, the date for the entry, and the privacy level for this posting (Fig. 6), which will be their default setting from the settings pane (Fig. 7). Click "Finish" button, and the entry will be posted to their blog. If selected the option to show the post on their blog after posting, a web browser will open with their blog page. (Fig. 8)

• Post writing from a single import as multiple blog entries

1. Dock the pen and click the "Import from Pen" button to the right. Select the document to be posted from the table and click on the "Publish Pages or Export to Image..." button, which will lead user into the Post/Write-to-file Wizard. (Fig. 1)

2. Check the checkboxes of the pages that will be posted as one entry (Fig. 2)

3. Selected the first radio button: post the selected entry to your blog. (Fig. 5)

4. Choose the Title for the blog entry, the date for the entry, and the privacy level for this posting (Fig. 6), which will be their default setting from the settings pane (Fig. 7). Click "Finish" button, and the entry will be posted to their blog. If selected the option to show the post on their blog after posting, a web browser will open with their blog page. (Fig. 8)

5. After the "Finish" button is clicked, a dialog will appear, asking the user if he or she would like to post another entry. Click yes, and repeat step 2, 3, and 4 for next post.

• View writings from previous imports

1. Start BlogPad, and the main window will be displayed. Select the previously imported document for posting, the preview of the page will be on the right side of the window. (Fig. 1)

Difficulty of our implementation

The page selection dialog quickly became the single, most difficult portion of our project, due to the multitude of features in this single dialog as well as the complexity of the features themselves.

The selection feature went through several revisions in the design process, but paramount in our design process was the idea of offering direct manipulation of the interface. The first feature, the selection of individual pages, emulates the Windows XP photo printing wizard. Checkboxes had to be overlayed on each picture (technically somewhat difficult) and create a listener for the checkboxes to reflect which pages had been selected.

Another concern was the fact that the preview images did not allow for detailed viewing of each entry which, if the user writes very small, it became difficult to discern between different pages. Thus we worked on a dynamic zooming solution. However, due to the complexity of such a system, we decided to spawn a child window that would show the individually zoomed page. This required page-zoom selection functionality, which we decided to implement as another overlay button.

What was left unimplemented

Blogger

Posting to Blogger was left unimplemented in this version for a number of reasons. Primarily the differences between the Livejournal system and the Blogger posting system was the reason for not implementing Blogger support. An example of the differences are that Blogger is essentially a public-only blogging system, whereas Livejournal allows for certain levels of privacy; therefore, we decided to implement the Livejournal API first, then the Blogger API if time allowed.

Partial Page Selection

Partial page selection was one of the more time-consuming and difficult portions of our design to implement. Page selection was not so difficult (checkboxes for each page image was relatively simple), but allowing the user to select a part of a page (as if he or she had stopped an entry in the middle of a page, and made an new entry on the same page) involved live image editing and selection indication.

Another aspect of the loss of this feature came from the difficulties, from an HCI standpoint, to make it obvious to the users how this feature worked and even that it was available. We went through several iterations of the design of this feature, and yet were unable to come up with a workable solution that made sense for most users.

The final reason came from the practical aspect that many journal writers tend to start a new entry at the top of a new page. This feature would really only apply to those users who decided to continue on the same page. We also felt that a user could easily adjust to this restriction by simply beginning new entries on a new page. If we were to continue this project, however, this would be one of the features that we would have liked to add, if only for the sake of completion.

What was left out and why

Gestures

In our exploration of the possibilities of what we wanted to allow the users to do, we considered, as one solution to the partial-page selection problem, to allow pen gestures as a way for a users to indicate the start and/or end of a journal entry. We discussed several possibilities, for instance the example below, that would allow a user to indicate the end of an entry.

Or, this possibility, which would allow a user to encapsulate an entry from start to finish.

However, both these possibilities, while exciting in the fact that it would have allowed us to recognize specific user input and utilize the R3 toolkit in that way, created a quite obvious problem from an integration standpoint: to force the user to make these unnatural gestures to begin and/or end their entries could only cause problems. Also, given that most people are forgetful, many would simply for get to start and/or end their entries, thus causing problems later, whereby they have no recourse to adjust where an entry starts or ends. If we were to offer the ability to add start and end markers even after an entry had been downloaded, this would cause no end of concurrency issues; therefore, the feature was left out entirely, at least in this form.

Wizard of Oz required

There is no Wizard of Oz required in our implementation of our design.

Screen Shots

Powerpoint Slides

Powerpoint Presentation

Final Poster

Final Poster

Source Code

cs160_tpim_blogpad_final.zip

---