1. HCI User Interface

2. What is an interface? the place at which independent and often unrelated systems meet and act on or communicate with each other. — Meriam-Webster Designing effective interfaces for software systems

3. The Interaction interaction models translations between user and system ergonomics physical characteristics of interaction interaction styles the nature of user/system dialog context social, organizational, motivational

4. interaction design basics design:  what it is, interventions, goals, constraints the design process  what happens when users  who they are, what they are like … scenarios  rich stories of design navigation  finding your way around a system iteration and prototypes  never get it right first time!

5. Why do we remember only the bad? A good interface should be transparent Bad interfaces cause user frustration “What was this product designer thinking?” GOODBAD

6. What Is “Design” in HCI? It is a process: —a goal-directed problem solving activity informed by intended use, target domain, materials, cost, and feasibility —a creative activity —a decision-making activity to balance trade- offs It is a representation: —a plan for development —a set of alternatives & successive elaborations

7. what is design? achieving goals within constraints goals - purpose who is it for, why do they want it constraints materials, platforms trade-offs

8. The user interface 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

9. The First Graphical User Interfaces XEROX’s GUI (1981) Microsoft’s Window (1985) Apple Computer’s Lisa GUI (1983)

10. A Brief History of User Interfaces Batch-processing No interactive capabilities All user input specified in advance (punch cards,...) All system output collected at end of program run (printouts,...) -> Applications have no user interface component distinguishable from File I/O Job Control Languages (example: IBM3090–JCL, anyone?): specify job and parameters

11. A Brief History of User Interfaces Time-sharing Systems Command-line based interaction with simple terminal Shorter turnaround (per-line), but similar program structure Example: still visible in Unix commands Full-screen textual interfaces Shorter turnaround (per-character) Interaction starts to feel "real-time" -> Applications receive UI input and react immediately in main "loop" (threading becomes important)

12. A Brief History of User Interfaces Menu-based systems Discover "Read & Select" over "Memorize & Type" advantage Still text-based! Example: UCSD Pascal Development Environment -> Applications have explicit UI component But: choices are limited to a particular menu item at a time (hierarchical selection)

13. A Brief History of User Interfaces Graphical User Interface Systems From character generator to bitmap display Pointing devices in addition to keyboard -> Event-based program structure Most dramatic paradigm shift for application development User is "in control" Application only reacts to user (or system) events Event handling

14. GUI characteristics

15. GUI advantages They are easy to learn and use. Users without experience can learn to use the system quickly. The user may switch quickly from one task to another and can interact with several different applications. Information remains visible in its own window when attention is switched. Fast, full-screen interaction is possible with immediate access to anywhere on the screen

16. Graphical User Interface (GUI) Standard elements in GUI based direct manipulation Bitmapped screen WIMP  Windows  Icon  Menus  Pointers

17. Graphical User Interface (GUI) Standard elements in GUI based direct manipulation WIMP  Windows  Multiple windows  Tiled vs. overlapping  Reduce and restore  Move  Resize  Scroll contents

18. Icons small picture or image represents some object in the interface often a window or action windows can be closed down (iconised) small representation if many accessible windows icons can be many and various highly stylized realistic representations.

19. 19 Icons Icons get used for lots of different things Representing objects Files Tools Representing commands Open Undo..often shortcuts to menu commands that have no icon

20. 20 Icons There are guidelines for these too Apple: Design and composition should indicate purpose Perspective should agree with real-life interactions Differentiate them from other UI elements Microsoft: Colors that complement the XP design Perspective is either at a certain angle, or straight-on Everyday objects should look modern

21. 21 Microsoft Icon Composition Exceptions: Document icons Symbols such as warning Single objects Objects not recognizable at an angle

22. 22 Apple Icon Composition Icon “genres” Application: media (paper) and tool (pen) Utility: straight perspective, subdued colors..also document, plug-in, toolbar

23. Dialog Styles Q & A Old style. Used with setup. Answer selected (menu).

24. Graphical User Interface (GUI) Standard elements in GUI based direct manipulation WIMP  Pointers  Property sheets/dialogue boxes  Check box  Selection / radio buttons  Fill-in blanks  Pallets  Tool bars  etc.

25. Pointers important component WIMP style relies on pointing and selecting things uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts wide variety of graphical images

26. Graphical User Interface (GUI) Standard elements in GUI based direct manipulation WIMP  Menus  Pull-down (from bar or top)  Pop-up/contextual (from item)

27. Menus Set of options displayed on the screen Options visible less recall - easier to use rely on recognition so names should be meaningful Selection by: numbers, letters, arrow keys, mouse combination (e.g. mouse plus accelerators) Often options hierarchically grouped sensible grouping is needed Restricted form of full WIMP system

28. Menu Selection

29. Menus Choice of operations or services offered on the screen Required option selected with pointer problem – take a lot of screen space solution – pop-up: menu appears when needed

30. Kinds of Menus Menu Bar at top of screen (normally), menu drags down pull-down menu - mouse hold and drag down menu drop-down menu - mouse click reveals menu fall-down menus - mouse just moves over bar! Contextual menu appears where you are pop-up menus - actions for selected object pie menus - arranged in a circle easier to select item (larger target area) quicker (same distance to any option) … but not widely used!

31. Buttons individual and isolated regions within a display that can be selected to invoke an action Special kinds radio buttons – set of mutually exclusive choices check boxes – set of non-exclusive choices

32. 32 Push Buttons You click it, and something happens Choose the title text carefully Apple: “Button names should be verbs that describe the action performed” Microsoft: “Aim for the shortest possible label; one word is best.” “If possible, use label text that makes sense when read out of context — for example, when a user reads or hears only the label of the current control.”

33. 33 Layout

34. 34 Layout Apple has a program called Interface Builder which automatically helps you use the correct spacing

35. 35 Layout

36. Toolbars long lines of icons … … but what do they do? fast access to common actions often customizable: choose which toolbars to see choose what options are on it

37. Dialogue boxes information windows that pop up to inform of an important event or request information. e.g: when saving a file, a dialogue box is displayed to allow the user to specify the filename and location. Once the file is saved, the box disappears.

38. Screen design use boxes to group logical items use fonts for emphasis, headings but not too many!! ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ

39. User interface design process

40. UI design principles UI design must take account of the needs, experience and capabilities of the system users Designers should be aware of people’s physical and mental limitations (e.g. limited short-term memory) and should recognise that people make mistakes UI design principles underlie interface designs although not all principles are applicable to all designs

41. User interface design principles

42. UI implementation Console applications (CUI’s) Command-line and natural language interfaces Interaction devises (input & output devises) User interfaces for virtual environments Graphical User Interfaces (GUI’s) Window systems, toolkits, frameworks GUI builders

43. Interaction styles Direct manipulation Menu selection Form fill-in Command language Natural language

44. Direct manipulation advantages Users feel in control of the computer and are less likely to be intimidated by it User learning time is relatively short Users get immediate feedback on their actions so mistakes can be quickly detected and corrected

45. Direct manipulation problems The derivation of an appropriate information space model can be very difficult Given that users have a large information space, what facilities for navigating around that space should be provided? Direct manipulation interfaces can be complex to program and make heavy demands on the computer system

46. Control panel interface

47. Menu systems Users make a selection from a list of possibilities presented to them by the system The selection may be made by pointing and clicking with a mouse, using cursor keys or by typing the name of the selection May make use of simple-to-use terminals such as touchscreens

48. Advantages of menu systems Users need not remember command names as they are always presented with a list of valid commands Typing effort is minimal User errors are trapped by the interface Context-dependent help can be provided. The user’s context is indicated by the current menu selection

49. Problems with menu systems Actions which involve logical conjunction (and) or disjunction (or) are awkward to represent Menu systems are best suited to presenting a small number of choices. If there are many choices, some menu structuring facility must be used Experienced users find menus slower than command language

50. Form-based interface

51. Command interfaces User types commands to give instructions to the system e.g. UNIX May be implemented using cheap terminals. Easy to process using compiler techniques Commands of arbitrary complexity can be created by command combination Concise interfaces requiring minimal typing can be created

52. Problems with command interfaces Users have to learn and remember a command language. Command interfaces are therefore unsuitable for occasional users Users make errors in command. An error detection and recovery system is required System interaction is through a keyboard so typing ability is required

53. Command line interface Way of expressing instructions to the computer directly function keys, single characters, short abbreviations, whole words, or a combination Exact spelling suitable for repetitive tasks better for expert users than novices offers direct access to system functionality command names/abbreviations should be meaningful! Hard to remember Typical example: the Unix system

54. Linux/UNIX: Shell Command Language

55. Windows XP “DOS” Shell Command Language

56. Command languages Often preferred by experienced users because they allow for faster interaction with the system Not suitable for casual or inexperienced users May be provided as an alternative to menu commands (keyboard shortcuts). In some cases, a command language interface and a menu-based interface are supported at the same time

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

58. Interface User interfaces handle inputs and outputs that involve the system user directly Interactions with the user and computer (HCI) can be modeled with dialog designs User-interface design occurs in each iteration

59. Well, “…it could be better …”

60. “Better …”

61. Three dimensional interfaces virtual reality ‘ordinary’ window systems highlighting visual affordance indiscriminate use just confusing! 3D workspaces use for extra virtual space light and occlusion give depth distance effects flat buttons … … or sculptured click me!

62. Information presentation Static information Initialised 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

63. Dynamic information display

64. Data visualisation Concerned with techniques for displaying large amounts of information Visualisation can reveal relationships between entities and trends in the data Possible data visualisations are: Weather information collected from a number of sources The state of a telephone network as a linked set of nodes Chemical plant visualised 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

65. Conceptual model Need to first think about how the system will appear to users (i.e. how they will understand it) A conceptual model is a high level description of: “the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended”

66. Conceptual Model Model of the product that the designer wants the user to understand. Designer’s view of the product. Expressed in terms of the concepts of the intended user’s task domain Data and how, when, where it will be used. In most cases, this is NOT an interface drawing. Explains the function of the software and what people need to be aware of in order to use it.

67. Brief History meteorological CM’s first appeared in early 1990’s since then, many have been identified and described in various literature 1996 – “Manual of Synoptic Satellite Meteorology – Conceptual Models” started by the Austrian Meteorological Institute (ZAMG)

68. Two Views of Function User versus Designer

69. Iterative Design Overview Models & Specifications Demos & Products User Requirements Design, Conceptual & Physical Prototyping & Construction Evaluation & Feedback

70. 1. Object/Action Analysis Define all of the objects. Nouns. Define all of the actions. Verbs

71. 2. Lexicon or Ontology Ontology A common vocabulary for a specific domain. Learn the users’ vocabulary and introduce yours. Agree upon a common use of terms.

72. 3. Scenarios Task Scenarios Scenario development Participatory vs. Designer (Conceptual Model) Participatory Users are involved in the design of the scenarios. Designer based scenarios Designer uses conceptual model to develop scenarios. Conceptual Model = Mental Model???

73. 3. Scenarios: System Model

74. Physical, perceptual, and conceptual aspects of the user interface

75. Prototyping & Construction What is a prototype? Why prototype? Low vs. high fidelity prototyping Compromises in prototyping Vertical vs. horizontal Construction Evolutionary vs. throwaway prototype

76. What is a prototype? Limited representation of a product design Scale models, etc. In interaction design it can be (among other things): a series of screen sketches a storyboard, i.e. a cartoon-like series of scenes a piece of software with limited functionality

77. Sketching Core skill for most low-fidelity prototyping Not about drawing ability! Simple symbols Cruder sketch will emphasize conceptual design over superficial, physical design

80. Storyboards Storyboards often used with scenarios, bringing detail and a chance to role play Series of scene sketches showing user progression through a task flow Series of screenshots illustrating use case Checkout: Product List, Shipping, Payment, Confirmation

81. Physical Design Conceptual design abstractly describes system’s intended behavior ATM should authenticate user ID and allow user to withdraw cash on command Physical design addresses specific, concrete layout and design issues ATM should have a card reader slot, a 10 digit keypad for users to enter a PIN number, a touch screen monitor with a menu of command options and a mechanical reel for dispensing increments of $20 bills

82. Specific Widget Guidelines Menu Design Common functions should be easiest to reach >8 options is too much, grouping to organize Opposite and dangerous operators should be physically separated to avoid accidents Icon Design Takes time to develop a good one Immediately recognizable (small and simple) Easily distinguishable from others More important than being very descriptive

83. Interaction Modes Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing Object-based

84. Interaction Modes Activity-based Instructing Conversing Manipulating & Navigating Exploring & Browsing Object-based

85. Good Designs => Usable Systems Work the way the user thinks they should Allows the user to focus on task at hand and not worry about the underlying technology and interaction technology Minimize user errors Promote user satisfaction (users should feel that they are accomplishing more with the system than without the system)

86. Graphical Representation From the design point of view Screen  two-dimensional Objects  two-dimensional/three-dimensional Representation of 2D objects on a 2D screen Straightforward graphics is enough Representation of 3D objects on a 2D screen Required special techniques Human vision psychology is required to be considered

88. Four basic activities There are four basic activities in Interaction Design: 1. Identifying needs and establishing requirements 2. Developing alternative designs 3. Building interactive versions of the designs 4. Evaluating designs

89. Some practical issues Who are the users? What are ‘needs’? Where do alternatives come from? How do you choose among alternatives?

90. What are the users’ capabilities? Humans vary in many dimensions: — size of hands may affect the size and positioning of input buttons — motor abilities may affect the suitability of certain input and output devices —strength - a child’s toy requires little strength to operate, but greater strength to change batteries — disabilities(e.g. sight, hearing, dexterity)

91. What are ‘needs’? Users rarely know what is possible Users can’t tell you what they ‘need’ to help them achieve their goals Instead, look at existing tasks: –their context –what information do they require? –who collaborates to achieve the task? –why is the task achieved the way it is? Envisioned tasks: –can be rooted in existing behaviour –can be described as future scenarios

92. What is interaction design? Designing interactive products to support people in their everyday and working lives  Sharp, Rogers and Preece (2002) The design of spaces for human communication and interaction  Winograd (1997)

93. Testing prototypes to choose among alternatives

94. Many kinds of interaction styles available… Command line interface Speech Data-entry Form fill-in Query Graphical Web Pen Augmented reality three–dimensional interfaces

95. Web-based interfaces Many web-based systems have interfaces based on web forms. Form field can be menus, free text input, radio buttons, etc. In the LIBSYS example, users make a choice of where to search from a menu and type the search phrase into a free text field.

96. LIBSYS search form

97. physical controls grouping of items defrost settings type of food time to cook11 type of food time to cook defrost settings

98. physical controls grouping of items order of items 4 4)start 2 2)temperature 3 3)time to cook 1 1)type of heating

99. physical controls grouping of items order of items decoration different colours for different functions lines around related buttons (temp up/down)

100. physical controls grouping of items order of items decoration alignment ? easy to scan ? centred text in buttons

101. physical controls grouping of items order of items decoration alignment white space gaps to aid grouping

102. alignment - text you read from left to right (English and European)  align left hand side Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess Willy Wonka and the Chocolate Factory Winston Churchill - A Biography Wizard of Oz Xena - Warrior Princess fine for special effects but hard to scan boring but readable!

103. multiple columns scanning across gaps hard: (often hard to avoid with large data base fields) sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85

104. multiple columns - 2 use leaders sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85

105. multiple columns - 3 or greying (vertical too) sherbert75 toffee120 chocolate35 fruit gums27 coconut dreams85

106. colour and 3D both often used very badly! colour older monitors limited palette colour over used because ‘it is there’ beware colour blind! use sparingly to reinforce other information 3D effects good for physical information and some graphs but if over used … e.g. text in perspective!! 3D pie charts

107. bad use of colour over use - without very good reason (e.g. kids’ site) colour blindness poor use of contrast do adjust your set! adjust your monitor to greys only can you still read your screen?

108. Example : Color Stereoscopy

109. Example : Text Stand Out

110. Example: One Color

111. Example: Two Colors

112. Example: Three Colors

113. Example: Four Colors

114. Text & Colors What materials to present as spoken vs. text? “less text is normally more effective” Text presentation Number of fonts– one or two E.g., stick with Times New Roman, or stick with New Century Schoolbook Don’t overuse bold, italics, underline etc. Spell check & proof read! Colors Background– pale colors Foreground– brighter colors Use a small number of colors

115. Example: One Font

116. Example: Two Fonts

117. Example: Three Fonts

118. Example: Four Fonts

119. Attention with Structured Information Structure the information so that it is easy to navigate through Presenting not so much information and not too little on a screen Instead of arbitrarily presenting data on the screen, it should be grouped and ordered into meaningful parts Blank space Color Font variations etc.

120. Attention with Structured Information

121. Error messages Error message design is critically important. Poor error messages can mean that a user rejects rather than accepts a system Messages should be polite, concise, consistent and constructive The background and experience of users should be the determining factor in message design

122. Design factors in message wording

123. Nurse input of a patient’s name Please type the patient name in the box then click ok Bates, J. OKCancel

124. System and user-oriented error messages

125. Help system design Help? means ‘help I want information” Help! means “HELP. I'm in trouble” Both of these requirements have to be taken into account in help system design Different facilities in the help system may be required

126. Help system use Multiple entry points should be provided so that the user can get into the help system from different places. Some indication of where the user is positioned in the help system is valuable. Facilities should be provided to allow the user to navigate and traverse the help system.

127. Entry points to a help system

128. User documentation As well as on-line information, paper documentation should be supplied with a system Documentation should be designed for a range of users from inexperienced to experienced As well as manuals, other easy-to-use documentation such as a quick reference card may be provided

129. Document types Functional description Brief description of what the system can do Introductory manual Presents an informal introduction to the system System reference manual Describes all system facilities in detail System installation manual Describes how to install the system System administrator’s manual Describes how to manage the system when it is in use

130. Example Visionary approaches for developing novel conceptual paradigms