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 user interface design. Integrate output and input design into an overall user interface that establishes the dialogue between users and computer. –Dialog is essential – from logging into system, setting options and preferences, getting help, and screen to screen transitions. Describe how prototyping can be used to design a user interface. –tools: JBuilder, VB, IBM’s Visual Age –Missing ‘security,’ may have ‘help’ ‘hard-coded’ at this time – but the demonstration of the functionality is essential to the end-user.

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). Some people fit in between….

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, Interface problems result in confusion, panic, frustration, boredom, misuse, abandonment, and other undesirable consequences. –Excessive use of computer jargon and acronyms –Non obvious 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. –Find out what users like and do not like. –Involve them in your screen designs. Test the system on actual users. –Let users exercise the prototypes –Observe their problems / mistakes / questions –Fix and iterate. Practice iterative design. –Iterate the prototype with user until ‘satisfied.’

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. (blinking, reverse video, …) 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! Gets old quickly. –Don’t be condescending. Terminology –Don’t use computer jargon. –Avoid most abbreviations. –Use simple terms. Use Not Correct rather than Incorrect –Be consistent in your use of terminology. Don’t use terms like Edit and Modify to mean the same thing. –Carefully phrase instructions—use appropriate action verbs. Indicate: Can select more than one or Only One. Use “Type” not “Enter” because “Enter” might be construed to mean the Enter key. Use “press” not Hit or Depress. Use Position the Cursor and not Point the Cursor

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 Common Approaches to Showing the Display Area The manner in which the display area is shown to the user is controlled by both the technical capabilities of the display and the operating system capabilities. Paging and scrolling are the two most common approaches to showing the display area to the user.

11. 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 User Interface Design is the specification of a dialogue or conversation between the system user and the computer. Results in data input or information output. There are several styles, although many of these have become ‘blended.’ Consider: –Windows and frames –Menu-driven interfaces –Instruction-driven interfaces –Question-answer dialogue These styles/strategies should NOT be viewed as alternatives.

12. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Windows and Frames Can be larger / smaller than actual display monitor’s viewable area. –Has controls and usually scroll bars. –May be divided into Frames Frames – act independently of other frames in the same window. –Commonly used in both windows and Web Browsers. Within windows / frames, we have “user interface controls” such as drop down boxes, list boxes, Window may often have a task bar or tray across bottom of window.

13. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Menu-Driven Interfaces Older technology. Menu items grouped functionally Hierarchical set of menus – ‘going down’ Normally need escape ‘back to the top’ menu Normally easy to design In GUIs, user dialog are not hierarchical. Much more ‘event driven.’ Difficult, therefore, to model as a hierarchically-based group of dialog charts.

14. 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 –from menu bar… –Underlined letter => alt plus letter (short-cut key) Tear-off and pop-up menus Toolbar and iconic menus Hypertext and hyperlink menus Right arrow => submenu (cascading menus) Ellipses (three dots) => another dialog box will appear Pop-up menus – via right click on mouse; context sensitive menu. Pop up where ‘clicked’. Also cascade.

15. 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

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

17. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Comments on Sample Dialog Chart –This screen dialogue chart is a tool for designing dialogues for on-line mainframe- based computing solutions. Subsequently, the tool has been adopted and adapted by numerous authors of systems development textbooks. –The authors emphasize that this tool has become ineffective in design GUI screens because today’s GUI design solutions are not naturally hierarchical.

18. 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

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

20. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Pop-Up Menus Novice users usually don’t know these are Available (there is no hint that they even exist…)

21. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Tool Bars Toolbars are menu shortcuts – normally embedded in drop down menus Tool bars can be created for any application Default location of tool bars is below Menu Bar – but can be moved. (docked) Can also have floating toolbars… In web-based apps, the toolbar is provided by the browser and cannot be customized to specific applications

22. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Iconic Menus Another kind of menu Provides a “Control Center” Very popular for web-based applications. Since browsers do not allow the developer to alter menu commands in the menu bar, they often provide clickable pictures, icons, buttons, etc. to represent the menu options.

23. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Consumer-Style Interface Here is a windows GUI that is very artistic – consumer-style interface. Still have menu bar, but look is much more like a web interface. Options are clickable and more ‘friendly.’ Notice the menu bar is different; Expect this trend for windows-based applications development.

24. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Hybrid Windows/Web Interface Some interfaces are using a hybrid approach Hyperlinks / hypertext was originally created to navigate between web pages and sites, because browser menus could not be modified. Since browser’s menu bar and commands are fixed, so we cannot customize the menus as readily as in Windows. So, hypertext and hyperlinks are used to implement those menus in the body of the web page. Now, hyperlinks are commonly found in Windows applications. First clue a screen we are looking at a Windows app is that it is in a Window and has a Windows menu bar.

25. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Instruction-Driven Interface e.g. SQL, QBE Early DOS apps used instruction- driven styles. Can still be found in some of today’s graphical apps.

26. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Authentication Log-in Screen In most systems, users must be authenticated before performing any system functions. Typically, userid and password are required. Usually, log on is same as one’s own network logon. Given Authentication, we then worry about Access! Privileges must be established – generally these are assigned by roles. Thus job permission may often dictate needed permissions. Roles may include ability to update, read only, etc.

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

28. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Server Security Certificate Some sites provide some certification to tell consumers that their data (like credit card numbers) is secure.

29. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Help Tool Tip Everyone wants online help but only if directions are not clear on the screen! Most help systems are now in pop-up windows on their own and do not hide the window causing the needed help. Many systems have context sensitive help (F1) and some kind of help wizard. Tool tips are very useful

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

31. 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 VB – great prototyping tool, because it has all the features 1. Chart the Dialog –Many screens will appear in an order; some will not. –Best modeled by a STD to show what screen can be reached from the current one – given an event. (recognize we are using the term ‘screen’ in a generic sense We are really talking about any display screen, window, or dialog box. Can create STDs with circles or rectangles The label shows the event causing the transition. The STD can be quite large…

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

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

34. 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

35. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 2. Prototype the dialog and User Interface Some new screens will be identified to bring together the application and its input and output screens that we did before. The STD cites that after authentication (successful login, password asterisked out, and privileges confirmed), one is normally presented with a Main Menu screen –Normally have a vertical menu of buttons or a menu bar selection. Text labels are often clearer than figures/icons. Group boxes help a great deal also.

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

37. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition Sound Stage Options and Preferences Screen Sometimes Screens will contain tabs to accommodate different types of options. May have sliders too. Sometimes these options can be grouped in the STD also…

38. 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

39. 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 Entire books have been written on the subject of user interface design. –Color –Consideration of handicapped individuals ….

40. Irwin/McGraw-Hill Copyright © 2000 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS5th Edition 3. Obtain the Users’ Feedback! This is absolutely essential. Let the user exercise the interface. IT is easy (and inexpensive to alter NOW) – horribly expensive later. “Pay now or pay later.”