1 / 23

Characteristics of Graphical and Web User Interfaces

Learn about graphical and web user interface characteristics, interaction styles, advantages, and disadvantages. Explore GUI vs. web design, intranet vs. internet usage, and principles of UI design.

heatherdavis
Télécharger la présentation

Characteristics of Graphical and Web User Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. 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. Command line Computer Systems Interface

  5. Menu selection Computer Systems Interface

  6. Form fill-in Computer Systems Interface

  7. Direct Manipulation Computer Systems Interface

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

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

  10. Examples Computer Systems Interface

  11. 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. 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. 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. Q/A • What are the different types of interaction styles? • Which one gets more focus today? Computer Systems Interface

More Related