1. PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 1 Systems Analysis and Design Alan Dennis, Barbara Wixom, and David Tegarden John Wiley & Sons, Inc. Slides by Fred Niederman Edited by Dr. Sara Stoecklin

2. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 2 Copyright © 2001 John Wiley & Sons, Inc. All rights reserved. Reproduction or translation of this work beyond that permitted in Section 117 of the 1976 United States Copyright Act without the express written permission of the copyright owner is unlawful. Request for further information should be addressed to the Permissions Department, John Wiley & Sons, Inc. The purchaser may make back-up copies for his/her own use only and not for redistribution or resale. The Publisher assumes no responsibility for errors, omissions, or damages, caused by the use of these programs or from the use of the information contained herein.

3. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 3 Objectives ■ Understand several fundamental user interface design principles. ■ Understand the process of user interface design. ■ Understand how to design the user interface structure. ■ Understand how to design the user interface standards. ■ Understand commonly used principles and techniques for navigation design. ■ Understand commonly used principles and techniques for input design. ■ Understand commonly used principles and techniques for output design. ■ Be able to design a user interface.

4. PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 4 Principles for User Interface Design

5. PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 5 User Interface Design Process Chapter 12

6. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 6 Key Definitions The navigation mechanism provides the way for users to tell the system what to do The input mechanism defines the way the system captures information The output mechanism defines the way the system provides information to users or other systems

7. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 7 Key Definitions The graphical user interface (GUI) is the most common type of interfaces most students are likely to use personally and for developing systems.

8. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 8 HCI Requirements HCI Specifications Standards MIL-H-46855BAFSC-DH 1-3 MIL-STD-1472MIL-HDBK-759A Factors Noise, Lighting, Temperature, Humidity, Air Flow, Vibration, G-Forces, Motion, Reduced Oxygen, Air Pressure

9. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 9 Principles

10. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 10 Principles - Layout First Element of Design – Basis Layout of the screen, form, or report. Items to Consider Multiple layout areas Navigation Areas Data Areas Boundaries Order of the layout Horizontal vs. Vertical

11. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 11 Principles – Content Awareness Content Awareness – ability of a user interface to make the user aware of the information it contains with the LEAST amount of effort. All elements in the design need to be considered when making sure this principle is followed. Items such as navigation, fields, areas, information, graphics, all need to be considered.

12. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 12 Principles – Aesthetics Aesthetics deals with the pleasing to the eyd component of design. In most cases “simple, minimalist designs are best” White space is good to make the eye feel comfortable searching for items. Fonts less than 8 are usually not pleasing. Colors can help but be careful.

13. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 13 Principles – User Experience There are two types of users– those with experience using user interfaces and those without. You have to present your interfaces as if they had no experience. Make quick access to well-known functions. Keep it simple.

14. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 14 Principles – Consistency Single most important factor in the design of interface. Make things as standard as possible. If no standard exists, try to make everyone agree on just a few. The back key, the pagedown key should always work the same. Other standards help to make the interface intuitive.

15. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 15 Principles – Minimize User Effort Make sure there is not more effort than needed. We all know from BB that one more click may do NOTHING but add to your stress.

16. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 16 We have defined use cases, objects and their relationships through object diagrams and sequence diagram to define interactions between objects. We are now ready to define and design our screens. Perhaps we need a method of specification.

17. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 17 Use Scenario Development Step 1 Step 2 Step 3Step 4 Step 5

18. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 18 Use Scenario Development Step 1 Step 2 Step 3Step 4 Step 5 Analyst examines use cases and use case descriptions (we have not yet developed sequence diagrams in our methodology). Analyst interviews users to determine their needs to perform the necessary actions quickly and smoothly

19. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 19 Use Scenario Development Step 1 Step 2 Step 3Step 4 Step 5 Step 2 The structure defines the basic components of the interface and shows their functionality. Main Menu Edit Screen Select edit Esc, back Save Dialog Select save Esc

20. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 20 Use Scenario Development Step 1 Step 2Step 5 Step 2 The structure defines the basic components of the interface and shows their functionality. ScreenMain MenuEdit ScreenSave Dialog Main Menu N/ASelect Edit ------ Edit ScreenEsc, back N/ASelect save Save Dialog ------ esc N/A

21. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 21 Window Navigation Diagram

22. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 22 Use Scenario Development Step 1 Step 2Step 5 It is used to define those items common to most of the user interfaces. Step 3 Interface Standards Design This process is done after some of the more common user interfaces have been defined and designed.

23. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 23 Interface Standards Design The interface standards are the basic design elements that are common across the individual screens, forms, and reports within the system.

24. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 24 Use Scenario Development Step 1 Step 2Step 5 Getting user signoff as you go is much easier than one big splash at the end. Step 4 Interface Design Prototyping This process is done again iteratively after a few and then more screens are designed.

25. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 25 Interface Design Prototyping Storyboard HTML Prototype Language Prototype

26. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 26 Interface Design Prototyping Storyboard Simplest technique Paper-based with hand drawn mock up screens on paper Navigation is done by the story teller flipping thru the screens as you would a cartoon tale.

27. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 27 Interface Design Prototyping HTML Prototype Most common type of prototype Web pages are built with the most fundamental portions of the screens Users click thru the screens entering pretend data

28. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 28 Interface Design Prototyping Language Prototype Built using a prototype language or tool to build the screens and navigation. Users can move thru the screens with no real processing behind the screen. These screens can be exactly as the user will eventually use them.

29. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 29 Interface Design Prototyping Selecting the right technique Storyboard is simplest and cheapest but least like the real screens Language is expensive but is the most detailed and most like the real screens HTML is not cheap but not expensive and makes the screens seem real.

30. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 30 Interface Design Prototyping Interface Evaluation Need 10 or more users Should be as complete as possible Four techniques  Heuristic  Walkthrough  Interactive  Formal Usability Testing

31. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 31 Interface Design Prototyping Heuristic – evaluates by some principles of interface design – team develops a checklist of principles about navigation, input and output design and assures the interface meets the checklist requirements.

32. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 32 Interface Design Prototyping Walkthrough A meeting conducted by the team to allow the users to operate the system mentally with the guidance of the team physically. User identifies improvements and problems.

33. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 33 Interface Design Prototyping Interactive Users themselves operate the system Document improvements and problems.

34. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 34 Interface Design Prototyping Formal Usability Testing A formal walkthru of the user interface with recordings of keystrokes, errors, etc. The interface either fails or passes the test done by the user. The user never fails Usually the user is a professional tester.

35. PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 35 NAVIGATION DESIGN

36. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 36 Basic Principles Assume users Have not read the manual Have not attended training Do not have external help readily at hand All controls should be clear and understandable and placed in an intuitive location on the screen.

37. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 37 Basic Principles Prevent mistakes Limit choices Never display commands that can’t be used (or “gray them out”) Confirm actions that are difficult or impossible to undo Simplify recover from mistakes Use consistent grammar order

38. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 38 Types of Navigation Control Languages Command language Natural language Menus Generally aim at broad shallow menu Consider using “hot keys” Direct Manipulation Used with icons to start programs Used to shape and size objects May not be intuitive for all commands

39. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 39 A Traditional Menu in a UNIX System

40. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 40 Menu Tips Menus should be broad and shallow rather than narrow and deep. Most information is presented initially requiring less keystrokes One menu should contain no more than 8 items and take no more than two clicks to perform an action (BB should have read this) Menus should put together like items so the user can intuitively guess what each contains. Better to group them by types of objects

41. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 41 Common Types of Menus Menu Bar Drop Down Menu Tool Bar

42. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 42 Example of an Image Map

43. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 43 Types of Menus Menu bar Drop-down menu Pop-up menu Tab menu Toolbar Image map When Would You Use Each of These Menu Types?

44. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 44 Message Tips Should be clear, concise, and complete Should be grammatically correct and free of jargon and abbreviations (unless they are the users) Avoid negatives and humor

45. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 45 Types of Messages Error message Confirmation message Acknowledgment message Delay message Help message When Would You Use Each of These Message Types?

46. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 46 An Example of Crafting an Error Message

47. PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 47 INPUT DESIGN

48. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 48 Basic Principles The goal is to simply and easily capture accurate information for the system Reflect the nature of the inputs Find ways to simplify their collection

49. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 49 Online versus Batch Processing Online processing immediately records the transaction in the appropriate database Batch processing collects inputs over time and enters them into the system at one time in a batch Batch processing simplifies data communications and other processes, but means that inventory and other reports are not accurate in real time

50. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 50 Capture Data at the Source Reduces duplicate work Reduces processing time Decreases cost Decreases probability of error

51. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 51 Source Data Automation Can be obtained by using the following technologies: bar code readers optical character recognition magnetic stripe readers smart cards How can internet be used for source data automation?

52. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 52 Minimize Keystrokes Never ask for information that can be obtained in another way List selection is more efficient than entering information Use default values where possible

53. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 53 Types of Inputs Data items linked to fields Text Numbers Selection boxes

54. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 54 Types of Input Boxes

55. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 55 Types of Selection Boxes Types of Boxes Check box Radio button On-screen list box Drop-down list box Combo box Slider When Would You Use Each of These Box Types?

56. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 56 Types of Input Validation Types of Validation Completeness check Format check Range check Check digit check Consistency check Database checks When Would You Use Each of These Validation Methods?

57. PowerPoint Presentation for Dennis, Wixom & Tegarden Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 57 OUTPUT DESIGN

58. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 58 Basic Principles Understand report usage Reference or cover-to-cover? Frequency? Real-time or batch reports? Manage information load All needed information, no more Minimize bias

59. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 59 Bias in Graphs

60. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 60 Types of Reports Detail reports Summary report Turnaround document Graphs When Would You Use Each of These Report Types?

61. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 61 Report Media Electronic Versus Paper

62. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 62 Summary The fundamental goal of navigation design is to make the system as simple to use as possible The goal of input mechanism is to simply and easily capture accurate information The goal of the output mechanism is to provide accurate information to users that minimize information overload and bias

63. PowerPoint Presentation for Dennis, Wixom & Tegardem Systems Analysis and Design Copyright 2001 © John Wiley & Sons, Inc. All rights reserved. Slide 63 Expanding the Domain For many years, the University of Maryland has been a leader in research for ideas in human- computer interfaces. For more information investigate: http://www.cs.umd.edu/hcil/