History of Computer

Early Example: Astrolabe

In middle age, astrolabe can calculate people the time of the day, sun, star, season, latitude, etc.
Easier to use, but need to learn how to use astrolabe.

Babbage Difference Engine

• First mechanical calculator
• Can solve 7th-order polynomial equations!

Z1 (1936)

• First programmable computer!
• Can add & subtract 22-bit floating-point numbers
• Can multiple and divide numbers
• Used punch tape to input program - we can now use input and output!
• You have to observe the results inside the machine
• Still mechanical - human should run the "computer" themself

ENIAC (1943)

• First electronic numerical integrator and computer
• Used for ballistic calculations, weather predictions, and nuclear research
• Can program, but humans should physically rewire ENIAC
• ENIAC output was read through punch cards or lights
• The first programmers were women!

Harvard Mark 1 (1944)

• Used paper tape as input
• Used teletype to enter data and program
• Output was printed on an electromechanical typewriter
• Input/output is becoming easier!
• Still the first programmers were women
  • One of the first programmers, Grace Hopper later contributed to compiler development

History of HCI

As We Many Think (1945)

Computers like ENIAC and Harvard Mark 1 was used for World War II.
Vannevar Bush proposed collective memory machine, a computer that can collect and share informations.
Now computers are used for people, not just for complex calculations!

Memex (1945)

Vannevar Bush proposed Memex as an example of collective memory machine.

This is not a real computer!!!
However it was a precursor to hypertext, web (internet), digital libraries, etc.

• read a large library, and add or follow associative trails of links and notes
• compresses and stores all of books, records, and communications
• user can edit real-time! they can add memo to books, etc.

Sketchpad (1963)

First graphical user interface!!
Ivan E Sutherland had to invent the graphical tool!

• Interactive problem-solving: Instead of coding programs for each problem, just solve the problem
  Instead of coding circle, just draw circle!
• Real-time interaction: User doesn't have to pre-plan everything, they can just solve the problem as they are formulating it.
• Immediate feedback: No coding -> input -> wait output
• Two-handed interactions: Used light pen & keypad
• Constraint satisfaction problem
• Magnetic snap: You could snap objects to grid - early smart object alignment

Direct manipulation

Sketchpad was a precursor to modern UI interactions.
The term 'direct manipulation' was later coined by Ben Shneiderman (1983).

• Visibility of objects
• Incremental action and rapid feedback
• Reversibility
• Exploration
• Syntactic correctness of all actions
• Replacing language with action

Mouse (1963)

First mouse was invented by Doug Engelbart.

NLS (1968)

oNLine System - The first collaborative computing system.
Office workers can edit text and collaborate in real-time!

90 minute live demo was really successful, so it was called the mother of all demos.

• First demonstration of mouse
• First hypertext
• First real-time text editing & collaboration
• Demonstrated GUI elements
• Foldable outline system (Outline can be folded like folder structure)

First HCI user study (1967)

Compare mouse, joystick, lightpen, grafacon, knee-controlled lever

Experiment Setup

• 13 participants
• Make participants choose middle of 3x3 'X'
• Independent variable: input method
• Dependent variable: task completion time, eror rate
• Within-subjects design: all participants used all input methods
• Counterbalanced: each participants used input methods in different order

Results

Actually knee-controlled lever was the fastest method, but mouse had lower error rate!

Augment (1977)

The modernization of the NSL.

Mouse, Keyboard, Foldable outline system, Hypertext, Hyperlink, Shared-screen collaboration, etc.

Success of Apple

Apple referenced lots of HCI studies. actually they just went to Xerox lab and copied their works
Apple II (1977) released, and it was a great success.
After that, Apple started Machintosh project. Its goal was producing a low-cost easy-to-use computer for the average consumer.

Alto (1973)

Xerox made GUI components, such as menus, windows, pointing, dragging, etc.
It was a decade before mass market GUI machines arose, but Apple just copied to make Macintosh.

• WYSIWYG document systems
• email tool
• vector graphics editor
• bitmap editor
• graphical editor
• smalltalk, interlisp
• network-based multi-person video games

Nearly everything was started from Alto!

Hobbyist Computer

Computer become cheaper, now we can see computers outside companies and labs!

Lots of developers like bill gates made software for computers.
Most computers' case were made with wood.

Apple II (1977~1993)

• auto-repeat function - hold key to repeat keyyyyy
• full ASCII character set
• input/display lowercase letters (previously computers only supported uppercase letters)

VisiCalc (1979)

First spreadsheet

Main reason for the success of the Apple II

Star (1981)

Another computer from Xerox!

• Used mouse and cursor keys
• First concept of windows, icons, window management, etc.
• Integrated networked document environment
• WYSIWYG (scrollbar, icons, etc.)

Apple Lisa (1983), Macintosh (1984)

Apple literally copied Xerox Star.
Lisa was too expensive, but Machintosh was affordable($2500).

IBM PC (1981)

IBM also made PC using CLI.

Windows 1.0 (1985)

Windows copied Apple and made their own PC.
Apple sued Microsoft for using overlapping windows, but judge couldn't understand the importance of it.....

Birth of HCI

First ACM SIGCHI conference started at 1983.
The Psychology of Human-Computer Interaction was published at 1983.
(Apple Machintosh was announced at 1983 and launched at 1984.)

Example of an early research topic: breadth vs. depth in menu design

Research precedes products

• Two-finger gestures (1978) -> Apple iPhone (2007)
• Acceleration-sensing (1998) -> Nintendo Wiimote (2005)
• Wheel mouse (1993) -> Microsoft Intellimouse (1996)
• Single-stroke text input (1993) -> Palm's Graffiti (1995)

There are lots of other examples: HyperText, Text Editing, Mouse, Windows, Gesture Recognition etc.