Characteristics of Graphical and Web User Interfaces Lecture2

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

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

Interaction styles n - 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 3

Command line Computer Systems Interface 4

Menu selection Computer Systems Interface 5

Form fill-in Computer Systems Interface 6

Direct Manipulation Computer Systems Interface 7

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

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

Examples Computer Systems Interface 10

Examples n Honda BMI Computer Systems Interface 11

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

The concept of Direct Manipulation n n - 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 13

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

Graphical systems: disadvantages n n n n 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 15

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

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

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

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

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

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

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

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