User Interface Design

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.
Typical Design Errors

• Lack of consistency
• Too much memorization
• No guidance / help
• No context sensitivity
• Poor response
• Arcane/unfriendly

12.1 The Golden Rules
This section discusses three principles of user interface design.  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 on the screen at the same time.  The third is consistency of form and behavior.

The three “golden rules” are:

• Place the user in control
• Reduce the user’s memory load
• 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 action.

12.1.1 Place the User in Control
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.  The user should always 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 by using keyboard commands, mouse movements, digitizer pen or voice recognition commands.
• Allow user interaction to be interruptible and undoable.  A user should be able to interrupt a sequence of actions to do something else without losing the work that has been done.  The user should always be able to “undo” any action.
• Streamline interaction as skill levels advance and allow the interaction to be customized.  Allow to design a macro if the user is to perform the same sequence of actions repeatedly.
• Hide technical internals from the casual user.  The user interface should move the user into the virtual world of the application.  A user should never be required to type O/S 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.

12.1.2 Reduce the User’s Memory Load

Whenever possible, the system should “remember” pertinent information and assist the user with an interaction scenario that assists recall.

• Reduce demand on short-term memory.  Provide visual cues that enable a user to recognize past actions, rather than having to recall them.
• Establish meaningful defaults.  A user should be able to specify individual preferences; however, a reset option should be available to enable the redefinition of original default values.
• Define shortcuts that are intuitive.  “Example: Alt-P to print. Using easy to remember mnemonics.”
• The visual layout of the interface should be based on a real world metaphor.  Enable the user to rely on well-understood visual cues, rather than remembering an arcane interaction sequence.  For a bill payment system use a check book and check register metaphor to guide the user through the process.
• Disclose information in a progressive fashion.  The interface should be organized hierarchically.  The information should be presented at a high level of abstraction.

12.1.3 Make the Interface Consistent

The interface should present and acquire information in a consistent manner:

1. All visual information is organized according to a design standard that is maintained throughout all screen displays,
2. Input mechanisms are constrained to a limited set that is used consistently throughout the application,
3. Mechanisms for navigating from task to task are consistently defined and implemented.

A set of design principles that help make the interface consistent:

Allow the user to put the current task into a meaningful context.  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.  “MS Office Suite”
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 (Alt-S è save file), the user expects this in every application she encounters.

12.2 User Interface Analysis and Design
The overall process for analyzing and designing a UI begins with the creation of models of system.

12.2.1 User Interface Design Models

Four different models come into play when a user interface is to be analyzed and designed.  “Prototyping”

• User model: a profile of all end users of the system

Users can be categorized as:

• Novices: No syntactic and little semantic knowledge of the system.
• Knowledgeable, intermittent users: reasonable knowledge of the system.
• Knowledgeable, frequent users: good syntactic and semantic knowledge of the system.
• Design model: a design realization of the user model that incorporates data, architectural, interface, and procedural representations of the software.
• Mental model (system perception): the user’s mental image of what the interface is.  The user’s mental model shapes how the user perceives the interface and whether the UI meets the user’s needs.
• Implementation model: the interface “look and feel of the interface” coupled with all supporting information (documentation) that describes interface syntax and semantics.

12.2.1 The Process

The analysis and design process for UIs is iterative and can be represented using a spiral model.
The user interface analysis and design process encompasses four distinct framework activities:

• User, task and environment analysis and modeling.
• Interface design
• Interface construction (implementation)
• Interface validation

The figure 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.  The construction involves prototyping which is the only practical way to validate what has been designed.

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

• 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 environment 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 construction activity normally begins with the creation of a prototype that enables usage scenarios to be evaluated.

12.3 Interface Analysis

A key tenet of all software engineering process models is this: you better understand the problem before you attempt to design a solution.  Interface design analysis means understanding:

(1) The people (end-users) who will interact with the system through the interface;
(2) The tasks that end-users must perform to do their work,
(3) The content that is presented as part of the interface,
(4) The environment in which these tasks will be conducted.

12.3.1 User Analysis

The only way that a designer can get the mental image and the design model to converge is to work to understand the users themselves as well as how these people will use the system. This can be accomplished by:

User Interviews: The software team meets with the end-users to better understand their needs, motivations, work culture, and a myriad of other issues.
Sales Input: Sales people meet with customers and users to help developers categorize users and better understand their requirements.
Marketing Input: Market analysis can be invaluable in the definition of market segments while providing an understanding of how each segment might use the software in different ways.
Support Input: Support staff talks with users on a daily basis, making them the most likely source of information on what works and what doesn’t, and what they like and what they don’t.

The following set of questions help the interface designer better understand the users of a system:

• Are users trained professionals, technician, clerical, or manufacturing workers?
• What level of formal education does the average user have?
• Are the users capable of learning from written materials or have they expressed a desire for classroom training?
• Are users’ expert typists or keyboard phobic?
• What is the age range of the user community?
• Will the users be represented predominately by one gender?
• How are users compensated for the work they perform?
• Do users work normal office hours or do they work until the job is done?
• Is the software to be an integral part of the work users do or will it be used only occasionally?
• What is the primary spoken language among users?
• What are the consequences if a user makes a mistake using the system?
• Are users’ experts in the subject matter that is addressed by the system?
• Do users want to know about the technology the sits behind the interface?

The answers to these and similar questions will allow the designer to understand who the end-users are, what is likely to motivate and please them, how they can be grouped into different user classes or profiles, what their mental models of the system are and how the user interface must be characterized to meet their needs.

• Task Analysis and Modeling

The goal of task analysis is to answer the following questions:

• What work will the user perform in specific circumstances?
• What tasks and subtasks will be performed as the user does the work?
• What specific problem domain objects will the user manipulate as work is performed?
• What is the sequence of work tasks—the workflow?
• What is the hierarchy of tasks?

The techniques below are applied to the user interface:

• Use-cases define basic interaction
• Task elaboration refines interactive tasks
• Object elaboration identifies interface objects (classes)
• Workflow analysis defines how a work process is completed when several people (and roles) are involved

• Interface Design Steps

Once interface analysis has been completed, all tasks required by the end-user have been identified in detail.

• Using information developed during interface analysis (Section 12.3), define interface objects and actions (operations).
• Define events (user actions) that will cause the state of the user interface to change. Model this behavior.
• Depict each interface state as it will actually look to the end-user.
• Indicate how the user interprets the state of the system from information provided through the interface.

A number of UI design patterns are discussed in Section 12.4.2.  Visit www.hcipatterns.org to explore the design patterns available for user interfaces.

12.4.2 Interface Design Patterns
Patterns are available for

• The complete UI
• Page layout
• Forms and input
• Tables
• Direct data manipulation
• Navigation
• Searching
• Page elements
• e-Commerce

12.4.3 Design Issues

• Response time: System response time has 2 important characteristics: length and variability. Variability refers to the deviation from average response time.
• Help facilities: Help must be available for all system functions. Include help menus, print documents.
• Error handling: describe the problem in a language the user can understand. Never blame the user for the error that occurred.
• Menu and command labeling: menu options should have corresponding commands. Use control sequences for commands.
• Application accessibility: especially for the physically challenged.
• Internationalization: The Unicode standard has been developed to address the daunting challenge of managing dozens of natural languages with hundred of characters and symbols.

12.5 Design Evaluation

Two interface design evaluation techniques are mentioned in this section, usability questionnaires and usability testing.  The process of learning how to design good user interfaces often begins with learning to identify the weaknesses in existing products.

Once the first prototype is built, the designer can collect a variety of qualitative and quantitative data that will assess in evaluating the interface.  Questions can be a simple Y/N response, numeric response, scaled response, Likert scale (strongly agree, etc.), percentage response, and open-ended ones.

Likert scale example:

http://www.gifted.uconn.edu/Siegle/research/Instrument%20Reliability%20and%20Validity/Likert.html