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

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

3. 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 $ !
Computer Systems Interface

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

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

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

7. Computer Systems Interface

8. Computer Systems Interface

9. Computer Systems Interface

10. Computer Systems Interface

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

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

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

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

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

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

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

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

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

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

21. 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 operates over the Internet (Wikipedia.org, 2006).
Computer Systems Interface

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

23. Computer Systems Interface
1970s screen
Computer Systems Interface

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

25. Computer Systems Interface
1980s screen
Computer Systems Interface

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

27. Computer Systems Interface
1990s and beyond
Computer Systems Interface

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

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

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

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

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

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

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

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

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

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

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

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