CS552. User Interface Design
Assignment 6. Usability Engineering
|Size of team:
||"Customized" version of template GUI code in a file called
Util.java, plus HTML files containing online documentation,
plus an HTML document that brief outlines what your usability engineering
|When it's due:
||Midnight on Monday, June 1
As in Assignment 2, you will make small changes to a template
that implements a Java interface to a "programmer's assistant" tool.
As before, you will only alter particular lines in the code, which
are clearly identified by comments.
This time, however, your interface must be designed specifically for
the needs of first-time programmers.
In addition to applying the guidelines on color and other design elements
that we have studied during the course, you must apply some of the
"discount" usability engineering techniques described by Jakob Nielsen
in his paper "Usability Engineering at a Discount," in Designing
and Using Human-Computer Interfaces and Knowledge Based Systems,
ed. G. Salvendy and M. J. Smith, Elsevier Science, 1989. That is, you
must find some beginning programming students and involve them in the
design of the interface. (Recall from the paper that it is not the
number of subjects that matters as much as your preparation of materials
before you actually meet with them. I recommend that you not try
to implement anything in Java until you have gathered multiple rounds of user
input; that is, stick with paper prototypes.)
Write a brief outline describing which procedures you actually
implemented, at what points in the design process you implemented
them, who the users were, and what you learned from them.
This may be in the form of a bullet list or outline, but must be
submitted as an HTML document.
Your interface will include the following:
Note that the interface still will not actually "do" anything except bring
- Color and font selections and menu and control button
organization that make it easy for beginning programmers
to "see," understand, and apply your interface. Use the same
list of basic functions
you had for Assignment 2, and cover the same design elements
as you did before. The only difference is that you are targeting
a distinct user audience (and hopefully, will be guided by user
- Status line messages that guide the user and clarify what
is happening to his/her program. A simple Java method invocation
makes it possible to update the contents of this message field.
Be sure you initialize it to something appropriate when the
interface first comes up.
- An indication of what would appear in the main window. A Java
method has been provided for displaying a string that explains
what the full implementation of your interface would show in this
window. For example, after the user opens a file for editing,
you might display the following text string: "Editable
version of source code will appear here. All edits will appear in
dark green to distinguish them from the original code."
- All appropriate File selection, error, warning, and information
dialogs, using the components provided for you. Examples are
shown of how to
invoke these dialogs and supply them with appropriate messages.
Note that you only have to implement the dialogs that would be
invoked when the user makes menu or button selections (not the
additional dialogs that might come if, for example, he/she tried
to exit without saving edits.
- "Dummy" versions of other dialogs or supplementary windows that
you may need, such as a window to open a connection to a remote
machine. An "empty" dialog has been provided for this. As with
the main window, you should provide a text string describing what
the full implementation would display in this window.
- Online help documentation. Because this interface is intended
for novice programmers, it is particularly important to have a
clear, comprehensive help facility. You will implement a subset
of the help facility, demonstrating
Specifics about which tool features you must describe are given below,
under "Specific Directions".
- what level of information will be provided
- how the user will access the information
- different documentation styles or "paths" through the
You must provide at least two types of help support. The first is
a step-by-step description (tutorial) on how to use the tool to
develop programs (at least in terms of the subset of features you
will document). The second is a list of "topics" reflecting
user goals and tasks (i.e., a "what I want to do" list showing
the variety of tasks that the tool can be applied for). This is
not the same as an index (which lists keywords or terms found in
Each type of help support must be accessible from the "Help" menu.
All you have to do is write a Web page (or set of pages) for each
of the two types, and supply the URL when the Help window is
popped up. (You are encouraged to think of other types of help
that would also be useful for this tool and this audience. You
don't have to implement them - just add a Help menu item and provide
a "dummy" Web page that describes what kind of help the user would
Click asst6.tar to download the assignment tarfile.
The tarfile, which will be available after May 25, contains all the assignment
files. Follow the same procedures to un-tar, build, and run the example code
as you did for Assignment 2.
Note that dialog controls have been added (see the "Dialogs" menu for
examples) and that an HTML "help viewer" is available (from the "Help"
You will implement the portion of the online help that describes
compiling, linking, and running the program
(Assume that the performance analyzer is prof(), gprof(), or any other
performance tool with which you are familiar.)
- in un-optimized form
- in optimized form
- as a preface to debugging
- as a preface to performance analysis
You're not responsible for describing the compiler, debugger, or
performance tool itself, but you must make it clear what steps
need to be taken in order to use these different procedures
correctly (for example, the fact that the debugger cannot work
with optimized code). Hopefully, the very design of your interface
will prevent most errors from occurring. For example, you could
pop up a warning dialog if the user tries to compile with both
optimization and debugging info enabled. In this case, you
wouldn't need to have much in the help file. If you didn't
trap the error, however, you'd have to have very explicit and
comprehensive info in the help file.
Collaborating with Others...
You may discuss the meaning of the tool's functions with any of your
classmates and you may collaborate in finding test users. Your strategy for
implementing usability engineering techniques and your interface
implementation must be unique, however.
To Hand In...
Use the hand-in form to submit the
location of a directory containing:
- your revised version of file
Util.java; this will be linked
with my copy of the appropriate class files to grade your solution.
- the HTML files that implement your online help facility; these can
be named whatever you like, as they will be invoked only from
- an HTML file called
ue-procs.html containing a bullet
list or outline describing what usability engineering procedures
you used in carrying out this assignment.