Level > Next Level > …. >

1. Level > Next Level > …. > • Crumb Trail (Hansel & Grettel) • Bread Crumb Trail

2. Principles of Effective Visual Communication in Designing GUIs Based on Material of Aaron Marcus & Suzanne Martin http://www.cs.wpi.edu/~matt/courses/cs563/talks/smartin/int_design.html

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

4. Egyptian Hieroglyphics

5. Pictorial Phonetism an eye, a can, a sail, a round, and a globe.

6. If we but look at these figures, they have neither sense nor sequence. They are intelligible only when pronounced: "I can sail round the globe."

7. The use of typography, symbols, color, and other static and dynamic graphics are used to convey facts, concepts and emotions. • Successful visual communication through information-oriented, systematic graphic design relies on some key principles of graphic design.

8. Design Considerations • There are three factors that should be considered for the design of a successful user interface • Development factors • Usability factors • Acceptance factors.

9. Development Factors • Development factors help by improving visual communication. These include: • platform constraints, • tool kits and component libraries, • support for rapid prototyping, and • customizability.

10. Usability Factors • Usability factors take into account human factors and express a strong visual identity. These include: • human abilities, • product identity, • clear conceptual model, and • multiple representations.

11. Acceptance Factors • Acceptance factors are: • Installed base, • Corporate politics, • International markets.

12. User Interface Design Objectives • Conceptually distinct organization • Visually consistent presentation • Effective use of visible language

13. Visible Language • Visible language refers to all of the graphical techniques used to communicate the message or context.

14. Visible Language • Layout: • formats, proportions, and grids; 2-D and 3-D organization • Typography: • selection of typefaces and typesetting, including variable width and fixed width • Color and Texture: • color, texture and light that convey complex information and pictorial reality • Imagery: • signs, icons and symbols, from the photographically real to the abstract

15. Visible Language • Animation: • a dynamic or kinetic display; very important for video-related imagery • Sequencing: • the overall approach to visual storytelling • Sound: • abstract, vocal, concrete, or musical cues • Visual identity: • the additional, unique rules that lend overall consistency to a user interface. The overall decisions as to how the corporation or the product line expresses itself in visible language.

16. Principles of User Interface Design • There are three fundamental principles involved in the use of the visible language. • Organize: • provide the user with a clear and consistent conceptual structure • Economize: • do the most with the least amount of cues • Communicate: • match the presentation to the capabilities of the user.

17. Organize • Consistency, • screen layout, • relationships and • navigability are important concepts of organization.

18. Chaotic Screen

19. Ordered Screen

20. Organize > Consistency • There are three views of consistency: • Internal consistency • External consistency • Real-world consistency

21. Orginize > Consistency > Internal • Internal Consistency • Observe the same conventions and rules throughout the application • In general you should maximize the similarity of the major components of a user interface.

22. Orginize > Consistency > External • External consistency • The existing platforms and cultural conventions should be followed across user interfaces. Example: External Consistency for Text Tool Icons These icons come from different desktop publishingapplications but generally have the same meaning.

23. Orginize > Consistency > Real-World • Real-world consistency means conventions should be made consistent with real-world experiences, observations and perceptions of the user.

24. Organize > Screen Layout • Screen Layout • Three ways to design display spatial layout: use a • grid structure, • standardize the screen layout, and • group related elements.

25. Organize > Screen Layout • Relationships • Linking related items and disassociating unrelated items can help achieve visual organization.

26. Organize > Screen Layout > Relationships Example: Relationships Left: Shape, location, and value can all create strong visualrelationships which may be inappropriate.Right: Clear, consistent, appropriate, and strong relationships.

27. Organize > Navigability • Navigability • There are three important navigation techniques: - • provide an initial focus for the viewer's attention – • direct attention to important, secondary, or peripheral items – • assist in navigation throughout the material.

28. Economize • Four major points to be considered: • simplicity, • clarity, • distinctiveness, and • emphasis.

29. Economize > Simplicity • Simplicity includes only the elements that are most important for communication. • It should also be as unobtrusive as possible.

30. Economize > Clarity • Clarity • All components should be designed so their meaning is not ambiguous.

31. Economize • Distinctiveness • The important properties of the necessary elements should be distinguishable. • Emphasis • The most important elements should be easily perceived. Non-critical elements should be de-emphasized and clutter should be minimized so as not to hide critical information.

32. Communicate • The GUI must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully.