2. History of GUI and CLI

Documents

Create your page on Scrapbox

sfc-id2020-(your CNS account)

Use this page for all purposs

HCI research == toy?

また、この研究分野は、一見役立たなさそうなおもちゃのようなものに、理屈をこねくり回して正当化させるのが多いように感じ(もちろんすべての研究がそうというわけではありません)、興ざめしてしまったのも要因の一つです。

Is this a toy? or a HCI research?

https://vimeo.com/320211661

https://gyazo.com/4bed0a8f8639af792a5e93ade3083a10

The history of human-computer interface

Phylogenetic tree

http://gyazo.com/a1063ca65e4f24d057832b8d81a6dc96.png

Cambrian explosion

542,000,000 years ago

Many "divisions" appeared in a short period

Arthropoda (節足動物), vertebrate (脊椎動物)

http://gyazo.com/2098757f3e17f02a03a9a20383cf3eb1.png

Cambrian exprosion

http://gyazo.com/ed28680d22f568488dd85ee8f3dec405.png

The "control panel" of an old computer

http://gyazo.com/cd47753dddd9659436b8a27c14328fe3.png

A cockpit of an airplane

http://gyazo.com/58eadfb59b0e235916897080ff92946d.png

My old 8008 computer

Built in 1976

http://Gyazo.com/078e8c514fec7baf6388b3bc6246423c.png

8008 microcomputer

http://Gyazo.com/08817cf560e0b559b67dd0f7e121ec3f.png

Paper tape reader

http://Gyazo.com/3e8612d7427e1e95b93d87c0c71ae5f1.png

Use a keyboard as a main input device

Use a computer with character devices

Tradition of CLI systems

"TSS" on mainframe machines

Time Sharing System

Share a single mainframe machine

"Minicomputers"

Unix "shell"

Basic on Apple II and other PCs

"Command prompt" on DOS

"Mini computer" by DEC

Digital Equipment Corporation

PDP11, VAX11

VMS OS

VAX11

1976 @ DEC

http://gyazo.com/d49ece19780d3f294aed99e98217bcd7.png

1 MIPS machine

Intel Core i7 = 150,000 Mips

Apple II

1977 @ Apple

The first personal computer with color bitmap display

http://gyazo.com/19acdfe09dfaf34b2015ec4c926936e8.png

Unix "shell"

Terminal.app on Mac

Demo: Unix terminal

Basic CLI process

REPL (Read-Eval-Print Loop)

code:cli

while true do

display prompt and wait for user input

e.g. C>

the user enters a command and types the return key

the computer receives the string and execute

end

Current date is calculated and sent back to the terminal

Current date is displayed

Contributions of Unix

C language

Full-duplex communication

Users don't have to wait for computers

Regular expressions

Redirections

Object-oriented input/output

All devices treated the same

Serial communication device

For 'dumb' terminals

Simple machine like a typewriter

Send characters hit by user

Show characters sent from computer

VT100 (DEC)

http://gyazo.com/ab7ab81befe7f5a4a3a9e2fef1207760.png

CLI-based programming

http://gyazo.com/28678b9ca87920163df678bfd3b0d4fc.png

"Screen editor"

c.f. "Line editor"

Emacs, Vi, ...

Current popular editors

Move cursor to anywhere by typing keys

No pointing device

Use "escape sequeences" of the terminal

Merits of CLI

Easy to develop

Users and computers work the same way

Interface to a mail server (SMTP)

http://gyazo.com/d6cd209af9431723e06d9f23aeeb670d.png

History of GUI

Alto (1973)

Developed at Xerox PARC (Palo Alto Research Center)

Xerox PARC

http://gyazo.com/b93fb40af13436b714e1ac3d8f26ba8a.png

N37.4020824,W122.1482261,Z16 Parc

Alto

1973 @ PARC

The first GUI workstation

Bitmap display

Mouse / Window / Menu

http://gyazo.com/96bf4fda6bf46b0f862f9d3c68905016.png

https://gyazo.com/ffe13676111e106b8c819b870cce4601.png

Rebuilding Alto hardware

https://www.youtube.com/watch?v=YupOC_6bfMI

https://gyazo.com/d6273198fc881b8b35b1db4b61a1d005

Xerox Star

Released in 1981

https://gyazo.com/79d6aa012b0c679da9a11b02cb3f659e.png

Ethernet

Not TCP/IP

JStar

Released in 1982

Could handle Japanese text

https://gyazo.com/966466ccdf1c07654c2c9574c8a0b459.png

Sketchpad

Created by Ivan Sutherland (1963)

https://www.youtube.com/watch?v=6orsmFndx_o

http://gyazo.com/800f0536f882fe5f769e636048b2eaaa.png

Andrew

https://gyazo.com/ec72bb024135e323c53818d6f5aca8c8

Developt at CMU in 1982

Tiling window

Origin of MIME

X Window System

Developed at MIT in 1984

X11 released in 1987

Window manager + window server

Still widely used

Masui's window system

Developed in 1985 @ Sharp corp.

Runs on Sharp workstations

Events are propagated from the root

Special script language for the window manager

Parallel toolkit

Lisa

1983 from Apple

First GUI computer from Apple

Steve Jobs made this after seeing Alto

http://gyazo.com/c0596d8b63d9b9b790d3bb953c5291a7.png

Macintosh

1984 @ Apple

Originally a project by Jef Raskin

Steve Jobs ousted Jef Raskin and took over Macintosh project

NeXT Computer

Founded by Steve Jobs in 1985

NeXT Cube (1988)

Origin of Mac OS X

http://gyazo.com/66d94e93c6a0d0153f171b88692e2445.png

Windows95

Released in 1995

GUI version of DOS

Merits of GUI

Direct manipulation

Contiinuous

Reversible

Concrete

Can't use this while driving a car

Continuity / Undo

When the user do something, the computer reacts immediately

The user can undo all operations

Not all devices behave like this

Switches

Starting an application

GUI widgets and evolution history

Menus

Scroll bars

Sliders

...

Evolution of GUI menus

Smalltalk menu on Alto

http://gyazo.com/b8fda3611776f5377eb47d707af57a6d.png

Menu on Lisa

http://gyazo.com/3ca39857447ef0c22e3decfbd4e568cb.png

Pie menu

http://gyazo.com/7402c898b7a61772e9d79ec976bc47c4.png

T-Cube

http://gyazo.com/eedbbd982f2000f08ebb30ac66425e89.png

Flick-based text input

http://gyazo.com/1691febad27439d3bf44232c54dcb1e8.png

Evolution of scroll bar

Scroll bar on Smalltalk

http://gyazo.com/98ad768b8492d0af7799086c78b22923.png

"Arrows" on the scroll bar

Shows scroll direction, etc.

Arrows on the scroll bar

http://gyazo.com/fe9c87ee5ec6277d288bb9f721ceff0b.png

Scrollbar on Lisa

Improved version

http://Gyazo.com/ddce4448cce61b764bcd460610e1ad61.png

Lisa screenshot

http://Gyazo.com/03d3fe5a2f2464b9b2448fb83c556ed3.png

Macintosh System 4.2 (Finder version 6)

http://Gyazo.com/371dadb8dfee860bef2a1ef88d3d5b83.png

NeXTStep

http://Gyazo.com/37a3e1d28c4268112b42e760de38f2af.png

Evolution of GUI

30+ years after the invention of menus and scrollbars

Slight gradual improvements

GUI and object-oriented programming

Make GUI widgets as objects

Windows

Menus

...

GUI toolkits

GUI libraries written in OO language

This is THE mainstream at this moment

Interface builder

Edit GUI objects interactively

http://Gyazo.com/26628fafb9d8cddd83ada076705b68fe.png

Cocoa

GUI libraries of Mac

Xcode: Integration of Interface builder and compilers

XCode

https://gyazo.com/e3d369b962d66cef97be83a8325ec0e0

Eclipse

http://gyazo.com/6a4ba95d8e00c59eae210573099702d3.png

Android Studio

https://gyazo.com/cac06a00d11be00f3eaa1c5e27b523f9

Disadvantages of GUI

Resorces reequired

Difficult to develop

Difficult to test

Difficult to generate graphics

Disadvantages of GUI

Parallel programming

Difficult to execute automatically

Difficult to set values

Extensions to GUI

3D GUI

Zooming GUI (ZUI)

3D GUI

Display many information

3D desktop is the future?

Fancy interface

Not really used at this moment

Problems of 3D GUI

Difficult to understand 3D space

Difficult to navigate

Zooming GUI (ZUI)

Handle infinite data

Many research on ZUI in the 90s

Not popular after 2000

Google Maps

https://i.gyazo.com/8e8750829e607243f9117e4526933aac.gif

Problems of ZUI

Lost very easily

Difficult to handle

Pad

Pioneer of ZUI

Inifinitely zoom 2D space

http://gyazo.com/ac6d1d466a3a68d8ddc62ac7849d6f05.png

Video: Pad

https://s3-ap-northeast-1.amazonaws.com/masui.org/8/e/8e9977379b84135c2a50440181883b9a.mp4

Pad++

Pad extention

Filtering / Overview+Detail / etc.

Toolkits available

Jazz, Piccolo

http://gyazo.com/32e11ad6ab6a556209c51a7951c3a1cf.png

Video: Pad++

https://www.youtube.com/watch?v=68lP1gRLmZw

PhotoMesa

http://gyazo.com/50a5642ea8660dda77f0c6e1a6b6d49a.png

Video: PhotoMesa

https://www.youtube.com/watch?v=aufaFlwQYYU

Evolution of computers

Evolution of computers and programs

No progress in these 30 years?

Cheaper / smaller / faster

Why don't we create completely new things?

Phylogenetic tree

http://gyazo.com/a1063ca65e4f24d057832b8d81a6dc96.png

Cambrian explosion

Many "divisions" appeared in a short time period

http://gyazo.com/2098757f3e17f02a03a9a20383cf3eb1.png

Cambrian explosion

http://gyazo.com/ed28680d22f568488dd85ee8f3dec405.png

Evolution of interface

After countless extinctions

http://gyazo.com/8f0b5028e45a9055e0b84220ab91ffc4.png

Lisa

1983 @ Apple

Fast GUI PC from Apple

http://gyazo.com/c0596d8b63d9b9b790d3bb953c5291a7.png

Summary

Big leap from CLI to GUI

Continuous / reversible

No big invention after that

Same GUI is used for smartphones and tablets

Less and less user operations

New "idioms" required