Design Assignment: Cell Phone Music Player

From CS160 User Interfaces Sp09

Due: before class on February 18, 2009

10 Points

Overview

Your assignment is to design a music player interface for a discount cell phone. The music player has many of the common music player functions. The cell phone a simple set of interface features, which will constrain your design. You should try to minimize the number of button presses needed to access any particular function, but also consider usability for both novice and expert users in your design. You must sketch three alternative interface designs for the music player 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 for novice and expert users with the constraints of the phone hardware will be essential to successfully completing this assignment.

The phone you are designing for is depicted in the figure to the right. This phone has the following functionality:

Standard phone number pad (1-9,#,0,*)
Left and right buttons mounted under the screen
Talk/End button
Jog dial under the screen, above number pad (not clickable)
200x100 portrait orientation black/white screen

Note that these are the only functions of the phone that you may assume. The actual phone pictured (a Nokia 7110) may have a slightly different set of features in real life.

Your music player interface must support the following features:

play/pause
fast forward/rewind OR manual scan through the song (your choice)
next track/previous track
volume (0-10)
random playback (on/off)
repeat (on/off)

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 Wednesday, February 18. 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 18. You will present the sketches of your photocopier interface alternatives to a small group of your classmates in section. You will then work as a group to design a final music player interface and present this design to the rest of 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 music player 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 (1 pts)

Full points will be awarded if each design contains all of the required functionality, the interfaces don't use any unavailable interface features (extra buttons, roughly correct screen size, etc.), and all other instructions are followed.

Creativity and Quality of the Designs (3 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. Usability for both expert/novice users will also be evaluated.

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:

[[CellPhoneMusicPlayer-FirstNameLastName|Design Assignment: Cell Phone Music Player]]

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

Linked Submissions

[add comment]