Imran Hussain University of Management and Technology (UMT)

1. Virtual University Human-Computer Interaction Lecture 38Behavior & Form – Part VII Imran Hussain University of Management and Technology (UMT)

2. In Last Lecture … • Difference between various terms and terminologies used in design process • Visual arts • Visual design • Interface and information design • Principles of visual interface design • Avoid visual noise and clutter • How to use contrast and layering to distinguish and organize elements within the interface

3. In Today’s Lecture … • Principles of visual interface design • Principles of information design • Use of text and color in visual interfaces • Consistency and standards

4. Provide visual structure and flow at each level of organization • an Interface may consist of several visual and behavioral elements • Grouping may be by • Position, alignment, color, texture, size, shape • There Must be a clear visual structure

5. Provide visual structure and flow at each level of organization • Important concepts … • Alignment, grids, and user’s logical path • Symmetry and balance • Spatial harmony and white space

6. Alignment, grids, and user’s logical path • Important points • Align labels • Align within a set of controls • Align across controls • Follow a regular grid structure

7. Alignment, grids, and user’s logical path

8. Alignment, grids, and user’s logical path

9. Alignment, grids, and user’s logical path

10. Alignment, grids, and user’s logical path

11. Simple is better Ambiguity and complexity do not create good design Alignment, grids, and user’s logical path

12. Vertical symmetry Alignment, grids, and user’s logical path

13. Layout must mirror the user’s logical path Alignment, grids, and user’s logical path • User’s move from • Top to bottom • Left to right

14. Alignment, grids, and user’s logical path

15. Symmetry organizes interfaces by providing visual balance 2 types of symmetry employed in user interfaces Vertical axial symmetry Symmetry along a line Diagonal axial symmetry Symmetry along a diagonal line (lower left to upper right – see screenshot) Symmetry and balance

16. Symmetry and balance

17. Spatial harmony and white space • Spatial harmony considers the interface as a whole • Certain proportions are more pleasing to eye • Harmony created by • White space • Proper dimensioning of functional regions • Get proportions right

18. Use cohesive, consistent, and contextually appropriate imagery • Icons and other illustrative elements can help user • Understanding of cultural issues • China: red • Turkey: thumbs up • US: octoganal symbol means stop • Visual elements should be part of a cohesive and globally applied visual language • Similar elements should share similar visual attributes (line weight, size, etc.) • Important concepts … • Function-oriented icons • Associating visual symbols to objects • Rendering icons and visual symbols • Visualizing behaviors

19. Function-oriented icons • Icons are designed to represent functions or operations performed on objects • Challenge is to represent an abstract concept in iconic, visual language • Best to rely on idioms rather than force a concrete representation • Guidelines for Function-oriented icons • Represent both the action and an object acted upon • Group related functions visually to provide context (spatially, color) • Keep icons simple, avoid excessive visual detail • Reuse elements where possible, so that users need to learn them only once

20. Associating visual symbols to objects • Creating unique visual symbols for objects leads to faster user recognition • Use symbol wherever objects are represented on screen • Visually differentiate objects that exhibit different behaviors • Buttons, sliders, checkboxes

21. Rendering icons and visual symbols • Avoid rendering icons in photographic detail • Icons should be simple and schematic • Minimizing colors and shades • size should be modest

22. Visualizing behaviors • Use visual elements to show user what the results will be

23. Visualizing behaviors

24. Integrate style and function comprehensively and purposefully • Designers must apply stylistic elements to interface from global perspective • Functional aspects of visual interface design should be in harmony with visual brand of a product

25. Form vs. function • Use of stylized visual elements must be controlled • Basic shape, visual behavior and visual affordance must not be affected • Entertainment and children’s software

26. Principles of visual information design • 2 important problems in information design (Tufte) • It is difficult to display multi-dimensional information (info with more than 2 variables) on a 2-D surface • The resolution of the display surface is often not high enough to display dense information (computers have low information density compared to paper)

27. Principles of visual information design • Important concepts … (Tufte) • Enforce visual comparisons • Show causality • Show multiple variables • Integrate text, graphics, and data in one display • Ensure the quality, relevance, and integrity of the content • Show things adjacently in space, not stacked in time • Don’t de-quantify quantifiable data

28. Enforce visual comparisons • Provide a means for user to compare related variables and trends • Comparison provides a context which makes information more valuable

29. Enforce visual comparisons

30. Show causality • Graphics clarify cause and effect • Modeless feedback should be provided to inform user of potential consequences of actions

31. Show multiple variables

32. Integrate text, graphics, and data in one display

33. Ensure the quality, relevance, and integrity of the content

34. Show things adjacently in space, not stacked in time • If you are showing changes over time, it’s much easier if changes are shown adjacently in space • Animation can be used, provided there are no technical constraints

35. Don’t de-quantify quantifiable data

36. Use of text and color in visual interfaces

37. Use of text • Humans processing • the form of text should be such that it has recognizable shape • Each world should be recognizable • WORDS TYPES IN ALL CAPITAL LETTERS ARE HARDER TO READ

38. Use of text Some guidelines

39. Use of text Arial Arial Arial Times New Roman

40. Use of text • Use min. number of words Login to the information system Login

41. Use of color • Color now found in most interactive devices • Color serves a real, useful purpose • Good visual interface design tool • Communicates as part of the visual language of interface • Color should integrate well into other elements • Color draws attention • Colors improves navigation and scanning speed • Color shows relationships

42. Misuse of color • Inadequate contrast • Inadequate attention to color impairment