INTERFACE DESIGN INTERFACE DESIGN INTERFACE INTERFACE DESIGN INTERFACE
![INTERFACE DESIGN INTERFACE DESIGN](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-1.jpg)
![INTERFACE DESIGN INTERFACE INTERFACE DESIGN INTERFACE](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-2.jpg)
![INTERFACE DESIGN INTERFACE A boundary across which two independent systems meet and act on INTERFACE DESIGN INTERFACE A boundary across which two independent systems meet and act on](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-3.jpg)
![INTERFACE DESIGN USER INTERFACE INTERFACE DESIGN USER INTERFACE](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-4.jpg)
![INTERFACE DESIGN USER INTERFACE The mechanism for people (the users) to interact with a INTERFACE DESIGN USER INTERFACE The mechanism for people (the users) to interact with a](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-5.jpg)
![INTERFACE DESIGN USER INTERFACE A user interface needs: A way for users to manipulate INTERFACE DESIGN USER INTERFACE A user interface needs: A way for users to manipulate](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-6.jpg)
![INTERFACE DESIGN USER INTERFACE A user needs to be able to control the system INTERFACE DESIGN USER INTERFACE A user needs to be able to control the system](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-7.jpg)
![INTERFACE DESIGN USER INTERFACE ex. driving a car – INPUT: steering wheel, gas pedal INTERFACE DESIGN USER INTERFACE ex. driving a car – INPUT: steering wheel, gas pedal](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-8.jpg)
![INTERFACE DESIGN INTERFACE VS INTERACTION HCI can refer to: Human-Computer Interface the technical means INTERFACE DESIGN INTERFACE VS INTERACTION HCI can refer to: Human-Computer Interface the technical means](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-9.jpg)
![INTERFACE DESIGN INTERFACE VS INTERACTION Human Computer Interaction Technical Cultural Psychological (more on Human INTERFACE DESIGN INTERFACE VS INTERACTION Human Computer Interaction Technical Cultural Psychological (more on Human](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-10.jpg)
![INTERFACE DESIGN TYPES OF INTERFACES Command Line Interface (CLI) Text User Interface (TUI) Text-Based INTERFACE DESIGN TYPES OF INTERFACES Command Line Interface (CLI) Text User Interface (TUI) Text-Based](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-11.jpg)
![INTERFACE DESIGN TYPES OF INTERFACES Newer developments don't make older concepts entirely obsolete. . INTERFACE DESIGN TYPES OF INTERFACES Newer developments don't make older concepts entirely obsolete. .](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-12.jpg)
![INTERFACE DESIGN COMMAND LINE INTERFACE commands are typed and executed command line interpreter may INTERFACE DESIGN COMMAND LINE INTERFACE commands are typed and executed command line interpreter may](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-13.jpg)
![INTERFACE DESIGN COMMAND LINE INTERFACE >pwd >cd >ls VIDEO: Basic Linux Command Line. . INTERFACE DESIGN COMMAND LINE INTERFACE >pwd >cd >ls VIDEO: Basic Linux Command Line. .](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-14.jpg)
![INTERFACE DESIGN COMMAND LINE INTERFACE VIDEO: Linux CD Ripping and Encoding using command line INTERFACE DESIGN COMMAND LINE INTERFACE VIDEO: Linux CD Ripping and Encoding using command line](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-15.jpg)
![INTERFACE DESIGN TEXT USER INTERFACE (TUI) text-based, user navigates menus, either highlighting and choosing INTERFACE DESIGN TEXT USER INTERFACE (TUI) text-based, user navigates menus, either highlighting and choosing](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-16.jpg)
![INTERFACE DESIGN TEXT USER INTERFACE (TUI) ex: choosing options by number. . . Easy. INTERFACE DESIGN TEXT USER INTERFACE (TUI) ex: choosing options by number. . . Easy.](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-17.jpg)
![INTERFACE DESIGN text-based mixed with GUI could be called a graphical character-based user interface INTERFACE DESIGN text-based mixed with GUI could be called a graphical character-based user interface](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-18.jpg)
![INTERFACE DESIGN GRAPHICAL USER INTERFACE (GUI) visual indicators, icons, widgets (windows, buttons, menus, and INTERFACE DESIGN GRAPHICAL USER INTERFACE (GUI) visual indicators, icons, widgets (windows, buttons, menus, and](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-19.jpg)
![INTERFACE DESIGN HAPTIC (haptic = relating to the sense of touch; tactile. ) In INTERFACE DESIGN HAPTIC (haptic = relating to the sense of touch; tactile. ) In](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-20.jpg)
![INTERFACE DESIGN newer developments: Multi-Touch GUI with gesture older touchscreens: ATM, restaurant cashier systems. INTERFACE DESIGN newer developments: Multi-Touch GUI with gesture older touchscreens: ATM, restaurant cashier systems.](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-21.jpg)
![INTERFACE DESIGN newer developments: Multi-Touch GUI with gesture Microsoft Tabletop Technology demo surfaces becoming INTERFACE DESIGN newer developments: Multi-Touch GUI with gesture Microsoft Tabletop Technology demo surfaces becoming](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-22.jpg)
![INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY (based on Myers, 1996) . INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY (based on Myers, 1996) .](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-23.jpg)
![INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Research in Human-Computer Interaction (HCI) has fundamentally INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Research in Human-Computer Interaction (HCI) has fundamentally](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-24.jpg)
![INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Popularity of the World Wide Web is INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Popularity of the World Wide Web is](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-25.jpg)
![INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Development of technologies for interaction styles like: INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Development of technologies for interaction styles like:](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-26.jpg)
![INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY. . . incorporated in several important kinds INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY. . . incorporated in several important kinds](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-27.jpg)
![INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY. . . and the technologies used to INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY. . . and the technologies used to](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-28.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation The Mouse Windows INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation The Mouse Windows](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-29.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation of graphical objects: visible objects on the screen INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation of graphical objects: visible objects on the screen](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-30.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation was first demonstrated by Ivan Sutherland in Sketchpad, INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation was first demonstrated by Ivan Sutherland in Sketchpad,](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-31.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation Sketchpad, (1963). VIDEOS: http: //www. youtube. com/watch? v=USyo. INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation Sketchpad, (1963). VIDEOS: http: //www. youtube. com/watch? v=USyo.](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-32.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS (1966 -67) William Newman's Reaction Handler provided direct manipulation of INTERFACE DESIGN BASIC INTERACTIONS (1966 -67) William Newman's Reaction Handler provided direct manipulation of](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-33.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS (1968) AMBIT/G (MIT). Employed, iconic representations, gesture recognition, dynamic menus INTERFACE DESIGN BASIC INTERACTIONS (1968) AMBIT/G (MIT). Employed, iconic representations, gesture recognition, dynamic menus](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-34.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS (1968) AMBIT/G (MIT). Employed, iconic representations, gesture recognition, dynamic menus INTERFACE DESIGN BASIC INTERACTIONS (1968) AMBIT/G (MIT). Employed, iconic representations, gesture recognition, dynamic menus](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-35.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS (1975) David Canfield Smith coined the term "icons" in his INTERFACE DESIGN BASIC INTERACTIONS (1975) David Canfield Smith coined the term "icons" in his](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-36.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS 1970 s - Many of the interaction techniques used in INTERFACE DESIGN BASIC INTERACTIONS 1970 s - Many of the interaction techniques used in](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-37.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS The first commercial systems to make extensive use of Direct INTERFACE DESIGN BASIC INTERACTIONS The first commercial systems to make extensive use of Direct](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-38.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS The Mouse: The mouse was developed at Stanford in 1965 INTERFACE DESIGN BASIC INTERACTIONS The Mouse: The mouse was developed at Stanford in 1965](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-39.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS 1968 “. . . the public debut of the computer INTERFACE DESIGN BASIC INTERACTIONS 1968 “. . . the public debut of the computer](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-40.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS Mouse first appeared commercially with the Xerox Star (1981), Three INTERFACE DESIGN BASIC INTERACTIONS Mouse first appeared commercially with the Xerox Star (1981), Three](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-41.jpg)
![INTERFACE DESIGN BASIC INTERACTIONS – WINDOW Multiple tiled windows (WOW!) demonstrated by Engelbart in INTERFACE DESIGN BASIC INTERACTIONS – WINDOW Multiple tiled windows (WOW!) demonstrated by Engelbart in](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-42.jpg)
![INTERFACE DESIGN Application Types Drawing Programs 1963 Sketchpad he first computer painting program was INTERFACE DESIGN Application Types Drawing Programs 1963 Sketchpad he first computer painting program was](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-43.jpg)
![INTERFACE DESIGN Application Types Hypertext The idea for hypertext (where documents are linked to INTERFACE DESIGN Application Types Hypertext The idea for hypertext (where documents are linked to](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-44.jpg)
![INTERFACE DESIGN Application Types CAD 1963 Video Games The first graphical video game was INTERFACE DESIGN Application Types CAD 1963 Video Games The first graphical video game was](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-45.jpg)
![INTERFACE DESIGN OTHER AREAS OF DEVELOPMENT: Gesture Recognition Multimedia 3 -D Virtual Reality and INTERFACE DESIGN OTHER AREAS OF DEVELOPMENT: Gesture Recognition Multimedia 3 -D Virtual Reality and](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-46.jpg)
![INTERFACE DESIGN CONCLUSIONS “User interfaces are likely to be one of the main value-added INTERFACE DESIGN CONCLUSIONS “User interfaces are likely to be one of the main value-added](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-47.jpg)
- Slides: 47
![INTERFACE DESIGN INTERFACE DESIGN](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-1.jpg)
INTERFACE DESIGN
![INTERFACE DESIGN INTERFACE INTERFACE DESIGN INTERFACE](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-2.jpg)
INTERFACE DESIGN INTERFACE
![INTERFACE DESIGN INTERFACE A boundary across which two independent systems meet and act on INTERFACE DESIGN INTERFACE A boundary across which two independent systems meet and act on](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-3.jpg)
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](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-4.jpg)
INTERFACE DESIGN USER INTERFACE
![INTERFACE DESIGN USER INTERFACE The mechanism for people the users to interact with a INTERFACE DESIGN USER INTERFACE The mechanism for people (the users) to interact with a](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-5.jpg)
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 INTERFACE DESIGN USER INTERFACE A user interface needs: A way for users to manipulate](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-6.jpg)
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 INTERFACE DESIGN USER INTERFACE A user needs to be able to control the system](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-7.jpg)
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 INTERFACE DESIGN USER INTERFACE ex. driving a car – INPUT: steering wheel, gas pedal](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-8.jpg)
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 HumanComputer Interface the technical means INTERFACE DESIGN INTERFACE VS INTERACTION HCI can refer to: Human-Computer Interface the technical means](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-9.jpg)
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 INTERFACE DESIGN INTERFACE VS INTERACTION Human Computer Interaction Technical Cultural Psychological (more on Human](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-10.jpg)
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 TextBased INTERFACE DESIGN TYPES OF INTERFACES Command Line Interface (CLI) Text User Interface (TUI) Text-Based](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-11.jpg)
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 dont make older concepts entirely obsolete INTERFACE DESIGN TYPES OF INTERFACES Newer developments don't make older concepts entirely obsolete. .](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-12.jpg)
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 INTERFACE DESIGN COMMAND LINE INTERFACE commands are typed and executed command line interpreter may](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-13.jpg)
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 INTERFACE DESIGN COMMAND LINE INTERFACE >pwd >cd >ls VIDEO: Basic Linux Command Line. .](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-14.jpg)
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 DESIGN COMMAND LINE INTERFACE VIDEO: Linux CD Ripping and Encoding using command line](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-15.jpg)
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 textbased user navigates menus either highlighting and choosing INTERFACE DESIGN TEXT USER INTERFACE (TUI) text-based, user navigates menus, either highlighting and choosing](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-16.jpg)
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 INTERFACE DESIGN TEXT USER INTERFACE (TUI) ex: choosing options by number. . . Easy.](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-17.jpg)
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 textbased mixed with GUI could be called a graphical characterbased user interface INTERFACE DESIGN text-based mixed with GUI could be called a graphical character-based user interface](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-18.jpg)
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 INTERFACE DESIGN GRAPHICAL USER INTERFACE (GUI) visual indicators, icons, widgets (windows, buttons, menus, and](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-19.jpg)
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 INTERFACE DESIGN HAPTIC (haptic = relating to the sense of touch; tactile. ) In](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-20.jpg)
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 MultiTouch GUI with gesture older touchscreens ATM restaurant cashier systems INTERFACE DESIGN newer developments: Multi-Touch GUI with gesture older touchscreens: ATM, restaurant cashier systems.](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-21.jpg)
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 MultiTouch GUI with gesture Microsoft Tabletop Technology demo surfaces becoming INTERFACE DESIGN newer developments: Multi-Touch GUI with gesture Microsoft Tabletop Technology demo surfaces becoming](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-22.jpg)
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 (based on Myers, 1996) .](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-23.jpg)
INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY (based on Myers, 1996) .
![INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Research in HumanComputer Interaction HCI has fundamentally INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Research in Human-Computer Interaction (HCI) has fundamentally](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-24.jpg)
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 INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Popularity of the World Wide Web is](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-25.jpg)
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 INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY Development of technologies for interaction styles like:](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-26.jpg)
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 INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY. . . incorporated in several important kinds](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-27.jpg)
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 INTERFACE DESIGN MILESTONE DEVELOPMENTS IN HCI TECHNOLOGY. . . and the technologies used to](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-28.jpg)
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 The Mouse Windows](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-29.jpg)
INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation The Mouse Windows
![INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation of graphical objects visible objects on the screen INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation of graphical objects: visible objects on the screen](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-30.jpg)
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 INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation was first demonstrated by Ivan Sutherland in Sketchpad,](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-31.jpg)
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 comwatch vUSyo INTERFACE DESIGN BASIC INTERACTIONS Direct Manipulation Sketchpad, (1963). VIDEOS: http: //www. youtube. com/watch? v=USyo.](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-32.jpg)
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 Newmans Reaction Handler provided direct manipulation of INTERFACE DESIGN BASIC INTERACTIONS (1966 -67) William Newman's Reaction Handler provided direct manipulation of](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-33.jpg)
INTERFACE DESIGN BASIC INTERACTIONS (1966 -67) William Newman's Reaction Handler provided direct manipulation of graphics. . .
![INTERFACE DESIGN BASIC INTERACTIONS 1968 AMBITG MIT Employed iconic representations gesture recognition dynamic menus INTERFACE DESIGN BASIC INTERACTIONS (1968) AMBIT/G (MIT). Employed, iconic representations, gesture recognition, dynamic menus](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-34.jpg)
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 AMBITG MIT Employed iconic representations gesture recognition dynamic menus INTERFACE DESIGN BASIC INTERACTIONS (1968) AMBIT/G (MIT). Employed, iconic representations, gesture recognition, dynamic menus](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-35.jpg)
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 INTERFACE DESIGN BASIC INTERACTIONS (1975) David Canfield Smith coined the term "icons" in his](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-36.jpg)
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 INTERFACE DESIGN BASIC INTERACTIONS 1970 s - Many of the interaction techniques used in](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-37.jpg)
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 INTERFACE DESIGN BASIC INTERACTIONS The first commercial systems to make extensive use of Direct](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-38.jpg)
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 INTERFACE DESIGN BASIC INTERACTIONS The Mouse: The mouse was developed at Stanford in 1965](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-39.jpg)
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 INTERFACE DESIGN BASIC INTERACTIONS 1968 “. . . the public debut of the computer](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-40.jpg)
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 INTERFACE DESIGN BASIC INTERACTIONS Mouse first appeared commercially with the Xerox Star (1981), Three](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-41.jpg)
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 INTERFACE DESIGN BASIC INTERACTIONS – WINDOW Multiple tiled windows (WOW!) demonstrated by Engelbart in](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-42.jpg)
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 INTERFACE DESIGN Application Types Drawing Programs 1963 Sketchpad he first computer painting program was](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-43.jpg)
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 INTERFACE DESIGN Application Types Hypertext The idea for hypertext (where documents are linked to](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-44.jpg)
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 INTERFACE DESIGN Application Types CAD 1963 Video Games The first graphical video game was](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-45.jpg)
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 INTERFACE DESIGN OTHER AREAS OF DEVELOPMENT: Gesture Recognition Multimedia 3 -D Virtual Reality and](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-46.jpg)
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 valueadded INTERFACE DESIGN CONCLUSIONS “User interfaces are likely to be one of the main value-added](https://slidetodoc.com/presentation_image_h2/82e0c818d50bbf11081eb97b6196571f/image-47.jpg)
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)
User interface design in system analysis and design
System and form design example
Interface in interface java
User led through interaction via series of questions
Industrial interfaces
An interface
Interface structure design
Interface architecture diagram
Input design principles
User interface design cycle
User interface in software engineering
User interface analysis and design
Principles of user interface design
Designing web interfaces in hci
Uiecu
Designing interfaces and dialogues
Atm user interface
User interface structure
User interface design and evaluation
User interface software engineering
User interface design principles in software engineering
Hardware interface design
Python gui design
Hardware interface design
Visualization in user interface design
Recoverability in user interface design
Calendar interface design
Subsystem design
User interface design process in software engineering
Task centered user interface design
User interface design process in software engineering
Good interface design
Good interface design
Design pyramid for webapps
Labview user interface design examples
User interface design process in software engineering
Fitts law user interface design
Vcaa visual communication
A decorative design
Structural and decorative design examples
Between and within subjects
Split range
Within or between subjects
Within subject design vs between subject design
Matched pairs design diagram
What is matched pairs design
Elements of design in interior design ppt
Bad design examples