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

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

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

Computer Systems Interface Command line Computer Systems Interface

Computer Systems Interface Menu selection Computer Systems Interface

Computer Systems Interface Form fill-in Computer Systems Interface

Computer Systems Interface Direct Manipulation Computer Systems Interface

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

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

Computer Systems Interface Examples Computer Systems Interface

Computer Systems Interface Examples Honda BMI Computer Systems Interface

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

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

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

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

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

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

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

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

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

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

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

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