1. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-1 17 C H A P T E R USER INTERFACE DESIGN 使用者介面設計 呂克明教授 二○○六年一月十一日

2. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-2 Chapter 17User 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 © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-3 Chapter Map

4. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-4 System User Classifications Expert User ( 熟練的使用者 ) – an experienced computer user –Spends considerable time using specific application programs. –Use of a computer is usually considered non-discretionary. –In the mainframe computing era, this was called a dedicated user. Novice User ( 生疏的使用者 ) – a less experienced computer user – Uses computer on a less frequent, or even occasional, basis. –Use of a computer may be viewed as discretionary (although this is becoming less and less true). –Sometimes called a casual user.

5. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-5 Interface Problems *According to Galitz, the following five (5) 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 © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-6 Commandments of User Interface Design *Four (4) 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 © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-7 Human Engineering Guidelines The user should always be aware of what to do next –Tell user what the system expects right now. –Tell user that data has been entered correctly. –Tell user that data has not been entered correctly. –Explain reason for a delay in processing. –Tell user a task was completed or not completed. Format screen so instructions and messages always appear in the same general display area. Display messages and instructions long enough so user can read them.

8. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-8 Human Engineering Guidelines (continued) Use display attributes sparingly. Default values should be specified. Anticipate errors users might make. Users should not be allowed to proceed without correcting an error. If 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.

9. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-9 Guidelines for dialogue Tone and Terminology Dialogue ( 對話 ) – the overall flow of screens and messages for an application 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.

10. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-10 User Interface Technology *The basic structure of the graphical user interface (GUI) is provided either within operation system or in the internet browser. Operating Systems and Web Browsers ( 網頁瀏覽器 ) –GUI –Windows, Macintosh, UNIX, Linux, Palm OS, Windows CE –*Growing importance of platform independence that is most browsers run in many operating systems, making it possible to design a user interface that is less dependent on the computer itself. Display Monitor ( 顯示監測器 ) –Regular PC monitors –Non-GUI terminals –Growing importance of devices such as handhelds Paging – Displaying a complete screen of characters at a time. Scrolling – Displaying information up or down a screen one line at a time. Keyboards and Pointers ( 鍵盤與定位裝置 ) –Keyboards – the character set and *function keys that can be used to program certain common, repetitive operations in a user interface. –Pointers – Mouse, Pens, Touch-sensitive screens

11. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-11 Graphical User Interfaces Styles and Considerations(1/2) Windows and frames ( 視窗與框架 ) Window- The basic construct of a GUI is the window. A window is a rectangular, bordered area. Frame- A window may be divided into zones called frames. Each frame can act independently of the other frames in the same window, using features such as paging, scrolling, display attributes, and color.

12. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-12 Graphical User Interfaces Styles and Considerations(2/2) *There are several styles of graphical user interfaces, including menu- driven, instruction-driven, and question-answer dialogues. *Menu-driven interfaces ( 功能表驅動介面 ) –Pull-down and cascading menus –Tear-off and pop-up menus –Toolbar and iconic menus –Hypertext and hyperlink menus Instruction-driven interfaces ( 指令驅動介面 ) –Language-based syntax –Mnemonic syntax –Natural language syntax Question-answer dialogue ( 問答式對話 )

13. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-13 A Classical Hierarchical Menu Dialogue

14. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-14 Sample Dialogue Chart

15. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-15 Pull-Down and Cascading Menus menu bar Pull-down menu Cascading menu Ellipses indicates dialogue box

16. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-16 Dialogue Box

17. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-17 Pop-Up Menus

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

19. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-19 Iconic Menus

20. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-20 Consumer-Style Interface

21. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-21 Hybrid Windows/Web Interface

22. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-22 Instruction-Driven Interfaces *Three (3) types of syntax that may be used for an instruction set Language-based syntax ( 以語言為基礎的語法 ) is built around a widely accepted command language that can be used to invoke actions –SQL Mnemonic syntax ( 助憶式語法 ) is built around commands defined for custom information systems. –Commands unique to that system and meaningful to user Natural language syntax ( 自然語言語法 ) allows users to enter questions and command in their native language

23. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-23 Instruction-Driven Interface

24. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-24 Special Considerations for User Interface Design *Two (2) special considerations for user interface design Internal Controls ( 內部控制 ) – Authentication and Authorization –User ID and Password –Privileges assigned to roles –Web certificates Online Help ( 線上說明 ) –Growing use of HTML for help systems –Help authoring packages –Tool tips –Help wizards –Agents – reusable software object that can operate across different applications and networks.

25. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-25 Authentication Log-in Screen and Error Screen

26. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-26 Server Security Certificate

27. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-27 Help Tool Tip, Help Agent, and Natural Language Processing

28. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-28 Help Wizard

29. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-29 Automated Tools for User Interface Design & Prototyping Microsoft Access CASE Tools Visual Basic Excel Visio Visual Basic Menu Construction

30. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-30 Additional User Interface Controls in Visual Basic

31. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-31 The User Interface Design Process 1.Chart the user interface dialogue. State Transition Diagram ( 狀況轉移圖 ) – a tool used to depict the sequence and variation of screens that can occur during a user session. 2.Prototype the dialogue and user interface. 3.Obtain user feedback. Exercising (or testing) the user interface 4.If necessary return to step 1 or 2

32. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-32 Sound Stage Partial State Transition Diagram

33. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-33 Sound Stage Main Menu

34. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-34 Sound Stage Options and Preferences Screen

35. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-35 SoundStage Report Customization dialogue Screen

36. Irwin/McGraw-Hill Copyright © 2004 The McGraw-Hill Companies. All Rights reserved Whitten Bentley DittmanSYSTEMS ANALYSIS AND DESIGN METHODS6th Edition 17-36 Homework ( 習題 ) What are five (5) elements that frequently cause people to have difficulty with the interface of computer system. List the four (4) commandments of user interface design. What are the two (2) providers of the basic structure for any graphical user interface and how do they differ? What is the advantage of platform independence with respect to user interface design? What are function keys, and how are they typically used? List several styles of graphical user interfaces List and briefly describe several types of menus. What are three (3) types of syntax that may be used for an instruction set? What are two (2) important special considerations for use interface design?