INTERFACE DESIGN INTERFACE DESIGN INTERFACE INTERFACE DESIGN INTERFACE

INTERFACE DESIGN

INTERFACE DESIGN INTERFACE

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

INTERFACE DESIGN USER INTERFACE

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

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)

INTERFACE DESIGN USER INTERFACE A 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 pedal OUTPUT: windshield view, speedometer, possibly engine sound & vibration too. . .

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-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 INTERACTION Human Computer Interaction Technical Cultural Psychological (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 Elements Graphical User Interface (GUI)

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

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

INTERFACE DESIGN COMMAND LINE INTERFACE >pwd >cd >ls VIDEO: Basic Linux Command Line. . . http: //www. youtube. com/watch? v=4 zmd 8 dclq. PU

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? v=Qs. Q 2 bl 2 Vt 7 Q ]

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. . . Easy. DOS demo [ http: //www. youtube. com/watch? v=i_3 x. V 0 f. B 8 yw ]

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=Ituymzx. NUYM ]

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=W 35 vps. PIwl. U (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=PLh. MVNdpl. Jc ] “. . . 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=r. Kg. U 6 ub. Bg. JA ]

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 3 D

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 Manipulation The Mouse Windows

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=USyo. T_Ha_b. A http: //www. youtube. com/watch? v=BKM 3 Cm. Rq. K 2 o http: //www. youtube. com/watch? v=495 n. Czx. M 9 PI

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 Ph. D thesis and he popularized icons as one of the chief designers of the Xerox Star.

INTERFACE DESIGN BASIC INTERACTIONS 1970 s - 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” (Mouse. Site http: //sloan. stanford. edu/mousesite/1968 Demo. html) VIDEO: http: //www. youtube. com/watch? v=X 4 kp 9 Ciy 1 n. E

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

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, Lisa. Write and then Mac. Write Spreadsheets Visi. Calc for Apple II

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/hcil/hcil 2000_24. mpg). Hyper. Card 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 CAD 1963 Video Games The first graphical video game was probably Space. War 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 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)

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)