InteractivePrototype-Group:4Corners

From CS160 User Interfaces Fa06

Jump to: navigation, search

1 Team Members and Roles
2 Prototype
3 Problem and Solution Overview
4 Tasks
5 Revised interface design
6 Prototype Overview
7 Prototype screenshots/scripts
8 PowerPoint Presentation Slides

[edit]

Team Members and Roles

Chen Chang:
- Write Up, initial work on presentation.
Maksim Lirov:
- Coding prototype.
Ramy Ghabrial:
- Completing write up, coding prototype.
Tabassum Khan:
- Coding prototype.

[edit]

Prototype

README: Image:4Corners ReadMe.txt
SOURCE: Image:4Corners.zip

Image:4Corners-update.zip

PAPER PDF: Image:Blog.pdf

[edit]

Problem and Solution Overview

The concept behind our Anoto-enchanced blogging application is to target personal bloggers who wish to share information about their lives and experiences with friends. We seek to address the fact that people are inherently accustomed to writing on paper (like old fashioned diaries for example) and are prone to forgetting their ideas if they are not jotted down on the spot. Many people have reduced their blogging frequency over time and for various reasons are not able to blog as often as they would like to. The main problem is essentially one of available time, as bloggers often need to take a chunk of time out of their busy schedules to sit down at a computer terminal to draft or publish an entry. Convenience and portability are the main issues to be resolved, and our solution seeks to address these facets by providing an easily accessible interface using the Anoto system for jotting down ideas anytime, anywhere. The inherent portability of digital pens and paper allow everything to be written down when inspiration strikes, then get uploaded to a computer once the blogger gets home, after which he can make use of editing functionalities and configuration options. Through our low-fidelity prototyping and user testing, we were able to gather the problems that users faced and areas that suggested improvement within our rough mock-up. Therefore, our interactive prototype is refined based on our user feedback from the testers.

[edit]

Tasks

[edit]

Overview

We were able to keep our tasks mostly unchanged from our low-fidelity prototype because the problems revealed from our user testing were minute and required basically small fixes or touch-ups rather than revamping the entire tasks. Our biggest problems in user testing were generally misunderstandings of the methods to perform the tasks, rather than the tasks themselves, so improvements mainly target the clarity of the information and directions presented. Thus, our three lo-fi tasks with assigned difficulty ratings of easy, medium, and hard required little modification.

[edit]

Easy - Task 1: Creating and modifying a blog entry

The goal of this task is to create a blog entry on Anoto paper and then later modify it on the provided graphical user interface. The user first writes an entry on Anoto paper and then checks the "save as draft" box. Then the pen is docked in the cradle and the data from the pen is downloaded to the computer in batched mode. The user can open up the 4Corners application and then view the "drafts" tab which will contain the most recent entry at the top of the page with its corresponding date stamp. The user then proceeds to modify the blog entry by clicking on the "edit" button before selecting text to change and right clicking to bring up a drop down menu which contains various options. Any of the options can be chosen and the selected text would be modified respectively. The user then finishes the task by clicking on the "cancel" or "save" button. We allowed for graceful unexpected behavior recovery in the event that the user chose to publish the entry instead of saving it as a draft on the paper interface -- the user can edit both drafts and published entries.

[edit]

Medium - Task 2: Changing default appearance of the entire blog

The goal of this task is to change the default appearance of the entire blog with configuration options available in the settings tab. The user clicks on the "settings" tab to be taken to a screen with four available options: Manage Account, Change Default Appearances, Security Settings, and Upload User Pictures. The user then selects the "Change Default Appearances" option and gets taken to a screen with options to change the background color, ink color, and stroke width. This screen contains a preview box where the most recent blog entry is displayed and it serves the purpose of providing the user with instant feedback of the selected option. The user makes a selection and the blog entry is changed respectively. The user completes the task by hitting the "save" button so that the blog homepage implements the changes desired.

[edit]

Hard - Task 3: Inserting an image into a blog entry

The goal of this task is to create a blog entry on paper with a box frame to later attach an image to the entry inside the desired boundary. The user first writes an entry and draws the box frame using the digital pen and paper. As with the first task, the pen is docked in the cradle and the data from the pen is downloaded to the computer in batched mode. The 4Corners application will allow the user to see the "drafts" tab containing the most recent entry at the top of the page with its corresponding date stamp. The area designated for image embedding will now be clickable and the user will click on the box to get a pop-up menu with options to select an image. The user can either select a local image on the computer or browse for an image from the web to open. Once done, the selected image will take the place of the box frame and the user can finish the task by publishing the blog entry.

[edit]

Revised interface design

[edit]

Changes as a result of low-fi testing and rationale behind the changes

Original Interface Design: Tabs labeled "Your Blog", "Drafts", "Friends", and "Settings"

Modified Interface Design: Tabs labeled "My Blog", "My Drafts", "My Friends Blogs", and "My Settings"

Through our low-fidelity prototyping and user testing, we found out that our users had some trouble in identifying what the tabs represented and what would be behind them once clicked on. To erase ambiguity, we decided to change all the tabs by adding the word "My" in front of their existing labels. We think that this change brings a more intimate feeling between the user and his or her blog as it clearly makes sure that the user understands he or she is under full control of all options. The stronger sense of ownership could make the user feel more at ease and less reluctant to play around with the possible customization options. Additionally, the "My Friends" label created some confusion as to whether it was for people who subscribed to your blog (wrong) or for people to whose blogs you subscribed (correct), so we changed that to "My Friends Blogs".

Original Interface Design: Draw a Hotspot Gesture to Denote Area to Embed Image

Modified Interface Design: Draw a Box Frame to Denote Area to Embed Image

In observing our users during testing of our third task, we observed that they had some difficulty in comprehending the directions in order to properly embed an image into their blog entry. The hotspot gesture did not prove to be successful for users trying it out for the very first time as they were lost and confused as to how to select the image and how to follow the instructions. In order to make this task easier, we propose the solution of having the user draw the entire box where he or she desired to have the image inserted. Then after the pen data is uploaded to the computer, the user can easily attach an image with the click of a button as the on screen display will show an obvious "click here to insert image" text label inside the area where the user drew the box frame.

Original Interface Design: No underlines under the links on the left side column under the Friends tab

Modified Interface Design: Added underlines under the links in the friends list under the Friends tab

User testing revealed slight flaws in the content behind our "Friends" tab. In particular, it raised questions as to what kind of functionality it presented and what kind of links were clickable. We think that by making it absolutely obvious what links are clickable, it also resolves the problems with questionable content on the page. In our modified interface design, we are adding underlines to all the names of the user's friends in the left column to make sure the user understands that they are clickable. Even if the user was still puzzled at this point, he or she could quickly experiment by clicking on the links on the page and then figure out the intended functionality. We don't even need to worry about graceful error handling as all the links are safe to click on and return in a circular fashion (i.e. you click on the name of a friend and then you are still on the exact same page with the only difference being the entries displayed are for that particular friend, left column remains unchanged and you can click on another friend's name).

Original Interface Design: Standard arrow mouse under the Friends tab

Modified Interface Design: Mouse listener to the Friends tab

In our interactive prototype while experimenting around with Swing and the code to drive the GUI, we decided to add a mouse listener under the Friends tab to make the list of friends of the user easier to manage. Now when the user moves the mouse arrow on top of one of the names in the list, the arrow will change to a hand symbol which make it obvious to the user that the names are clickable.

Original Interface Design: Plain tabs with standard labels

Modified Interface Design: Tabs all contain specific mouse-over text

In addition to changing all the tabs to add the word "My" in front of their existing labels, we opted for an alternative resolution to make the tabs representation as clear as possible. We decided to add mouse-over text to each of the tabs so that the user could get a description of what lies behind the tab before clicking on it simply by hovering the mouse over the tab. The mouse-over text is as follows: My Blog tab reads "My published blog entries", My Drafts tab reads "My unpublished blog entries", My Friends Blogs reads "Most recent blog entries from my friends blogs", My Settings reads "Customize my blog - account info, appearance, security, pictures". This change should resolve any ambiguities the user may have regarding the tabs and provide a greater comfort level in manipulating the blog interface.

Original Interface Design: Use the paper UI to designate an area to embed an image

Modified Interface Design: Same paper UI functionality to allow image embedding, also allows for GUI insertion of pictures

This isn't so much a change as it is an addition to functionality in our image insertion task. Before we only supported the ability to embed an image through designating an area on the paper UI and then selecting the actual picture on the computer itself once the pen was docked and data transferred. We decided to keep this paper UI portion the same but added the ability for the user to embed an image directly in the GUI itself. This adds more options for the user and is useful in the event the user intended to attach a picture but forgot about allocating an area on the paper.

[edit]

Sketches or scripts for unimplemented portions of the interface

Stroke width was left as an unimplemented portion of our interactive prototype interface because we have yet to figure out a way to increase the thickness of ink strokes rather than use the bold font feature because thats only an adjustment of one level. This applies to individual entries as well as global blog settings.

We decided to leave Hotspot image insertion as another unimplemented portion of our interactive prototype interface due to limitations in the current toolkit with regards to recognizing ink gestures. Being a difficult task in the first place, we sought help from the GSI's and they recommended against diving into Ron's code to have an attempt at figuring it out. As of now, we do have an alternative to the originally intended paperUI hotspot image embedding and that is to use the GUI itself to insert images rather than to deal with the paper and drawing box frames altogether.

The functionality of grabbing an image off the internet and inserting it into a blog entry also belongs to our hard task and we decided to leave it as an unimplemented portion of our interface. We did not have time to search for a suitable blogging service and look into interfacing our application with networking code. Besides time constraints, this is not a core feature of our intended application as we give the alternative of selecting an image off the hard drive of the local computer.

[edit]

Storyboards of tasks

Storyboard for Task 1: Creating and modifying a blog entry

Storyboard for Task 2: Changing the default appearance of the entire blog

Storyboard for Task 3: Inserting an image into a blog entry

[edit]

Prototype Overview

[edit]

Overview of the UI implemented

Our interactive prototype closely follows our low-fidelity prototype mock-ups and thus the layout is vastly similar. All functionality is done through batched processing with the digital pen and paper (i.e. all the pen strokes and data are transferred to the computer only after docking). We do not support streaming mode via bluetooth as that defeats the purpose and reason behind out project mission statement. The implemented user interface consists of a menu with 4 main tabs:

My Blog (Screenshot 1) - This is the default view of the application. It displays all the blog entries published by the user with date and time stamp headings. Under each blog entry, there is a link to the comments made by other bloggers on the user's blog entry as well as a link for the blogger to edit his or her entry. The user can view the comments by clicking on the link and the interface will display them. The user can edit the entry by clicking on the link and the interface will show the editing page.

My Drafts (Screenshot 2) - The "My Drafts" tab of the interface shows a listing of all the entries that were entered with the Anoto pen and were not marked for immediate publishing. The listing of entries is sorted by date headings with the full entries underneath each heading. Immediately underneath each draft entry are three buttons - "Insert Picture", "Edit", and "Publish". "Insert Picture" allows the user to embed an image into his or her blog entry through using the GUI and not having to have marked anything on the paper UI beforehand. (Screenshot 7) The "Edit" button allows for the manipulation of the digital pen strokes of the entry as well as the customization of the entry background and stroke parameters (thickness, color). (Screenshots 8,9,11,12) The "Publish" button publishes the particular entry to the blog. As soon as a draft entry is chosen for publishing, it is moved from the drafts list under the "My Drafts" tab to the submitted entry list under the "My Blog" tab.

My Friends Blogs (Screenshot 3) - This is the tab where the user has the option to view the recent updates of his or her friends blogs. This is essentially a list of subscriptions that will be managed by the user. The user can select a particular friend from the left hand column to view the blog entries published only by that person. These blog entries are sorted according to time stamp. All friends's names on the left hand column are underlined to be obvious clickable links, but as an extra assurance measure we have the user's mouse cursor change from the standard arrow pointer to the hand when the mouse is hovered over a link. (Screenshot 4)

My Settings (Screenshot 5) - The "My Settings" tab presents options to customize aspects of the blog entries. There are four clickable buttons under this tab and they are: "Manage Account", "Change Default Appearances", "Security settings", and "Upload Pictures". The "Change Default Appearances" option presents settings to customize the ink color, stroke width, and background color with a preview window underneath. When the user selects the option to change either background color or ink color, he or she gets a popup color palette box to choose the desired color. (Screenshot 11) Then at the preview window, the user gets the choice of either saving the change or to cancel and revert back to the previous state. (Screenshots 9,12) The "Manage Account", "Security Settings", and "Upload Pictures" options have not yet been implemented because they are not a part of our three tasks and due to obvious time constraints.

[edit]

What was left out and why

All connections to the internet (actual blogging, images from internet). We did not have time to search for a suitable blogging service and look into interfacing our application with networking code.
Friends functionality. This was not used in any of our tasks so it was not deemed important. Also, the exact nature of adding friends will end up requiring network functionality (for requesting/accepting friends, for example).
Automated saving/publishing (cannot tell when new xml has been generated). The pen generates an xml file every time it is docked. The xml file is saved inside the data directory of the R3 toolkit (PaperToolkit\penSynch\data\) after the strokes are transferred from the pen via batched mode and must be manually copied to the data directory under the 4Corners directory.
Hotspot image insertion. We could not figure out how to recognize ink gestures as this is obviously a hard task to implement. We thought of looking into Ron's code but the GSI's recommended against it.
Selecting ink to edit (cannot select specific inkstrokes). We were unable to implement ink stroke highlighting functionality when editing entries because we could not figure out how to select specific strokes based on the mouse position.
Although we did implement date headings for each entry, we did not set them to the specific date of each entry and instead just set each date heading to the current date. This was done because we didn't give it as high an importance level as the xml file loading and publishing functions. The date headings are implemented, just not set to the time of each individual entry.
Several options in the Settings tab - "Manage Account", "Security Settings", and "Upload Pictures" were not implemented. They were not implemented because they were not a part of our three tasks.
In the Edit panes of individual entries as well as the global blog settings, the "Stroke" function was not implemented, because we could not find a way to increase the thickness of ink strokes.
In the editing pane for both global and individual entry settings, the right-click menu doesn't have most of it's options implemented. The implemented options are "Insert Text" and "Ink Color". The other options - Copy, Cut, Paste, Undo, Delete - were not implemented because we could not figure out how to select individual components in the entry pane.

[edit]

Any wizard of oz techniques that are required to make it work

GUI image insertion instead of hotspot:

Instead of marking a hotspot on the paper interface, make use of the provided "Insert picture" button in "My Drafts".

Manual loading of xml files into application:

For this prototype, this is the sequence that the user must use to input an entry into the blog:

Write the entry on the 4Corners Blog form.
Put the Anoto pen into the cradle and load the strokes in batched mode to the computer.
The strokes xml file should be saved in PaperToolkit\penSynch\data\ (wherever the R3 directory is located). Please copy it into the data directory under the 4Corners project folder.