Introducing HCI - Human-Computer Interaction Lecture Slides PDF

Here's the conversion of the provided document into a structured markdown format. # Introducing HCI Image of the hand of a robot touching the hand of a human, glowing at the point of contact. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator ## Learning Objectives * At the end of the discus...

Here's the conversion of the provided document into a structured markdown format. # Introducing HCI Image of the hand of a robot touching the hand of a human, glowing at the point of contact. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator ## Learning Objectives * At the end of the discussion, Students would be able to: * Discuss the history of HCI and the personalities who contributes to the development of HCI; * Discuss examples of Human-Computer Interaction; * Explain the importance of HCI; * Identify the goals of HCI; * Discuss the relationship of HCI with other Disciplines; * Identify the different design needs; * Discuss HCI Theories Timeline; * Explain the role of Usability in HCI; * Identify the fields and topics HCI covers. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator “Designing an object to be simple and clear takes at least twice as long as the usual way." - T.H. Nelson The Home Computer Revolution, 1977 AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Human-Computer Interactions * Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator * HCI is the study and the practice of usability. * It is about understanding and creating software and other technology that people will want to use, will be able to use, and will find effective when used. * HCI is the study of how people use computer systems to perform * HCI tries to provide us with an understanding of the computer and the person using it, so as to make the interaction between them more effective and more enjoyable. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator * HCI concerns: * process: design, evaluation and implementation * on: interactive computing systems for human use * plus: the study of major phenomena surrounding them AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Humans, Computer, Interactions | | | | :----- | :----------------------------------------------------------------------------------------------------------------------------- | | The H | Humans good at: Sensing low level stimuli, pattern recognition, inductive reasoning, multiple strategies, adapting "Hard and fuzzy things". | | The C | Computers good at: Counting and measuring, accurate storage and recall, rapid and consistent responses, data processing/calculation, repetitive actions, performance over time, "Simple and sharply defined things". | | The I | The list of skills is somewhat complementary. Let humans do what humans do best and computers do what computers do best. | AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # History of HCI The image presents a timeline of HCI history from 1940 to 2010. * 1945 - Vannevar Bush publishes "As We May Think" in The Atlantic Monthly * 1963 - Douglas Engelbart invents the computer mouse * 1962 - Ivan Sutherland develops Sketchpad * 1981 - Xerox Star launched * 1982 - ACM SIGCHI formed * 1983 - Card, Moran, and Newell publish The Psychology of Human-Computer Interaction * 1984 - Apple Macintosh launched * 2007 - 25th Anniversary of "CHI", the SIGCHI annual conference AP. Bernard G. Sanidad, DIT, DBA Course Facilitator * Mechanical Computers [http://www.thocp.net](http://www.thocp.net) * 1623 Schickard makes "Calculating Clock". 6-digit machine can add, subtract, bell indicates overflow. * 1674 Leibniz designs his "Stepped Reckoner" Can multiply, with operands of up to 5 and 12 digits. User turns a crank for each unit in each digit * 1820 de Colmar makes "Arithmometer" First mass-produced calculator. Does multiplication & division. It is also the most reliable calculator yet. Continue to be sold for about 90 years. * 1889 Felt invents the first printing desk calculator. * 1935 IBM introduces "IBM 601", punch card machine capable of 1 multiplication /second. 1500 are made. * 1945 Mauchly & Eckert "ENIAC" for ballistics. 30 tons, 1000 ft² of floor, 140 kilowatts of electricity, 17,468 vacuum tubes AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Vannevar Bush Image of Vannevar Bush in front of a desk, working on a document Source: [https://en.wikipedia.org/wiki/Memex](https://en.wikipedia.org/wiki/Memex) Image of document cover with the title AS WE MAY THINK Source: [https://www.pinterest.ph/pin/342977327844778863/](https://www.pinterest.ph/pin/342977327844778863/) * "As We May Think" - 1945 Atlantic Monthly * "...publication has been extended far beyond our present ability to make real use of the record." * Postulated Memex device * Stores all records/articles/ communications * Items retrieved by indexing, keywords, cross-references (now called hyperlinks) * (Envisioned as microfilm, not computer) * Interactive and nonlinear components are key AP. Bernard G. Sanidad, DIT, DBA Course Facilitator Image of a drawing representing the MEMEX * Dual prolectors with the ability to cross reference text (hypertext). * User can leave thier own notes and comments * Human interfaces with machine through buttons and has the ability to make new hyperlinks and associations (like bookmarks) and automated search and export user content to other memex machines * Sum of all human knowledge stored on micro-film in the form of text / image compositions THE MEMEX order yours today! Source: [https://www.pinterest.ph/pin/342977327844778863/](https://www.pinterest.ph/pin/342977327844778863/) AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Joseph Carl Robnett Licklider Image of Joseph Carl Robnett Licklider's headshot * 1960 Postulated "Man-Computer Symbiosis" * Couple of human brains and computing machines tightly to revolutionize information handling AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Mid 1960's * Timesharing mode of computing * Computers too expensive for individuals timesharing increased accessibility * interactive systems, not jobs * text processing, editing * email, shared file system Need for HCI AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Sketchpad - Ivan Edward Sutherland (1962) Image of Ivan Edward Sutherland using the sketchpad * Direct manipulation features: * Visibility of objects * Incremental action and rapid feedback * Reversibility * Exploration * Syntactic correctness of all actions * Replacing language with action * Term coined by Ben Shneiderman¹ AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Invention of the Mouse Image of the first computer mouse Source: [https://www.smithsonianmag.com/innovation/douglas-engelbart-invented-future-180967498/](https://www.smithsonianmag.com/innovation/douglas-engelbart-invented-future-180967498/) Image of Douglas Engelbart holding the computer mouse Douglas Engelbart (1963) AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # HCI's First User Study A comparative evaluation of... The image shows pictures of * Mouse * Joystick * Lightpen * Grafacon * Knee-controlled lever AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Alan Kay Image of Alan Kay's headshot looking at the camera * "Personal Computing" * Dynabook: Notebook sized computer loaded with multimedia and can store everything * Desktop interface metaphor AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Theodor Holm Nelson Image of Theodor Holm Nelson looking at the camera Source: [http://www.ibiblio.org/pioneers/nelson.html](http://www.ibiblio.org/pioneers/nelson.html) * Computers can help people, not just business * Coined term "hypertext" AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Personal Computers The image shows pictures of the following personal computers: * 1974 IBM 5100 * 1981 Datamaster * 1981 IBM XT/AT * Text and command-based * Sold lots * Performed lots of tasks the general public wanted to be done * A good basic toolkit * 1978 VisiCalc AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Personal Computing The image shows the cover of TIME magazine with a silhouette of a man sitting in front of a computer with the words "The Computer Moves In" * System is more powerful if it's easier to use * Small, powerful machines dedicated to individual * Importance of networks and time-sharing * Kay's Dynabook, IBM PC * Time names "The Computer" Man of the Year, 1982 ([http://www.time.com/time/special/moy/1982.html](http://www.time.com/time/special/moy/1982.html)) AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # WIMP * Windows, Icons, Menus, Pointers * Timesharing=multiusers; now we need multitasking * WIMP interface allows you to do several things simultaneously * Has become the familiar GUI interface * Xerox Alto, Star; early Apples AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # PCs with GUIs The image is a picture of a desktop computer with an external drive. * Xerox PARC - mid 1970's * Alto * local processor, bitmap display, mouse * Precursor to modern GUI, windows, menus, scrollbars * LAN - ethernet AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Xerox Star (1981) The image is a picture of an early personal computer. * First commercial PC designed for "business professionals" * desktop metaphor, pointing, WYSIWYG, consistency, and simplicity * First system based on usability * Paper prototyping and analysis * Usability testing & iterative refinement * Commercial flop * \$15k cost * closed architecture * lacking key functionality (spreadsheet) AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Star GUI Icons The image is a diagram of black and white GUI icons. * Document * Record File * In Tray * Folder * File Drawer * Calculator * Out Tray * Floppy Desk Drive * Printer * Williams User * Designers User Group * Dialog Terminal AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Apple Lisa (1982) The image shows two pictures of the Apple Lisa. * Based on ideas of Star * More personal rather than office tool * Still \$\$\$ * Failure (why?) AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Apple Macintosh (1984) The image shows a picture of the Apple Macintosh. * Aggressive pricing - \$2500 * Not trailblazer, smart copier * Good interface guidelines * 3rd party applications * High-quality graphics and laser printer AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Windows 95 The image is a screenshot of Windows 95. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Handhelds The image shows three pictures of the following PDAs and phones: * Newton * Palm * Blackberry * iPhone * Portable computing + phone * Newton, Palm, Blackberry, iPhone AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Human-Computer Interactions Example AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Example of HCI The image presents a timeline examples of Human Computer Interaction * **1873 QWERTY** Christopher Latham Sholes. Also the creator of the typewriter, it is believed Sholes organised the keys in such a fashion to avoid jams. QWERTY explains the order of the first six keys on the top left letter row of the keyboard. Sholes designed the layout in such a way that letters unlikely to often be paired together in typing, sat next to one another on the typewriter. When two keys met when using the typewriter, this could often cause jams, and slow down speed. Although this is no longer an issue today, the QWERTY layout has remained." * **1946 ENIAC** John Mauchly and John Presper Eckert. Electronic Numerical Integrator And Computer is known as the world's first general-purpose computer. Often called "the giant brain", ENIAC was created to calculate artillery firing tables for the US army. ENIAC weighed more than 27,000 kgs and its very first study was to measure the feasibility of the thermonuclear weapon. * **1952 THE TRACKBALL OF DATAR** Tom Cranston, Fred Longstaff and Kenyon Taylor. Invented by the engineering team of Ferranti Canada, this trackball used a 5-pin bowling ball as the rolling device. The machine was used by ships to transfer sonar and radar data to and from one another. Although the first trackpad was actually created in 1946, the DATAR trackball used a digital computer to calculate tracks. Source:[https://www.getsmarter.com/blog/market-trends/14-human-computer-interaction-examples/](https://www.getsmarter.com/blog/market-trends/14-human-computer-interaction-examples/) AP. Bernard G. Sanidad, DIT, DBA Course Facilitator * **1967 THE GAMING JOYSTICK** Ralph Baurereckert. Formally known as the "control column", the first joystick to be used in gaming was brought out with the release of SEGA's arcade game, "Missile". This was the first game to make use of a joystick with a fire button. This shooter simulation game utilised the joystick to steer and shoot missiles into oncoming planes displayed on a screen. * **1968 VIRTUAL REALITY** Ivan Sutherland. The history of virtual reality is disputed, but the Sword of Damocles is widely recognised as the first virtual reality head-mounted display system. Sutherland described the idea behind his three-dimensional display to present the user with a perspective image that changes as the person moves. Although primitive in nature, the device was described as being successful in ensuring the user could not tell the difference between the real world and the virtual augmentation of reality." * **1972 MULTI-TOUCH TECHNOLOGY** Control Data Corporation was the first to release a terminal using single-touch points in a 16x16 array as its user interface. The PLATO IV computer had a touch panel for graphic interaction. and required 16MB of memory to run. * **1984 3D PRINTING** Dr Kodama. 3D printing was initially created by Dr Kodama to develop a rapid prototyping technique. He used a photosensitive resin which polymerised using UV light. Unfortunately for Dr Kodama, his patent specification was not filed before the deadline so he lost all rights to the intellectual property behind his invention. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator * **1998 THE SMARTWATCH** Steve Mann. While the first data-entry watch came out in 1983 by Seiko, the first Linux-powered smartwatch was designed by Mann in 1998. Known as the "father of wearable computing", Mann's smartwatch boasted a 16-bit processor and 128KB of RAM. and was designed to communicate wirelessly with personal computers and cellphones." * **2006 WII** Nintendo. Through natural user interface and gesture recognition, Nintendo Wii came to life to track a user's motions and translate them into instructions or responses. Nintendo Wii uses gyroscopes and controller-based accelerometers to sense rotation, tilting and acceleration; a revolutionary invention for human-computer interaction in the gaming world. This eventually advanced to the emergence of XBOX Kinect, a motion sensing input device which allowed gamers to interact with their computer without the use of a game controller altogether. Unfortunately, this was discontinued in 2017 due to the concerns regarding user privacy, * **2011 GOOGLE VOICE SEARCH APP** Google. Initially named "Voice Action", this app allows users to interact with their phones by making Google queries. When the app was first released on android cellphones, users could conduct a Google search, and make only six commands: send text to, call, go to, navigate to, directions to, and map of. * **2016 DEXMO EXOSKELETON** Dexta Robotics. Dexta Robotics launched the project in 2013 and filed for patency for their concept "switching force feedback", used to simulate the act of touching objects in virtual reality. Although the product has not been brought to the public as yet, the demo can be used to sense the size and solidity of objects In virtual reality. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator * **2018 2018 AND BEYOND** * Emotion sensing: taste and smell are two senses currently underexplored in human-computer interaction. The future may bring new multisensory experiences for human-technology interactions. There has been a lot of attention on emotion-sensing technologies fueled by artificial intelligence which could eventually read facial expressions, skin conductance and eye movements to improve concentration and manage stress. * The flexible smartphone: Samsung was the first to bring out a curved smartphone in 2013, but the phone itself was not actually flexible to allow bend input using active haptic technology. In the future, however, this may be a possibility. Flexible displays require organic light-emitting diode (OLED) which is made of flexible materials like plastic. This is so that the material can be flexible while also producing its own light. Traditional mobile phones use thick, heavy backlights which make liquid crystal display glass (LCD) inflexible * Brain Interface: Brain-computer interfaces (BCI) are becoming more advanced and soon will be able to change the lives of those who suffer from paralysis or amputations. University of California Professor, Jacques Vidal first coined the term BCI in the 1900s. Today, this computer technology can interact with neural structures by decoding and translating information from thoughts into actions, and soon may be used for thought-to-text translation or to control movements from prosthetic limbs. One of the latest projects in BCI tech is called Brainternet, introducing the brain to the internet of things. This project aims to convert a user's brain into a node which will connect to the internet. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Human-Computer Interactions Theories Timeline AP. Bernard G. Sanidad, DIT, DBA Course Facilitator ## Classical Theories Early 80s Body of Knowledge * Capabilities of user * Limitations of user * Key areas are memory attention, perception, learning * Mental models * Decision-making * Designing graphical Interfaces Applying Basic Research * Basic research focuses on fundamental principles and testing theories * Applied basic research * Prescriptive advice for interface design * Identifying relevant cognitive factors * Categorization strategies, learning methods, perceptual processes * Lab setting Cognitive Modeling * Describing or predicting user performance through a generalized representation of the way a type of user would interact with a system * To consider implications of design decisions and frame possible design approaches prior to getting direct user feedback on a design Images depicting hand writing recognition, x-ray and a robot. Automatic detection tools * Handwriting recognition * Face recognition Discovery of how promazine effects schizophrenia. Document, comprehension and retrieval ## Modern Theories | | | | :------------- | :------------- | :----------------------------- | | **Grounded Theory 1967** | **Distributed Cognition 1970** | **CSCW 1994** | ||Interaction with systems, DG/DT|Work| |||Division of labor| |||Group behavior| |||Awareness?| |Where existing theories and data are contradicted|Transport control systems| |Data analysis|Teamwork |Organization?| |Categorical background| Where learning new tools and data are integrated| ## Contemporary Theories | | | | :------------- | :------------- | :----------------------------- | | **Turn to the Wild 1995** | **Turn to the Embodiment 2001** | **Turn to Design 2004** | | In-situ research | Situated action | Design for lifestyles | | Pervasive technologies | Learning by doing | Accountability for designers | | Ubiquitous computing | Tangible interaction | Sustainability | | Study in context** | **Perception** | Accessibility | | Co-design | Where manipulation may be present | Technology as an experience| | Enhance public spaces | | Social responsibility | |**Human Values 2007** | **Turn to the Culture 2008** | **Turn to Space 2010** | ||Critical theory| | |When touching important social issues and policies||Interpersonal interactions| AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Goals of HCI * understand the factors that determine how people use technology * develop tools and techniques to enable building suitable systems * achieve efficient, effective, and safe interaction * put people first AP. Bernard G. Sanidad, DIT, DBA Course Facilitator Ensuring usability. "A usable software system is one that supports the effective and efficient completion of tasks in a given work context" (Karat and Dayton 1995). The bottom-line benefits of a more usable software system for business users include: * Increased productivity; * Decreased user training time and cost; * Decreased user errors; * Increased accuracy of data input and data interpretation; * Decreased need for ongoing technical support. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator The bottom-line benefits of usability to development organizations include: * Greater profits due to more competitive products/services; * Decreased overall development and maintenance costs; * Decreased customer support costs; * More follow-on business due to satisfied customers; * Not to use the term 'user-friendly' which intended to mean a system with high usability but always misinterpreted to mean tidying up the screen displays to make it more pleasing. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator To achieve usability, the design of the user interface to any interactive product, needs to take into account and be tailored around a number of factors, including: * Cognitive, perceptual, and motor capabilities and constraints of people in general. * Special and unique characteristics of the intended user population in particular. * Unique characteristics of the users' physical and social work environment. * Unique characteristics and requirements of the users' tasks, which are being supported by the software. * Unique capabilities and constraints of the chosen software and/or hardware and platform for the product. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Usability extent to which a system, product, or service can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use. * easy to learn * easy to remember how to use * effective to use * efficient to use * safe to use * enjoyable to use AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Dimensions of Usability * Effectiveness * Efficiency * Safety * Utility * Learnability * Memorability AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # ISO 9241-11:2018 * The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments. * 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 Source: [https://mcgaw.io/blog/product-usability-metrics/](https://mcgaw.io/blog/product-usability-metrics/) AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Importance of HCI HCI will be increasingly important in the following areas: * As part of software development process and system design methods; * As part of future legal requirements for software; * As the basis for a set of usability criteria to evaluate and choose from amongst competing products; * As the basis for successful marketing strategy to the increasingly important home and small business user. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Why HCI is Important? * The study of our interface with information. * It is not just 'how big should I make buttons' or 'how to layout menu choices' * It can affect * Effectiveness * Productivity * Morale * Safety AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Different Design Needs * Three broad categories of computer users: * Expert users with detailed knowledge of that particular system. * Occasional users who know well how to perform the tasks they need to perform frequently. * Novices who have never used the system before. * Users may well be novices at one computer application but experts at another one, so users will belong to different categories for particular computer systems. AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # Visibility & Affordance Visibility – what is seen Affordance - what operations and manipulation can be done to a particular object What is visible must have a good mapping to their effect Perceived affordance - what a person thinks can be done to the object AP. Bernard G. Sanidad, DIT, DBA Course Facilitator # What Fields Does HCI Cover? Image shows a mind map illustrating different fields related to HCI. These include: * Computer Science: Computability Systems * Mathematics: Theory of Graphs, Networks Theory * Web Engineering Protocol: Architype Theory * Ergonomic:Physical Body Limits, Health and Safety * Psychology: Sensory Attitudes Theories of Groups, Plasticity, Sophism, Tracing * Biology: Evolutionary, Plasticity Systems Biology * Sociology: Social attitudes Theories of Groups * Ecology: Structure of ecosystem Ecosystem Productivity Digital Biosphere * Management & Information Sciences: Organisational Issues * Philosophy * Artificial intelligence * Socio-Cultural: Attitudes and lifestyles Fas Trends, Embodied Computing * Economics: Macro and Microeconomics * Law: Intellectual EU/regulatory * Design NGOs: Graphic Design Product Design * Media: Fragmented Public, Double issue moral AP. Bernard G. Sanidad, DIT, DBA Course Facilitator The image is a schematic diagram outlining the various topics within Human-Computer Interaction (HCI). The diagram sections HCI into: * Use and Context * UI Social Organisation and Work * U3 Human-Machine Fit and Adaption * Human * H1 Human Information processing * H2 Language, Communication and Interaction * H3 Ergonomics *Computer * C2 Dialogue Techniques * C4 Computer Graphics * C1 Input and output Devices * C3 Dialogue Genre * C5 Dialogue Architecture * The diagram also sections Development process into: *D3 evaluation Techniques *D4 Example Systems and case studies *D2 Implementation Techniques and Tools * D1 Design approaches # Topics in HCI AP. Bernard G. Sanidad, DIT, DBA Course Facilitator * Resources: * [www.freepik.com](http://www.freepik.com) * [https://computingkids.com](https://computingkids.com) * [https://gifer.com/](https://gifer.com/) * [https://uxplanet.org](https://uxplanet.org) * [https://elinahci.files.wordpress.com](https://elinahci.files.wordpress.com) * [www.semanticscholar.org](http://www.semanticscholar.org) * [www.sitebuilderreport.com/blog/](http://www.sitebuilderreport.com/blog/) * [www.vectorstock.com](http://www.vectorstock.com) AP. Bernard G. Sanidad, DIT, DBA Course Facilitator