Human Computer Interaction: Introduction
- 7. WHY HUMAN–COMPUTER INTERACTION? • Do car radio designers actually think it is safe to use so many knobs and displays that the driver has to divert attention away from the road completely in order to tune the radio or adjust the volume? • Why does it need to be taught when we all know what a good interface looks like? • Employers to ensure the following when designing: • that it is suitable for the task • that it is easy to use and, where appropriate, adaptable to the user’s knowledge and experience • that it provides feedback on performance • that it displays information in a format and at a pace that is adapted to the user • that it conforms to the ‘principles of software ergonomics’.
- 8. WHAT IS HCI? • 1980s. • Second World War provided the impetus for studying the interaction between humans and machines, as each side strove to produce more effective weapons systems. • Ergonomics Research Society in 1949. • The terms are often used interchangeably, with Ergonomics being the preferred term in the United Kingdom and Human Factors in the English-speaking parts of North America. • Both of these disciplines are concerned with user performance in the context of any system, whether computer, mechanical or manual. • As computer use became more widespread, an increasing number of researchers specialized in studying the interaction between people and computers, concerning themselves with the physical, psychological and theoretical aspects of this process. • This research originally went under the name man– machine interaction, but this became human– computer interaction in recognition. •
- 9. • user mean an individual user, a group of users working together, or a sequence of users in an organization, each dealing with some part of the task or process. The user is whoever is trying to get the job done using the technology. • By computer we mean any technology ranging from the general desktop computer to a large-scale computer system, a process control system or an embedded system. The system may include non- computerized parts, including other people. • By interaction we mean any communication between a user and computer, be it direct or indirect. Direct interaction involves a dialog with feedback and control throughout performance of the task. Indirect interaction may involve batch processing or intelligent sensors controlling the environment. The important thing is that the user is interacting with the computer in order to accomplish something.
- 10. WHO IS INVOLVED IN HCI? • psychology and cognitive science to give her knowledge of the user’s perceptual, • cognitive and problem-solving skills; ergonomics for the user’s physical capabilities; • sociology to help her understand the wider context of the interaction; • computer science and engineering to be able to build the necessary technology; • business to be able to market it; • graphic design to produce an effective interface presentation; • technical writing to produce the manuals, and so it goes on.
- 11. The Importance of the User Interface • Greatly improved technology in the late twentieth century eliminated a host of barriers to good interface design and unleashed a variety of new display and interaction techniques wrapped into a package called the graphical user interface or, as it is commonly called, GUI (pronounced “gooey”). • Almost every graphical platform now provides a style guide to assist in product design. • Software to aid the GUI design process proliferates. • Web site design has greatly expanded the range of users and introduced additional interface techniques such as multimedia.
- 12. Defining the User Interface • User interface design is a subset of a field of study called human-computer interaction (HCI). • The user interface is the part of a computer and its software that people can see, hear, touch, talk to, or otherwise understand or direct. • The user interface has essentially two components: input and output. • Input is how a person communicates his or her needs or desires to the computer. • Some common input components are the keyboard, mouse, trackball, one’s finger (for touch-sensitive screens or pads), and one’s voice (for spoken instructions). • Output is how the computer conveys the results of its computations and requirements to the user. • Today the most common computer output mechanism is the display screen, followed by mechanisms that take advantage of a person’s auditory capabilities: voice and sound. • The use of the human senses of smell and touch output in interface design
- 13. The Importance of Good Design • With today’s technology and tools, why do we continue to produce systems that are inefficient and confusing? Is it because: • 1. We don’t care? • 2. We don’t possess common sense? • 3. We don’t have the time? • 4. We still don’t know what really makes good design?
- 14. • We do care. But we never seem to have time to find out what makes good design, nor to properly apply it. After all, many of us have other things to do in addition to designing interfaces and screens. So we take our best shot given the workload and time constraints imposed upon us. • A well-designed interface and screen are terribly important to users. • They are their window to view the capabilities of the system, the bridge to the capabilities of the software. • To many users it is the system, because it is one of the few visible components of the product its developers create. • It is also the vehicle through which many critical tasks are presented. • These tasks often have a direct impact on an organization’s relations with its customers, and its profitability.
- 15. • A screen’s layout and appearance and a system’s navigation affect a person in a variety of ways. • If they are confusing and inefficient, people will have greater difficulty doing their jobs and will make more mistakes. • Poor design may even chase some people away from a system permanently. • It can also lead to aggravation, frustration, and increased stress. • One user relieved his frustrations with his computer through a couple of well-aimed bullets from a gun. • Another user, in a moment of extreme exasperation, dropped his PC out of his upper-floor office window. • Poor interface design can also have a huge financial cost to users and organizations. • A critical system, such as one used in air traffic control or in a nuclear power plant, may compromise the safety of its users and/or the general public.
- 16. The Benefits of Good Design • Imagine the productivity benefits we could gain through proper design. • Based on an actual system that requires processing of 4.8 million screens per year, an analysis established that if poor clarity forced screen users to spend one extra second per screen, almost one additional person-year would be required to process all screens. • See Table 1.1. Twenty extra seconds in screen usage time adds an additional 14 person years.
- 17. • The benefits of a well-designed screen have also been under experimental scrutiny for many years. • One researcher, for example, attempted to improve screen clarity and readability by making screens less crowded. • Separate items, which had been combined on the same display line to conserve space, were placed on separate lines instead. • The result: Screen users were about 20 percent more productive with the less crowded version.
- 18. A Brief History of the Human-Computer Interface • Need for people to communicate with each other has existed since we first walked upon this planet. • movements and gestures • spoken language • written language • Typewrite • Through its first few decades, a computer’s ability to deal with human communication was inversely related to what was easy for people to do. • The computer demanded rigid, typed input through a keyboard; people responded slowly to using this device and with varying degrees of skill. • The human-computer dialog reflected the computer’s preferences, • consisting of one style or • a combination of styles using keyboards, • commonly referred to as Command Language, • Question and Answer, Menu Selection, Function Key Selection, and Form Fill-In. • Systems that recognize human speech and handwriting now exist, although they still lack the universality and richness of typed input.
- 19. Introduction of the Graphical User Interface • Finally, in the 1970s, another dialog alternative surfaced. • Research at Xerox’s Palo Alto Research Center provided an alternative to the typewriter — an interface that uses a form of human gesturing, the most basic of all human communication methods. • The Xerox systems Altus and STAR introduced the mouse and pointing and selecting as the primary human-computer communication method. • The user simply pointed at the screen, using the mouse as an intermediary. These systems also introduced the graphical user interface as we know it today. • Ivan Sutherland from MIT credit for first introducing graphics with his Sketchpad program in 1963. • Lines, circles, and points could be drawn on a screen using a light pen. • Xerox worked on developing handheld pointing devices in the 1960s and • patented a mouse with wheels in 1970. • 1974 Xerox patented today’s mouse, after a researcher was suddenly inspired to turn a trackball upside down.
- 20. • Xerox was never able to market STAR successfully, but Apple quickly picked up the concept and the Macintosh, released in 1984, was the first successful mass-market system. • In 1985 Microsoft released Windows 1.0 and Commodore introduced the Amiga 100. The original Macintosh 128k (left); and Steve Jobs with the Macintosh, January 1984 In 1985 Microsoft released Windows 1.0 and Commodore introduced the Amiga 100.
- 21. • In 1987 Apple introduced Macintosh II, the first color Macintosh, and the X Window system became widely available. • IBM’s contribution was the release of their System Application Architecture (including Common User Access) and Presentation Manager, intended as graphics operating system replacement for DOS. • Other developmental milestones include NeXT’s 1988 release of NeXTStep, the first to simulate a three- dimensional screen. • Then, in 1989, several UNIX-based GUIs were released, including Open Look by AT&T and Sun Microsystems, and Motif for the Open Software Foundation by DEC and Hewlett-Packard. • Open Look possessed an innovative appearance to avoid legal challenges. Finally, through the 1990s and 2000s, a succession of products and upgrades from Microsoft and Apple have appeared.
- 22. A Brief History of Screen Design • While developers have been designing screens since a cathode ray tube display was first attached to a computer, • 1970s, when IBM introduced its 3270 cathode ray tube text-based terminal. • It usually consisted of many fields (more than are illustrated here) with very cryptic and often unintelligible captions. Figure 1.1 A 1970s screen.
- 23. • visually cluttered • possessed a command field that challenged the user to remember what had to be keyed into it. • Ambiguous messages often required referral to a manual to interpret. • required a great deal of practice and patience. • monochromatic, typically presenting green text on black backgrounds. • Figure 1.2 A 1980s screen.
- 24. • less cluttered look through concepts such as grouping and alignment of elements, • User memory was supported by providing clear and meaningful field captions and by listing commands on the screen, and enabling them to be applied through function keys. • Messages also became clearer. • These screens were not entirely clutter-free, however. Instructions and reminders to the user had to be inscribed on the screen in the form of prompts or completion aids such as the codes PR and SC.
- 25. Figure 1.3 A 1990s and beyond screen.
- 26. • While some basic design principles did not change, such as groupings and alignment, borders were made available to visually enhance groupings, and buttons and menus for implementing commands replaced function keys. • different font sizes and styles, line thickness, and colors. • other kinds of controls, including list boxes, drop-down combination boxes, spin boxes, and so forth. • These new controls were much more effective in supporting a person’s memory, now simply allowing for selection from a list instead of requiring a remembered key entry. • Completion aids disappeared from screens, replaced by new listing controls. • Screens could also be simplified, the much more powerful computers being able to quickly present a new screen.
- 27. Characteristics of Graphical and Web User Interfaces • following characteristics of GUI and Web interfaces will be reviewed: • Interaction styles. • The concept of direct manipulation. • The characteristics of graphical interfaces. • The characteristics of Web interfaces. • Web page versus Web application design. • The general principles of user interface design
- 28. Interaction Styles • method, or methods, by which the user and a computer system communicate with one another. • Today the designer has a choice of several interaction styles in graphical system or Web page and application design. • They are as follows: • Command line • Menu selection • Form fill-in • Direct manipulation • Anthropomorphic
- 29. Command Line • oldest and original user interaction style. • It requires the user to press a function key or type a command into a designated entry area on a screen. • The commands may be single characters, abbreviations, words, or multiple words and codes. • The command-line style is powerful, offering immediate access to system functions. • It is also flexible and able to incorporate options or parameters to vary its behavior. • One problem with command lines is that they must be remembered and they test one’s power of recall. • No clues about what commands are available exist on the screen. • Another problem is that command lines can be cryptic and obscure with complex syntax. • They are also very prone to, and intolerant of, typing errors that can lead to user frustration.
- 30. Menu Selection • A menu is a set of options or choices from which a user must choose. • On screens, the user selects a choice with a pointing device or keystroke. • Typically, some kind of visual feedback is then provided to indicate the option selected. • Menu selections can also be provided by voice as exemplified by the “Press 1 to...” encountered after telephone calls to a business or organization. • Screen menus are advantageous because they utilize a person’s much stronger powers of recognition, not recall. • However, menu choice labels must be meaningful and understandable for the menu to be truly effective. • Otherwise, speed of use will be degraded and errors increase. • Menus can break a complex interaction into small steps, which structure and aid the decision- making process. • This is especially helpful for infrequent users who are unfamiliar with the system. • On the other hand, many small steps may slow the knowledgeable user. • Techniques, however, are available to overcome these problems for the expert.
- 31. Form Fill-in • The form fill-in style is very useful for collecting information. • Today’s typical form structured screen contains a series of controls or fields into which the user either types information or selects an option, or options, from a listing of choices. (Technically, a listing of choices presented to users is also a menu.) • In old text-based systems, however, screen forms were composed entirely of fields into which the user had to type information. • Screen fill-in forms are derived from their antecedents, paper forms. • An advantage of a form is its familiarity.
- 32. Direct Manipulation • A direct manipulation interface, as found in graphical systems, enables the user to directly interact with elements presented on the screen. • These elements (called objects) replace the keyed entry of commands and menus. • Users typically select screen objects and actions by using pointing mechanisms, such as the mouse or joystick, instead of the traditional keyboard. • They navigate the screen and execute commands by using menu bars and pull-down menus.
- 33. Anthropomorphic • The development of these kinds of interfaces requires an understanding of human behavior; • how people interact with one another, the meaning of gestures and expressions, what people mean when they look at things, and so forth. • Wouldn’t it be nice, for example, if the system could track eye movement across the screen to a menu, and then recognize the blink of an eye to select the choice being viewed? • Or, if a frown elicited the automatic display of a help screen and a smile meant OK?