Chapter 11 - User Interface Design

Overview

This chapter introduces the principles of user interface design as it relates to the development of software products. User interface design creates an effective communication between a human and a computer. Proper interface design begins with careful analysis of the user, the task and the environment. Once the user's tasks are identified, user scenarios are created and validated. Good user interfaces are designed, they don't happen by chance. Prototyping is a common approach to user interface design. Early involvement of the user in the design process makes him or her more likely to accept the final product. User interfaces must be field tested and validated prior to general release.

 

User Interface Design

• Virtually all high technology products require human interaction
• Products must exhibit good usability to be successful
• Good user interface designs result from the careful application of design heuristics (golden rules) and the definition of effective interaction mechanisms (controls and display objects)

 

Place User in Control

• Define interaction in such a way that the user is not forced into performing unnecessary or undesired actions
• Provide for flexible interaction (users have varying preferences)
• Allow user interaction to be interruptible and reversible
• Streamline interaction as skill level increases and allow customization of interaction
• Hide technical internals from the casual user
• Design for direct interaction with objects that appear on the screen

 

Reduce User Memory Load

• Reduce demands on user's short-term memory
• Establish meaningful defaults
• Define intuitive short-cuts
• Visual layout of user interface should be based on a familiar real world metaphor
• Disclose information in a progressive fashion

 

Make Interface Consistent

• Allow user to put the current task into a meaningful context
• Maintain consistency across a family of applications
• If past interaction models have created user expectations, do not make changes unless there is a good reason to do so

 

 
User Interface Design Models

• Design model (incorporates data, architectural, interface, and procedural representations of the software)
• User model (end user profiles - novice, knowledgeable intermittent user, knowledgeable frequent users) 
• mental model (user's mental image of system or system perception)
• Implementation model (look and feel of the interface and supporting media)

 

User Categories

• Novices – have no syntactic knowledge of the system and little knowledge of the application or general computer usage
• Knowledgeable intermittent users – have reasonable semantic knowledge of the application, but low recall of syntactic information necessary to use the interface
• Knowledgeable frequent users – good semantic and syntactic knowledge of the application, look for interaction shortcuts

 

User Interface Design Process (Spiral Model)

• Interface task analysis and modeling
• Interface design
• Interface construction
• Interface validation

 

Analysis of Physical Work Environment

• 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?

 

Validation Considerations

• Does the interface implement every user task correctly, accommodate all task variations, and achieve al general user requirements?
• To what degree is the user interface easy to use and easy to learn?
• Do users’ accept that the user interface as a useful tool in their daily work?

 

Interface Analysis Goals

• Understand people who interact with system through the interface
• Understand tasks end-users must perform to do their work
• Understand the content presented as part of the interface
• Understand the nature of the environment in which tasks will be performed

 

User Analysis Sources

• User interviews – designers meet with end-users individually or in groups
• Sales input – sales people help designers categorize users and better understand their needs
• Marketing input – marketing analysis can help define market segments and help understand how each segment might use the software
• Support input – support staff can provide good input what works and does not, what users like, what features generate questions, and what features are easy to use

 

Task Analysis and Modeling

• Use-cases
• What work will the user perform in specific circumstances?
• Task elaboration
• What tasks and subtasks will be performed as the user does the work?
• Object elaboration
• What specific problem domain objects will the user manipulate as work is performed?
• Workflow analysis
• What is the sequence of work tasks?
• Hierarchical representation
• What is the hierarchy of tasks?

 

 

Interface Layout and Content Review Questions

• Are different types of data assigned to consistent geographical locations on the screen?
• Can user customize screen locations of content?
• Is proper on-screen identification assigned to all content?
• How should large report be partitioned for ease of understanding?
• Will mechanisms be available for moving directly to data summary information for large data collections?
• Will graphical output be scaled to fit bounds of display device used?
• How will color be used to enhance understanding?
• How will error messages and warnings be displayed to the user?

 

Interface Design

• Use the information developed during interface analysis to define interface objects and actions (operations)
• Define events (user actions) that will cause the state of the user interface to change and model this behavior
• Depict each interface state as it will appear to the end-user
• Indicate how the user interprets the state of the system from information provided through the interface

 

Interface Design Issues

• System response time – time between the point at which user initiates some control action and the time when the system responds
• User help facilities – integrated, context sensitive help versus add-on help
• Error handling – messages should be non-judgmental, describe problem precisely, and suggest valid solutions
• Menu and command labeling – based on user vocabulary, simple grammar, and have consistent rules for abbreviation
• Application accessibility – ensuring that interface design contains mechanisms for accommodating user with special needs (vision, hearing, mobility, speech, learning impairments)
• Internationalization – interface accommodates needs of different locales and languages

 

WebApp Interface Design

• Where am I?
• Interface should indicate which WebApp is running
• Interface should indicate user’s location in content hierarchy
• What can I do now?
• Interface helps user understand current options (live link and relevant content)
• Where have I been and where am I going?
• Provide user with map showing paths through the WebApp

 

WebApp User Interface Design Principles

• Anticipation – interface designed to anticipate the user’ s next move
• Communication – interface shows status of any user initiated activity
• Consistency – navigation and controls are same throughout WebApp
• Controlled autonomy – designer allow user to feel in control of WebApp
• Efficiency – WebApp optimizes user’s work efficiency, not the designer’s
• Flexibility – support specific tasks as well as allow browsing
• Focus – interface and content should remain focused on user tasks
• Fitt’s Law – time to hit a target using a pointing device is a function of the distance traveled and the size of the target
• Human interface objects – use WebApp tool libraries
• Latency reduction – provide feedback to user when delays are necessary, multi-task when possible to avoid long waiting periods
• Learnability – interface is easy to learn and easy to retain over time
• Metaphors – interfaces based on metaphors familiar to user are easy to learn and easier to use
• Maintain work product integrity – don’t allow user work products to be lost when errors occurs (e.g. save often)
• Readability – content is easy to read by young and old
• Track state – when appropriate track state of user interaction to allow user to logoff and return later
• Visible navigation – provide illusion that user remains in same place and work is brought to them 

 

WebApp Interface Workflow

• Review and refine analysis information
• Develop rough sketch of WebApp interface layout
• Map user objectives into specific interface actions
• Define set of user tasks associated with each action
• Storyboard screen images for each interface action.
• Refine interface layouts and storyboards using input from aesthetic design.
• Identify user interface objects required to implement user interface.
• Develop procedural representation of user’s interaction with the interface.
• Develop a behavioral representation of user’s interaction with the interface.
• Describe interface layout for each state.
• Review and refine the interface model (focus on usability).

 

User Interface Evaluation Cycle

• Preliminary design
• Build first interface prototype
• User evaluates interface
• Evaluation studied by designer
• Design modifications made
• Build next prototype
• If interface is not complete then go to step 3

 

User Interface Design Evaluation Criteria

• Length and complexity of written interface specification provide an indication of amount of learning required by system users
• Number of user tasks and the average number of actions per task provide an indication of interaction time and overall system efficiency
• Number of tasks, actions, and system states in the design model provide an indication of the memory load required of system users
• Interface style, help facilities, and error handling protocols provide a general indication of system complexity and the degree of acceptance by the users