Design Assignment: Photocopier

From CS160 User Interfaces Sp09

Due: before class on February 9, 2009

10 Points

Overview

Your assignment is to design a touchscreen interface for a photocopier. The photocopier has several different functions, some of which are common to all copiers and some of which are more advanced. You must sketch three alternative interface designs for the photocopier and indicate which alternative you prefer.

Project Requirements

The goal of this assignment is to exercise your user interface design abilities. Creativity in balancing usability with the constraints of the interface will be essential to successfully completing this assignment.

You should design your interface for a touchscreen that is 5" in width and 3" in height. The resolution of the screen will not be defined, but you can assume that the screen will have at most 72 dpi. Remember that you are sketching your interface designs. We do not want to see designs that are accurate to the pixel-level.

Your photocopier interface must support the following functions:

Start/Stop Copying
Quantity of copies to make (1-100)
Light/Dark setting (Lightest-Lighter-Light-Neutral-Dark-Darker-Darkest)
Multiple paper sizes for input and output (Letter, Legal, Tabloid)
Automatic scaling when copying between different page sizes (on/off)
Manual scaling (25%-400%)
2-sided copying (1->1, 1->2, 2->1, 2->2)
Image repeat: This feature copies the input page and repeats it on the output page multiple times. A few different grids are possible (2x2,2x3,3x4,4x4)

For 2-sided copying, the (1->1, 1->2, 2->1, 2->2) refers to the various different modes of copying pages. A single-sided page may be copied to another single-sided page (1->1), a group of single-sided pages may be copied onto double-sided pages with the second single-sided page on the back of the first page (1->2), a double-sided page may be copied onto two single-sided pages (2->1), or double-sided pages may be copied onto double-sided pages (2->2). Note that you don't need to use my notation to describe this, but instead you may describe it to the user in any way you believe will be intuitive.

For image repeat, the (2x2,2x3,3x4,4x4) refers to the number and orientation of the repeated images on the generated page. For 2x3, the image copied from the input page would be repeated 6 total times on the output page, oriented in 2 columns and 3 rows.

All of these functions must be included in the user interface, but they do not need to be included on one screen. Make sure it is clear in your sketches how the user navigates between the various screens.

You must scan or take digital pictures of each of your sketches and link them to the wiki before class on Monday, February 9. Make sure that your images are scaled appropriately on your wiki page so that the instructors can easily view your assignment. You should also write a description of your designs in the wiki so that the instructors can understand your motivation and design rationale. Be sure to describe some advantages and disadvantages of each of your interface alternatives.

You must also bring your original sketches to your section on the week of February 9. You will present the sketches of your photocopier interface alternatives to a small group of your classmates in section. The section TA may select a few presentations to be given to the entire section.

Grading

Your assignment will be graded using the guidelines that follow:

Sketches (6 pts)

You receive 2 pts for each sketch for a design of the photocopier interface. You must sketch at least 3 clearly different alternate designs to receive full credit. Briefly describe the advantages and disadvantages of each design.

Completeness of the Designs (2 pts)

Full points will be awarded if each design contains all of the required functionality, the size of the touchscreen is appropriate (it doesn't need to be perfect), and all other instructions are followed.

Creativity and Quality of the Designs (2 pts)

The sketches will be evaluated on the basis of the creativity of your designs and the variation between each of your three design alternatives.

Submission

Hand in Printout in Section

Print your assignment and hand it in at the beginning of your section the week of Feb 9.

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:

[[Photocopier-FirstNameLastName|Design Assignment: Photocopier]]

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: *[[Photocopier-FirstNameLastName|FirstName LastName]]. Hit the edit button for this section to see how I created the link for my name.

Linked Submissions

[add comment]