INTERFACE DESIGN. INTERFACE INTERFACE DESIGN INTERFACE A boundary across which two independent systems meet and act on or communicate with each other.

INTERFACE DESIGN

INTERFACE DESIGN

INTERFACE

INTERFACE DESIGN

INTERFACEA boundary across which two independent systems meet and act on or communicate with each other.

(webopedia definition)

INTERFACE DESIGN

USER INTERFACE

INTERFACE DESIGN

USER INTERFACEThe mechanism for people (the users) to interact with a particular machine, device, computer program etc.

INTERFACE DESIGN

USER INTERFACEA 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)

INTERFACE DESIGN

USER INTERFACEA user needs to be able to control the system and also assess the state of the system.

INTERFACE DESIGN

USER INTERFACE

ex. driving a car – INPUT: steering wheel, gas pedalOUTPUT: windshield view, speedometer, possibly engine sound & vibration too...

INTERFACE DESIGN

INTERFACE VS INTERACTIONHCI can refer to:

Human-Computer Interface the technical means by which a human interacts with hardware or software. (aka “the interface”)

Human-Computer Interaction the study of the interaction between people and computers.

In order to design good interfaces we need to know about interaction.

INTERFACE DESIGN

INTERFACE VS INTERACTIONHuman Computer Interaction

TechnicalCulturalPsychological

(more on Human Computer Interaction in the weeks to come...)

INTERFACE DESIGN

TYPES OF INTERFACES

Command Line Interface (CLI)Text User Interface (TUI)Text-Based with Graphic ElementsGraphical User Interface (GUI)

INTERFACE DESIGN

TYPES OF INTERFACESNewer developments don't make older concepts entirely obsolete...

Depending on where you are going you walk, bicycle, drive a car, take a train

INTERFACE DESIGN

COMMAND LINE INTERFACEcommands 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

INTERFACE DESIGN

COMMAND LINE INTERFACE>pwd>cd>ls

VIDEO: Basic Linux Command Line...http://www.youtube.com/watch?v=4zmd8dclqPU

INTERFACE DESIGN

COMMAND LINE INTERFACEVIDEO: Linux CD Ripping and Encoding using command line interface... demonstrates the complicated but powerful interface

[ http://www.youtube.com/watch?v=QsQ2bl2Vt7Q ]

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)

INTERFACE DESIGN

TEXT USER INTERFACE (TUI)ex: choosing options by number...

EasyDOS demo[ http://www.youtube.com/watch?v=i_3xV0fB8yw ]

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?v=ItuymzxNUYM ]

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?v=W35vpsPIwlU (2:31) (Note use of metaphors... “just as I do in my office...”)

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)

INTERFACE DESIGN

newer developments: Multi-Touch GUI with gesture

older touchscreens: ATM, restaurant cashier systems...

VIDEO:[ http://www.youtube.com/watch?v=PLhMVNdplJc ]“...the interface just disappears...”“...there is no manual...”“...there is no interface... ...it does what you expect...”...2 fingers... defining an axis of tilt......how do you add control points?

INTERFACE DESIGN

newer developments: Multi-Touch GUI with gesture

Microsoft Tabletop Technology demo surfaces becoming “smart”

VIDEO:[ http://www.youtube.com/watch?v=rKgU6ubBgJA ]

INTERFACE DESIGN

MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY(based on Myers, 1996)

.

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.

INTERFACE DESIGN

MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY

Popularity 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)

INTERFACE DESIGN

MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY

Development of technologies for interaction styles like:

direct manipulation mouse-pointing gesture multiple windows

INTERFACE DESIGN

MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY

...incorporated in several important kinds of application areas, such as:

drawing text editing spreadsheets multimedia 3D

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...

INTERFACE DESIGN

BASIC INTERACTIONS

Direct ManipulationThe MouseWindows

INTERFACE DESIGN

BASIC INTERACTIONS

Direct Manipulation of graphical objects:

visible objects on the screen are directly manipulated with a pointing device,

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.)

INTERFACE DESIGN

BASIC INTERACTIONS

Direct Manipulation

Sketchpad, (1963). VIDEOS:

http://www.youtube.com/watch?v=USyoT_Ha_bAhttp://www.youtube.com/watch?v=BKM3CmRqK2ohttp://www.youtube.com/watch?v=495nCzxM9PI

INTERFACE DESIGN

BASIC INTERACTIONS

(1966-67) William Newman's Reaction Handler provided direct manipulation of graphics...

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.

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.

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.

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).

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).

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

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?v=X4kp9Ciy1nE

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).

INTERFACE DESIGN

BASIC INTERACTIONS – WINDOWMultiple 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.

INTERFACE DESIGN

Application Types

Drawing Programs1963 Sketchpad he first computer painting program was probably Dick Shoup's "Superpaint" at PARC (1974-75).

Text Editing1962 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

SpreadsheetsVisiCalc for Apple II

INTERFACE DESIGN

Application Types

HypertextThe 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.mpg). 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.

INTERFACE DESIGN

Application Types

CAD1963

Video GamesThe 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).

INTERFACE DESIGN

OTHER AREAS OF DEVELOPMENT:Gesture RecognitionMultimedia3-DVirtual 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 WorkNatural Language and SpeechUIMs 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)

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)