240 likes | 311 Views
Characteristics of Graphical and Web User Interfaces. Lecture-2 Chapter 2, The Essential Guide to User Interface Design. Google Class code x5w0lxc. Characteristics of GUI and Web interfaces. Interaction styles Direct Manipulation Characteristics of both Web page vs. Web application design
E N D
Characteristics of Graphical and Web User Interfaces Lecture-2 Chapter 2, The Essential Guide to User Interface Design Computer Systems Interface
Google Class code x5w0lxc 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
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
Command line Computer Systems Interface
Menu selection Computer Systems Interface
Form fill-in Computer Systems Interface
Direct Manipulation Computer Systems Interface
Anthropomorphic • Spoken natural language • Hand gestures Computer Systems Interface
Anthropomorphic (cont.) • Facial expressions • Eye movements What??! OK Computer Systems Interface
Examples 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
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
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
Q/A • What are the different types of interaction styles? • Which one gets more focus today? Computer Systems Interface