You are on page 1of 46

History of the GUI

The Keyboard

Precursors:
• Typewriter
• Teleprinter
• Keypunches
Computers:
• Binac
• Whirlwind
Cathode Ray Tube
• Invented by Karl Ferdinand
Braun in 1897
• Early computers used
oscilloscope and vector CRTs
• The first computer to use a CRT
display..
Whirlwind
• First demonstrated on
April 20th, 1951
• Used by U.S. Air
Force in it’s SAGE air
defense system.
• First:
– Real time computer
– Graphic display
– Direct keyboard input
SAGE Project

CRT-based
Targets
real-time
selected with
user interface
a light gun
PDP-1
• First commercial
computer with a
keyboard and
monitor.
• Released in 1960
• Hosted the creation
of the first computer
video game
Spacewar!
Spacewar!

• First version completed
in February 1962
• Offered interactive
computer graphics
• Used front-panel test
switches of PDP-1 or
custom control boxes
Sketchpad
• Program written by Ivan • Treated the computer
Sutherland in 1963 screen as a window
• Utilized a light pen • Pop-up Menus
• Represented a variety
of user programs as
images or objects on
the screen
Sketchpad
• Drawings could be
rotated, scaled,
copied, and erased
• Zooming in and out
on the display
• Ability to make perfect
lines, corners, and
joints
• Edit existing elements
Rand Tablet
• First modern
graphics tablet
• Marketed as the
Grafacon tablet in
1964
NLS
The oNLine System
• Conceived by
Douglas Engelbart
• Public debut
December 9, 1968
• Introduced the mouse
• Vector based display
• Windowed display
NLS
• Document Processing
– Text could be entered, dragged, copied and pasted,
formatted, scrolled, and grouped hierarchically
– Blocks of code could be expanded and collapsed, with
support for auto-completion
– Documents could contain embedded formatting statements
which could be used for printing.
– Saved Files contained meta-data such as file’s owner & time
of creation
NLS
• Hypermedia • Other Innovations
– Text with hyperlinks – Document Collaboration
– Images with hyperlinks – “E-mail”
– Searching – “Instant messaging”
– Video conferencing
– Chord Keyset
AMBIT/G
• Developed in 1968 at
MIT’s Lincoln Labs
• Iconic
representations
• Gesture recognition
• Dynamic Menus
• Icon selection by
pointing
Alto
• Computer developed at
Xerox PARC and
completed in 1973
• Fully bitmapped display
• Implemented windows,
scrollbars, and sliders
• Used 3 button ball mouse
• Ethernet
•• Scroll
Smallt
Objectbars,
Pop-up Radio
oriented
menus, buttons,
program
Overlapping
Dialog boxes
language
Windows, used
Iconson Altos alk
PERQ
• Released by ICL Three
Rivers in August 1980
• Company co-founder Brian
Rosen worked at PARC.
• Direct descendant of Alto.
• First commercially
available personal
workstation.
• Used Touch Pad rather
than mouse
Star
• Released by Xerox in 1981
• First implement of desktop
metaphor
• Based on the Alto’s
innovations
• Document Oriented
• Resizable windows
Lisa
• Released by Apple January, 1983
• First Personal Computer with a GUI
• Partially inspired by a trip to Xerox PARC
• Document Oriented
• Icons represent all items in file system
Lisa
Introduced the following:
•Pull Down Menu Bar
•Clipboard
•Trashcan
•Drag-and-drop
•Double Clicking
Lisa
Introduced the following:
•Keyboard Shortcuts For Menu Commands
•Graying Out Of Unavailable Menu Options
•“Regions” Window Redraw
•Alert Boxes
•Precursor to Tabs within a window
Visi On
• Released for IBM
PC December 1983
• First consumer-
oriented, PC-based
GUI
• No Icons
Visi On
• Fully Mouse-driven
• Used a Bit-mapped
Display for Both
Text and Graphics
• Allowed User To
Open Numerous
Programs in
Different Windows
Macintosh
• First commercially successful mouse-
driven computer with a GUI
• Released by Apple January, 1984
• Very similar to Lisa’s GUI
• Single Tasking (unlike the Lisa)
• New Additions
– Apple System Menu
– Lasso Multiple Icons
Windows 1.x
• Tiled windows only (Due to Apple lawsuit)
• Each application had own menu bar attached
• Featured "Iconize" and "Zoom"
• Fixed minimized program icon area similar to
Windows 95’s Task Bar
Window System
• Invented at MIT in 1984
• Used on Unix and Linux
• Requires a “window manager”
• No set look or feel
• Mouse hover to window change focus
• Released in 1985 by Commodore
• Move overlapping windows up and down
the stack

• Select, move, and work in a window
without automatically bringing it to the
front
• Single hidden menu bar activated by right
click
Arthur
• Released in 1987 by Acorn
Computers
• Introduced the “Dock”

• Proportionally-sized scroll bars
• First anti-aliased font display
Windows 2.x
• Released November 1987
• Overlapping Windows
• System Box
• Minimize and maximize buttons
NeXTSTEP
• Released 1989 on the NeXTcube by
Next Computer, Inc. which was founded
by Apple co-founder Steve Jobs
• Originally a black and white gui
• Later ported to PCs
NeXTSTEP
• First to use the "X" symbol to indicate
closing a window
• Introduced a sharp, 3D beveled look to all
of its GUI components
• Introduced “tear off” vertical menu strip
that allowed the user to leave specific
menus on the screen
• Real-time scrolling and window dragging
NeXTSTEP
• The first web browser, WorldWideWeb, was
developed on the NEXTSTEP platform.
• The NeXTcube, running NeXTSTEP was the
world's first web server
• Some common web browser features and
keyboard shortcuts can be traced to being
native features of NeXTSTEP
• NeXTSTEP is the basis of Mac OS X
OS/2
• Collaborative creation between IBM and Microsoft
• First GUI version released in 1988
• Tabbed dialogs
• Ability to change interface appearance by
dragging and dropping icons, fonts, and
background colors almost anywhere on the
desktop
• Could run Windows 3.1 in a virtual machine
Windows
• Windows 3.x
– Popularized Windows
• Windows 95
– Start Menu, from which all programs could be
launched
– Task Bar where all running programs could be
switched between.
– First Windows to have icon-based file manager
• Windows 98
– Integrated Internet Explorer with Web like interface
Macintosh
• OS 7- Released May 1991
– Full Color
– Balloon Help
– Control Strip
– Icon color customization
• OS 8- Released July 1997
– Window blind effect
– Pulled folder tabs
World Wide Web

• Created by Tim Berners-Lee on the
NeXTSTEP platform
• First website went on-line in 1991
• Users interface by clicking Hyperlinks
• Influenced other GUIs
• Troublesome Abbreviation
Graphical
Room
Bulleted
Social
Released
Objects
Shell
byfor
are
Interface
Balloon
Microsoft
Programs
Windows
Help
with
March
Animated
1995
Guides
BeOS
• Released in 1995 for
BeBox Computer
• Released for PC in 1998
• Introduced “Taskbar
Grouping”
• Moveable Title bar
Mac OS X
• Based on NeXTSTEP
• Every window double-buffered in memory
• Minimized windows thumbnail into the dock
(first minimized windows in on Mac)
• Zooming “sheets”
• Tons of Eye-Candy