The Importance of the User Interface Lecture-1 The Essential Guide to UI Design: Chapter 1 Computer Systems Interface

Computer Systems Interface What is UI? UI design is a subset of HCI Part of a computer & its software that people can see, hear, understand, etc. Two components: input & output IO devices? Computer Systems Interface

Is Good Design Important? UI is the most important part of any computer system! Over 50% of code devoted to UI Users’ productivity improved 25 to 40%. A company saved $20 000 ! Computer Systems Interface

What comprises good design? PEOPLE: How we see, understand, and think INFORMATION: Enhance human acceptance Ease eye & hand movements HARDWARE & SOFTWARE: Capabilities & limitations of HCI Computer Systems Interface

Computer Systems Interface The Goals of UI Design To make working with a computer EASY PRODUCTIVE ENJOYABLE Computer Systems Interface

Computer Systems Interface Examples Interface screen of Text Properties Text Editor University Application form (lab #1) Computer Systems Interface

Computer Systems Interface

Computer Systems Interface

Computer Systems Interface

Computer Systems Interface

Computer Systems Interface 14 steps Know Your User Understand the Business Function Understand the Principles of Good ID Develop System Menus Select the Proper Kinds of Windows Select the Proper Interaction Devices Choose the Proper Screen-Based Controls Computer Systems Interface

Computer Systems Interface 14 steps (cont.) 8) Write Clear Text 9) Provide Effective Feedback 10) Provide Effective Accessibility 11) Create Meaningful Graphics 12) Choose the Proper Colors 13) Organize Windows 14) Test Computer Systems Interface

Computer Systems Interface History of HCI Movements & gestures Spoken language Written language Typewriter Computers: QA, Menu selection, Form fill-in (Speech & handwriting recognition) Introduction of GUI Computer Systems Interface

Computer Systems Interface What is GUI? Pronounced “gooey” A graphical user interface (GUI) is a type of user interface which allows people to interact with electronic devices such as computers; hand-held devices such as MP3 Players, Portable Media Players or Gaming devices; household appliances and office equipment with images rather than text commands. (Wikipedia) Computer Systems Interface

Computer Systems Interface History of HCI (cont) The first GUI program? 1963, Ivan Sutherland, MIT. Sketchpad program. Lines, circles, and points could be drawn on a screen using a light pen. Computer Systems Interface

Computer Systems Interface History of HCI (cont) The revolutionary device in HCI? 1970s, Xerox’s Palo Alto Research Center, Altus & STAR systems. Mouse (pointing & selecting). Computer Systems Interface

Computer Systems Interface History of HCI (cont) 1974, Xerox. Today’s mouse. Computer Systems Interface

Computer Systems Interface History of HCI (cont) Apple or Microsoft? 1984, Apple. Macintosh 1985, Microsoft. Windows 1.0 1987, Apple. Macintosh II. The first color Macintosh. IBM. System Application Architecture and Presentation Manager. Graphics OS replacement for DOS. 1988, NeXT. NeXTStep, 3-d Screen simulation. UNIX-based GUIs. Computer Systems Interface

The Blossoming of the World Wide Web 1960s, Licklider, MIT. Proposed a global network of computers & moved to DARPA. 1969. ARPANET. 4 major universities. 1974, Bolt, Beranek, & Newman. Telnet. Commercial version of ARPANET. 1970s. TCP/IP. Common language of all Internet computers. 1982. “Internet” Computer Systems Interface

The Blossoming of the World Wide Web (cont.) 1991, Gopher, University of Minnesota. First really friendly interface. 1989, European Laboratory for Particle Physics. Hypertext protocol. HTML (Hypertext Markup language). 1991, Berners-Lee. World Wide Web. Computer Systems Interface

Computer Systems Interface Web vs. Internet Global information space in which people can read & write using computers connected to the Internet. The Web is a service that operates over the Internet, just as e-mail operates over the Internet (Wikipedia.org, 2006). Computer Systems Interface

A Brief History of Screen Design 1970s, IBM. 3270 cathode ray tube text-based terminal Computer Systems Interface

Computer Systems Interface 1970s screen Computer Systems Interface

A Brief History of Screen Design (cont.) 1970s screens Cryptic & unintelligible captions Always had to remember what to type Ambiguous messages Monochromatic, green text on black background Computer Systems Interface

Computer Systems Interface 1980s screen Computer Systems Interface

A Brief History of Screen Design (cont.) Grouping & alignment Clear captions Command list (+ function keys) Instructions had to be inscribed Computer Systems Interface

Computer Systems Interface 1990s and beyond Computer Systems Interface

A Brief History of Screen Design (cont.) 1990s and beyond Borders Buttons Menus Different font sizes, styles, colors, etc. List boxes, drop-down combination boxes, etc. Screens modified Computer Systems Interface

Computer Systems Interface Q/A Think about today’s interfaces. What new features are available? Computer Systems Interface

Characteristics of Graphical User Interface Sophisticated visual presentation Pick and Click interaction Restricted set of interface options Visualization Object orientation Use of Recognition memory Concurrent performance of functions Computer Systems Interface

Interaction versus Interface Recall: What is the difference between user interaction and the user interface? – Interaction is the dialog between user and computer • At the I/O threshold – Interface is the vehicle for dialog • Fully contained in the computer Computer Systems Interface

Interaction versus Interface Recall: What is the difference between user interaction and the user interface? – Interaction is the dialog between user and computer • At the I/O threshold – Interface is the vehicle for dialog • Fully contained in the computer Computer Systems Interface

Degree of Integration 3D 6D 1D 2D 2D 8

Degree of Compatibility Scrolling = medium Dialog = low Dragging = high 9

What is Direct Manipulation? By Definition: A direct manipulation interface allows a user to directly act on a set of objects (instruments) in the interface. • – The instruments are indistinguishable visually from the objects they represent. The actions on instrument/object entities are analogous to actions on similar objects in the real world. The actions on instrument/object entities preserve the conceptual linkage between instrument and object. – – 11

What is Direct Manipulation? By Example: • – dragging a document to the trash changing the size of a triangle by interacting with visual representation of a triangle inserting characters in a document by pointing to where they should go (with a mouse/cursor/insertion point) and then typing a – – “dialing” a phone number by pushing numbers on a keypad playing a song using controls like a physical tape deck or CD/DVD player –

What (is/is not) direct manipulation in interfaces? • Operation may be difficult to conceptualize graphical system Limited graphics capability Limited amount of space Difficult to remember all operations

GUI Advantages • Symbols recognized faster than text Problem solving Easier remembering More natural Fewer errors Increased feeling and control Attractive Response Low typing requirement •

GUI Disadvantages • Greater Design Complexity Lack of design guidelines Inefficient for touch typists Consumes more screen space Hardware limitations •