Human-Computer Interaction

1. Human-Computer Interaction Usability Alexiei Dingli adingli@stmartins.edu

2. What are Paradigms? Predominant theoretical frameworks or scientific world views e.g., Aristotelian, Newtonian, Einsteinian (relativistic) paradigms in physics Understanding HCI history is largely about understanding a series of paradigm shifts Not all listed here are necessarily “paradigm” shifts, but are at least candidates History will judge which are true shifts

3. Why study paradigms? Concerns how can an interactive system be developed to ensure its usability? how can the usability of an interactive system be demonstrated or measured? History of interactive system design provides paradigms for usable designs

4. Paradigms of interaction

5. The initial paradigm Batch processing

6. Example Paradigm Shifts Batch processing Time-sharing

7. Example Paradigm Shifts Batch processing Timesharing Networking

8. Example Paradigm Shifts Batch processing Timesharing Networking Graphical displays

9. Example Paradigm Shifts Batch processing Timesharing Networking Graphical display Microprocessor

10. Example Paradigm Shifts Batch processing Timesharing Networking Graphical display Microprocessor WWW

11. Example Paradigm Shifts A symbiosis of physical and electronic worlds in service of everyday activities. (IPv6)

12. Time-sharing 1940s and 1950s – explosive technological growth 1960s – need to channel the power single computer supporting multiple users

13. Video Display Units more suitable medium than paper 1962 – Sutherland's Sketchpad computers for visualizing and manipulating data one person's contribution could drastically change the history of computing

14. Programming toolkits Engelbart at Stanford Research Institute 1963 – augmenting man's intellect 1968 NLS/Augment system demonstration the right programming toolkit provides building blocks to producing complex interactive systems

15. Personal computing 1970s – Papert's LOGO language for simple graphics programming by children A system is more powerful as it becomes easier to user Future of computing in small, powerful machines dedicated to the individual Kay at Xerox PARC – the Dynabook as the ultimate personal computer

16. Window systems and the WIMP interface humans can pursue more than one task at a time windows used for dialogue partitioning, to “change the topic” 1981 – Xerox Star first commercial windowing system windows, icons, menus and pointers now familiar interaction mechanisms

17. Metaphor relating computing to other real-world activity is effective teaching technique LOGO's turtle dragging its tail file management on an office desktop word processing as typing financial analysis on spreadsheets virtual reality – user inside the metaphor Problems some tasks do not fit into a given metaphor cultural bias

18. Direct manipulation 1982 – Shneiderman describes appeal of graphically-based interaction visibility of objects incremental action and rapid feedback reversibility encourages exploration syntactic correctness of all actions replace language with action 1984 – Apple Macintosh the model-world metaphor What You See Is What You Get (WYSIWYG)

19. Language versus Action actions do not always speak louder than words! DM – interface replaces underlying system language paradigm interface as mediator interface acts as intelligent agent programming by example is both action and language Why is the action paradigm not always more appropriate than the language paradigm? Hint: QBE

20. Hypertext key to success in managing explosion of information mid 1960s – Nelson describes hypertext as non-linear browsing structure hypermedia and multimedia Nelson's Xanadu project still a dream today

21. Multimodality a mode is a human communication channel emphasis on simultaneous use of multiple channels for input and output

22. Computer Supported Cooperative Work (CSCW) CSCW removes bias of single user / single computer system Can no longer neglect the social aspects Electronic mail, chats are most prominent success

23. The World Wide Web Hypertext, as originally realized, was a closed system Simple, universal protocols (e.g. HTTP) and mark-up languages (e.g. HTML) made publishing and accessing easy Critical mass of users lead to a complete transformation of our information economy.

24. Agent-based Interfaces Original interfaces Commands given to computer Language-based Direct Manipulation/WIMP Commands performed on “world” representation Action based Agents - return to language by instilling proactivity and “intelligence” in command processor Avatars, natural language processing

25. Ubiquitous Computing “The most profound technologies are those that disappear.” Mark Weiser, 1991 Late 1980’s: computer was very apparent How to make it disappear? Shrink and embed/distribute it in the physical world Design interactions that don’t demand our intention

26. Sensor-based and Context-aware Interaction Humans are good at recognizing the “context” of a situation and reacting appropriately Automatically sensing physical phenomena (e.g., light, temp, location, identity) becoming easier How can we go from sensed physical measures to interactions that behave as if made “aware” of the surroundings?

27. Design rules Designing for maximum usability – the goal of interaction design Principles of usability general understanding Standards and guidelines direction for design Design patterns capture and reuse design knowledge

28. Types of design rules principles abstract design rules low authority high generality Universally applicable standards specific design rules high authority limited application guidelines lower authority more general application

29. Principles to support usability Learnability the ease with which new users can begin effective interaction and achieve maximal performance Flexibility the multiplicity of ways the user and system exchange information Robustness the level of support provided

30. Principles of learnability Familiarity how prior knowledge applies to new system Guessability Generalizability extending specific interaction knowledge to new situations Consistency likeness in input/output behaviour arising from similar situations or task objectives

31. Principles of learnability (ctd) Predictability determining effect of future actions based on past interaction history operation visibility

32. Principles of flexibility Dialogue initiative freedom from system imposed constraints on input dialogue system vs. user pre-emptiveness Multithreading ability of system to support user interaction for more than one task at a time concurrent vs. interleaving; multimodality Task migratability passing responsibility for task execution between user and system

33. Principles of flexibility (ctd) Customizability modifiability of the user interface by user (adaptability) or system (adaptivity)

34. Principles of robustness Observability ability of user to evaluate the internal state of the system from its perceivable representation browsability; defaults; reachability; persistence; operation visibility Recoverability ability of user to take corrective action once an error has been recognized reachability; forward/backward recovery; commensurate effort

35. Principles of robustness (ctd) Responsiveness how the user perceives the rate of communication with the system Stability Task conformance degree to which system services support all of the user's tasks task completeness; task adequacy

36. Sutcliffe’s usability principles Consistency Reduce learning load Increase recognition Compatibility User’s mental model and task model should match Predictability Allow user to forecast available actions Observability – current state should be explicit Adaptability Conforms to user’s characteristics

37. Sutcliffe’s usability principles (ctd) Economy Minimum number of steps necessary Short Cut + Defaults Error Prevention Reduce user effort User Control User provided with system guidance not control Reversability – backtrack from mistakes Structure Interfaces should reduce the complexity of tasks Help categorise and sub-divide them

38. Sutcliffe’s questions … How well does the design fulfil the user’s objectives? How easy is it to learn and use? How much of it is it used?

39. Using design rules Design rules suggest how to increase usability differ in generality and authority

40. Standards set by national or international bodies to ensure compliance by a large community of designers standards require sound underlying theory and slowly changing technology hardware standards more common than software high authority and low level of detail ISO 9241 defines usability as effectiveness, efficiency and satisfaction with which users accomplish tasks

41. Standards (ctd) The usability of a product is the Degree to which specific users can achieve specific goals Within a particular environment Effectively Efficiently Comfortably In an acceptable manner ISO 9241

42. Guidelines more suggestive and general many textbooks and reports full of guidelines abstract guidelines (principles) applicable during early life cycle activities detailed guidelines (style guides) applicable during later life cycle activities understanding justification for guidelines aids in resolving conflicts

43. Golden rules and heuristics “Broad brush” design rules Useful check list for good design Better design using these than using nothing! Different collections e.g. Nielsen’s Heuristics Shneiderman’s 8 Golden Rules Norman’s 7 Principles

44. Heuristic Evaluation – Nielsen & Molich Learnability Efficiency - productivity Memorability – easy to remember Errors – low error rate which can be easily recovered Satisfaction – pleasant to use

45. Heuristic Evaluation usability criteria (heuristics) are identified design examined by experts to see if these are violated Example heuristics system behaviour is predictable system behaviour is consistent feedback is provided Heuristic evaluation `debugs' design.

46. Shneiderman’s 8 Golden Rules 1. Strive for consistency 2. Enable frequent users to use shortcuts 3. Offer informative feedback 4. Design dialogs to yield closure 5. Offer error prevention and simple error handling 6. Permit easy reversal of actions 7. Support user control 8. Reduce short-term memory load Give examples of each …

47. Norman’s 7 Principles 1. Use both knowledge in the world and knowledge in the head. 2. Simplify the structure of tasks. 3. Make things visible: bridge the gulfs of Execution and Evaluation. 4. Get the mappings right. 5. Exploit the power of constraints, both natural and artificial. 6. Design for error. 7. When all else fails, standardize. Give examples of each …

48. Usability Heuristics Visibility of system status Match between system and real world User control and freedom (undo/redo/exit) Consistency and standards Error prevention Recognition rather than recall Flexibility and efficiency of use Minimalist design Helps users recover from errors Help and documentation Give examples of each …

49. HCI design patterns An approach to reusing knowledge about successful design solutions Originated in architecture A pattern is an invariant solution to a recurrent problem within a specific context. Examples Light on Two Sides of Every Room (architecture) Go back to a safe place (HCI) Patterns do not exist in isolation but are linked to other patterns in languages which enable complete designs to be generated

50. HCI design patterns (cont.) Characteristics of patterns capture design practice not theory capture the essential common properties of good examples of design represent design knowledge at varying levels: social, organisational, conceptual, detailed embody values and can express what is humane in interface design are intuitive and readable and can therefore be used for communication between all stakeholders a pattern language should be generative and assist in the development of complete designs.

51. Usability problems … Who sets targets to be met? How are they to be set? Is it possible to determine without hindsight if anything useful can be specified at all? Difficult to interpret, measure and incorporate Usability principles offer checklists of what should comprise a good, workable system. The usability approach does not provide a complete framework for understanding HCI

52. Conclusion Principles for usability repeatable design for usability relies on maximizing benefit of one good design by abstracting out the general properties which can direct purposeful design The success of designing for usability requires both creative insight (new paradigms) and purposeful principled practice Using design rules standards and guidelines to direct design activity

53. Suggested readings for next week Chapter 4 & 7 Dix et All

54. Additional Material

55. Some practical usability tips … (1) Walk away. Work on something else for a day. Then come back and run it. Did you have problems getting it to start because you forgot the exact incantation required? Did you click the wrong button because it wasn't where you subconsciously expected it to be? Did it look ugly? Did it take longer to run than you remembered? You have to get some distance from your program to accurately evaluate it!

56. Some practical usability tips … (2) Draw it. Literally draw the interface on a piece of paper. Make some notes. Does it look good? Does it look too big or small? Could you imagine doing everything in the program from what you see on this paper? What's missing? If you can't draw the interface then you certainly can't code it!

57. Some practical usability tips … (3) Get a second opinion. You wrote the software so you are too close it to it be objective. Get someone else to look at it. Show them a screen and ask them to tell you what it does. Ask them to explain how they would do something. If they can't then you need to redesign the screen. They say that programmers can't be interface designers. That's not true. A single person can program and design interfaces, just not at the same time. You need distance.

58. Some practical usability tips … (4) Practice uninstalling. If you can uninstall your software easily, then installation must already be a snap. There are plenty of tools out there to make managing your software easy. JNLP. EXE builders. Prefab installers. Pick one. Don't use a command line with custom options.

59. Some practical usability tips … (5) One paragraph description. Describe your software in one paragraph. If you can't then it's doing too many things or you don't understand the problem well. Cut it back. Remove features. We often judge a program to be the most elegant if it can do as much as possible in the fewest lines of code. Instead I ask you do judge if the user can do the most possible work with the fewest features. Think of it as the Zen of UI Design.

60. Some practical usability tips … (6) Don't reinvent the wheel. Your job is to get a program to your users that lets them do as much work as possible as quickly as possible. Shipping it soon is even better. This quickest way to do this is to not reimplement existing code if you can possibly avoid it. Sometimes you find an open source library that sort of does what you want but not quite. Don't reimplement it. Email the developers and ask for an extension point. You'd be surprised of often they will change the code just for you. And when you write your own reusable software, provide extension points. Then document them. If someone emails you for help, help them.

61. Some practical usability tips … (6) Don't invent the wheel either. The quickest way to do this is to not invent new interfaces. I know that your sticky slider widget is cool, but would a simple drop-down box be better? Unless your widget is replacing at least three others you should leave it out.

62. Usability (1) Usability The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments. Such a definition leads to design objectives and finally provides the means for explicit measurements for usability. To finally realize these principles, HCI research and application has developed a whole range of tools and techniques that support usability engineering.

63. Usability (2) Effectiveness The accuracy and completeness with which specified users can achieve specified goals in particular environments. Efficiency The resources expended in relation to the accuracy and completeness of goals achieved. Satisfaction The comfort and acceptability of the work system to its users and other people affected by its use.

64. Design Objectives Learnability The ease with which new users can begin effective interaction and achieve maximal performance.Predictability, Synthesizability, Familiarity, Generizability, Consistency Flexibility The multiplicity of ways the user and system exchange information.Dialog initiative, Multi-threading, Task migratability, Substitutivity, Customizability Robustness The level of support provided to the user in determining successful achivement and assessment of goals.Observability, Recoverability, Responsiveness, Task conformance

65. Measurements of Usability (1) It is possible to develop explicit measurements which in turn provide a framework for empirical studies. It's the results of empirical studies that allow for evaluation of a system, a theory, or a concept, and for comparison with alternative onsets.

66. Measurements of Usability (2)

67. Usability Engineering With better tools and better concepts for the development of user interfaces, the quality of the products themselves will substantially increase. Dialogue Independence Usability Engineering Life Cycle Rapid Prototyping User Testing

68. Internationalisation Case Study Let's take the example of a popular North American fast-food chain. It expands and opens new chains worldwide, across Europe, South America, Asia, Australasia ... Globalisation By thinking ahead, the company plans and creates its products so they can easily be adapted to suit different locales. As part of the expansion, the fast food chain may adapt the menu to cater for differing local tastes or cultural needs. Replacing beef products with chicken or lamb products in Indian countries, or one soft-drink brand with another in others. This process is known as internationalization.

69. Internationalisation http://www.w3.org/International/ Is the process of designing an application so that it can be adapted to various languages and regions without engineering changes the term internationalization is abbreviated as i18n An internationalized program has the following characteristics: With the addition of localized data, the same executable can run worldwide. Textual elements, such as status messages and the GUI component labels, Are not hardcoded in the program. They are stored outside the source code and retrieved dynamically. Support for new languages does not require recompilation. Culturally-dependent data, such as dates and currencies, appear in formats that conform to the end user's region and language. It can be localized quickly.

70. Localisation The process of adapting software for a specific region or language. By adding locale-specific components and translating text. The term localization is often abbreviated as l10n. Usually, the most time-consuming portion of the localization phase is the translation of text. Other types of data, such as sounds and images, may require localization if they are culturally sensitive. Localizers also verify that the formatting of dates, numbers, and currencies conforms to local requirements.

71. I18n vrs L10n L10n - adapted to a new local market I18n - adapted to the global market Tasks that go beyond translation to encompass marketing, cultural and general business issues. For example, for an American company with a typical website advertising its product line, the U.S. market products need to be replaced with the product names, specifications and prices of the target language's market. That's an example of localization. On the other hand, an American company whose product line is the same worldwide may nevertheless need to modify its American site before translating it. For example, toll free 800 numbers may not be accessible from outside the United States. Certain shipping and product return policies may not apply. These changes are examples of internationalization.

72. Cultural dependent data (1) However, this process takes more than just translating text. Other considerations include: Ensuring the appropriate regional standards such as measurement terms (metric vs. imperial), Date/Calendar formats (mm/dd/yy vs. dd/mm/yy), paper size (A4 vs. Letter) and so on, are used. Including the correct legal requirements in a warranty statement, or the appropriate contact information and telephone number of a technical support department.

73. Cultural dependent data (2) Possibly replacing diagrams or graphics, particularly those that contain text or a screenshot of a differing user interface Recognizing any factors that may be specific to a culture or country. Take for example a traffic light (also referred to as a 'stop light'). In the US these lights are red, orange and green. However in Japan, while the colours look the same, they translate to being red, orange and blue...

74. Cultural dependent data (3) Messages Labels on GUI components Online help Sounds Colours Graphics Icons Dates Times Numbers Currencies Measurements Phone numbers Honorifics and personal titles Postal addresses Page layouts

75. Multi-lingual, Multi-cultural Environments (1) "Researchers have shown that redesign of the human-computer interface can make a substantial difference in learning time, performance speed, error rates and user satisfaction. ... Commercial designers recognize that systems that are easier to use will have a competitive edge in information retrieval, office automation, and personal computing." Shneiderman, B., 1986. Designing the User Interface: Strategies for effective human-computer interaction. Addison Wesley, Reading, Massachusetts.

76. Multi-lingual, Multi-cultural Environments (2) No matter the system being designed or the computational effectiveness of the coding, the human-computer interface is "the single most important aspect determining the success or failure of the system" Baeker, R.M. and Buxton, W.A.S. (eds.) 1987. Readings in Human-Computer Interaction: A multidisciplinary approach. Morgan Kaufan, Los Altos, California.

77. Culture Certain graphics and images may offend one group of users on cultural or religious grounds Eg: The popping of a champagne bottle will offend Muslim users The implications of a monkey on screen will alienate and anger many African users However, there are also less obvious images that may be offensive Eg: In some cultures, using a snake for humorous feedback, the colour of the snake had to be green as this made it an ancestral snake therefore acceptable, a brown snake swallowing a man would not be amusing at all. It is important NOT to make any assumptions at all! Learning from the culture and applying them could make the difference between success and failure for the implementation of any technology in any multi-cultural society It is commonly accepted that the design team and the testing sample be made up of as culturally diverse groups as are likely to use the programme

78. Graphic Literacy Graphics and iconic representations are not universally understood, they are culturally learnt. Eg: For the Zulu people the no smoking sign meant "you can smoke half a cigarette", whilst the emergency exit sign is interpreted as meaning "don't run that way or you will get head, hands and feet chopped off.“ All graphic and icon symbolization should be labelled, and it is interesting to note that recent programmes developed for the Windows environment do this.

79. Language Although English is accepted by many countries as being the language of commerce, one must not presume equal understanding from all users, particularly with the use of idiomatic English and jargon. Americanized jargon is often inaccessible and occasionally offensive to people of different cultures and genders. "Fatal error" "Illegal procedure“ "Process aborted" could lead to negative responses. Guidelines for screen messages include "specificity“ "offer constructive guidelines in a positive tone" "use user centred phrasing“ Slang and gestures that are acceptable in one area of the English speaking globe may be extremely offensive in others.

80. Navigation Users often feel "lost in cyberspace", particularly when dealing with hypertext where they have been? where they still need to go? did they read all the material available ? To alleviate this syndrome clear path through the material direct access to important sections should be offered for the more experienced user One should offer Previous Page Next Page Main Menu as opposed to relying on the web browsers "back" button In Computer Aided Education interfaces The page should include the likely length of time per module In books one can look at the length of a section!

81. Metaphors The use of an intuitive metaphor can assist a user to navigate a programme Users can be assisted in making predictions about the outcomes of certain actions with the help of a consistent metaphor Common computer metaphors include a "desk top" with filing cabinets files and calendars an artist's brush and palette for graphic packages The metaphor used to explain the interface should be familiar to the user and excessive explanation should be avoided  However, all icons and graphics should be labelled

82. Learning Styles Print: Learns through reading Aural: Learns through listening Interactive: Enjoys discussions with fellow students in small groups or on a one to one basis Visual: Learns best by looking at demonstrations, pictures, slides, and graphs. Haptic: Learns through a sense of touch and likes a "hands-on" approach Kinesthetic: Learns best whilst moving Olfactory: Uses a sense of smell whilst learning. The advent of multimedia and graphic user interfaces allow developers to include most of these learning styles in the interface design thus accommodating most if not all of a diverse user community

83. Accessibility for Disabled http://www.w3.org/WAI/ By law around 2% of employees should be disabled Systems should accommodate and cater for such people with disabilities It can include text and graphic alternatives for deaf users keyboard alternatives to mouse interactions for the blind as well as text alternatives for graphics The physically challenged would also require innovative input devices such as keyboard alternatives and voice recognition software

84. Colour Display and Fonts Some people suffer from Colour Discrimination Deficiency ("colour blind") Inconsiderate design could lead to a number of people being excluded from using the interface 6.39% of the population are unable to distinguish between red, green and yellow 2.04% cannot distinguish between different shades of red 0.0003% have difficulty with shades of blue 0.005% suffer from total colour blindness seeing only in shades of grey. Colour should be used redundantly, It shouldn't be the only thing that distinguishes two objects There should be other cues, such as text labels, shape, location, pattern or sound".

85. Conclusion No matter the market, be it local or international, computer systems developers must "know the user"