1 / 40

GUI Design

GUI Design. Taken from “Lecture Notes For Tutorial, Graphics Design for Usable User Interfaces” Siggraph 97 By Aaron Marcus, John Armitage, Volker Frank, Andrew Thompson, and Pamela Tien. What it a user interface?. Metaphors: Basic images and concepts

engman
Download Presentation

GUI Design

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. GUI Design • Taken from “Lecture Notes For Tutorial, Graphics Design for Usable User Interfaces” • Siggraph 97 • By Aaron Marcus, John Armitage, Volker Frank, Andrew Thompson, and Pamela Tien.

  2. What it a user interface? • Metaphors: Basic images and concepts • Mental Model: Organization of data, functions, tasks, roles, people. • Navigation: Movement through mental model • Look: Appearance Characteristics • Feel: Interaction Sequencing

  3. What is Graphic Design? • Information-oriented graphic design is the systematic use of typography, symbols, color, and other static and dynamic graphics, in both two and three dimensions, to convey facts, concepts, and emotions.

  4. Graphical User Interfaces • Screens • Windows • Menus • Dialogue boxes and control panels • Icons and cursors • Forms, charts, maps, and diagrams

  5. Design Considerations for Successful User Interfaces • Development factors • Usability factors • Acceptance factors

  6. Development Factors • Platform constraints • Tool kits and component libraries • Support for rapid prototyping • Customizability

  7. Usability Factors • Human abilities • Clear mental model • Multiple representations • Documentation and training

  8. Acceptance Factors • Installed base • Product identity • International markets • Diversity

  9. User Interface Design Objectives • Conceptually distinct organization • Visually consistent presentation • Effective visible language

  10. Visible Language • Layout • Typography • Color and texture • Imagery: Signs, icons, and symbols • Animation • Sequencing • Sound • Visible Identity

  11. Three Principles • Organize • Provide the user with a simple, clear, and consistent conceptual structure. • Economize • Maximize the effectiveness of a minimal set of cues. • Communicate • Match the presentation to the capabilities of the user

  12. Organize • Consistency • Screen Layout • Relationships • Navigability

  13. Organize: Consistency • Chaotic Screen versus Ordered Screen • Internal consistency • External consistency • Real world consistency • Innovation

  14. Internal Consistency • Observe the same conventions and rules for all elements of the user interface.

  15. External Consistency • Following existing platform and application conventions across user interfaces.

  16. Real World Consistency • Make the conventions consistent with real-world experience. • (the “save file” icon story) STOP

  17. Innovation • Deviate from existing conventions only when doing so provides a clear benefit to the user.

  18. Screen Layout • Use a grid structure • Standardize the screen layout • Group the related elements

  19. Relationships • Link related elements • Separate unrelated elements

  20. Navigability • Provide an initial focus for viewers attention. • Direct attention to important peripheral items. • Assist in navigation throughout the material.

  21. Economize • “How many controls does a device need? The fewer controls, the easier it looks to use and the easier it is to find the relevant controls… To make something look easy, minimize the number of controls.” Don Norman

  22. Economize • Simplicity • Clarity • Distinctiveness • Emphasis

  23. Simplicity • Include only elements essential for communication • Be as unobtusive as possible

  24. Clarity • Design all components so their meaning is unambiguous.

  25. Distinctiveness • Distinguish important properties of essential elements

  26. Emphasis • Make the most important elements salient. • De-emphasize non-critical elements. • Minimize clutter so that critical information is not hidden.

  27. Communicate • “Communication…is…a social process, within a specified context, in which signs are produced and transmitted, perceived, and treated as messages from which meaning can be inferred.” Sol Worth

  28. Communicate • Legibility • Readability • Typography • Symbolism • Multiple views • Color and texture

  29. Legibility • Design individual characters, symbols, and graphic elements to be easily noticeable and distinguishable. • Illegible: Enter SSN: • Legible: Enter SSN:

  30. Readability • Design text and graphics to be easy to identify and interpret. • Design displays to be inviting and attractive.

  31. Typography • Typefaces • Use a small number of typefaces of suitable legibility, clarity, and distinctiveness to distinguish the different classes of information. • Typestyles • Within each typeface, select a set of enhanced letterforms, punctuation marks, and symbols. • Typesetting • Adjust character size, word spacing, paragraph indentation, and line spacing to enhance readability and to emphasize critical information.

  32. Symbolism • Use appropriate visual signs (symbols, icons, charts, maps, and diagrams) to clearly communicate the intended meaning. • Icons can have different meanings for different culturals.

  33. Multiple Views • Multiple forms of representation. • Multiple levels of abstraction. • Simultaneous alternative views. • Links and cross references. • Metadata, metatext, metagraphics.

  34. Color and Texture • Use appropriate highlighting and de-emphasis techniques to convey meaningful semantic distinctions.

  35. Color • “Color can be a powerful tool to improve the usefulness of an information display in a wide variety of areas if color is used properly. Conversely, the inappropriate use of color can seriously reduce the functionality of a display system.” Gerald Murch

  36. What is Color? • Hue • Wavelengths of light perceived as color • Value • Lightness or darkness of the color in a range from white to black • Chroma • Purity of the color in a range from dull to vivid. • (if time permits, a gimp demo)

  37. Mixtures • Additive • Subtractive • Optical (dithering)

  38. Advantages of Color • Emphasize important information • Identify subsystems or structures • Portray time and progress • Portray natural objects realistically • Reduce errors of interpretation • Add coding dimensions • Increase comprehensibility • Increase believability and appeal

  39. Disadvantages of Color • More expensive display hardware. • More expensive display software. • (both of these are getting better as time goes by) • Color-deficient viewers. • “the cookbook editing story” • Unintended associations • Visual discomfort and afterimages • Visual noise and confusion

  40. Conclusion • Organize • Economize • Communicate

More Related