Computing and SE II Chapter 10: HCI (Human Computer Interface ) Design

1. Computing and SE IIChapter 10: HCI (Human Computer Interface ) Design Er-Yu Ding Software Institute, NJU

2. Main Contents Why HCI Design? Objectives of HCI Design Basics of HCI Design Golden Principles and Rules of HCI Design Process of HCI Design

3. 1.Why HCI Design?——What is HCI? UI design is not just about the arrangement of media on a screen It’s designing an entire experience for people, hence a “look and feel” Psychology: building a mental model Ergonomics: facilitating navigation

4. 1.Why HCI Design?——Mental Model: An Example (1)

5. 1.Why HCI Design?——Mental Model: An Example (2)

6. 1.Why HCI Design?——Mental Model: An Example (3)

7. 1.Why HCI Design? • System users often judge a system by its interface rather than its functionality. • User interfaces should be designed to match the skills, experience and expectations of its anticipated users. • A poorly designed interface can cause a user to make catastrophic errors. • A poor UI is often a reason why so many software systems are never used. • “A user interface is well-designed when the program behaves exactly how the user thought it would.” – Joel Spolsky

8. 1.Why HCI Design?——We remember only the bad! GOOD BAD • A good interface should be transparent • Bad interfaces cause user frustration • “What was this product designer thinking?”

9. 2. Objectives of HCI Design ——What is a good HCI interface design How to judge good or bad? Usability! A good HCI interface design encourage an easy, natural, and engaging interaction between a user and a system. It allows users to carry our their required tasks. With a good user interface, users forget that they are using a computer.

10. 2. Objectives of HCI Design —— Usability attributes of an interface Usability is not a single, one-dimensional property of a user interface Learnability: learn easily, user can do things with it in little time Efficiency: skilled users can use it with great efficiency Memorability: interrupted users can continual use it ,do not need to starting from scratch Errors: little errors, resume quickly from errors Satisfaction: make users pleased

11. 2. Objectives of HCI Design —— Learn Curve

12. 2. Objectives of HCI Design —— Memory • Involves encoding and recalling knowledge and acting appropriately • We don’t remember everything – involves filtering and processing • Context is important in affecting our memory • We recognize things much better than being able to recall things • The rise of the GUI over command-based interfaces • Better at remembering images than words • The use of icons rather than names

13. 2. Objectives of HCI Design —— Human Factors in Interface Design • Limited short-term memory • People can instantaneously remember about 7 items of information. If you present more than this, they are more liable to make mistakes. • People make mistakes • When people make mistakes and systems go wrong, inappropriate alarms and messages can increase stress and hence the likelihood of more mistakes. • People are different • People have a wide range of physical capabilities. Designers should not just design for their own capabilities. • People have different interaction preferences • Some like pictures, some like text.

14. 3. Basics of HCI Design ——User-System interaction Two problems must be addressed in interactive systems design How should information from the user be provided to the computer system? How should information from the computer system be presented to the user? User interaction and information presentation may be integrated through a coherent framework such as a user interface metaphor.

15. 3. Basics of HCI Design —— Interaction styles Direct manipulation Easiest to grasp with immediate feedback Difficult to program Menu selection User effort and errors minimized Large numbers and combinations of choices a problem Form fill-in Ease of use, simple data entry Tedious, takes a lot of screen space Command language Easy to program and process Difficult to master for casual users Natural language Great for casual users Tedious for expert users

16. 3. Basics of HCI Design —— An Example of Direct manipulation Control panel interface

17. 3. Basics of HCI Design —— Direct manipulation • Advantages: • Users feel in control of the computer and are not intimidated by it. • User learning time is relatively short. • User get immediate feedback on their actions. Mistakes can often be detected and corrected quickly. • Problems: • How can an appropriate information model and metaphors be derived? • Given that users have a large information space, how can they navigate around that space and always aware of their current position? • Interfaces usually are complicated.

18. 3. Basics of HCI Design —— Menu Systems Pull-down menu Pop-up menu Walking menu • pull-down menus: • predictable, but need more screen space • display the menu title. • User can select commands through this menu. • pop-up menus: • flexible, tailorable, may cause user surprise • -They are associated with entities (such as a field). • Selecting the entity then clicking a mouse button --> cause the menu to appear.

19. 3. Basics of HCI Design —— Menu Systems • Advantages: • Users do not need to know the command names. • Typing efforts is minimal. • Some user errors can be avoid. • Context-dependent help can be provided. • Problems: • Actions which involve logical conjunction (and) or disjunction (or) are awkward to represent • Take care the structure of large menus. • Solutions: a) scrolling menus, b) hierarchical menus c) walking menus, d) associated control panels

20. 3. Basics of HCI Design —— Form-based interface • Advantage • For structured data representation and filling in • Problems • Just for structured data representation and filling in

21. 3. Basics of HCI Design ——Command-line interfaces • Advantages: • Implementation is easy and simple due to the language processing. • It can support very complex systems with a lot of commands. • User interface needs a little effort. • Typing efforts is minimal. • Some user errors can be avoid. • Context-dependent help can be provided. • Problems: • Users must learn and remember all commands. • Hard to learn the system and not easy for operations. • Users inevitably make errors.

22. 3. Basics of HCI Design —— Natural language interfaces The user types a command in a natural language. Generally, the vocabulary is limited and these systems are confined to specific application domains (e.g. timetable enquiries) NL processing technology is now good enough to make these interfaces effective for casual users but experienced users find that they require too much typing

23. 3. Basics of HCI Design —— Multiple user interfaces

25. 3. Basics of HCI Design —— Interface Types Batch: without interaction Copy, email-message, etc. Command: one-dimension interface For skilled users with fixed tasks Full screen: two-dimension interface form, menu, navigation key For skilled users with limited number tasks Graphics screen: two and half dimension interface Window, menu, icon, position devices (mouse, etc.) Object-oriented, operate directly Next generation in the future: three or more dimensions interface Additional dimensions: time, voice, etc. More facilitative, more personalization

26. 4. Golden Principles and Rules of HCI Design—— Golden Rules Place the user in control Reduce the user’s memory load Be consistent

27. 4. Golden Principles and Rules of HCI Design—— Place the User in Control Define interaction modes in a way that does not force a user into unnecessary or undesired actions. Provide for flexible interaction. Allow user interaction to be interruptible and undoable. Streamline interaction as skill levels advance and allow the interaction to be customized. Hide technical internals from the casual user. Design for direct interaction with objects that appear on the screen.

28. 4. Golden Principles and Rules of HCI Design—— Reduce the User’s Memory Load Reduce demand on short-term memory. Establish meaningful defaults. Define shortcuts that are intuitive. The visual layout of the interface should be based on a real world metaphor. Disclose information in a progressive fashion.

29. 4. Golden Principles and Rules of HCI Design—— Make the Interface Consistent Allow the user to put the current task into a meaningful context. Maintain consistency across a family of applications. If past interactive models have created user expectations, do not make changes unless there is a compelling reason to do so.

30. 4. Golden Principles and Rules of HCI Design—— Ten Principles （1） Compact and natural dialogue Design graph and color Few is much Using user language Least memory needed for user Consistent Feedback

31. 4. Golden Principles and Rules of HCI Design—— Ten Principles （2） Identify exit clear Shortcut Good error message Avoid mistake Help and document

32. 4. Golden Principles and Rules of HCI Design—— Which Rules is there? Obtrusive Assistance

33. If your program model is nontrivial, it’s probably wrong 4. Golden Principles and Rules of HCI Design—— Which Rules is there? Click here This window comes to top! (“invisible sheets” in Excel)

34. 4. Golden Principles and Rules of HCI Design—— Which Rules is there? Bad Wizards

35. 4. Golden Principles and Rules of HCI Design—— Which Rules is there? XEROX’s GUI (1981)

36. How do the following screen objects afford? What if you were a novice user? Would you know what to do with them? 4. Golden Principles and Rules of HCI Design—— Which Rules is there?

37. 4. Golden Principles and Rules of HCI Design—— Which Rules is there? phones, remote controls calculators, computer keypads

38. 4. Golden Principles and Rules of HCI Design—— Which Rules is there? click

39. 4. Golden Principles and Rules of HCI Design—— Which Rules is there? floating menu bar huge system tray How many users want these?

40. 4. Golden Principles and Rules of HCI Design—— Which Rules is there? vs. (30% usability) (100% usability)

41. 4. Golden Principles and Rules of HCI Design—— Which Rules is there?

42. 4. Golden Principles and Rules of HCI Design—— Which Rules is there? vs.

43. 4. Golden Principles and Rules of HCI Design—— Which Rules is there? vs. vs. (no dialog) Which is better for an intimidated user?

44. 4. Golden Principles and Rules of HCI Design—— Which Rules is there?

45. 4. Golden Principles and Rules of HCI Design—— Which Rules is there?

46. 4. Golden Principles and Rules of HCI Design—— Which Rules is there?

47. 4. Golden Principles and Rules of HCI Design—— Which Rules is there?

48. 5. Process of HCI Design——Four basic activities • There are four basic activities in interaction design: • Identifying needs and establishing requirements • Developing alternative designs • Building interactive versions of the designs • Evaluating designs

49. 5. Process of HCI Design—— User Interface Design Process

50. 5. Process of HCI Design—— Interface Analysis Interface analysis means understanding User Individual characteristics User groups Frequency of usage Work Task features Time constraints Errors Content Figure , graph or text Environment General environment factors Organization Curture