LoFi-Group:G

From CS160 User Interfaces Sp09

Contents 1 Team Members 2 Intro & Mission Statement 3 Paper Prototype 3.1 Home Screen 3.2 Choosing Category 3.3 Image Browsing 3.4 Image Modifying 3.5 Sketching Page 3.6 Finished 3.7 Save Prompt 3.8 All Components 3.9 Game Website 4 Video Prototype 5 Method 5.1 Participants 5.2 Environment 5.3 Tasks 5.4 Procedure 5.5 Test Measures 6 Results 7 Discussion 8 Appendix

Team Members

Chris Thompson -- Computer Simulator, Discussion Analyzer, Informed Consent Contact
Sum Sum Wong -- Paper Prototype, Video Making, Contributed in Experiment
Lucky Ongko -- Observer in the Experiment, Method Analyzer, Editor

Intro & Mission Statement

We'll be evaluating Doodle, the Collaborative Masterpiece Maker. The idea of the program is to let people draw new images if they so choose, or continue sketching atop other works-in-progress. Users who don't care to draw can also use the system to just browse images, which is a popular passtime of the computer-savvy generation. The most obvious societal benefit of Doodle, besides keeping doodlers entertained, is that it will create pictures for the public to use as they please. Because of the inherent collaborative nature of the drawing process(somebody starts one, somebody else improves it, and the process repeats until the system determines an image as a masterpiece), we expect that many well-received images will be generated, which will then be released to the public via the website aspect of the project. One of the more subtle tasks Doodle will perform is to subjectively rank the images in its system -- the image viewing/selection process is somewhat randomized and choice based (a user will have to decide between two pictures at multiple steps, and will generally pick the ones they prefer), we will be able to build a relative popularity ranking for each image in the system. This means that not only will Doodle create new art, but it will be able to determine what good art is according to the userbase. Therefore, the mission of our project is thus: To entertain users by providing them with enjoyable imagery, allow them to contribute to drawings with a chance of creating something renowned, and to generally only provide pictures that the users will enjoy (determined via an internal ranking system).

Paper Prototype

Home Screen

The application starts with a welcome page that allows user to login(optional) and start browsing/creating images.

Choosing Category

After user pressing the "START" button in the welcome screen, the user will come to the category choosing screen that can let users to choose with category of artwork they want to browe or work on. The "Popular" category means the user does not care about the category.

Image Browsing

User can start browsing images after they chose the catagory from the above screen. By clicking the blank image on the left upper corner, user can start their own sketch. Alternatively, user can choose the right bottom corner picture if they want to either continue browsing images or continue other people's artwork.

Image Modifying

If user choose to modify other people's work, the below page will come up to the screen. User can choose between modifying this image, continue browsing other images, and view commentary related this image.

Sketching Page

If user want to either start a new sketch or edit other's work, this screen will eventually come up. The screen is for users to make/modify pictures using different tools and colors provided. Undo and revert buttons are also available in case user made any mistakes.

Finished

When user is finished with the work, this screen will come up. User can then make the title and discription of the image he/she made.

Save Prompt

This screen will show up when user clicks "DONE" from the above screen. This screen basically let user to save the image he/she made to the hard-disk. User can either type the address he/she wants the image to be saved, or he/she can click "browse" to look for the directory. Also, user can choose "cancel" if he/she does not want to save the picture.

All Components

This is a scan of all components used in the video prototype.

Game Website

This is a scan of the design of the website.

Video Prototype

• Task 1: Browsing an image - Easy
  
• Task 2: Creating new sketch - Medium
  
• Task 3: Continuing other people's drawing - Hard
  

The video prototype was an interesting experiment. Because we wanted to do something a little different and have it looks as professional and realistic (or at least close to our intended target) as possible, we decided not to employ a regular video camera of one of us acting as a computer. This would capture all sorts of undesirables -- hands moving around, shuffling about looking for paper, somebody writing in with a pencil where they should be typing or clicking. Instead, we took the components of our low fidelity paper prototype and created a stop motion video with them, enabling us to showcase all the intended features of our program with fewer of the side effects of the prototypical nature of the components. While we are really satisfied with the results, the process turned out to be deviously difficult! Stop motion is a simple enough idea, but even (especially) things like movement of the mouse cursor can take a very long time when you have to adjust, take a picture, save it, and repeat in such small but frequent intervals. Also, we found it hard to capture the process of typing and drawing since writing on paper can easily move and ruin the entire set-up(especially small cursors and dark frames that we could not stick on the set-up since they should be movable). This created an excellent visual simulation, we feel, since it actually fooled one of our friends into thinking the finished result was video of an actual computer program, and also allowed us to better simulate a few of the tools than a regular pencil would (or at least create the illusion of them, such as typing). However, it is a bit brisk in retrospect, as everything seemed to take a lot longer while working it out. The entire process of each task is showcased, but at a rather quick pace which doesn't necessarily allow for a viewer to take in everything that's going on. However, if you are familiar with the prototype and have read the method section, then all should be clear as to what's going on.

Method

Participants

For this prototyping, we selected three college students within our same age group. We figure that those of our generation are going to be very comfortable using computers, and match the target audience of our program. Additionally, we tried to find people of varied artistic backgrounds (either traditional or electronic).

• Interviewee 1 is a third year Philosophy major. She likes to sketch in her spare time, is internet savvy, and also enjoys browsing art either on the internet or occasionally at museums.
• Interviewee 2 is a third year EECS major. He has interest in browsing and creating computer graphics and a high proficiency with computers. Mainly uses his computer to do school works and computer graphics.
• Interviewee 3 is a fourth year EECS major. He has high proficiency with computers and uses computers mainly to play games, do school works and programming.

Environment

We did our experiment in one of the study room in Doe library. We make appointments with our interviewee and tell them where and when they should come. As the study room is in a closed environment, we are able to make the interviewee feel comfortable and to focus on the experiment without any disturbance. The “Computer” sits down beside the interviewee, while the Facilitator sits across the table in front of the interviewee and the Observer sits beside the Facilitator. We use the paper prototype as it is shown in the previous section, so the setup is just putting the paper prototype in the right order.

Tasks

Easy Task: Selecting a picture
This is the most basic task the user can perform; therefore we want to ensure that this task is intuitive for any users with any skill level. Basic steps to complete this task:
1. In the “Home” screen, click “Start” (the crown button)
2. Choose from different boxes by clicking on the desired “Category”
3. Choose the desired picture by clicking on it

Medium Task: Creating your own sketch
By choosing a blank page, the user can start their sketch from scratch. The user can employ their imagination in creating a sketch by using different tools in the sketching page. After finish sketching, the user needs to supply a title for their sketch and given an option to save their sketch to local hard disk. This task is essential if the user would like to enjoy the game to the fullest. Basic steps to complete this task:
1. In the “Home” screen, click “Start” (the crown button)
2. Choose from different boxes by clicking on the desired “Category”
3. Choose the blank box by clicking on it to start sketching
4. In the sketching page, the user can use different tools provided to create their sketch
5. Click “Done” to finish sketching
6. Supply a title and a description (optional) for the sketch
7. A box appears that offer the user to save their sketch to their local hard disk and the user need to supply the location to save their sketch
8. Click “Save” to save sketch to their local hard disk

Hard Task: Continuing other user’s sketch
During this task, the user will need to browse through images, select the one they want to sketch on, and employ their imagination to add value to an existing sketch. This task is important as it will challenge the user in creating a better form of sketch to an existing one. Following are the outline of the task:
1. In the “Home” screen, click “Start” (the crown button)
2. Choose from different boxes by clicking on the desired “Category”
3. Browse different sketches by clicking the desired sketch
4. Select “Doodle This” to go to the sketching page
5. In the sketching page, the user can use different tools provided to create their sketch
6. Click “Done” to finish sketching
7. Supply a title and a description (optional) for the sketch
8. A box appears that offer the user to save their sketch to their local hard disk and the user need to supply the location to save their sketch
9. Click “Save” to save sketch to their local hard disk

Procedure

Roles

• Chris Thompson: Computer
• Sum Sum Wong: Greeter and Facilitator
• Lucky Ongko: Observer

1. Before we start the interview session, the computer will sort out the elements of the prototype, starting from the welcome screen to the end screen.
2. As the interviewee come, the greeter welcomed the interviewee, give a brief explanation of the purpose of the interview and handed the interviewee an informed consent form to review and sign.
3. After the interviewee filled in the consent form, the facilitator explained the purpose and objective of the game and give direction on how to navigate the game.
4. The facilitator then asked the interviewee to walk through the game once to familiarize with the mechanical of the game and ask the interviewee if they have any questions regarding the mechanical aspect of the game.
5. The facilitator will then ask the interviewee to accomplished the three tasks, while the computer change the interface according to the interviewee actions and the observer keep track of the elapsed time and critical incidents that happen during the interview.
6. After completing all the three tasks, we asked if the interviewee has more questions or comments or improvement about the design and the interface of the game.
7. Upon completing the tasks and sounding their opinion about the game, we thanked the interviewee for their participation and allowed them to leave.

Test Measures

As we want to measure our low fidelity prototype’s ease of use, we decided to quantitatively measure our test using the elapsed time in completing the three tasks of each interviewee. Because of the uniqueness of our game, what we measure is the time of the interviewee navigating from the “Home” screen until the sketching page plus the time elapsed when the interviewee finish sketching until the time the interviewee decided to save their sketch or not. Though in the real game users can take however much of their time in making their sketches, we didn't omit the time the interviewee sketch as we want to maintain the accuracy of our interview. And to measure the fun factor and enjoyment of our game, we decided to qualitatively measure our test by observing the facial expression of the interviewee and the questions and comments that they give during or after the test.

Results

For the easy task, selecting a picture, the average time required for the interviewees to complete the task are 24 seconds. Though it is a relatively short amount of time for the simple task, one of the interviewee shows a confused expression as there is no instruction on what to do given the first two sketches, while the other two inspect then intuitively click on one of the two sketches.

For the medium task, creating their own sketch, the average time required to complete the task is 68 seconds. As the interviewees become more familiar with the interface, it took less time for them to navigate the first few interfaces that they have encounter. One of the interviewee noted that our “Save” box is not standardized and suggest that we follow the available standard.

For the hard task, continuing other user’s sketch, the average time to complete the task is 149 seconds. Though the interviewees is familiar with the first few interfaces, they are confronted with more sketches to choose from and it take them some time to decide which one they want to choose. They are also face with a new interface, the image modifying page, which took them a second or two to select their course of action.

In summary, there was a little bit of initial confusion about how the motivation for the project, probably due to the lo-fi nature of the prototype. Also, some things that we thought were intuitive (the selection process, for instance) might need a little extra explanation or prompting, as one of our interviewee felt a little confused when just presented with a pair of images for the first time. Most of the image creation/editing screen was well-received, as the intended tools were fairly uniform and standardized, although because of the nature of the simulation many of these drawing tools didn't function. There were multiple cosmetic changes suggested, mostly to conform with universal standards but also a few things specific to our application. Also, although the website supplement to our application wasn't focused on very much in this prototype, it was the subject of a fair amount of interest.

Discussion

We have a whole bunch of ideas for our project thanks to this. The user interface will be receiving a facelift, which will make things easier and more productive for everyone. We'll make sure that all goals are clearer and more obvious, that way confusion doesn't chase away any potential users. We will also be changing how we handle new images -- originally we were going to have blank images pop up a medium percent of the time during the selection process, but now it seems like it might be a better idea to include New Image as a category at the beginning of the selection process, so a user can make a new image whenever they desire and not have to fish around or guess about it.

We'll also be adding more information and options having to do with each individual process into our program. One thing, which we had been discussing amongst ourselves, is to include a forum topic style commentary along with each image (and its evolutions) so that people can discuss an image and track its progress. Since something similar was brought up by multiple users, we will be incorporating that into our system. In general, we will have more information about the history, background, and flavor of an image available. Perhaps by right clicking on one of the choices, the user will be able to select to either view the forum discussion, see the detailed description, or the revision history of a picture. Also, names will probably be visible alongside their corresponding picture at each step of the selection process. Another thing that came up and seems like a very good idea is to include a small tutorial button from either the main screen or the main help screen -- just a walkthrough of the process for first time users so that they can become more familiar with the system and not miss out on any of the subtleties involved.

Because of the amount of interest we received about the website (social) aspect of our application, we'll be expanding it. Because of the popularity and interest of social networking, we will attempt to add relevant features which incorporate this to the website. Users will be able to see the works contributed to by other users, and a list of all recent edits made to individual works. We'll also do a better job of integrating the web and application aspects of the project, so that one links directly to the other and vice versa (such as the ability to select an image and view its history).

Also, although this idea is still under contemplation, it was suggested that people be able to mark some revisions of works as private, meaning they do not show up in the rotation. We might make something similar available instead -- the ability to save a modified image to disk without saving it to the network. We're also considering the idea of allowing for user profiles (either public or private) that are accessible from within the application, but the ramifications of this are still under consideration.

Considering the large and sometimes fundamental changes we intend to adopt based on this feedback, we now understand why low-fi prototyping is a very important process. Without having spent any time creating a concrete example, which would now be obsolete, we have discovered problems and uncovered innovations brought about merely by gradeschool construction techniques and a third party userbase.

Appendix

Informed Consent Form Group G

Demo Script
Welcome to Doodle, the program that lets you view, rank, and create masterpieces in just a few minutes at a time! When you first start, you're presented with this splash screen. The login and password fields are optional, but let's create an account real quick. Just try typing in any name you wish to use, and leave the password blank. If that name is in use, you will be informed that the name is taken. If it's free, you will be prompted to create an account. Choose yes, then select a password (and confirm it by retyping it). Now you've got your own account. Let's see what kind of info we can gain about that, by clicking the little website link in the corner. On the main page, you can see the Picture of the Day. Click on it for a little more information... There's a list with its contributors, title, and the commentary associated. Click on 'Rank' from the menu. You'll notice that your new account is at the bottom, with 0 Painter Points. These will be accumulated as you Doodle, and will allow you to unlock more ink and a few additional benefits. You can also browse the Masterpiece Gallery by clicking on Masterpieces, then choosing a category and browsing at your leisure. But for now, let's close that internet window and go back to the main program. Enter the password associated with the login you created, press Start, and prepare to Doodle.

Interview Feedback
-- Interviewee 1 --

• Start button not obvious enough (didn't look like a standard button or very 3D in lo-fi prototype). (2)
  
• Make the selection process more obvious (why are there just two images over and over?) (3)
  
• Have a tooltip or other description about what buttons like Revert do. (2)
  
• Place the title above the picture in the final description screen. (2)
  
• Perhaps add an intermediate screen after the file is saved, with links to the website or just a prompt about starting over. *Something to add continuity. (4)
  
• Add New Image as a category, instead of a random happening. (3)
  
• Make it more obvious that Save to HD is what's happening. (2)
  
• Have some kind of option to save images to website/profile? (4)
  
• Add a way to check the most recent activity on your pictures. (4)
  
• Perhaps include this history on the profile portion of the website, for all of your drawings. This makes it more interesting and engaging. (3)

-- Interviewee 2 --

• The "Popular" category is weird compare to other catogories (2)
  
• The "START" button in welcome screen is not very visible (3)
  
• The register account function is too invisible (4)
  
• State the login is optional clearer (3)
  
• Make the link to website more visible (4)
  
• The instruction is not very clear for people who want to browse more images and edit other people's work (3)
  
• The Home icon at the left bottom corner of some screens is unclear since we do not know if it will lead to welcome screen or category or something else (3)
  
• Cancel button in the save screen is not clear enough. A pop-up screen can show up to ask if the user want to save or not after user is done with making an image. If the user clicked "save" in the pop-up screen, then show the save screen now, otherwise, the save screen should not show up (3)
  

-- Interviewee 3 --

• A way so other user can comment on each picture and see other people comment’s on the picture (3)
  
• An option in the category to directly start a blank picture (3)
  
• An option to set the picture drawn as public or private (if it’s private, the drawing will not be distributed) (4)
  
• Add their own category (3)
  
• The picture title and description during the selection process (2)
  
• Link for the pictures to be used in the users website (1)
  
• Add a tutorial screen explaining reward/achievement system and the score rating system (2)
  
• A profile page for the user and the pictures the user has done (also an option to make it private or public) (4)
  

---