User Interface Design in Software Engineering

INTRODUCTION

The blueprint for a house (its architectural design) is not complete without a representation of doors, windows, and utility connections for water, electricity, and telephone (not to mention cable TV).

The ―doors, windows, and utility connections‖ for computer software make up the interface design of a system.

Interface design focuses on three areas of concern:

  • the design of interfaces between software components,
  • the design of interfaces between the software and other nonhuman producers and consumers of information (i.e., other external entities), and
  • the design of the interface between a human (i.e., the user) and the computer. 

 On user interface design, Ben Shneiderman  states

The problems to which Shneiderman alludes are real. It is true that graphical user interfaces, windows, icons, and mouse picks have eliminated many of the most horrific interface problems.

But even in a ―Windows world,‖ we all have encountered user interfaces that are difficult to learn, difficult to use, confusing, unforgiving, and in many cases, totally frustrating.

Yet, someone spent time and energy building each of these interfaces, and it is not likely that the builder created these problems purposely.

User interface design has as much to do with the study of people as it does with technology issues. Who is the user? How does the user learn to interact with a new computer-based system?

How does the user interpret information produced by the system? What will the user expect of the system? These are only a few of the many questions that must be asked and answered as part of user interface design.

THE GOLDEN RULES

On interface design, Theo Mandel coins three ―golden rules‖:

  1. Place the user in control.
  2. Reduce the user’s memory load.
  3. Make the interface consistent.

These golden rules actually form the basis for a set of user interface design principles that guide this important software design activity.

Place the User in Control

During a requirements-gathering session for a major new information system, a key user was asked about the attributes of the window-oriented graphical interface.

What I really would like,‖ said the user solemnly, ―is a system that reads my mind. It knows what I want to do before I need to do it and makes it very easy for me to get it done. That’s all, just that.‖

My first reaction was to shake of my head and smile, but I paused for a moment. There was absolutely nothing wrong with the user’s request. She wanted a system that reacted to her needs and helped her get things done.

She wanted to control the computer, not have the computer control her. Most interface constraints and restrictions that are imposed by a designer are intended to simplify the mode of interaction.

But for whom? In many cases, the designer might introduce constraints and limitations to simplify the implementation of the interface. The result may be an interface that is easy to build, but frustrating to use.

Mandel defines a number of design principles that allow the user to maintain control

Define interaction modes in a way that does not force a user into unnecessary or undesired actions. An interaction mode is the current state of the interface.

For example, if spell check is selected in a word-processor menu, the software moves to a spell checking mode.

There is no reason to force the user to remain in spell checking mode if the user desires to make a small text edit along the way. The user should be able to enter and exit the mode with little or no effort.

Provide for flexible interaction. Because different users have different interaction preferences, choices should be provided.

For example, software might allow a user to interact via keyboard commands, mouse movement, a digitizer pen, or voice recognition commands.

But every action is not amenable to every interaction mechanism. Consider, for example, the difficulty of using keyboard command (or voice input) to draw a complex shape.

Allow user interaction to be interruptible and undoable. Even when involved in a sequence of actions, the user should be able to interrupt the sequence to do something else (without losing the work that had been done). The user should also be able to ―undo any action.

Streamline interaction as skill levels advance and allow the interaction to be customized. Users often find that they perform the same sequence of interactions repeatedly.

It is worthwhile to design a ―macro‖ mechanism that enables an advanced user to customize the interface to facilitate interaction.

Hide technical internals from the casual user. The user interface should move the user into the virtual world of the application. The user should not be aware of the operating system, file management functions, or other arcane computing technology.

In essence, the interface should never require that the user interact at a level that is ―inside‖ the machine (e.g., a user should never be required to type operating system commands from within application software).

Design for direct interaction with objects that appear on the screen. The user feels a sense of control when able to manipulate the objects that are necessary to perform a task in a manner similar to what would occur if the object were a physical thing.

For example, an application interface that allows a user to ―stretch‖ an object (scale it in size) is an implementation of direct manipulation.

Reduce the User’s Memory Load

The more a user has to remember, the more error-prone will be the interaction with the system will be. It is for this reason that a well-designed user interface does not tax the user’s memory.

Whenever possible, the system should ―remember‖ pertinent information and assist the user with an interaction scenario that assists recall. Mandel defines design principles that enable an interface to reduce the user’s memory load:

Reduce demand on short-term memory. When users are involved in complex tasks, the demand on short-term memory can be significant.

The interface should be designed to reduce the requirement to remember past actions and results. This can be accomplished by providing visual cues that enable a user to recognize past actions, rather than having to recall them.

Establish meaningful defaults. The initial set of defaults should make sense for the average user, but a user should be able to specify individual preferences. However, a ―reset‖ option should be available, enabling the redefinition of original default values.

Define shortcuts that are intuitive. When mnemonics are used to accomplish a system function (e.g., alt-P to invoke the print function), the mnemonic should be tied to the action in a way that is easy to remember (e.g., first letter of the task to be invoked).

The visual layout of the interface should be based on a real world metaphor. For example, a bill payment system should use a check book and check register metaphor to guide the user through the bill paying process.

This enables the user to rely on well-understood visual cues, rather than memorizing an arcane interaction sequence.

Disclose information in a progressive fashion. The interface should be organized hierarchically. That is, information about a task, an object, or some behavior should be presented first at a high level of abstraction. More detail should be presented after the user indicates interest with a mouse pick.

An example, common to many word-processing applications, is the underlining function. The function itself  is one of a number of functions under a text style menu.

.However, every underlining capability is not listed. The user must pick underlining, then all underlining options (e.g., single underline, double underline, dashed underline) are presented.

 Make the Interface Consistent

The interface should present and acquire information in a consistent fashion. This implies that

  • all visual information is organized according to a design standard that is maintained throughout all screen displays,
  • input mechanisms are constrained to a limited set that are used consistently throughout the application, and
  • mechanisms for navigating from task to task are consistently defined and implemented. Mandel defines a set of design principles that help make the interface consistent:

Allow the user to put the current task into a meaningful context. Many interfaces implement complex layers of interactions with dozens of screen images. It is important to provide indicators

(e.g., window titles, graphical icons, consistent color coding) that enable the user to know the context of the work at hand.

In addition, the user should be able to determine where he has come from and what alternatives exist for a transition to a new task.

Maintain consistency across a family of applications. A set of applications(or products) should all implement the same design rules so that consistency is maintained for all interaction.

If past interactive models have created user expectations, do not make changes unless there is a compelling reason to do so. Once a particular interactive sequence has become a de facto standard (e.g., the use of alt-S to save a file), the user expects this in every application he encounters.

A change (e.g., using alt-S to invoke scaling) will cause confusion. The interface design principles discussed in this and the preceding sections provide basic guidance for a software engineer. In the sections that follow, we examine the interface design process itself.

USER INTERFACE DESIGN

The overall process for designing a user interface begins with the creation of different models of system function (as perceived from the outside).

The human- and computer-oriented tasks that are required to achieve system function are then delineated; design issues that apply to all interface designs are considered; tools are used to prototype and ultimately implement the design model; and the result is evaluated for quality.

 Interface Design Models

Four different models come into play when a user interface is to be designed. The software engineer creates a design model, a human engineer (or the software engineer) establishes a user model, the end-user develops a mental image that is often called the user’s model or the system perception, and the implementers of the system create a system image.

Unfortunately, each of these models may differ significantly. The role of interface designer is to reconcile these differences and derive a consistent representation of the interface.

A design model of the entire system incorporates data, architectural, interface, and procedural representations of the software.

The requirements specification may establish certain constraints that help to define the user of the system, but the interface design is often only incidental to the design model.

The user model establishes the profile of end-users of the system. To build an effective user interface, “all design should begin with an understanding of the intended users, including profiles of their age, sex, physical abilities, education, cultural or ethnic background, motivation, goals and personality”. In addition, users can be categorized as

  • Novices. No syntactic knowledge of the system and little semantic knowledge of the application or computer usage in general.
  • Knowledgeable, intermittent users. Reasonable semantic knowledge of the application but relatively low recall of syntactic information necessary to use the interface.
  • Knowledgeable, frequent users. Good semantic and syntactic knowledge that often leads to the “power-user syndrome”; that is, individuals who look for shortcuts and abbreviated modes of interaction.

The system perception (user’s model) is the image of the system that end-users carry in their heads. For example, if the user of a particular word processor were asked to describe its operation, the system perception would guide the response.

The accuracy of the description will depend upon the user’s profile (e.g., novices would provide a sketchy response at best) and overall familiarity with software in the application domain.

A user who understands word processors fully but has worked with the specific word processor only once might actually be able to provide a more complete description of its function than the novice who has spent weeks trying to learn the system.

The system image combines the outward manifestation of the computer-based system (the look and feel of the interface), coupled with all supporting information (books, manuals, videotapes, help files) that describe system syntax and semantics.

When the system image and the system perception are coincident, users generally feel comfortable with the software and use it effectively.

To accomplish this “melding” of the models, the design model must have been developed to accommodate the information contained in the user model, and the system image must accurately reflect syntactic and semantic information about the interface.

The models described in this section are “abstractions of what the user is doing or thinks he is doing or what somebody else thinks he ought to be doing when he uses an interactive system”[MON84].

User Interface Design Process Spiral Model
User Interface Design Process (Spiral Model)

In essence, these models enable the interface designer to satisfy a key element of the most important principle of user interface design: “Know the user, know the tasks.”

The User Interface Design Process

The design process for user interfaces is iterative and can be represented using a spiral model. Referring to Figure 1, the user interface design process encompasses four distinct framework activities .

User, task, and environment analysis and modeling

  • Interface design
  • Interface construction
  • Interface validation

The spiral shown in Figure 1 implies that each of these tasks will occur more than once, with each pass around the spiral representing additional elaboration of requirements and the resultant design. In most cases, the implementation activity involves prototyping—the only practical way to validate what has been designed.

The initial analysis activity focuses on the profile of the users who will interact with the system. Skill level, business understanding, and general receptiveness to the new system are recorded; and different user categories are defined. For each user category, requirements are elicited.

In essence, the software engineer attempts to understand the system perception for each class of users.

Once general requirements have been defined, a more detailed task analysis is conducted. Those tasks that the user performs to accomplish the goals of the system are identified, described, and elaborated (over a number of iterative passes through the spiral).

 The analysis of the user environment focuses on the physical work environment. Among the questions to be asked are

  • Where will the interface be located physically?
  • Will the user be sitting, standing, or performing other tasks unrelated to the interface?
  • Does the interface hardware accommodate space, light, or noise constraints?
  • Are there special human factors considerations driven by environmental factors?

The information gathered as part of the analysis activity is used to create an analysis model for the interface. Using this model as a basis, the design activity commences.

The goal of interface design is to define a set of interface objects and actions (and their screen representations) that enable a user to perform all defined tasks in a manner that meets every usability goal defined for the system. 

The implementation activity normally begins with the creation of a prototype that enables usage scenarios to be evaluated.

As the iterative design process continues, a user interface tool kit may be used to complete the construction of the interface. Validation focuses on

  • the ability of the interface to implement every user task correctly, to accommodate all task variations, and to achieve all general user requirements
  • the degree to which the interface is easy to use and easy to learn; and
  • the users’ acceptance of the interface as a useful tool in their work. Therefore, there is no need to attempt to specify every detail (for the analysis or design model) on the first pass.

Subsequent passes through the process elaborate task detail, design information, and the operational features of the interface.

Leave a Comment