1. Presentation or Visual Design Gabriel Spitz 1 Lecture # 15

2. Presentation  The physical characteristics and organization of controls and information on the UI  It elicits an initial and global response to the site or application – it sets the stage for attitude formation  It communicates to the user what functions and information are available, where they are located and their usage sequence Gabriel Spitz 2

3. Why is Presentation important? Differentiating your UI from your competitor ’ s Gabriel Spitz 3

4. Why is Presentation important? Gabriel Spitz 4 usefulusable These aspects of the design are functionally very important, but when everything is equal

5. Why is Presentation important? Gabriel Spitz 5 usefulusable Adds an emotional dimension to the equation desirable

6. Role of Presentation  Getting the user ’ s attention  Creating a positive first impression  Communicating a message  Supporting an overall brand identity Gabriel Spitz 6

7. Important aspects of presentation  Two important aspects of presentation include:  Layout or spatial organization of functionality and information  Appearance of windows, pages and dialog boxes Gabriel Spitz 7

8. Principles of Layout P roximity, A lignment, R epetition & C ontrast  Creates positive and negative spaces  Gives a sense of scale and dimension  Show importance through hierarchy Robin William (1994) 8

9. Proximity  Use proximity to group related items and separate them from other items  Helps users locate items faster by enabling them to ignore groups of items  Clumped items feel like one unit rather than several  Items relating to each other are grouped together 9

10. Proximity Principle  Visual elements in the info space should be distributed purposefully  To communicates strength and stability e.g., for a traditional and conservative look use Symmetry - elements are centered, and have equal weight on either side..  To communicates variety, movement, and surprise – e.g., for entertainment related applications use Asymmetry - elements are off-centered, and have un-equal weight. 10

11. Proximity – Symmetry 11

12. Proximity - Asymmetry 12

13. Alignment Principle  Items should not be placed on a page arbitrarily  Items on a page or dialog box should have some visual relationship with each other  One way of creating a relationship is using alignment. When items are aligned they create a strong cohesive unit 13

14. Alignment 14

15. Repetition Principle  Elements should appear visually similar and be placed consistently throughout the screen/application  Helps communicate the organization of the application  Repetition of some elements throughout the application makes the application appear cohesive 15

16. Repetition Principle 16

17. Repetition 17

18. Contrast Principle  Contrast communicates importance  Use contrast to focus user’s attention  Creates a focal point through:  Change in color (hue, value, or intensity)  Change in scale 18

19. Contrast 19

20. Contrast Principle  Contrast or differentiation is one of the most important visual attractions  Avoid elements on a page that are merely similar  If elements are not the same e.g., color, shape, size, then make them very different 20

21. Design Principles in Action  Proximity  Alignment  Repetition  Contrast 21

22. Appearance  The look and feel of a user interface  Character (e.g. warm & friendly vs. serious & businesslike)  Style (e.g. retro) Gabriel Spitz 22

23. Elements of Presentation Gabriel Spitz 23 text image color shape line layout

24. Elements of Presentation Line, Shape, Image, Text, & Color  Create a mood  Suggest an emotion  Directs attention  This is the focus of interaction design Gabriel Spitz 24

25. Elements of Presentation: Line  Straight  Jagged  Curved Gabriel Spitz 25

26. Elements of Presentation: Line Gabriel Spitz 26

27. Elements of Presentation: Shapes Gabriel Spitz 27 Geometric Abstract Representational

28. Elements of Presentation: Image  People  Places  Things Gabriel Spitz 28

29. Elements of Presentation: Text  Serif  San-Serif  Script  Italic  Bold  Underlined Gabriel Spitz 29

30. Elements of Presentation: Color Gabriel Spitz 30  Bright colors for entertainment purpose

31. Elements of presentation: Color Gabriel Spitz 31  Muted colors for enabling purposes