SOEN 6751 Week 1: Introduction to Human-Computer Interaction (HCI) | PDF

SOEN 6751 Week 1 - Introduction, history of HCI, good and bad design By Dr. Anil Ufuk Batmaz SOEN 6751 Rocker Switch Gearshift Fiat Chrysler Do you know what happened? SOEN 6751  Rocker Switch Gearshift...

SOEN 6751 Week 1 - Introduction, history of HCI, good and bad design By Dr. Anil Ufuk Batmaz SOEN 6751 Rocker Switch Gearshift Fiat Chrysler Do you know what happened? SOEN 6751  Rocker Switch Gearshift P D D Gearshift Rocker Switch Gearshift 1 2 3 SOEN 6751 Rocker Switch Gearshift 306 incidents 117 crashes 41 injuries “Driver error” Fix: Additional warnings, read manuals Chrysler recalled over 1,000,000 cars SOEN 6751 Rocker Switch Gearshift SOEN 6751 https://youtu.be/2FYtLLJ8nII?si=GpKyoI2u2zP2D594 Mental Model Person’s internal representation of external reality, based on learning and experience. SOEN 6751 Human Computer Interaction System Model Interaction model How something works How to use something Chrysler is a good system model Chrysler is a bad interaction model Human Computer Interaction System Model Interaction model How something works How to use something Chrysler is a good system model Chrysler is a bad interaction model Human-Computer Interaction Class activity: 2 minutes to answer the following questions What is “human”? What is “computer”? What is “interaction”? SOEN 6751 How big is HCI? ACM CHI Conference on Human Factors in Computing Systems is the premier international conference on Human-Computer Interaction. https://chi2019.acm.org/wp- content/uploads/2019/04/CHI 2019-At-A-Glance.pdf https://confer.csail.mit.edu/chi 2019/papers SOEN 6751 History of HCI SOEN 6751 Vannevar Bush's “As We May Think” (1945) Published in the July 1945 issue of The Atlantic Monthly. U.S. government's Director of the Office of Scientific Research and a scientific advisor to President Franklin D. Roosevelt He was charged with leading some 6,000 American scientists in the application of science to warfare. It was 1945. SOEN 6751 Vannevar Bush's “As We May Think” (1945) “The summation of human experience is being expanded at a prodigious rate, and the means we use for threading through the consequent maze to the momentarily important item is the same as was used in the days of square-rigged ships” Expanding human experience in relation the HCI. ENIAC, 1945 SOEN 6751 Vannevar Bush's “As We May Think” (1945) Bush proposed navigating the knowledge maze with a device he called memex. Among the features of memex is associative indexing, whereby points of interest are connected and joined so that selecting one item automatically selects another: “When the user is building a trail, he names it, inserts the name in his code book, and taps it out on his keyboard.” Sounds like hyperlinks and bookmarks. Although today it is easy to equate memex with hypertext and the World Wide Web, Bush's inspiration came from the contemporary telephone exchange, which he described as a “spider web of metal, sealed in a thin glass container” (viz. vacuum tubes) The maze of connections in a telephone exchange gave rise to Bush's more general theme of a spider web of connections for the information in one's mind, one's experiences. SOEN 6751 Ivan Sutherland's Sketchpad (1962) SOEN 6751 Ivan Sutherland's Sketchpad (1962) In the absence of usability in the computers available in 1963: “Heretofore, most interaction between man and computers has been slowed by the need to reduce all communication to written statements that can be typed. In the past we have been writing letters to, rather than conferring with, our computers.” https://youtu.be/6orsmFndx_o?si=zj-MzbkAWy8zYZpQ SOEN 6751 Ivan Sutherland's Sketchpad (1962) As part of his PhD research in electrical engineering at the Massachusetts Institute of Technology (MIT) Sketchpad was a graphics system that supported the manipulation of geometric shapes and lines (objects) on a display using a light pen. Commands were not typed. Users did not “write letters to” the computer. Instead, objects were drawn, resized, grabbed and moved, extended, deleted – directly, using the light pen SOEN 6751 Ivan Sutherland's Sketchpad (1962) The use of a pointing device for input makes Sketchpad the first direct manipulation interface. Ben Shneiderman at the University of Maryland (1983): Visibility of objects, Incremental action, Rapid feedback, Reversibility, Exploration, Syntactic correctness of all actions, Replacing language with action. SOEN 6751 Invention of the Mouse (1963) Invented by Douglas Engelbart in 1963 DAC-1 and IBM 2250, 1963 mouse was destined to fundamentally change the way humans interact with computers Instead of typing commands, a user could manipulate a mouse to control an on-screen tracking symbol, or cursor. With the cursor positioned over a graphic image representing the command, the command is issued with a select operation – pressing and releasing a button on the mouse. SOEN 6751 Invention of the Mouse (1963) Two potentiometers positioned at right angles to each other Large metal wheels were attached to the shafts of the potentiometers and protruded slightly from the base of the housing As the device was maneuvered on a surface, the wheels rotated. SOEN 6751 First User Study English, Engelbart & Berman, 1967 RCA Spectra 70, 1965 A controlled experiment was conducted comparing several input devices capable of both selection and x-y position control of an on- screen cursor Besides the mouse, the comparison included, a joystick (a), a light pen (b), a knee-controlled lever (c), and a Grafacon (d). SOEN 6751 First User Study 13 participants (8 experienced, 3 inexperienced) A character target (with surrounding distractor targets) appeared on the display. The participant moved their hand to the input device and then manipulated the device to move the cursor to the target. With the cursor over the target, a selection was made using the method associated with the device. SOEN 6751 Class activity You have 5 minutes: Analyze the results and share the outcomes Fastest input device and why? Slowest input device and why? Input device with highest error rate and why? Slowest device with the highest error rate and why? What is the take-home message? SOEN 6751 Xerox Star (1981) National Computer Conference, in Chicago in May 1981 “Have you been to the Xerox booth?” “You gotta' check it out. It's really cool.” The Star was the first commercially released computer system with a GUI and mouse. It had windows, icons, menus, and a pointing device (WIMP). It supported direct manipulation and what-you-see-is-what-you-get (WYSIWYG) interaction SOEN 6751 Xerox Star (1981) One novel feature of Star was the desktop metaphor. Metaphors are important in HCI. When a metaphor is present, the user has a jump-start on knowing what to do. The user exploits existing knowledge from another domain. The desktop metaphor brings concepts from the office desktop to the system's display. On the display the user finds pictorial representations (icons) for things like documents, folders, trays, and accessories such as a calculator, printer, or notepad. SOEN 6751 Direct Manipulation Systems With a GUI and point-select interaction, the Star interface was the archetype of direct manipulation. By comparison, previous command-line interfaces had a single channel of input. Every action required a command. The user had to learn and remember the syntax of the system's commands and type them in to get things done. SOEN 6751 Direct Manipulation Systems Direct manipulation systems, like the Star, have numerous input channels, and each channel has a direct correspondence to a task. Interaction with the channel is tailored to the properties of the task. A continuous property, such as display brightness or sound volume, has a continuous control, such as a slider. A discrete property, such as font family or text alignment, has a discrete control, such as a multi-position switch or a menu item. Each control also has a dedicated location on the display and is engaged using a direct point-select operation. SOEN 6751 Xerox Star (1981) Why Star was not a commercial success? SOEN 6751 Xerox Star (1981) The Star was a networked workstation connected to a server and intended for an office environment It was expensive: $16,000 for the workstation alone It was also a distant world from personal computing, as it existed in the late 1970s and early 1980s. VisiCalc, the first spreadsheet application was developed. Sold over 700,000 copies and became known as the first killer app Star did not have a spreadsheet application, nor could it run any spreadsheet or other application available in the market place. It could only run applications developed by Xerox. SOEN 6751 Birth of HCI – 1983 First ACM SIGCHI Conference (1983) In 1982 Conference on Human Factors in Computing Systems in Gaithersburg, Maryland, where the formation of the ACM Special Interest Group on Computer-Human Interaction (SIGCHI) was first publicly announced. The first SIGCHI conference was held in Boston in 1983 SOEN 6751 ACM CHI SOEN 6751 ACM CHI 2025 SOEN 6751 Birth of HCI – 1983 The Psychology of Human-Computer Interaction (1983) The first 100 or so pages in the book provide a comprehensive overview of core knowledge in basic psychology, as it pertains to the human sensory, cognitive, and motor systems. Anyone who has had the task of trying to obtain from the literature psychological guidance for the design of an interactive computer system is aware of the great frustrations engendered by the jumble of empirical results and micro-theories, tightly bound to experimental paradigms. SOEN 6751 Birth of HCI – 1983 The Psychology of Human-Computer Interaction (1983) The connection between low-level human processes and the seemingly innocuous interactions humans have with computers, such as typing or using a mouse The framework for this was the model human processor (MHP) SOEN 6751 Birth of HCI – 1983 The Psychology of Human-Computer Interaction (1983) Synergy between psychology and computer science notion that human behaviour can be understood, even modelled, as an information processing activity. SOEN 6751 Birth of HCI – 1983 Launch of the Apple Macintosh (1984, January) January 22, 1984 Day of Super Bowl XVIII One ad – played during the 3rd quarter – was a 60-second stint for the Apple Macintosh (the “Mac”) Directed by Ridley Scott The ad was a hit and was even named the 1980s Commercial of the Decade by Advertising Age magazine It never aired again. SOEN 6751 Birth of HCI – 1983 Launch of the Apple Macintosh (1984, January) https://youtu.be/VtvjbmoDx-I SOEN 6751 Birth of HCI – 1983 Launch of the Apple Macintosh (1984, January) Soon after, computer enthusiasts scooped up the Mac. The Mac was sleek and sported the latest input device, a computer mouse The operating system and applications software heralded the new age of the graphical user interface (GUI) with direct manipulation and point-select interaction. The interface was simple and intuitive. Anyone could use it. Part of the simplicity was the one-button mouse. With one button, there was no confusion on which button to press. SOEN 6751  Growth of HCI and graphical user interfaces GUIs entered the mainstream and, consequently, a much broader community of users and researchers were exposed to this new genre of interaction. Microsoft was a latecomer in graphical user interfaces. Windows 3.1 (1992) Microsoft Windows was considered a serious alternative to the Macintosh operating system HCI in universities, companies, etc. Companies soon realized that designing good user interfaces is good business. SOEN 6751 User interface design UI design is the process of making interfaces in software or computerized devices with a focus on looks or style. Designers aim to create designs users will find easy to use and pleasurable. UI design typically refers to graphical user interfaces but also includes others, such as voice-controlled or gesture controlled ones. SOEN 6751 User interface design 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. SOEN 6751 Course Activity You have 3 minutes Design a teapot and describe it Write down your design. Give as many details as you can. SOEN 6751 Bad Designs Dan Norman Impossible teapot SOEN 6751 Ten principles of Good Design Good design is innovative. Good design makes a product useful. Good design is aesthetic. Good design makes a product understandable. Good design is unobtrusive. Good design is honest. Good design is long-lasting. Good design is thorough down to the last detail. Good design is environmentally-friendly Good design is as little design as possible SOEN 6751 Bad Designs Elevator controls and labels on the bottom row all look the same, so it is easy to push a label by mistake instead of a control button. People do not make same mistake for the labels and buttons on the top row. Why not? SOEN 6751 Bad Designs SOEN 6751 Designs Infuriating Confusing Inefficient, too many steps for basic tasks Don’t know how many messages left or if there are messages to listen to. Not obvious what to do, instructions are all over the place. SOEN 6751 Good Design Example: Answering Machine Marble answering machine (Bishop, 1995) Based on how everyday objects behave Easy, intuitive, and a pleasure to use Only requires one-step actions to perform core tasks SOEN 6751 Good and Bad Designs SOEN 6751 Good And Bad Design: Remote Controls Too many small, multicoloured buttons, double labelled buttons, buttons arbitrarily positioned with relation to another. Hard to locate right button for even the simplest of tasks. SOEN 6751 Good And Bad Design: Remote Controls SOEN 6751 Good And Bad Design: Remote Controls Which is the best way to interact with a smart TV? Why? Pecking using a grid keyboard via a remote control Swiping across two alphanumeric rows using a touchpad on a remote control Voice control using remote or smart speaker SOEN 6751 Good And Bad Design: Websites SOEN 6751  Dvorak Keyboard, 1932-1936 (patented) Good and Bad Design QWERTY Keyboard, 1874 Many common letter combinations require awkward finger motions. Some common letter combinations are typed with the same finger. (e.g. "ed" and "de") Many common letter combinations require a finger to jump over the home row. Many common letter combinations are typed with one hand while the other sits idle (e.g. was, were). Most typing is done with the left hand, which for most people is not the dominant hand. About 16% of typing is done on the lower row, 52% on the top row and only 32% on the home row. SOEN 6751  Good and Bad Design Dvorak Keyboard, 1932-1936 (patented) QWERTY Keyboard, 1874 Letters should be typed by alternating between hands (which makes typing more rhythmic, increases speed, reduces error, and reduces fatigue). On a Dvorak keyboard, vowels and the most used symbol characters are on the left (with the vowels on the home row), while the most used consonants are on the right. For maximum speed and efficiency, the most common letters and bigrams should be typed on the home row, where the fingers rest, and under the strongest fingers. (About 70% of letter keyboard strokes on Dvorak are done on the home row and only 22% and 8% on the top and bottom rows respectively.) The least common letters should be on the bottom row which is the hardest row to reach. The right hand should do more of the typing because most people are right-handed. SOEN 6751