Team Size:
Duration:
The major work in this course is a term project in user interface design,
prototyping,
and usability testing. It is divided into four separate assignments,
each with its own due date and grade. Assignment 1 will be the user interface
design and specification; Assignment 2 will be implementing a prototype
of your design; Assignment 3 will be evaluating your design with a few
users; and Assignment 4 will be revising your system based on the evaluation.
The "deliverables" for this project will be:
-
Assignment 1: Your design (in the form of the specifications and screen
mockups) and user guide.
-
Assignment 2: Your prototype implementaton.
-
Assignment 3: The results of your usability testing.
-
Assignment 4 Your revised implementation.
Keep in mind that the most important products are the designs and the test
results. The real purpose of the prototype is to make it possible to do
the user testing.
Assignment 1: Design
Completely design an interactive system for sending electronic mail. The
capabilities required are:
-
Enter a person's name (that is, their real name, not their email address)
and compose and send an email message to them.
-
Maintain a directory of people's names and email addresses, including the
ability to add, delete, modify, and look-up entries. (A single person's
name may have more than one email address associated with it).
Do not add any other functionality to your design.
You should write specifications of the user interface you design, using
the methodology we have studied (use the templates and examples at the
end of this handout). First, design the conceptual level, that is, the
set of objects and actions the user needs to know about in order to use
the system effectively. Then, the semantic level design describes each
function including its parameters, feedback, and potential error conditions.
The syntactic level design describes the syntax of the system, using one
or more state diagrams. The lexical level design gives the definitions
of the tokens.
In addition, you should write the user documentation--a short (3 pages
or less) new user's getting started guide which will tell the user how
to use the program. Assume that the program is already running--no discussion
of power switches, operating systems, etc.
Finally, prepare an analysis of the command sequence needed to carry
out each of several tasks, including the keystroke count of user actions
for each of the tasks. Count these categories of actions: keystroke, mouse
movement, mouse click (up/down is one action), hand movements between mouse
and keyboard. What conclusions can you draw about the design of the user
interface of this system from this "paper" analysis, before you implement
it?
Use the following tasks for this analysis. For each, assume that the
system is in its initial start-up state (but with a file of names and addresses
already loaded).
-
Compose and send a message to John Jumbo
-
Add an entry for someone named Ellie Elephant, whose email address is ellie@cs.tufts.edu
-
Locate Thomas Trunk (who is already in the list) and add an additional
email address, tommy@aol.com
List out the sequence of actions the user has to do for each, to accompany
the counts.
Assumptions
The user population for whom you are designing this system has used computers
and graphical user interfaces only casually in the past and never for any
of the tasks your system performs. Use of the system should be self-evident:
that is, there are no training courses or manuals, just the three-page
"How to get started ... " document. These users need to have the capability
that the system provides. Be sure that the simple things are still simple
to do, i.e., look-up and send mail must be fast and easy!
Assume that you have a personal computer with keyboard, mouse, and graphic
display. (In your prototype you can simulate this with a window on a bigger
machine.) You are connected to the email network through a mailer which
handles all of the details of properly routing your messages.
For simplicity in the implementation, you can assume that the user enters
the text of the message in continuous string, without any editing or backspacing
and that every message text will consist of exactly five words.
It is a good idea to design your interface in the abstract, trying not
to think about the specific features and limitations of the prototyping
language you will use.
Deliverables
For Assignment 1, you should hand in:
-
Your conceptual, semantic, syntactic, and lexical design specification
-
Your user documentation
-
Your task-command analysis
Assignment 2: Prototype
Now implement your user interface design in a prototype. We will discuss
Visual Basic as a prototyping language; if you are already familiar with
another language suitable for prototyping, such as Hypercard or TCL/TK,
you can try that instead, but you will be more on your own.
In any case, how you implement your prototype is not important. The
goal is to have a prototype that runs well enough that a user could sit
down and try out the system. It doesn't have to perform any of the actual
semantic functions, it should just go through the dialogues or screens
that make up the syntactic and lexical levels of the user interface. For
example, the semantics can use "canned" data; and when you send mail, nothing
really need get sent.
You should not invest energy in implementing a system with more functionality
than that in the assignment, or with on-line help, even if it was in your
original design. Instead, invest energy in making your interface as easy
to learn and use as possible, which means working with test users in the
usability testing phase of the project, making changes, and working with
more test users.
Deliverables
For Assignment 2, you should hand in:
-
Listing of your program
-
Several screen dumps of your prototype in operation
-
A short discussion of the differences between your original design and
your implementation, any limitations the software imposed on what you were
able to do.
Assignment 3: Usability Testing
Next you will perform a critical analysis of your interface using the "talking
out loud" methodology, with at least 5 users.
Prepare a list of tasks for the test users to perform (e.g., "Add an
entry to the list for your mother"). It should take no more than 10 minutes
for an experienced user to perform these tasks.
Now, get five friends (one at a time) to perform the tasks on the list
using your system. They need not be expert computer users, and they should
not be from this course. Give them the "getting started" documentation
you wrote and the list of tasks, start up the system, and ask them to perform
the tasks, while thinking aloud, that is, verbalize what they are thinking
as they try to figure out and use the system. Watch quietly and take notes
on problems they run into and possible solutions. In addition, ask each
user to fill out a debriefing questionnaire asking how they liked the system
and what problems or misunderstandings they had.
Deliverables
For Assignment 3, you should hand in:
-
The task list given to users
-
List of of your test users' names, computer backgrounds, addresses
-
Each user's filled out debriefing questionnaire
-
A summary of your observations of the users' actions and comments during
the sessions
Assignment 4: Redesign
After you have conducted your usability testing, modify your user interface
to try to eliminate some of the problems that you have observed. Some of
the changes might also be to the task list or to the instruction sheet,
to clarify wording problems
Submit the new design and implementation along with a discussion of
what problems you found and what you changed.
Deliverables
For Assignment 4, you should hand in:
-
Listing of your new program
-
Several screen dumps of your new prototype in operation
-
List of changes made to system after user testing. Discussion of changes
you decided not to make if any.
-
Analysis of your system's pros and cons, based on your users' experiences.
Include a discussion of both the strengths and weaknesses of your interface.
Some Templates and Examples for User Interface Specifications
Conceptual Level
The conceptual design identifies the set of objects and actions the user
needs to know about in order to use the system. Describe the conceptual
model in terms of objects, relations between objects, actions on objects,
and attributes of objects.
Identify the objects and actions that the user should know about, along
these lines:
Conceptual Model
Objects:
Object Attributes:
Object Relationships:
Actions on Objects:
Actions on Object Attributes:
Actions on Object Relationships:
Semantic Level
The semantic design documents the semantic specification for each action
you have identified in the conceptual design, plus any other actions which
are needed. The semantic specification includes a description of the function,
including its parameters, feedback, and potential error conditions.
Document each action from the conceptual design along these lines:
Function:
Parameters (Both explicit and implicit):
Description:
Feedback:
Errors:
Semantic Design Example
A typical semantic specification for a single function:
Function:
Add a symbol to the display
Parameters:
1. Which symbol type?
2. Where on the display?
Description:
An instance of the symbol is created and added to the display at the designated
position. The instance becomes the currently-selected object, such that
succeeding operations apply to it. The previous currently-selected object
is no longer selected.
Feedback:
The instance is drawn on the display, and is highlighted because it is
the currently-selected object. The previous currently-selected object is
de-highlighted.
Errors:
1. The symbol type is unknown (can be engineered out by use of a menu for
selecting symbol types).
2. The symbol position is outside the viewport (can be engineered out
by constraining positioning device to viewport).
Syntactic Level
Formally define the syntax using state diagrams. Start with a top-level
state diagram of the system, and document each sub-state including sequences
of user actions and feedback. Make sure you stay at the syntactic rather
than the lower lexical level.
Show a high-level state diagram of your system.
Show a detailed state diagram for each sub-state, including sequences
of user actions and feedback.
Syntactic Design Example
Please see state diagram on attached page.
Lexical Level
The lexical level design defines each of the actions identified in the
syntactic level (the "tokens") in terms of actual hardware or system operations.
Simply give the definition of each of your tokens.
(With thanks to John Silbert of George Washington University for assignments
on which parts of this assignment are based.)
Rob Jacob
Contributors Page
 |
Please send
comments and suggestions to the Booksite
Director
Last Updated:
12 March 2000 |
