1. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition C H A P T E R 15 USER INTERFACE DESIGN

2. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Chapter FifteenUser 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.

3. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Chapter Map

4. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 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).

5. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 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

6. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 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.

7. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 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.

8. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 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.

9. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 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.

10. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Styles or Strategies Used For Designing Graphical User Interfaces Windows and frames Menu-driven interfaces Instruction-driven interfaces Question-answer dialogue

11. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition GUI Menus Pull down and cascading menus Tear-off and pop-up menus Toolbar and iconic menus Hypertext and hyperlink menus

12. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition A Classical Hierarchical Menu dialogue

13. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Sample dialogue Chart

14. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Pull-Down and Cascading Menus

15. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Dialogue Box

16. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Pop-Up Menus

17. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Tool Bars

18. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Iconic Menus

19. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Consumer-Style Interface

20. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Hybrid Windows/Web Interface

21. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Instruction-Driven Interface

22. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Authentication Log-in Screen

23. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Authentication Error Screen

24. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Server Security Certificate

25. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Help Tool Tip

26. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Help Wizard

27. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Visual Basic Menu Construction

28. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Additional User Interface Controls

29. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition SoundStage Partial State Transition Diagram

30. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition SoundStage Main Menu

31. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition SoundStage Options and Preferences Screen

32. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition SoundStage Report Customization dialogue Screen

33. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Special Considerations for User Interface Design Internal controls—authentication and authorization On-line help

34. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition The User Interface Design Process 1.Chart the user interface dialogue. 2.Prototype the dialogue and user interface. 3.Obtain user feedback.