CS 338: Graphical User Interfaces

Project Stage 2: Prototyping and Evaluation

(20 pts out of total 100 pts for project)

Due Tuesday, February 17, at the start of class

Bring *4* copies of interface sketch and implementation diagram to class

Write evaluation report during class and submit with other material at the end of class


In Stage 2, you will prototype your interface and then discuss your idea and prototype in small groups during a special class session. This stage allows you both to receive feedback on your own project as well as to see and evaluate other students' projects. At the end of the class session, you will turn in an evaluation report that integrates the comments you received with your proposal for revising your project. The ultimate goal of this stage is to improve both your project and other projects through team discussion and evaluation.

Interface Prototype  (15 pts)

In Stage 1, you came up with your project idea and specified roughly what your system needs to look like given the users' goals. In this stage, you will sketch out a prototype of your interface with two parts: an interface sketch and an implementation diagram.

The interface sketch is a paper sketch of what your interface looks like. This sketch should include any interface elements you will be producing -- that is, all windows, components, etc., with notes about their functionality whenever it is not apparent from the drawing. You may use a drawing program, but you should not use an IDE. The interface sketch is intended to convey your interface design to other group members to discuss advantages, disadvantages, and possible improvements; at the same time, the sketch provides a head start on the actual implementation and layout of the interface. All windows, panels, etc. should be represented in your sketches. Also, you should denote the control flow between windows/panels/etc. by means of graphic indications, such as arrows going from one screen to the next, or menus showing various options, etc. These sample storyboards serve as good examples of sketches that convey components, layout, and interaction between components (i.e., extra information the programmer needs to understand how the system should respond to user interaction).

The implementation diagram should be an arrow-block diagram denoting the Java classes in your implementation and the communication between them. In particular, each block in the diagram should represent a different class in your proposed code; please keep in mind the typical separation of model vs. view/controller when thinking about the information your system deals with vs. the GUI components that represent these data. Arrows in the diagram should be drawn between classes that communicate with each other, thus giving an overview of the entire code structure that you will implement. Note that we do not want to see actual code at this point; the evaluation concentrates on the high-level view of the code and not the actual code itself. The entire diagram should be limited to one page.

Interactive Session and Evaluation Report  (5 pts)

To prepare for the special interactive session, you should make *4* hardcopies of both your interface sketch and your implementation diagram and bring these to class. In the interactive session, we will break into small groups and each group will discuss each project for a given time using a set of evaluation heuristics. Then, at the end of class, each person will have some time to write an evaluation report summarizing (1) the comments received about their prototype, and (2) what to do to revise the interface and/or code to improve the final product. All students are expected to attend the entire class period so that they can participate in both giving and receiving comments for the entire group's projects.


At the end of the interactive session, you will hand in (1) printed hardcopies of your interface sketch and implementation diagram, and (2) your evaluation report written during class (the details of which will be given at the start of class). All materials will be collected at the end of class. Electronic submissions will not be accepted.


The material for this stage will be graded based on the completeness, depth, and quality of your interface sketch, implementation diagram, and evaluation report.