1. Characteristics of Graphical and Web User Interfaces
Lecture-2
Chapter 2, The Essential Guide to User Interface Design
Computer Systems Interface

2. Characteristics of GUI and Web interfaces
Interaction styles
Direct Manipulation
Characteristics of both
Web page vs. Web application design
General principles of UI design
Computer Systems Interface

3. Computer Systems Interface
Interaction styles
The method by which the user and a computer system communicate with one another
Command line
Menu selection
Form fill-in
Direct manipulation
Anthropomorphic
Computer Systems Interface

4. Computer Systems Interface
Command line
Computer Systems Interface

5. Computer Systems Interface
Menu selection
Computer Systems Interface

6. Computer Systems Interface
Form fill-in
Computer Systems Interface

7. Computer Systems Interface
Direct Manipulation
Computer Systems Interface

8. Computer Systems Interface
Anthropomorphic
Spoken natural language
Hand gestures
Computer Systems Interface

9. Anthropomorphic (cont.)
Facial expressions
Eye movements
What??! OK
Computer Systems Interface

10. Computer Systems Interface
Examples
Computer Systems Interface

11. Computer Systems Interface
Examples
Honda BMI
Computer Systems Interface

12. Advantages and Disadvantages of Interaction styles
See Table 2.1, p. 15
Computer Systems Interface

13. The concept of Direct Manipulation
In practice, is direct manipulation of all objects and actions feasible?
Indirect manipulation
Text for symbols
Typing for pointing
Ex: Pointing & selecting menu (direct); Menu – textual list of operations (indirect)
Computer Systems Interface

14. Graphical systems: Advantages
Symbols recognized faster than text
Faster learning and use
More natural
Fewer errors
More control
More attractive
Low typing requirements
Etc.
Computer Systems Interface

15. Graphical systems: disadvantages
Greater design complexity
Inconsistency in technique & terminology
Human comprehension limitations
Inefficient for touch typists
May consume more screen space
Hardware limitations
Etc.
Computer Systems Interface

16. Computer Systems Interface
GUI vs. Web Design
Devices
User focus
Data/information
User tasks
Presentation elements
Navigation
Context
security
Etc. (See table 2.2, p.31)
Computer Systems Interface

17. Computer Systems Interface
Intranet vs. Internet
Users
Tasks
Type of information
Amount of information
Hardware & software
Design philosophy
Extranet?
Computer Systems Interface

18. Web Page vs. Application Design
See p.40
Computer Systems Interface

19. Principles of User Interface Design
The design goals in creating a UI
Both GUI and Web interfaces
How to implement these goals
Computer Systems Interface

20. Principles of UI Design (cont.)
Accessibility
Aesthetically Pleasing
Availability
Clarity
Compatibility
Configurability
Consistency
Control
Directness
Computer Systems Interface

21. Principles of UI Design (cont.)
Efficiency
Familiarity
Flexibility
Forgiveness
Immersion
Obviousness
Operability
Perceptibility
Positive first impression
Computer Systems Interface

22. Principles of UI Design (cont.)
Predictability
Recovery
Responsiveness
Safety
Simplicity
Transparency
Trade-offs
Visibility
Computer Systems Interface

23. Computer Systems Interface
Q/A
What are the different types of interaction styles?
Which one gets more focus today?
Computer Systems Interface