Introduction: Human Computer Interface Design

1. Introduction: Human Computer Interface Design Adapted from: Sommerville, I. Software Engineering 8th ed.. Reading, MA: Addison-Wesley Publishing Co., 2006 .

2. The User Interface • User interfaces should be designed to match the skills, experience and expectations of its anticipated users. • System users often judge a system by its interface rather than its functionality. • A poorly designed interface can cause a user to make catastrophic errors. • Poor user interface design is the reason why so many software systems are never used.

3. Human Factors • 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.

4. 1 2 http://www.dell.com/us/p/d/campaigns/tablet-comparison.aspx

5. Human Computer Interface Design Requires: • Creation of different models • Understanding of human and computer oriented tasks to achieve functionality • Adherence to design issues and guidelines • Understanding of user-system interaction

6. Principles of HCI Design:Recognize the diversity-1 • Depict profile of end users • age • sex • physical abilities • education • culture/ethnic backgrounds • motivation and goals • Identify tasks • Use case scenarios • Examine task frequencies (frequent should be simple) • Determine interaction style

7. Principles of HCI Design:Recognize the diversity-2 Types of Users • Novice • No syntactic knowledge • Mechanism of interaction requires interface to be effective with little sense of application • Knowledgeable, intermittent users • Reasonable semantic knowledge • Low recall of syntactic information • Knowledgeable, frequent user • Good semantic and syntactic knowledge • Wants shortcuts and abbreviated modes of operation

8. Principles of HCI Design:Recognize the diversity-3 Tasks • Understand task • Identify real-world objects needed to accomplish intentions • Identify actions that will be applied to objects. • Decompose objects and actions (individual steps) • Create metaphor representations of objects and actions for interface

9. Principles of HCI Design:Use rules of interface design. • Strive for consistency. • Enable frequent users to use shortcuts. • Offer informative feedback. • Design dialogs to yield closure. • Permit reversal of actions. • Reduce short-term memory load.

10. Principles of HCI Design:Prevent errors. • Correct matching pairs (put both in one stroke). • Complete sequences (put in single action). • Correct commands (automatic command completion) • Improve error messages • Specific and constructive • Positive in tone

11. Microsoft Money 2007 Home & Business

12. Types of Interfaces:Direct Manipulation • Presents user with model of their information space • Users interact with direct actions • Examples: word processors, screen editors, forms • Advantages • Users in control • Learning time short • Users get immediate feedback • Disadvantages • Not suited for casual use • In some cases consumes more computer resources

13. Types of Interfaces:Metaphor and Control Panel Models • Metaphor helps define a consistent model • Example: desktop metaphor • Not suitable for complex applications • Control panel • Graphical representation of system commands • Command icons that match menu command • Buttons (Print, Quit) • Switches • Indicators • Displays • Sliders

14. Types of Interfaces:Menu Systems • Users select one of a number of possibilities • Types: pull down or pop up • Scrolling: Menu scrolls to display next choice • Hierarchical: Current menu is replaced by next • Walking: Form of hierarchical that creates menu adjacent to it • Associated control panels

15. Types of Interfaces:Menu Systems • Advantages • No need to know command names • Some user error prevented (disable invalid choices) • Context-dependent help can be provided • Disadvantages • Need to structure large menus • May need time to understand menu choices

16. Types of Interfaces:Command Line Interface • User types command to system. • Not suitable for casual or inexperienced users • Advantages • Interface can be made concise with little typing • Can be combined with other approaches • Disadvantages • Need to learn command language • Errors can be introduced

17. Summary: Interaction styles

18. Information Presentation • Static information • Initialized at the beginning of a session. It does not change during the session. • May be either numeric or textual. • Dynamic information • Changes during a session and the changes must be communicated to the system user. • May be either numeric or textual.

19. Information Display Factors • Is the user interested in precise information or data relationships? • How quickly do information values change? • Must the change be indicated immediately? • Must the user take some action in response to a change? • Is there a direct manipulation interface? • Is the information textual or numeric? • Are relative values important?

20. Analog or Digital Presentation? • Digital presentation • Compact - takes up little screen space; • Precise values can be communicated. • Analog presentation • Easier to get an 'at a glance' impression of a value; • Possible to show relative values; • Easier to see exceptional data values.

21. Presentation Methods

22. Data Visualization • Concerned with techniques for displaying large amounts of information. • Visualization can reveal relationships between entities and trends in the data. • Possible data visualizations are: • Weather information collected from a number of sources; • The state of a telephone network as a linked set of nodes; • Chemical plant visualized by showing pressures and temperatures in a linked set of tanks and pipes; • A model of a molecule displayed in 3 dimensions; • Web pages displayed as a hyperbolic tree.

23. Information Presentation: Color • Limit number of colors on screen (no more than 4) • Use color to support user’s task • Highlight anomalies • Highlight similarities • Highlight change in status • Color communicates meaning (know users) • Driver: Red=stop; Chemist: Red=hot • Be aware of color blindness: 10% of males • Avoid bad pairings. • Use color in a consistent fashion. If you can read this you are my hero!!!

24. Information Presentation: Error Messages • Context: Keep system aware of what user is doing • Experience: allow user to control detail in message • Skill level • Message for a novice is different than the message for experienced user • Include terminology familiar to user • Style • Positive and not negative • Active rather than passive • Professional • Culture differences

25. ERROR! • Error #27: invalid patient ID.

26. Error Patient Joe Hernandez is not registered. Click on Patient for a list of registered patients. Click on Retry to re-enter information. Click on Help for more information.

27. User Interface Design Principles

28. Other Considerations • Learnability • How long will it take a user to become productive? • Speed of operations • How well does the system response match the user’s work practice? • Robustness • How tolerant is the system of user error? • Adaptability • How closely is the system tied to a single model of work?

29. The UI Design Process • UI design is an iterative process involving close liaisons between users and designers. • The 3 core activities in this process are: • User analysis. Understand what the users will do with the system; • System prototyping. Develop a series of prototypes for experiment; • Interface evaluation. Experiment with these prototypes with users.

30. The Design Process

31. User Analysis • If you don’t understand what the users want to do with a system, you have no realistic prospect of designing an effective interface. • User analyses have to be described in terms that users and other designers can understand. • Scenarios where you describe typical episodes of use, are one way of describing these analyses.

32. What is a Prototype? • Views of prototype • A model that presents an interface of system • A “working” model with limited functionality • Purpose • Understand and elicit requirements • Verify and validate • Requirements • Designs • Technology • Involve customers and assist in communication • Reduce risk

33. Other Reasons • Verify an algorithm will work. • Verify an interface will be usable. • Experiment with alternate approaches. • Understand uncertain system functions. • Evaluate time and memory requirements.

34. Prototype Approaches • Approaches • Pen and paper • Storyboards • PICTIVE (Michael Muller) • Users participate in construction of their own storyboard • Poster board • Construction paper • Sticky notes • Scenarios • Videos • Support • High-level languages (Lisp, Prolog, Visual Basic) • Database (4GLs, SQL, report generators) • Components (Swing, AWT, Python) • Tools (JBuilder)

35. Hints on HCI Prototype • Avoid making interface look too slick. • Customers reluctant to suggest changes • Customers will think it’s finished • Do not impose your view of an acceptable user interface on users.

36. Soon to Come Assignment • Identify tasks and actions • Define comprehensible mental image (metaphor) • Create appropriate organization of data, functions, tasks and roles • Be attentive to efficient navigation among these data, functions, tasks and roles • Pay attention to quality appearance (the look) and effective interaction sequencing (the feel) • Create a paper or powerpoint prototype

37. All GUI examples taken from: • http://www.buigallery.com