Lecture 14 HCI History Mark Woehrer CS 3053 - Human-Computer - PowerPoint PPT Presentation

Lecture 14 – HCI History Mark Woehrer CS 3053 - Human-Computer Interaction Computer Science Department Oklahoma University Spring 2007 [Taken from Stanford CS147 with permission] CS 3053 - Mark Woehrer

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 CS 3053 - Mark Woehrer

Generations of Human-Computer Interaction (Nielsen++) • Pre-history – to 1945 • Pioneer – 1945-55 • Historical – 1955-65 • Traditional – 1965-80 • Modern – 1980-90 • Web – 1990-… • Mobile/Ubiquitous – 1990-… CS 3053 - Mark Woehrer

Pre-history • Precursors (Babbage, Jacquard Loom, ...) • Plugboards and Punchcards • Tabulating machines, calculators,.. • Communications – Teletype, Fax,… CS 3053 - Mark Woehrer

Jacquard Loom (1804) Babbage Difference Engine (1849) CS 3053 - Mark Woehrer

Hollerith Punch Cards (1890) Hollerith Electric Tabulator, US Census Bureau, Washington, DC, 1908, Photograph by Waldon Fawcett. Library of Congress, LC-USZ62-45687. CS 3053 - Mark Woehrer

Teletype (ca. 1910) CS 3053 - Mark Woehrer

Prehistory: Key Advances • Ability for a mechanism to follow a sequence of operations according to pre-programmed instructions • Digital encoding of information (both text content and instructions on what to do) • Transmission of digital information CS 3053 - Mark Woehrer

Pioneer (1945-1955) • 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 CS 3053 - Mark Woehrer

Historical (1955-1965) • Specialized computers and interaction modes, often for a single highly trained user • Integrated systems (e.g., air defense / SAGE) CS 3053 - Mark Woehrer

Spacewar MIT PDP-1 (1960) CS 3053 - Mark Woehrer

Lincoln Labs TX-2 Sketchpad (1962) CS 3053 - Mark Woehrer

Sage Air Defense (1963) CS 3053 - Mark Woehrer

Historical: Key Advances • Real-time interactive systems • First interactive computer games • Graphic interaction CS 3053 - Mark Woehrer

Traditional 1965-1980 • Mainframe – Batch Processing • Time Sharing – Command Dialog CS 3053 - Mark Woehrer

Batch Processing • A user prepares data o fg line, submits it for a "run", and is given back an o fg 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 e ffj cient use of computers without waiting for human input CS 3053 - Mark Woehrer

Time Sharing Text Command Line Interaction login as: winograd winograd@graphics's password: Last login: Tue Sep 20 15:22:48 2005 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> CS 3053 - Mark Woehrer

Full-Screen Interaction • Machine provides a pre-planned structure (often branching) of screens with blanks to be filled in and menus that o fg er 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 CS 3053 - Mark Woehrer

Key Advances: Historical • Spread of computers to industry and government • Real-time data entry • Control over writing on screens • Interactive applications CS 3053 - Mark Woehrer

Modern (1980-1995) • Personal Computers • Graphical User Interface (GUI) CS 3053 - Mark Woehrer

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 CS 3053 - Mark Woehrer

Altair (1975) CS 3053 - Mark Woehrer

Apple I (1976) CS 3053 - Mark Woehrer

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 CS 3053 - Mark Woehrer

Commercialized Personal Computers Apple II 1977 IBM PC 1981 CS 3053 - Mark Woehrer

Visicalc (1979) and Lotus 1-2-3 (1980) CS 3053 - Mark Woehrer

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 CS 3053 - Mark Woehrer

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) CS 3053 - Mark Woehrer

Precursor - Augment (Engelbart, 1968) • Key advances: Mouse, direct manipulation of text, outlining, word processing, hyperlinking, multi-function integration CS 3053 - Mark Woehrer

Augment at SRI (ca. 1965) CS 3053 - Mark Woehrer

Xerox PARC Graphical Workstations Star (commercial product), 1981 Alto (research prototype), 1973 CS 3053 - Mark Woehrer

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 CS 3053 - Mark Woehrer

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)

Apple Macintosh (1984) • Lisa follow-up • Key advances: – GUI a fg ordable 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 CS 3053 - Mark Woehrer

Hypercard

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? CS 3053 - Mark Woehrer

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 a fg ordable and usable to a huge new community of users. CS 3053 - Mark Woehrer

Web Interfaces (1990-…) • World Wide Web, Berners Lee, 1990 • First Graphic browser – Mosaic – NCSA - University of Illinois, 1993 • Search Engine – Webcrawler, Lycos, Altavista…1993-95 – Google, 1998 • Graphic design (Director, Flash,…) – http://www.adobe.com/products/flash/ flashpro/productinfo/features/ • Rich Web Interfaces 2000… CS 3053 - Mark Woehrer

NCSA Mosaic

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 CS 3053 - Mark Woehrer