Presentation or Visual Design Gabriel Spitz 1 Lecture # 15
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
Why is Presentation important? Differentiating your UI from your competitor ’ s Gabriel Spitz 3
Why is Presentation important? Gabriel Spitz 4 usefulusable These aspects of the design are functionally very important, but when everything is equal
Why is Presentation important? Gabriel Spitz 5 usefulusable Adds an emotional dimension to the equation desirable
Role of Presentation Getting the user ’ s attention Creating a positive first impression Communicating a message Supporting an overall brand identity Gabriel Spitz 6
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
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
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
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
Proximity – Symmetry 11
Proximity - Asymmetry 12
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
Alignment 14
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
Repetition Principle 16
Repetition 17
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
Contrast 19
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
Design Principles in Action Proximity Alignment Repetition Contrast 21
Appearance The look and feel of a user interface Character (e.g. warm & friendly vs. serious & businesslike) Style (e.g. retro) Gabriel Spitz 22
Elements of Presentation Gabriel Spitz 23 text image color shape line layout
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
Elements of Presentation: Line Straight Jagged Curved Gabriel Spitz 25
Elements of Presentation: Line Gabriel Spitz 26
Elements of Presentation: Shapes Gabriel Spitz 27 Geometric Abstract Representational
Elements of Presentation: Image People Places Things Gabriel Spitz 28
Elements of Presentation: Text Serif San-Serif Script Italic Bold Underlined Gabriel Spitz 29
Elements of Presentation: Color Gabriel Spitz 30 Bright colors for entertainment purpose
Elements of presentation: Color Gabriel Spitz 31 Muted colors for enabling purposes