Individual Coding Project

From CS160 User Interfaces Sp09

Due: before class on Mar 4, 2009

25 Points

Overview

The goal of this assignment is to introduce you to implementing user interfaces and event-based architectures. For this project, we encourage you to use Flex Builder to implement your project, although you are welcome to use another environment if you so choose. Note that Flex, and the Flash framework it is built upon, are useful tools for prototyping applications and distributing your prototypes over the web to users, and it should be well suited for implementing your final project.

You must complete this assignment individually and cannot work together while completing it. We will be checking that your code and implementation are unique to you.

Requirements

Your application should allow a user to manage the tasks for a project. It should have the following features:

Entry of new tasks and modification of existing tasks. Tasks have the following properties:
- Task Name
- Percentage Completed (0-100%)
- Start and End date
- Priority
- List of people assigned to the task (any number of people may be assigned to a task)
- URL related to the task
Checklist view
- Include a checkbox (or other mechanism) to automatically set the completion percentage to 100%
- You should be able to see the completion percentage
Timeline view
Magic Lens operating on at least one of the views

You should not require the user to completely specify tasks... Only the name, percentage completed, and end date should be required.

This assignment has both a design component and an implementation component. Start by planning your design for the interface and sketching some alternative designs. You must turn in sketches of your task entry/modification, checklist view, and timeline view (one design alternative for each is sufficient). You must also sketch three different magic lens ideas, and show how they apply to the checklist and/or timeline views. Choose a favorite magic lens idea to implement. As you are sketching, think of a representative task that you would expect users to perform with your preferred magic lens. When making your sketches, please keep in mind that they will be used in a study, as described below. You may want to tailor your sketches for use in such a study.

In section on Feb 25 or 26, you must bring your sketches. In small groups, you will perform a simple user study of your interface through its sketch. During this study, you will describe the representative task to your groupmates, and they will attempt to "use" your interface to complete the task. They will talk aloud as they use the interface, to help you understand any misconceptions that they may have with your design. More details on how this will work will be provided in section.

You must implement your design. We strongly encourage you to use Flex Builder. Information on getting started with this development environment is provided below, and we will be updating this information as the assignment progresses. We recommend that you begin implementation once you have finished your early sketches, however keep in mind that we also expect you make some modifications to your sketched interface on the basis of the user studies in section. To that end, you should architect your code to maximize the ease of changing the user interface. Use of the model-view-controller metaphor (to be described in lecture on Feb 23), to the extent possible, may be helpful in this respect.

Magic Lenses

Magic Lenses as a concept were briefly introduced in lecture on Wed, Feb 18. The concept was originally developed at Xerox PARC in the earlier 90's, and there are several research papers that you may want to look at for inspiration:

Eric A. Bier, Maureen C. Stone, Ken Pier, William Buxton, Tony D. DeRose. Toolglass and Magic Lenses: The See-Through Interface. Paper from SIGGRAPH '93.(html)
Eric A. Bier, Maureen C. Stone, Ken Fishkin, William Buxton, Thomas Baudel. A Taxonomy of See-Through Tools. Paper from SIGCHI '94. (html)
Stone, M. C., Fishkin, K. & Bier, E. A. (1994). The Movable Filter as a User Interface Tool. Proc. ACM CHI '94 Conference, 306-312. (html)

One example of a possible lens can be found in the lecture slides. This example shows how a lens might reveal additional data about a task not shown in the default view. See the view without the lens and the view using the lens.

You might also look at Jeff's web page magic lens concept for additional inspiration (requires Shockwave).

Getting Started

Instructions on acquiring the Flex Builder software and licenses. The login and password are the same as those used to access the readings.

The sample code may be downloaded here. The zip file includes starter code for the assignment as well as the example layouts seen in lecture. It also includes the three most pertinent Flex manuals and a document with pointers to especially relevant sections.

Tips

Setting up a Flex project with the example code

If you've been having trouble making the sample MXML files (either CS160Calendar or ExampleLayouts) executable, try the following:

Create a new Flex project (in Flex Builder, it's File -> New -> Flex Project)
Name it whatever you like, and make sure it's a Web Application and not a Desktop Application (i.e., runs in Flash Player, not Adobe AIR)
Delete the default MXML file in your project.
In your OS, copy the files in the "src" folder of CS160Calendar into the "src" folder of your new project.
In Flex Builder/Eclipse, right click on your project and click "Refresh".
Now right click on CS160Calendar.mxml and select "Set as Default Application".

Sample code from Feb. 25/26 Section

The code from the sections of Feb. 25/26 can be found here.

Miscellany

You don't need to use a database to store the tasks. You can store all the tasks internally in your Flex project.
This extension of the DataGrid class to incorporate checkboxes may prove useful.
The Flex Scheduling Framework from Adobe Labs may also prove useful. It's part of FlexLib, and documentation is here.
You may find the reflective function getQualifiedClassName useful for debugging. It's defined in flash.utils. The docs also contain a few other reflective functions that may help.
An updated CheckBoxDataGridApp has been uploaded. It's been extended with a button that adds a new name each time it's clicked. This is far from the best way of going about things, so look into this data provider tutorial for more information.
Many people seem to have run up against a problem of displaying text in the lensLayer Sprite in the sample code. An updated TimelineView.as can be found here which fixes this problem. The fix was to make the lensLayer a Canvas and have timelineView also extend Canvas instead of just UIComponent.

Deliverables

You will submit the following:

Sketches of your initial application design. These sketches must show initial designs for task entry/modification, the checklist and timeline views, and 3 alternative magic lenses. Clearly indicate which lens you chose to implement.
A write-up of the discount user study conducted in section describing:
- The task you asked your subjects to perform with your user interface.
- Results of the study, including anything you learned about your design.
- List of changes made in your implementation based on the study results.
A .zip file containing your project and a readme file with:
- your name
- instructions for building and running the code. E.g. anything we need to configure outside of the standard Flex Builder environment
- any issues or comments with the implementation

Link your files as described below.

Grading Guidelines

Design (10 Points)

Sketches of the initial design, including the 3 alternative magic lenses (3 points).
Creativity of the design (2 points).
Description of the user study, its results, and how you applied those results in your implementation. (5 points).

Implementation (15 Points)

A user interface for task entry and modification (2 points).
A checklist view showing tasks (3 points).
A timeline view also showing the tasks (4 points).
A magic lens that operates on at least one of the views (5 points).
Clearly documented code (1 point).

A precondition for any points in this part of the grade is code that compiles and runs. :)

Submission

Hand in Printout in Lecture

Print your assignment and hand it in at the beginning of lecture on March 2.

Creating a Wiki Page for this assignment

Begin by creating a new wiki page for this assignment. Go to your user page that you created when you made your account. You can get to it by typing the following URL into your browser:

http://vis.berkeley.edu/courses/cs160-sp09/wiki/index.php/User:FirstName_LastName

Replace FirstName and LastName with your real first and last names. This will take you to the page you created for yourself when you created your wiki account. If you have trouble accessing this page, please check that you created your wiki account properly.

Edit your user page to add a link to a new wiki page for this assignment. The wiki syntax should look like this:

[[ProjectManagement-FirstNameLastName|Project Management Magic Lens]]

Again replace FirstName and LastName with your name. Then click on the link and enter the information for your assignment.

Uploading Images

To upload images to the wiki, first create a link for the image of the form [[Image:image_name.jpg]] (replacing image_name.jpg with a unique image name for use by the server). This will create a link you can follow that will then allow you to upload the image. Alternatively, you can use the "Upload file" link in the toolbox to upload the image first, and then subsequently create a link to it on your wiki page.

You will also want to set the width of your images to a reasonable value (such as 600px). Use the following syntax to set the pixel width of your images [[Image:image_name.jpg|600px]].

Add Link to Your Finished Assignment

One you are finished editing the page, add a link to it here with your full name as the link text. The wiki syntax will look like this: *[[ProjectManagement-FirstNameLastName|FirstName LastName]].

Linked Submissions

[add comment]