Lecture 11 HCI History

Size: px

Start display at page:

Download "Lecture 11 HCI History"

Rosaline Neal
5 years ago
Views:

1 Lecture 11 HCI History Terry Winograd CS147 - Introduction to Human-Computer Interaction Design Computer Science Department Stanford University Autumn 2006 CS147 - Terry Winograd - 1

2 Learning Goals Be familiar with the development of the major strands of interaction design and the technologies underlying them Gain an appreciation for the research, development and thought that went into the interfaces which today seem so mundane and commonplace Have a perspective on where things are going at the moment and likely to continue in the future CS147 - Terry Winograd - 2

3 Generations of Human-Computer Interaction (Nielsen++) Pre-history to 1945 Pioneer Historical Traditional Modern Web Mobile/Ubiquitous CS147 - Terry Winograd - 3

4 Pre-history Precursors (Babbage, Jacquard Loom,...) Plugboards and Punchcards Tabulating machines, calculators,.. Communications Teletype, Fax, CS147 - Terry Winograd - 4

5 CS147 - Terry Winograd - 5 Jacquard Loom (1804) Babbage Difference Engine (1849)

6 Hollerith Punch Cards (1890) CS147 - Terry Winograd - 6 Hollerith Electric Tabulator, US Census Bureau, Washington, DC, 1908, Photograph by Waldon Fawcett. Library of Congress, LC-USZ

7 CS147 - Terry Winograd - 7 Teletype (ca. 1910)

8 Prehistory: Key Advances Ability for a mechanism to follow a sequence of operations according to preprogrammed instructions Digital encoding of information (both text content and instructions on what to do) Transmission of digital information CS147 - Terry Winograd - 8

9 Pioneer ( ) Stored program computers (Von Neumann) Complex electromechanical control systems (eg., bomb controls, aircraft controls ) Primary Interaction Mode: A person is playing a part in controlling a complex realtime system. The interface is designed to provide information and control possibilities that are suited to the limitations of human performance and the demands of the task. Key Advances Programmable digital computers Systematic study of human factors CS147 - Terry Winograd - 9

10 Historical ( ) Specialized computers and interaction modes, often for a single highly trained user Integrated systems (e.g., air defense / SAGE) CS147 - Terry Winograd - 10

11 CS147 - Terry Winograd - 11 Spacewar MIT PDP-1 (1960)

12 CS147 - Terry Winograd - 12 Lincoln Labs TX-2 Sketchpad (1962) Ivan Sutherland - MIT

13 CS147 - Terry Winograd - 13 Sage Air Defense (1963)

14 Historical: Key Advances Real-time interactive systems First interactive computer games Graphic interaction CS147 - Terry Winograd - 14

15 Traditional Mainframe Batch Processing Time Sharing Command Dialog CS147 - Terry Winograd - 15

16 CS147 - Terry Winograd - 16 Batch Processing A user prepares data off line, submits it for a "run", and is given back an off line version of the results. Cycle time can be short but in many installations was hours or days. The computer ran one job after another without waiting for users to do anything Interaction through card decks and printouts Batch processing facilitated the efficient use of computers without waiting for human input

17 Time Sharing Text Command Line Interaction login as: winograd password: Last login: Tue Sep 20 15:22: from xtz.stanford.edu *********************** * Welcome to SULinux! * * Authorized Use Only * *********************** Hint: run /usr/sbin/sulinux to reconfigure at any time Graphics> echo "hello world" hello world Graphics> connect to the web connect: Command not found. Graphics> help help: Command not found. Graphics> rm R * Graphics> CS147 - Terry Winograd - 17

18 Full-Screen Interaction Machine provides a pre-planned structure (often branching) of screens with blanks to be filled in and menus that offer options to go to other screens. User fills in the blanks, use menu to go to other screens Early embodiment in 3270 terminals Common in data entry, service jobs, etc. This was the interaction style for most early Web pages, including most uses of forms CS147 - Terry Winograd - 18

20 Key Advances: Historical Spread of computers to industry and government Real-time data entry Control over writing on screens Interactive applications CS147 - Terry Winograd - 20

21 Modern ( ) Personal Computers Graphical User Interface (GUI) CS147 - Terry Winograd - 21

22 Personal Computers Early small hobbyist computers MITS Altair (Roberts, 1975) Apple I, (Jobs and Wozniak, 1976) Commercialized personal computers Apple II, 1977 IBM PC 1981 CS147 - Terry Winograd - 22

23 CS147 - Terry Winograd - 23 Altair (1975)

24 CS147 - Terry Winograd - 24 Apple I (1976)

25 Key Advances: Hobbyist computers Machines cheap enough to be used by someone other than government and big business or research labs Created the opportunity for a wide number of developers to start building software Bill Gates and Paul Allen wrote version of BASIC for MITS Altair giving Microsoft its start CS147 - Terry Winograd - 25

26 Commercialized Personal Computers Apple II, 1977 IBM PC 1981 CS147 - Terry Winograd - 26

27 CS147 - Terry Winograd - 27 Visicalc (1979) and Lotus (1980)

28 Key Advances : Commercial PCs Apple II, 1977 Key advances: First general purpose personal computer used widely in business (because of VisiCalc) IBM PC, 1981 Key advances: Making the PC respectable to business in general by putting the IBM label on it Features Character terminal Text UI standards (IBM CUA) Graphics: non-standard CS147 - Terry Winograd - 28

29 Graphical User Interface (GUI) Bitmapped screen pixels rather than characters WYSYWIG (What You See is What You Get) Direct Manipulation WIMP (Windows, Icons, Menus, and Pointing) CS147 - Terry Winograd - 29

30 Precursor - Augment (Engelbart, 1968) Key advances: Mouse, direct manipulation of text, outlining, word processing, hyperlinking, multi-function integration CS147 - Terry Winograd - 30

31 CS147 - Terry Winograd - 31 Augment at SRI (ca. 1965)

32 Xerox PARC Graphical Workstations Star (commercial product), 1981 Alto (research prototype), 1973 CS147 - Terry Winograd - 32

Xerox Star (1981) Introduced windows commercially, $17K Key advances: Integrated networked document environment, WYSYWIG text editing, icons, property

33 Xerox Star (1981) Introduced windows commercially, $17K Key advances: Integrated networked document environment, WYSYWIG text editing, icons, property sheets, window management,... Unique design process (8 years of prototyping) Design first, then code Objects&Actions Graphic designers CS147 - Terry Winograd - 33

34 Apple Lisa (1983) Apple s first bitmapped-gui computer Inspired by Alto (not Star) 1-button mouse Key advances: Menu bar (instead of pop-up menus) But: underpowered, bad marketing ($10K)

35 Apple Macintosh (1984) Lisa follow-up Key advances: GUI affordable to huge new user community First commercially successful WIMP system, $2500 Hypercard for mass authoring Most consistent commercial WIMP UI Macintosh Human Interface Guidelines Apple Evangelists CS147 - Terry Winograd - 35

36 Hypercard

37 GUI Software Platforms Windows 3.0, 95, 98, NT, XP, Vista Brought GUIs to the mass market Macintosh OS7,8,9, OSX, Cheetah, Puma, Jaguar, Panther, Tiger, Leopard One step ahead Variants Open Look, Motif, Gnome, NextStep,, BeOS, The paradigm is basically stable. What s next? CS147 - Terry Winograd - 37

38 Key Advances: GUI Workstations Xerox Alto (1973) Menus, windows, pointing, dragging, etc. as we now know them Xerox Star (1981) Integrated networked document environment with many of the features we now take for granted: WYSYWIG text editing, icons, property sheets, window management, etc. Unique design process (8 years of prototyping) Apple Lisa (1983), Macintosh (1984) Made the GUI interface affordable and usable to a huge new community of users. CS147 - Terry Winograd - 38

39 Web Interfaces (1990- ) World Wide Web, Berners Lee, 1990 First Graphic browser Mosaic CS147 - Terry Winograd - 39 NCSA - University of Illinois, 1993 Search Engine Webcrawler, Lycos, Altavista Google, 1998 Graphic design (Director, Flash, ) nfo/features/ Rich Web Interfaces 2000

40 NCSA Mosaic

43 Key Advances: Web interfaces First Generation browsers and full screen interaction Universal access to sites irrespective of location or computing platform Second Generation Better visual design (e.g, CSS, Flash, multimedia, ) Aesthetic control and impact Web 2.0 Browser as powerful client, accessing web-based services Integrated networked-based applications that leverage large-scale services (search, maps, etc.) Blurs boundary between applications and web CS147 - Terry Winograd - 43

44 Mobile Computing ( ) PDAs Apple Newton (1993) Depended heavily on Handwriting, failed in the market Palm Pilot (1996) Used Graffiti, first commercial success Mobile Connected Devices Cell Phones ++ SoMoCo (Social Mobile Computing) CS147 - Terry Winograd - 44

45 Personal Digital Assistant (PDA) Palm Pilot (1996) Apple Newton (1993) CS147 - Terry Winograd - 45

46 CS147 - Terry Winograd - 46 Mobile Devices

47 Research directions [for another lecture] Virtual Reality Augmented Reality Natural Language, Intelligent Agents Pen-based interaction Wearable Affective Computing Multimodal Interaction Tangible Interaction Human-Robot Interaction Ubiquitous Computing These have been explored for many years, but not made it into mainstream use. Which of them (or something else) will be the next big thing? CS147 - Terry Winograd - 47

Design of Graphical User Interfaces

Design of Graphical User Interfaces Graduate School Course IT 2 Prof. Astrid Beck 1 1 Contact information Mail: WWW: Astrid.Beck@fht-esslingen.de http://www.it.fht-esslingen.de/~asbeck Office: F1.353 Level