CS 6751 -- Human-Computer Interface

Assignment 2: Interface Design

Due February 21

Objectives

The objective of this assignment is to combine the various skills and techniques that you have learned in this course to a user interface design problem. In Assignment 1 a methodology for finding out information about the user population was practiced. The assignment also provided practice in observing users and relating the user's behavior to the design of your proposed interface. Assignment 2 asks you to apply all of these skills to making a prototype of your proposed interface.

The assignment also has a sub-objective, that of giving practice in developing a "good" user interface within the constraints of the design environment. The classic constraint in user interface design is the small amount of time allowed to build an acceptable interface for the user. Due dates for this assignment impose a similar constraint requiring decisions about which user interface features can be included in the design given the minimal amount of time available. A second constraint--as common as the first--is the constraints of the external user, the software and the hardware environments. User interface designs need to adapt to the history of prior interfaces, to the consistency requirements of similar interfaces and to the limitations of the hardware and development software that will be used. To simulate a portion of these constraints, you are being asked to design a prototype of your system using a graphical user interface builder tool.

Directions

Your basic task is to design a prototype of your proposed user interface. You can use any available graphical user interface prototyping tool that you would like, for example, Hypercard, Visual Basic, UIMX, Director, etc. In class you will learn about Sun's dtbuilder system, so it is clearly an option. You should be able to get much of the interface functionality working, but clearly you will not be able to implement all back-end application functionality. You should be able to build and connect to enough of the application functionality to be able to conduct a usability evaluation with benchmark tasks in the next assingment.

You are expected to apply the information you have gathered about your intended user in the two previous assignments to your design. The assignment will have 7 steps. They are:

  1. Develop a set of design criteria about what the interface should provide to its users. This is more than the typical requirements list for software design. In addition to describing the functions the system should perform, the design criteria should contain user information. For example, if you were designing a calendar system, your design criteria might be, "have appointment book open to current date because this is the date that is most frequently accessed by the user." Use the information from Assignments 1 and 2 to aid in developing the design criteria.
  2. Sketch out your design on paper through mock-ups and storyboards. You may sketch out more than one design. For each design, be sure that it is described in enough detail so that users can see screen display changes and individual inputs that they would need to make if they were using the designed interface.
  3. Elicit user input and changes on your design. You can query your friends, parents, colleagues, or significant others.
  4. Repeat steps 2 and 3, adapting your design to match what you have learned about the design from showing it to potential users.
  5. Learn a particular GUI builder tool well enough to develop screen layouts for your design. You are not being asked to build a complete implementation of your design, but enough of a prototype to demonstrate the design to users, and to run basic benchmark tasks against.
  6. Implement your design using a GUI builder tool and/or GUI toolkit.
  7. Write up you design including a description of the processes you went through in making the design follow the needs and psychology of the user.

What you should turn in

Turn in the same style (from the first assignment) 10-page maximum HTML write-up on the design process that was conducted. The write-up should include, in order, the following items:
  1. A short recap of your target application.
  2. A description of the design criteria and rationale for your new system. Utilize the knowledge gained from Assignment 1 and describe how that influenced your design.
  3. A summary of the design process you utilized, the mock-ups and storyboards generated along the way, and the choices you made.
  4. A description of the final design. Please use screen shots and figures to help illustrate how the interface works.
  5. A conclusion describing what is good about your design and what you are not very happy with but have had to include in the design given the constraints of the design problem and the trade-off decisions you needed to make.

    IMPORTANT HINT: The previous assignment prepared you for this design assignment. Look back at the evaluations you have performed and transfer the concepts in these evaluations to assessing your design.

Note that the included storyboards, mock-ups, system pictures, etc., can be put in an appendix and they need not count against your 10 pages.

Also turn in one page that lists the file and path to your interface design if it is here on our UNIX system (otherwise, let us know what you did and on what platform). Tell us whether this is a description file, an executable, both, other, etc.

You will be graded on the quality of your user interface, the creativeness of your design in solving the user interface problems you encountered and your ability to incorporate into the design process the user data you collected in Assignment 1.

After you turn in your assignment, we will be scheduling 15 minute demo sessions when your group will demonstrate your interface to the instructor and TA. This will be your chance to give us a feel for the interactive nature of your design, and to see its functionality in more detail.