Recommended
Recommended
More Related Content
What's hot
What's hot (19)
Similar to 1810.mid1043.02
Similar to 1810.mid1043.02 (20)
More from vizualizer
More from vizualizer (13)
Recently uploaded
Recently uploaded (20)
1810.mid1043.02
- 1. History of Human Computer Interaction: part 1 MID1043 Multimodal Interaction Design week 02 Yonggeun Kim
- 2. 0. Revision
- 4. THINK DOSEE actionactivityface Possibilities for temporal/temporary choice data informationchannels
- 5. THINK DOSEE actionactivityface MIND Possibilities for temporal/temporary choice data channels information visible tactile audible gustatory olfactory
- 6. THINK DOSEE actionactivityface MIND Possibilities for temporal/temporary choice data channels information visible tactile audible gustatory olfactory data channels information visible tactile audible gustatory olfactory
- 8. sheep
- 13. TOC 1. A short history of human computer interaction part 1 a. Electronic Numerical Integrator and Computer (ENIAC) i. The initiation of input & output modalities ii. Grace Hopper bridged human language and machine language b. Vannevar Bush and his MEMEX i. A hypothetical personal information-processing machine c. Ivan Sutherland’s Sketchpad i. A working prototype of modern GUI with essential elements d. Ted Nelson`s hypertext i. A proposal how information has to be structured and presented in computer e. NLS (oN-Line System) interface by Dr. Douglas C. Engelbart and the Augmentation Research Center i. A complete demonstration of modern HCI requirements for end-users ii. Four basic classes of augmentation means that extend human capabilities.
- 14. A Short history of human-computer interaction
- 15. A short history of human-computer interaction* to understand why it becomes multidisciplinary to acquire the past achievement and vision to obtain perspective that enables anticipation through analysis to identify the technologies contributed to enhance input/output modalities in HCI *Grudin, Jonathan. “A Moving Target: The Evolution of Human–Computer Interaction.” In Human Computer Interaction Handbook: Fundamentals, Evolving Technologies, and Emerging Applications, Third Edition, edited by Julie A. Jacko, 3rd ed., xxvii–lxi. Taylor & Francis, 2012.
- 16. ■ Human Computer Interaction i. A narrower body of study under computer science† ii. Goal × to improve computer more effective as a tool for human × to discover more effective way for representation and distribution of information ■ 4 major disciplines related Human-computer interaction i. Computer Science (CS) × “a broad discipline covering the theory and practice of hardware and software design” ii. Human Factors / Ergonomics (HF or HF&E) × human factors and ergonomics referring interchangeable disciplines iii. Information Systems (IS) × “the management discipline that has also been labeled Data Processing (DP) and Management Information Systems (MIS)” iv. Library and Information Science (LIS) * Definitions
- 17. 1945~1950 1950~1960 1960~1970 1970-1985 1985~1995 1995~2010 New Invention The Calculator The Giant Brain Service Industry My productive tool Ubiquity user Inventors Experts and Pioneers Computer Center Priests Professional employees geeks everyone interface cables Punch cards and tapes Teletype and terminal Green-screen Alphanumeric GUI GUIs & Ambient Interface objective Brute Force Arithmetic High speed calculation Batch processing Time-sharing Package software Software as service consumer Military & Government Scientist Information Conglomerate Most Business Increasing mobile home users Toy
- 18. From invention to maturity. Jacko, Julie A., ed. Human Computer Interaction Handbook: Fundamentals, Evolving Technologies, and Emerging Applications, Third Edition. 3rd ed. Taylor & Francis, 2012. p.lii 1945~1950 1950~1960 1960~1970 1970-1985 1985~1995 1995~2010 New Invention The Calculator The Giant Brain Service Industry My productive tool Ubiquity user Inventors Experts and Pioneers Computer Center Priests Professional employees geeks everyone interface cables Punch cards and tapes Teletype and terminal Green-screen Alphanumeric GUI GUIs & Ambient Interface objective Brute Force Arithmetic High speed calculation Batch processing Time-sharing Package software Software as service consumer Military & Government Scientist Information Conglomerate Most Business Increasing mobile home users Toy Motivation (inter) personal Inside organization Inter-organization Industry / society Boundary of Influence From invention to maturity. Jacko, Julie A., ed. Human Computer Interaction Handbook: Fundamentals, Evolving Technologies, and Emerging Applications, Third Edition. 3rd ed. Taylor & Francis, 2012. p.lii
- 19. A Brief History of Computer 1960~1970; The Giant Brain
- 20. A Brief History of Computer 1970~1985; Pink Collar Labor (service industry)
- 21. A Brief History of Computer 1985~1995; Productive tool
- 22. A Brief History of Computer 1995~?; Networked Ubiquity
- 23. How computer works How Computers Work: What Makes a Computer, a Computer?
- 24. A Brief History of Computer 1945~1950; New Invention
- 25. A Brief History of Computer 1950~1960; The Calculator
- 26. 1943-55Electronic Numerical Integrator and Computer (ENIAC) The initiation of input & output modalities
- 27. What was going on in 1940’s? ENIAC Computer History Archives Project - remastered 1946 Film, First Military Giant Brain Computer@youtube
- 28. 1.4 Managing Vacuum Tubes 1. One of the first general purpose computers a. ENIAC (Electronic Numerical Integrator and Computer) ➜ ENIAC, built in 1943~1945 (announced officially in 1946) ➜ Planned to calculate war time calculation, but used for complex calculation for scientific and military purpose ➜ Input―tactile (switches and knobs) & IBM card reader ➜ Output―IBM card punch & tabulator b. UNIVAC (UNIVersal Automatic Computer) ➜ The first commercially available digital computer × Process of numerical and textual data 2. Grace Hopper a. Programmer-computer interaction b. Inventor of compiler (a software converts high level programming language into low level language) ➜ “She described her goal as freeing mathematicians to do mathematics (Hopper 1952; see also Sammet 1992). This is echoed in today’s usability goal of freeing users to do their work.” http://www.columbia.edu/cu/computinghistory/eniac.html
- 29. *Goldstine, H. H., and Adele Goldstine. “The Electronic Numerical Integrator and Computer (ENIAC).” Mathematical Tables and Other Aids to Computation, vol. 2, no. 15, 1946, pp. 97–110. JSTOR, doi:10.2307/2002620. Programmers (operators) Kay McNulty Betty Jennings Betty Snyder Marlyn Meltzer Fran Bilas Ruth Lichterman “Numbers are introduced into the ENIAC by means of a unit called the constant transmitter which operates in conjunction with an IBM card reader.The reader scans standard punched cards (which hold up to 80 digits and 16 signs) … The constant transmitter makes these numbers available in the form of electrical signals as they are required. Similarly, results computed in the ENIAC may be punched on cards by the ENIAC's printer unit operating in conjunction with an IBM card punch. Tables can be automatically printed from the cards by means of an IBM tabulator.”*
- 30. Programmers (operators) Kay McNulty Betty Jennings Betty Snyder Marlyn Meltzer Fran Bilas Ruth Lichterman http://www.columbia.edu/cu/computinghistory/eniac.html
- 32. https://www.computerworlduk.com/galleries/it-business/the-evolution-of-computer-displays-3247234/
- 33. What was going on in 1940’s? For more Information about Computer in early day see Computer Pioneers: Pioneer Computers Part 1 (54 min)
- 34. 1945Vannevar Bush and Microfilm Machines; MEMEX
- 35. 1.3 Vannevar Bush and Microfilm Machines 1. Vannevar Bush a. MEMEX in “As We May Think”, 1945 📖 ➜ Definition × “a hypothetical microfilm-based electromechanical (analog) information- processing machine” (never built) × “a conceptual ancestor to electronic linking of material” (Paul, 2015) ➜ Goal × “a personal workstation that enables a professional to quickly index and retrieve documents or pictures and create hypertext-like associations among them.” × Potential target client a. FBI, CIA ➜ Technology × Microfilm as a storage medium a. Light & cheap (than magnetic tapes and other succeeding media) b. easy to manage & archive by photoreceptors
- 36. “Our ineptitude in getting at the record is largely caused by the artificiality of systems of indexing. When data of any sort are placed in storage, they are filed alphabetically or numerically, and information is found (when it is) by tracing it down from subclass to subclass. It can be in only one place, unless duplicates are used; one has to have rules as to which path will locate it, and the rules are cumbersome. Having found one item, moreover, one has to emerge from the system and re- enter on a new path.” Bush, Vannevar. “As We May Think.” The Atlantic, July 1945. The Atlantic, http://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/, paragraph 6.
- 37. The human mind does not work that way. It operates by association. With one item in its grasp, it snaps instantly to the next that is suggested by the association of thoughts, in accordance with some intricate web of trails carried by the cells of the brain. It has other characteristics, of course; trails that are not frequently followed are prone to fade, items are not fully permanent, memory is transitory. Yet the speed of action, the intricacy of trails, the detail of mental pictures, is awe-inspiring beyond all else in nature. Bush, Vannevar. “As We May Think.” The Atlantic, July 1945. The Atlantic, http://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/, paragraph 6.
- 39. Consider a future device for individual use, which is a sort of mechanized private file and library. It needs a name, and, to coin one at random, "memex" will do. A memex is a device in which an individual stores all his books, records, and communications, … It is an enlarged intimate supplement to his memory. … In one end is the stored material. The matter of bulk is well taken care of by improved microfilm. … Most of the memex contents are purchased on microfilm ready for insertion. Books of all sorts, pictures, current periodicals, newspapers, are thus obtained and dropped into place. …
- 40. … He can add marginal notes and comments, taking advantage of one possible type of dry photography, and it could even be arranged so that he can do this by a stylus scheme, such as is now employed in the telautograph seen in railroad waiting rooms, just as though he had the physical page before him.
- 41. … He can add marginal notes and comments, taking advantage of one possible type of dry photography, and it could even be arranged so that he can do this by a stylus scheme, such as is now employed in the telautograph seen in railroad waiting rooms, just as though he had the physical page before him.
- 42. 1.3 Vannevar Bush and Microfilm Machines 1. Vannevar Bush a. MEMEX in “As We May Think”, 1945 📖 ➜ Input × Tactile; lever, button, stylus × Vision; scanner ➜ Output × Vision; screen ➜ Result × Failed because a. Classification problem; “Metadata design is still a research challenge.” b. Overly ambitious compression and speed goals & Patent c. “None of his many projects included designs for the “essential” associative linking.” d. “Computers were clearly inferior to microfilm.”
- 44. ■ Ivan Sutherland ➜ Ivan Sutherland received a Ph.D. degree from MIT in 1963 and an honorary D.Sc. degree from UNC in 1986. He is a member of both the National Academy of Sciences and the National Academy of Engineering. He was the 1988 recipient of the Turing award and the 2012 recipient of the Kyoto Prize in Advanced Technology. Dr. Sutherland is author of over 60 patents, as well as numerous papers. He makes his home in Portland where he works at Portland State University (PSU) in the Asynchronous Research Center (ARC) that he founded with his wife, Marly Roncken, in 2008.* ➜ Sketchpad system, 1963 1.5.2 Visions and Demonstrations *https://cs.unc.edu/50th/celebration/symposium/
- 45. ■ Ivan Sutherland ➜ Sketchpad system, 1963 × A working prototype of modern GUI ▪ object-oriented programming concepts ⇢ Object (original) & instance ▪ The copying, moving, and deleting of hierarchically organized objects with light-pen (not clipboard!) × Modalities ▪ Input ▫ Tactile; buttons. stylus ▪ Output ▫ Vision; screen 1.5.2 Visions and Demonstrations
- 46. ■ Ted Nelson, majored sociology ➜ Coined the term, Hypertext in Nelson, Theodor H. "Complex information processing: a file structure for the complex, the changing and the indeterminate." Proceedings of the 1965 20th national conference. ACM, 1965. × “A generic term covering a number of techniques used to create and view multidimensional documents, which may be entered at many points and which may be browsed in any order by interactively choosing words or key phrases as search parameters for the next text image to be viewed.” A Dictionary of Computing, Oxford Paperback Reference 1.5.2 Visions and Demonstrations
- 47. Nelson, Theodor H. "Complex information processing: a file structure for the complex, the changing and the indeterminate." Proceedings of the 1965 20th national conference. ACM, 1965. p.42 “Let me introduce the word "hypertext"***** to mean a body of written or pictorial material interconnected in such a complex way that it could not conveniently be presented or represented on paper. It may contain summaries, or maps of its contents and their interrelations; …… Films, sound recordings, and video recordings are also linear strings , basically for mechanical reasons. But these, too, can now be arranged as non-linear systems―for instance, lattices-- for editing purposes, or for display with different emphasis.” {transclusion & parallel like wikipedia and youtube}
- 48. ■ Ted Nelson, majored sociology ➜ Coined the term, Hypertext in Nelson, Theodor H. "Complex information processing: a file structure for the complex, the changing and the indeterminate." Proceedings of the 1965 20th national conference. ACM, 1965. 1.5.2 Visions and Demonstrations
- 49. ■ Dr. Douglas C. Engelbart and the Augmentation Research Center (ARC) at Stanford Research Institute (SRI) ➜ 1968 Joint Computer Conference (9 Dec 1968) × Demonstration of NLS (computer system / oN-Line System) × A complete demonstration of modern HCI requirements for end-users × Four basic classes of augmentation means that extend human capabilities. 1.5.2 Visions and Demonstrations
- 50. Moggridge, Bill. Designing Interactions. 1 edition, The MIT Press, 2007. p.32 Physical objects designed to provide for human comfort, the manipulation of things or materials, and the manipulation of symbols. The way in which the individual classifies the picture of his world into the concepts that his mind uses to model that world, and the symbols that he attaches to those concepts and uses in consciously manipulating the concepts (“thinking”). Artifacts Language Methodology Training The methods, procedures, and strategies with which an individual organizes his goal-centered (problem-solving) activity. The conditioning needed by the individual to bring his skills in using augmentation means 1, 2, and 3 to the point where they are operationally effective.
- 53. https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/ Physical objects designed to provide for human comfort, the manipulation of things or materials, and the manipulation of symbols. The way in which the individual classifies the picture of his world into the concepts that his mind uses to model that world, and the symbols that he attaches to those concepts and uses in consciously manipulating the concepts (“thinking”). Artifacts Language Methodology Training The methods, procedures, and strategies with which an individual organizes his goal-centered (problem-solving) activity. The conditioning needed by the individual to bring his skills in using augmentation means 1, 2, and 3 to the point where they are operationally effective.
- 54. ■ Dr. Douglas C. Engelbart and the Augmentation Research Center (ARC) at Stanford Research Institute (SRI) ➜ 1968 Joint Computer Conference (9 Dec 1968) × Demonstration of NLS (computer system / oN-Line System) × Achievement ▪ “the ideas of bitmapping, windows, and direct manipulation through a mouse” (Paul, 2014) ▪ “The direct manipulation of this space by pointing or dragging was made possible by Engelbart’s invention of the mouse, the extension of the user’s hand into dataspace. (Paul, 2014) 1.5.2 Visions and Demonstrations
- 55. ■ Dr. Douglas C. Engelbart and the Augmentation Research Center (ARC) at Stanford Research Institute (SRI) ➜ 1968 Joint Computer Conference (9 Dec 1968) × Demonstration of NLS (computer system / oN-Line System) × Modalities ▪ Input―tactile, vision, audible ▪ Output―vision, audible 1.5.2 Visions and Demonstrations
- 57. Mouse. First time in the world. Demonstrated
- 59. Copy and paste View control Drag & drop Demonstrated
- 60. Real-time collaboration over network Window Demonstrated
- 61. Bibliography
- 62. 1. Bush, Vannevar. “As We May Think.” The Atlantic, July 1945. The Atlantic, http://www.theatlantic.com/magazine/archive/1945/07/as-we-may-think/303881/, paragraph 6. 2. Campbell-Kelly, Martin, William Aspray, Nathan Ensmenger, Jeffrey R. Yost, and William Aspray. Computer: A History of the Information Machine. Third edition. The Sloan Technology Series. Boulder, CO: Westview Press, A Member of the Perseus Books Group, 2014. 3. Grudin, Jonathan. “A Moving Target: The Evolution of Human–Computer Interaction.” Human Computer Interaction Handbook: Fundamentals, Evolving Technologies, and Emerging Applications, Third Edition, edited by Julie A. Jacko, 3rd ed., Taylor & Francis, 2012, pp. xxvii–lxi. 4. Moggridge, Bill. Designing Interactions. 1 edition, The MIT Press, 2007. 5. Nelson, Theodor H. "Complex information processing: a file structure for the complex, the changing and the indeterminate." Proceedings of the 1965 20th national conference. ACM, 1965. P.42 6. Paul, Christiane. Digital Art. Thames & Hudson, 2015.
- 63. Appendix
- 64. ➜ ENIAC × ENIAC: Celebrating Penn Engineering History × Computer HIstory Museum Entry × Programming the ENIAC × The Forgotten Female Programmers Who Created Modern Tech, NPR × ENIAC Programmers project ➜ Sketchpad × Resource Page on Early HCI Research by the Lincoln Lab TX-2 Group by Bill Buxton × Sketchpad Demonstration on YouTube ➜ Ted Nelson × His personal website ⇢ http://ted.hyperland.com/ × Youtube channel ➜ Demonstration of NLS (computer system / oN-Line System) × The Mother of All Demos: The 1968 presentation that sparked a tech revolution on computerworld.com × Highlights of the 1968 "Mother of All Demos" with labeled youtube videos from dougengelbart.org × Detailed Onscreen Outline from Doug's 1968 Demo from dougengelbart.org
Editor's Notes
- † “computer science The study of computers and their application. This is a broad discipline covering the theory and practice of hardware and software design.” “... It is not a science in the strict sense of being a discipline employing scientific method to explain phenomena in nature or society (though it has connections with physics, psychology, and behavioural science), but rather in the looser sense of being a systematic body of knowledge with a foundation of theory. Since however it is ultimately concerned with practical problems concerning the design and construction of useful systems, within constraints of cost and acceptability, it is as much a branch of engineering as it is a science.””
- Consider a future device for individual use, which is a sort of mechanized private file and library. It needs a name, and, to coin one at random, " memex" will do. A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory. It consists of a desk, and while it can presumably be operated from a distance, it is primarily the piece of furniture at which he works. On the top are slanting translucent screens, on which material can be projected for convenient reading. There is a keyboard, and sets of buttons and levers. Otherwise it looks like an ordinary desk. In one end is the stored material. The matter of bulk is well taken care of by improved microfilm. Only a small part of the interior of the memsx is devoted to storage, the rest to mechanism. Yet if the user inserted 5000 pages of material a day it would take him hundreds of years to fill the repository, so he can be profligate and enter material freely. Most of the memex contents are purchased on microfilm ready for insertion. Books of all sorts, pictures, current periodicals, newspapers, are thus obtained and dropped into place. Business correspondence takes the same path. And there is provision for direct entry. On the top of the memex is a transparent platen. On this are placed longhand notes, photographs, memoranda, all sorts of things. When one is in place, the depression of a lever causes it to be photographed onto the next blank space in a section of the memex fil, dry photography being employed. There is, of course, provision for consultation of the record by the usual scheme of indexing. If the user wishes to consult a certain book, he taps its code on the keyboard, and the title page of the book promptly appears before him, projected onto one of his viewing positions. Frequently-used codes are mnemonic, so that he seldom consults his code book; but when he does, a single tap of a key projects it for his use. Moreover, he has supplemental levers. On deflecting one of these levers to the right he runs through the book before him, each page in turn being projected at a speed which just allows a recognizing glance at each. If he deflects it further to the right, he steps through the book i0 pages at a time; still further at i00 pages at a time. Deflection to the left gives him the same control backwards. A special button transfers him immediately to the first page of the index. Any given book of his library can thus be called up and consulted with far greater facility than if it were taken from a shelf. As he has several projection positions, he can leave one item in position while he calls up another. He can add marginal notes and comments, taking advantage of one possible type of dry photography, and it could even be arranged so that he can do this by a stylus scheme, such as is now employed in the telautograph seen in railroad waiting rooms, just as though he had the physical page before him.
- Consider a future device for individual use, which is a sort of mechanized private file and library. It needs a name, and, to coin one at random, " memex" will do. A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory. It consists of a desk, and while it can presumably be operated from a distance, it is primarily the piece of furniture at which he works. On the top are slanting translucent screens, on which material can be projected for convenient reading. There is a keyboard, and sets of buttons and levers. Otherwise it looks like an ordinary desk. In one end is the stored material. The matter of bulk is well taken care of by improved microfilm. Only a small part of the interior of the memsx is devoted to storage, the rest to mechanism. Yet if the user inserted 5000 pages of material a day it would take him hundreds of years to fill the repository, so he can be profligate and enter material freely. Most of the memex contents are purchased on microfilm ready for insertion. Books of all sorts, pictures, current periodicals, newspapers, are thus obtained and dropped into place. Business correspondence takes the same path. And there is provision for direct entry. On the top of the memex is a transparent platen. On this are placed longhand notes, photographs, memoranda, all sorts of things. When one is in place, the depression of a lever causes it to be photographed onto the next blank space in a section of the memex fil, dry photography being employed. There is, of course, provision for consultation of the record by the usual scheme of indexing. If the user wishes to consult a certain book, he taps its code on the keyboard, and the title page of the book promptly appears before him, projected onto one of his viewing positions. Frequently-used codes are mnemonic, so that he seldom consults his code book; but when he does, a single tap of a key projects it for his use. Moreover, he has supplemental levers. On deflecting one of these levers to the right he runs through the book before him, each page in turn being projected at a speed which just allows a recognizing glance at each. If he deflects it further to the right, he steps through the book i0 pages at a time; still further at i00 pages at a time. Deflection to the left gives him the same control backwards. A special button transfers him immediately to the first page of the index. Any given book of his library can thus be called up and consulted with far greater facility than if it were taken from a shelf. As he has several projection positions, he can leave one item in position while he calls up another. He can add marginal notes and comments, taking advantage of one possible type of dry photography, and it could even be arranged so that he can do this by a stylus scheme, such as is now employed in the telautograph seen in railroad waiting rooms, just as though he had the physical page before him.
- Consider a future device for individual use, which is a sort of mechanized private file and library. It needs a name, and, to coin one at random, " memex" will do. A memex is a device in which an individual stores all his books, records, and communications, and which is mechanized so that it may be consulted with exceeding speed and flexibility. It is an enlarged intimate supplement to his memory. It consists of a desk, and while it can presumably be operated from a distance, it is primarily the piece of furniture at which he works. On the top are slanting translucent screens, on which material can be projected for convenient reading. There is a keyboard, and sets of buttons and levers. Otherwise it looks like an ordinary desk. In one end is the stored material. The matter of bulk is well taken care of by improved microfilm. Only a small part of the interior of the memsx is devoted to storage, the rest to mechanism. Yet if the user inserted 5000 pages of material a day it would take him hundreds of years to fill the repository, so he can be profligate and enter material freely. Most of the memex contents are purchased on microfilm ready for insertion. Books of all sorts, pictures, current periodicals, newspapers, are thus obtained and dropped into place. Business correspondence takes the same path. And there is provision for direct entry. On the top of the memex is a transparent platen. On this are placed longhand notes, photographs, memoranda, all sorts of things. When one is in place, the depression of a lever causes it to be photographed onto the next blank space in a section of the memex fil, dry photography being employed. There is, of course, provision for consultation of the record by the usual scheme of indexing. If the user wishes to consult a certain book, he taps its code on the keyboard, and the title page of the book promptly appears before him, projected onto one of his viewing positions. Frequently-used codes are mnemonic, so that he seldom consults his code book; but when he does, a single tap of a key projects it for his use. Moreover, he has supplemental levers. On deflecting one of these levers to the right he runs through the book before him, each page in turn being projected at a speed which just allows a recognizing glance at each. If he deflects it further to the right, he steps through the book i0 pages at a time; still further at i00 pages at a time. Deflection to the left gives him the same control backwards. A special button transfers him immediately to the first page of the index. Any given book of his library can thus be called up and consulted with far greater facility than if it were taken from a shelf. As he has several projection positions, he can leave one item in position while he calls up another. He can add marginal notes and comments, taking advantage of one possible type of dry photography, and it could even be arranged so that he can do this by a stylus scheme, such as is now employed in the telautograph seen in railroad waiting rooms, just as though he had the physical page before him.