SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

C H A P T E R

15

USER INTERFACE DESIGN

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Chapter Fifteen

User Interface Design

• Distinguish between different types of computer users and design considerations for each. • Identify several important human engineering factors and guidelines and incorporate them into a design of a user interface. • Integrate output and input design into an overall user interface that establishes the dialogue between users and computer. • Understand the role of operating systems, Web browsers, and other technologies for user interface design. • Apply appropriate user interface strategies to an information system. Use a state transition diagram to plan and coordinate a user interface for an information system. • Describe how prototyping can be used to design a user interface.

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Chapter Map

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

System User Classifications

An expert user is an experienced computer user who will spend considerable time using specific application programs. The use of a computer is usually considered non-discretionary. In the mainframe computing era, this was called a dedicated user. The novice user (sometimes called a casual user) is a less experienced computer user who will generally use a computer on a less frequent, or even occasional, basis. The use of a computer may be viewed as discretionary (although this is becoming less and less true).

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Interface Problems

According to Galitz, these problems result in confusion, panic, frustration, boredom, misuse, abandonment, and other undesirable consequences.
– Excessive use of computer jargon and acronyms – Nonobvious or less-than-intuitive design – Inability to distinguish between alternative actions (“what do I do next?”) – Inconsistent problem-solving approaches – Design inconsistency

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Commandments of User Interface Design

• • • •

Understand your users and their tasks. Involve the user in interface design. Test the system on actual users. Practice iterative design.

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Human Engineering Guidelines
• The system user should always be aware of what to do next.
– – – – – Tell the user what the system expects right now. Tell the user that data has been entered correctly. Tell the user that data has not been entered correctly. Explain to the user the reason for a delay in processing. Tell the user that a task was completed or was not completed.

• The screen should be formatted so that the various types of information, instructions, and messages always appear in the same general display area. • Messages, instructions, or information should be displayed long enough to allow the system user to read them. • Use display attributes sparingly. • Default values for fields and answers to be entered by the user should be specified. • Anticipate the errors users might make. • With respect to errors, a user should not be allowed to proceed without correcting an error. • If the user does something that could be catastrophic, the keyboard should be locked to prevent any further input, and an instruction to call the analyst or technical support should be displayed.

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Guidelines for dialogue Tone and Terminology

• Tone:
– Use simple, grammatically correct sentences. – Don’t be funny or cute! – Don’t be condescending.

• Terminology
– – – – – Don’t use computer jargon. Avoid most abbreviations. Use simple terms. Be consistent in your use of terminology. Carefully phrase instructions—use appropriate action verbs.

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Common Approaches to Showing the Display Area

Paging displays a complete screen of characters at a time. The complete display area is known as a page (or screen). The page is replaced on demand by the next or previous page, much like turning the pages of a book. Scrolling moves the displayed information up or down on the screen, one line at a time. This is similar to the way movie and television credits scroll up the screen at the end of a movie.

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Styles or Strategies Used For Designing Graphical User Interfaces

• • • •

Windows and frames Menu-driven interfaces Instruction-driven interfaces Question-answer dialogue

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

GUI Menus

• • • •

Pull down and cascading menus Tear-off and pop-up menus Toolbar and iconic menus Hypertext and hyperlink menus

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

A Classical Hierarchical Menu dialogue

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Sample dialogue Chart

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Pull-Down and Cascading Menus

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Dialogue Box

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Pop-Up Menus

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Tool Bars

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Iconic Menus

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Consumer-Style Interface

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Hybrid Windows/Web Interface

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Instruction-Driven Interface

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Authentication Log-in Screen

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Authentication Error Screen

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Server Security Certificate

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Help Tool Tip

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Help Wizard

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Visual Basic Menu Construction

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Additional User Interface Controls

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

SoundStage Partial State Transition Diagram

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

SoundStage Main Menu

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

SoundStage Options and Preferences Screen

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

SoundStage Report Customization dialogue Screen

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

Special Considerations for User Interface Design

• Internal controls—authentication and authorization • On-line help

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

SYSTEMS ANALYSIS AND DESIGN METHODS 5th Edition

Whitten Bentley Dittman

The User Interface Design Process

• Chart the user interface dialogue. • Prototype the dialogue and user interface. • Obtain user feedback.

Irwin/McGraw-Hill

Copyright © 2000 The McGraw-Hill Companies. All Rights res

Sign up to vote on this title
UsefulNot useful