Chapter 12

Chapter 12

User Interface Design

CHAPTER OVERVIEW AND COMMENTS

Virtually all modern computer-based systems (and many legacy systems that are reengineered) have some type of interactive user interface, and most require reasonably sophisticated interface designs. It is easy for programmers to focus on splashy new technologies and ignore the fact that functionality and usability (not innovation) is what users are most concerned about.

This chapter outlines the design processes for software user interfaces. One key point to get across to students is that understanding the user’s task goals and preferred methods of reaching them is essential to good interface design. A second important point is that the user interface should be designed early in the software development process (and not as an after thought). Having students formally evaluate each other’s interfaces using the usability checklist from the SEPA web site is a worthwhile course activity.

12.1  The Golden Rules

This section discusses three principles of user interface design that students should be encouraged to follow as they build their own software projects. The first is to place the user in control (which means have the computer interface support the user’s understanding of a task and do not force the user to follow the computer's way of doing things). The second (reduce the user’s memory load) means place all necessary information in the screen at the same time. The third is consistency of form and behavior. It is sometimes good to bring in commercial software and try to see how well the interface designers seem to have followed these guidelines.

12.2  User Interface Analysis and Design

This section presents the notion that user interface design is really the process of reconciling different models (the user model, a design model, a mental model, and an implementation model) of the user interface. The point to get across to students is that the overall goal of the interface design process is to understand the user and the user’s task so well that the implementation model will match the user’s perception of the of the system. This will make the system easy to learn and easy to use. If your course is more than one semester in length, having students build user interfaces for real customers can be a very instructive activity for them.

12.3  Interface Analysis

In order to understand the user’s perception of the interface, a variety of different information sources are noted. Each of these (Section 12.3.1) should be discussed so that the student understand how each is used and how they differ from one another. The questions noted in this section should be asked of every user type that will interact with the software via the interface.

Section 12.3.2 consider task analysis and modeling. The questions noted at the beginning of this section are answered as part of this task. This is an important section and you should dedicate lecture time to each of the techniques noted here—use-cases, task elaboration, object elaboration, workflow analysis, and hierarchical representation.

Use-cases provide worthwhile input for task analysis. If time permits, have your students write a set of use-cases that describe how they would like to interact with a futuristic car that drives itself. Don’t get hung up on the technology that accomplishes this—assume it exists. Just address how to be interact with the car when it is standing still and moving.

Elaboration (Section 12.3.2) is pivotal for many software engineering activities. Discuss task and object elaboration for a user interface and elaborate on the tasks for the futuristic car example. Do the same for the workflow.

12.4  Interface Design Steps

Regardless of the technique used to create the user task model, a model describing the users' actions using the operators (keys pressed, mouse operations, menu selections, icon manipulations, commands typed) available in the proposed computer system should be built for each usage scenario. Students will find it very instructive to story board prototypes for task scenarios using the operators from familiar user interfaces. These paper prototypes can be “tested” quickly and inexpensively.

A number of UI design patterns are discussed in Section 12.4.2. Have your student visit www.hcipatterns.org to explore the design patterns available for user interfaces. Also, have them find actual interfaces that exhibit the patterns provided as examples in this section.

You should dedicate some lecture time to the design issues noted in Section 12.4.3. In many cases features like help facilities, accessibility, internationalization, and error handling are design afterthoughts. Be sure your students understand that these features can be as important as other UI functionality.

12.5  Implementation Tools

Observing users interacting with paper or electronic prototypes is a common way of identifying defects and refining user interfaces. Many database systems (e.g. Oracle Easy SQL or MS Access) come with interface construction tools that can be used build testable user interface prototypes. Multimedia scripting tools (e.g. Director or even MS Powerpoint) or web page editors (e.g. Dreamweaver, MS Frontpage, or Adobe GoLive) can also be used to build working interface prototypes quickly. Having a reasonable interface development tool kit allows student designers low risk means of testing the sequencing and layout of the key screens for proposed user interfaces.

12.6  Design Evaluation

Two interface design evaluation techniques are mentioned in this section, usability questionnaires and usability testing. Having the students use a usability questionnaire similar to the one on the SEPA web site to evaluate software user interfaces is fairly easy to do. The process of learning how to design good user interfaces often begins with learning to identify the weaknesses in existing products. Usability testing involves more statistics and research design knowledge than is typically found in undergraduate computing students. It is important to remind students, that beginning to evaluate user interface prototypes early in the design phase reduces the risk of building an interface not acceptable to the customer.