INTERFACE DESIGN

1
INTERFACE DESIGN
2
INTERFACE DESIGN
INTERFACE
3
INTERFACE DESIGN
INTERFACE A boundary across which two independent
systems meet and act on or communicate with each
other. (webopedia definition)?
4
INTERFACE DESIGN
USER INTERFACE
5
INTERFACE DESIGN
USER INTERFACE The mechanism for people (the
users) to interact with a particular machine,
device, computer program etc.
6
INTERFACE DESIGN
USER INTERFACE A user interface needs A way for
users to manipulate a system (Input)? A way for
the system to produce the effects of the users'
manipulation (Output)?
7
INTERFACE DESIGN
USER INTERFACE A user needs to be able to control
the system and also assess the state of the
system.
8
INTERFACE DESIGN
USER INTERFACE ex. driving a car INPUT
steering wheel, gas pedal OUTPUT windshield
view, speedometer, possibly engine sound
vibration too...
9
INTERFACE DESIGN
INTERFACE VS INTERACTION HCI can refer
to Human-Computer Interface the technical
means by which a human interacts with hardware
or software. (aka the interface)? Human-Compute
r Interaction the study of the interaction
between people and computers. In order to design
good interfaces we need to know about
interaction.
10
INTERFACE DESIGN
INTERFACE VS INTERACTION Human Computer
Interaction Technical Cultural Psychological
(more on Human Computer Interaction in the weeks
to come...)?
11
INTERFACE DESIGN
TYPES OF INTERFACES Command Line Interface
(CLI)? Text User Interface (TUI)? Text-Based
with Graphic Elements Graphical User Interface
(GUI)?
12
INTERFACE DESIGN
TYPES OF INTERFACES Newer developments don't make
older concepts entirely obsolete... Depending
on where you are going you walk, bicycle, drive
a car, take a train
13
INTERFACE DESIGN
COMMAND LINE INTERFACE commands are typed and
executed command line interpreter may be a text
terminal, terminal emulator, or remote shell
client (like Putty) high learning
curve flexible, powerful and efficient when you
are fluent in it
14
INTERFACE DESIGN
COMMAND LINE INTERFACE gtpwd gtcd gtls VIDEO Basic
Linux Command Line... http//www.youtube.com/watch
?v4zmd8dclqPU
15
INTERFACE DESIGN
COMMAND LINE INTERFACE VIDEO Linux CD Ripping
and Encoding using command line interface...
demonstrates the complicated but powerful
interface http//www.youtube.com/watch?vQsQ2b
l2Vt7Q
16
INTERFACE DESIGN
TEXT USER INTERFACE (TUI)? text-based, user
navigates menus, either highlighting and
choosing or entering the number of the
selection. TUIs only use text and symbols
avail able on a typical text terminal ...use
the entire screen area and do not necessarily
provide line-by-line output. (Wikipedia)?
17
INTERFACE DESIGN
TEXT USER INTERFACE (TUI)? ex choosing options
by number... EasyDOS demo http//www.youtube.c
om/watch?vi_3xV0fB8yw
18
INTERFACE DESIGN
text-based mixed with GUI could be called a
graphical character-based user interface ex
Windows 1.04 (1986) - use up down arrow keys
to navigate text menus, then select choice, move
into something more like a GUI...
http//www.youtube.com/watch?vItuymzxNUYM
19
INTERFACE DESIGN
GRAPHICAL USER INTERFACE (GUI)? visual
indicators, icons, widgets (windows, buttons,
menus, and scroll bars) Usually uses direct
manipulation of the graphical elements. Ex.
drag drop Apple Lisa ad (c.
1984) http//www.youtube.com/watch?vW35vpsPIwlU
(231) (Note use of metaphors... just as I do
in my office...)?
20
INTERFACE DESIGN
HAPTIC (haptic relating to the sense of touch
tactile.)? In gaming... ...the simulated
automobile steering wheels that are programmed
to provide a "feel" of the road. As the user
makes a turn or accelerates, the steering wheel
responds by resisting turns or slipping out of
control. (wikipedia)?
21
INTERFACE DESIGN
newer developments Multi-Touch GUI with
gesture older touchscreens ATM, restaurant
cashier systems... VIDEO http//www.youtube.co
m/watch?vPLhMVNdplJc ...the interface just
disappears... ...there is no manual... ...ther
e is no interface... ...it does what you
expect... ...2 fingers... defining an axis of
tilt... ...how do you add control points?
22
INTERFACE DESIGN
newer developments Multi-Touch GUI with
gesture Microsoft Tabletop Technology demo
surfaces becoming smart VIDEO
http//www.youtube.com/watch?vrKgU6ubBgJA
23
INTERFACE DESIGN
MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY (based
on Myers, 1996)? .
24
INTERFACE DESIGN
MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Research
in Human-Computer Interaction (HCI) has
fundamentally changed computing. ex the
ubiquitous graphical interface used on desktop
computers... Microsoft Windows, is based on the
Macintosh, based on work at Xerox PARC, based on
early research at the Stanford and at the MIT.
25
INTERFACE DESIGN
MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Populari
ty of the World Wide Web is a direct result of
HCI research applying hypertext technology to
browsers... Interface improvements more than
anything else triggered the growth of the web.
(compare early text-based browsers to graphical
browsers) (Myers)?
26
INTERFACE DESIGN
MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Developm
ent of technologies for interaction styles like
direct manipulation mouse-pointing
gesture multiple windows
27
INTERFACE DESIGN
MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY ...incor
porated in several important kinds of application
areas, such as drawing text editing
spreadsheets multimedia 3D
28
INTERFACE DESIGN
MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY ...and
the technologies used to create interfaces such
as user interface management systems
toolkits interface builders standardization
of file formats and protocols - allows for copy
and paste between programs - web page can be
made readable by desktop browsers, mobile phone
web browsers and text-readers for the blind...
29
INTERFACE DESIGN
BASIC INTERACTIONS Direct Manipulation The
Mouse Windows
30
INTERFACE DESIGN
BASIC INTERACTIONS Direct Manipulation of
graphical objects visible objects on the
screen are directly manipulated with a pointing
device,
31
INTERFACE DESIGN
BASIC INTERACTIONS Direct Manipulation was
first demonstrated by Ivan Sutherland in
Sketchpad, (1963). Manipulation of objects
using a light-pen, including grabbing objects,
moving them, changing size, and using
constraints. (Related to dynamic enforcement of
geometry.) It contained the seeds of myriad
important interface ideas. (The system was
built at Lincoln Labs with support from the Air
Force and NSF.)
32
INTERFACE DESIGN
BASIC INTERACTIONS Direct Manipulation
Sketchpad, (1963). VIDEOS http//www.youtu
be.com/watch?vUSyoT_Ha_bA http//www.youtube.com/
watch?vBKM3CmRqK2o http//www.youtube.com/watch?v
495nCzxM9PI
33
INTERFACE DESIGN
BASIC INTERACTIONS (1966-67) William Newman's
Reaction Handler provided direct manipulation of
graphics...
34
INTERFACE DESIGN
BASIC INTERACTIONS (1968) AMBIT/G (MIT).
Employed, iconic representations, gesture
recognition, dynamic menus with items selected
using a pointing device, selection of icons by
pointing, and moded and mode-free styles of
interaction.
35
INTERFACE DESIGN
BASIC INTERACTIONS (1968) AMBIT/G (MIT).
Employed, iconic representations, gesture
recognition, dynamic menus with items selected
using a pointing device, selection of icons by
pointing, and moded and mode-free styles of
interaction.
36
INTERFACE DESIGN
BASIC INTERACTIONS (1975) David Canfield Smith
coined the term "icons" in his Stanford PhD
thesis and he popularized icons as one of the
chief designers of the Xerox Star.
37
INTERFACE DESIGN
BASIC INTERACTIONS 1970s - Many of the
interaction techniques used in direct
manipulation interfaces, (how objects and text
are selected, opened, and manipulated) were
researched at Xerox PARC in the 1970's. In
particular, the idea of "WYSIWYG" (what you see
is what you get).
38
INTERFACE DESIGN
BASIC INTERACTIONS The first commercial systems
to make extensive use of Direct Manipulation
were the Xerox Star (1981), the Apple Lisa
(1982) and Macintosh (1984).
39
INTERFACE DESIGN
BASIC INTERACTIONS The Mouse The mouse was
developed at Stanford in 1965 as part of the NLS
project - a cheap replacement for light-pens -
which had been in use at least since 1954. Many
current uses of the mouse were demonstrated by
Doug Engelbart (Stanford) in a demo in 1968

40
INTERFACE DESIGN
BASIC INTERACTIONS 1968 ...the public debut of
the computer mouse. But the mouse was only one
of many innovations demonstrated that day,
including hypertext, object addressing and
dynamic file linking, as well as shared-screen
collaboration involving two persons at different
sites communicating over a network with audio
and video interface (MouseSite
http//sloan.stanford.edu/mousesite/1968Demo.html)
? VIDEO http//www.youtube.com/watch?vX4kp9Ciy
1nE
41
INTERFACE DESIGN
BASIC INTERACTIONS Mouse first appeared
commercially with the Xerox Star (1981), Three
Rivers Computer Company's PERQ (1981), the Apple
Lisa (1982), and Apple Macintosh
(1984).
42
INTERFACE DESIGN
BASIC INTERACTIONS WINDOW Multiple tiled
windows (WOW!) demonstrated by Engelbart in
1968. Alan Kay proposed idea of overlapping
windows in 1969 - first appeared in 1974 in
his Smalltalk system . The main
commercial systems popularizing windows were
the Xerox Star (1981), the Apple Lisa
(1982), and most importantly the Apple
Macintosh (1984). The early versions of the
Star and Microsoft Windows were tiled, but
eventually they supported overlapping windows
like the Lisa and Macintosh. The X Window
System, a current international standard,
was developed at MIT in 1984.
43
INTERFACE DESIGN
Application Types Drawing Programs 1963
Sketchpad he first computer painting program was
probably Dick Shoup's "Superpaint" at PARC
(1974-75). Text Editing 1962 Engelbart proposed,
and later implemented, a word processor with
automatic word wrap, search and replace,
user-definable macros, scrolling text, and
commands to move, copy, and delete characters,
words, or blocks of text. The first commercial
WYSIWYG editors were the Star, LisaWrite and then
MacWrite Spreadsheets VisiCalc for Apple
II
44
INTERFACE DESIGN
Application Types Hypertext The idea for
hypertext (where documents are linked to related
documents) is credited to Vannevar Bush's 1945
text. Engelbart's NLS system 8 at the Stanford
Research Laboratories in 1965 made extensive use
of linking . The "NLS Journal" 10, p. 212 was
one of the first on-line journals, and it
included full linking of articles (1970). Ben
Shneiderman's Hyperties was the first system
where highlighted items in the text could be
clicked on to go to other pages (1983, VIDEO
www.ibiblio.org/openvideo/video/hcil/hcil2000_24.m
pg). HyperCard from Apple (1988) significantly
helped to bring the idea to a wide audience.
There have been many other hypertext systems
through the years. Tim Berners-Lee used the
hypertext idea to create the World Wide Web in
1990. Mosaic was the first popular hypertext
browser for the World-Wide Web.
45
INTERFACE DESIGN
Application Types CAD 1963 Video Games The
first graphical video game was probably SpaceWar
by Slug Russel of MIT in 1962 for the PDP-1
including the first computer joysticks. The
first popular commercial game was Pong (about
1976).
46
INTERFACE DESIGN
OTHER AREAS OF DEVELOPMENT Gesture
Recognition Multimedia 3-D Virtual Reality and
"Augmented Reality" The original work on VR was
performed by Ivan Sutherland at Harvard
(1965-1968). Research group at UNC did a lot of
early research, including the study of force
feedback (1971). (aka haptics)? Computer
Supported Cooperative Work Natural Language and
Speech UIMs and Toolkits (Software libraries and
tools that support creating interfaces by
writing code.)? Interface Builders (interactive
tools that allow interfaces composed of widgets
such as buttons, menus and scrollbars to be
placed using a mouse)?
47
INTERFACE DESIGN
CONCLUSIONS User interfaces are likely to be
one of the main value-added competitive
advantages of the future, as both hardware and
basic software become commodities. (Meyers
1996)? As computers get faster, more of the
processing power is being devoted to the user
interface. The interfaces of the future will
use gesture recognition, speech recognition and
generation, "intelligent agents," adaptive
interfaces, video, and many other technologies
now being investigated by research groups at
universities and corporate labs. (Meyers
1966)?