1. Software Engineering Chapter 16 User Interface Design Ku-Yaw Chang canseco@mail.dyu.edu.tw Assistant Professor Department of Computer Science and Information Engineering Da-Yeh University

2. 2Ku-Yaw ChangUser Interface Design Objectives Understand a number of user interface design principles Have been introduced to several interaction styles and understand when these are most appropriate Understand when to use graphical and textural presentation of information Know what is involved in the principal activities in the user interface design process Understand usability attributes and have been introduced to different approaches to interface evaluation

3. 3Ku-Yaw ChangUser Interface Design Preamble Software engineers often take responsibility for user interface design Only large organizations employ specialist interface designers Only large organizations employ specialist interface designers Focus on the design process for user interfaces Graphical user interfaces Graphical user interfaces

4. 4Ku-Yaw ChangUser Interface Design Preamble Take into account the physical and mental capabilities of the people People have a limited short-term memory People have a limited short-term memory Seven items of information People make mistakes People make mistakes Warning messages and alarms put more stress on users People have a diverse range of physical capabilities People have a diverse range of physical capabilities See better / color-blind People have different interaction preferences People have different interaction preferences Pictures or text

5. 5Ku-Yaw ChangUser Interface Design User Interface Design Principles

6. 6Ku-Yaw ChangUser Interface Design Contents 16.1 Design issues 16.2 The UI design process 16.3 User analysis 16.4 User interface prototyping 16.5 Interface evaluation

7. 7Ku-Yaw ChangUser Interface Design Design Issues Two key questions How should the user interact with the computer system? How should the user interact with the computer system? How should information from the computer system be presented to the user? How should information from the computer system be presented to the user?

8. 8Ku-Yaw ChangUser Interface Design User Interaction User interaction Issue commands and associated data to the computer system Issue commands and associated data to the computer system Five primary styles Direct manipulation Direct manipulation Menu selection Menu selection Form fill-in Form fill-in Command language Command language Natural language Natural language

9. 9Ku-Yaw ChangUser Interface Design Interaction Styles

10. 10Ku-Yaw ChangUser Interface Design Multiple User Interfaces

11. 11Ku-Yaw ChangUser Interface Design LIBSYS Search Form

12. 12Ku-Yaw ChangUser Interface Design Information Presentation A good design guideline To keep the software required for information presentation separate from the information itself To keep the software required for information presentation separate from the information itself

13. 13Ku-Yaw ChangUser Interface Design Information Presentation

14. 14Ku-Yaw ChangUser Interface Design Model-View-Controller

15. 15Ku-Yaw ChangUser Interface Design Alternative Information Presentations

16. 16Ku-Yaw ChangUser Interface Design Presentation Methods

17. 17Ku-Yaw ChangUser Interface Design Displaying Relative Values

18. 18Ku-Yaw ChangUser Interface Design Design Factors in Message Wording

19. 19Ku-Yaw ChangUser Interface Design Color Displays Color adds an extra dimension to an interface and can help the user understand complex information structures. Color can be used to highlight exceptional events. Common mistakes in the use of color in interface design include: The use of color to communicate meaning; The use of color to communicate meaning; The over-use of color in the display. The over-use of color in the display.

20. 20Ku-Yaw ChangUser Interface Design Color Use Guidelines Limit the number of colors used and be conservative in their use. 4 to 5 in a window 4 to 5 in a window 7 in a system interface 7 in a system interface Use color change to show a change in system status. Use color coding to support the task that users are trying to perform. Use color coding in a thoughtful and consistent way. Be careful about color pairings. Red and blue Red and blue

21. 21Ku-Yaw ChangUser Interface Design User Error Assume that a nurse misspells the name of a patient whose records he is trying to retrieve.

22. 22Ku-Yaw ChangUser Interface Design Good and Bad Message Design

23. 23Ku-Yaw ChangUser Interface Design Contents 16.1 Design issues 16.2 The UI design process 16.3 User analysis 16.4 User interface prototyping 16.5 Interface evaluation

24. 24Ku-Yaw ChangUser Interface Design The UI Design Process An interactive process User interact with designers and interface prototypes User interact with designers and interface prototypes Three core activities User analysis User analysis An understanding of the tasks that users do, their working environment, how they interact with other people and so on System prototyping System prototyping The evolution of the interface Interface evaluation Interface evaluation Collect information about users’ actual experience

25. 25Ku-Yaw ChangUser Interface Design UI Design Process

26. 26Ku-Yaw ChangUser Interface Design Contents 16.1 Design issues 16.2 The UI design process 16.3 User analysis 16.4 User interface prototyping 16.5 Interface evaluation

27. 27Ku-Yaw ChangUser Interface Design Analysis Techniques Task analysis Models the steps involved in completing a task. Models the steps involved in completing a task. Interviewing and questionnaires Asks the users about the work they do. Asks the users about the work they do.Ethnography Observes the user at work Observes the user at work

28. 28Ku-Yaw ChangUser Interface Design Hierarchical Task Analysis

29. 29Ku-Yaw ChangUser Interface Design Hierarchical Task Analysis A high-level task is broken down into subtasks Advantage Force you to consider each of the tasks and to decide whether these should be decomposed Force you to consider each of the tasks and to decide whether these should be decomposedProblem Best suited to sequential processes only Best suited to sequential processes only

30. 30Ku-Yaw ChangUser Interface Design Contents 16.1 Design issues 16.2 The UI design process 16.3 User analysis 16.4 User interface prototyping 16.5 Interface evaluation

31. 31Ku-Yaw ChangUser Interface Design User Interface Prototyping Aim Allow users to gain direct experience with the interface Allow users to gain direct experience with the interface Judge the usability of an interface Judge the usability of an interface A two-stage process Early in the process, paper prototypes may be used; Early in the process, paper prototypes may be used; The design is then refined and increasingly sophisticated automated prototypes are then developed. The design is then refined and increasingly sophisticated automated prototypes are then developed.

32. 32Ku-Yaw ChangUser Interface Design Prototyping Techniques Script-driven approach Develop a set of scripts and screens using a tool such as Macromedia Director. When the user interacts with these, the screen changes to the next display. Develop a set of scripts and screens using a tool such as Macromedia Director. When the user interacts with these, the screen changes to the next display. Visual programming languages Use a language designed for rapid development such as Visual Basic Use a language designed for rapid development such as Visual Basic Internet-based prototyping Use a web browser and associated scripts. Use a web browser and associated scripts.

33. 33Ku-Yaw ChangUser Interface Design Contents 16.1 Design issues 16.2 The UI design process 16.3 User analysis 16.4 User interface prototyping 16.5 Interface evaluation

34. 34Ku-Yaw ChangUser Interface Design Usability attributes

35. The End