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
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.
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.