CS190i Homework Assignment 4:
A Control Panel for a Digital Classroom
Posted: Thu, Feb. 9th
Due: Thu, Feb. 23rd (23:59:59)
Objective:
Usability-oriented design of a complex control
interface, using interface builders and coding.
Instructions:
You are hired as a usability expert to design the facility control panel for
a "digital class room". The
control panel is used by the instructor to control and monitor the status of
a set of equipment including two computers on the instructor's desk, 20
student computer screens, keyboards and mice, three projectors, and
lighting for different areas of the class room. The purpose is to make
the control panel easy to use even for novice users.
In particular, the following facilities need to be
managed:
- Two instructor computers, named Ying and
Yang, each with
separate screens, keyboard and mouse. The instructor is facing the
class when using these computers.
- 20 student computer screens, keyboards, and
mice. The computers are numbered from 1 to 20, and each computer
also has a name. Number and name are prominently displayed on the
computers. From 1 to 20 the names are: Alpha, Bravo, Charlie, Delta,
Echo, Foxtrot, Golf, Hotel, India, Juliet, Kilo, Lima, Mike,
November, Oscar, Papa, Quebec, Romeo, Sierra, Tango. There is one
computer on every desk in the classroom (potentially shared by two students, since a desk seats two students).
The desks are arranged in five rows of four, two on each side of a
middle aisle.
- There are three projectors, which each project
a computer display to large
whiteboards on the front wall and front-right corner.
From left to right (looking at the whiteboards), they are P1, P2,
and P3.
- There are 3 areas of lighting: 1) a set of "stage
lights", lighting the whiteboard and instructor area, which can be controlled
as a group continuously using a dimmer, 2) neon
lights above the student desks, which are controlled as a
group and have three lighting levels: off, low, and high, 3) one light in the entrance
area behind (further away from the whiteboards) the rows of student
desks, which is binary on/off.
A sketch of the classroom layout (not including lights)
The instructor should have full control of these
facilities:
- Sending the content of either instructor
computer's screen to all the students'
screens and/or any of the three projectors.
- Taking a student's screen content and sending
it to all the other students' screens and/or either instructor's
screen, and/or any of the three projectors.
- Taking over a student's keyboard and/or mouse, which means the keyboard input and/or the mouse input to the
student's computer will be from one of the two instructor's keyboard and/or mouse.
- Releasing
all control so each student has full control of his screen,
keyboard, and mouse.
- Controlling all lighting.
The instructor will run the control panel on one
of the two instructor computers. The instructor may want to refer to a
specific student computer by number or by name.
Like any professional piece of software, the
control panel needs to be able to run in different resolutions and
aspect ratios. In particular, we will test it running in an 800x600
pixel window, and in a window covering the vertical half of an XGA
resolution screen (512x768 pixels).
Obviously, you don't have to hook up your control
panel to actual facilities (phew!). Instead, you
may assume that every action on your control panel is magically
executed/mirrored in the real environment. You don't have to anticipate
synchronization errors or hardware failures. Assume that the state of
your control panel always reflects the real world. However, consider the
important design rules of visibility and feedback in your interface
design! The user should be able to determine the state of the room's settings
by looking at the interface alone - for example, do not depend on the actual
room light's brightness as feedback of the state. You must provide feedback
within the interface.
You need to submit documentation (basically a
"user's manual") for your control panel. See section on grading.
Development Environments:
Within certain limits, you are free to pick an
Interface Building tool/environment of your choice for this assignment. We
enforce certain conditions in order to assure fairness. Special-purpose UI
prototyping tools such as Macromedia Director or Flash cannot be used.
In particular, your control panel needs to be an
executable program, implemented in one of the following languages: Java, C,
or C++ and installed and tested on Fedora Core-2 Linux (CSIL computers). We do
highly recommend the use of Java & Swing, and one of the
interface builders that Steve will demonstrate in the discussion section. If you want to use any other
platform/environment, you have to get the instructor's/TA's explicit OK first.
Large portions of this assignment can be done with an
interface builder with no or just very little coding. However, you may solve
this assignment in any way you choose (including coding everything from
scratch if you so choose). All we will grade is the usability of your final
product (see section on grading).
Credit & Grading
Overview:
This is the last homework assignment before the class
project. It is worth 1.5 times the amount of each of the
previous assignments. It is a joint prototyping/implementation assignment.
To satisfy the prototyping requirement, you need to sketch two mock-up interfaces
for the system. These don't need to be fancy, but show that you have thought
about two different ways of laying out the GUI that could solve the problem.
You can draw them by hand or in your favorite painting / diagram / illustration
program - just turn in some sort of image for each of them. In general,
it is ideal for interface design to be an iterative process with consideration
of alternatives at each step.
To satisfy the implementation requirement, we will
grade the usability of the final solution you submit. Your final implementation
should be based on one of your mock-up illustrations.
Here is how we will evaluate and grade your
submissions:
Steve and I will both test each of the submissions
with a uniform test suite of example scenarios (not revealed to you
beforehand, but chosen in accordance of the above
specifications/requirements), similar to the way you tested movie services
in homework 2. We will read your user's manual before we use
the program. While testing your program, we will assess the following
usability measures:
- Time to learn / intuitiveness
- Speed of performance on the chosen tasks
- Retention over time: Without re-reading the
manual, we will re-visit the UI a few days after our first test and
evaluate how well we can still perform a sample task.
- User satisfaction ("Look and Feel",
elegance of design, adherence to design guidelines and principles)
We will record (and these will obviously influence
your grade):
- Unsupported (but required) functionality
- Errors/Inconsistencies discovered in the user
interface
Possible example scenario: the instructor wants to
display Chris's (one of the students) screen content on the instructor
computer Ying and also take over the mouse to point out some problem to
Chris. She either knows the name or number of Chris's computer or doesn't.
Let's say she doesn't. The instructor can ask Chris for that
information (inconvenient in class situations that require quietness), walk
over to the computer until she can read the label (time consuming), or can
try to find out from the control panel what the name/number is (requires
extra functionality in your program, potentially increasing its complexity).
You will have to make judgment calls on this and other possible scenarios.
On top of the above criteria, we will look at how well
your control panel scales to different window sizes. In particular, we will
test it with main window sizes of 800x600 pixels and 512x768 pixels. You do not
have to implement dynamic resizing, but you can for extra credit. You also do
not have to automatically detect the resolution - it is sufficient to have a
button / menu item / command that toggles between the two different layouts. We will
also take into account the quality of your documentation.
We will compile the results of our evaluations to a
value on a scale of raw points, determining the usability of each submission
relative to each other.
The quality of your submission relative to the quality
of the other submissions will influence your grade to a certain extent. We will ensure fair grading. If someone is
spending literally every free minute on improving their design, coming up
with the perfect interface (which we obviously encourage :)) doesn't mean
that someone with a reasonable design (albeit inferior to the aforementioned Überinterface) will
get a bad grade. We will orient ourselves loosely at the grade distribution for
previous assignments. Still, we would like to encourage healthy competition.
Since your relative performance will determine your grade, you shouldn't
discuss your best UI ideas with your class mates. This will be different for
your work on the class project, where groups will work on different problems
and where stimulating exchange, evaluation, and advice will be encouraged.
Submitting Your Homework
Submit your homework using the turnin command from your CSIL account:
% turnin hw4@cs190i
This homework assignment is
based in part on the project "Designing a Teaching Theater Control Panel" from the
companion web site of our text book (DTUI).