Assistant Professor Computer Science. Introduction to Human-Computer Interaction

Transcription

1 CMSC434 Introduction to Human-Computer Interaction Week 10 Lecture 20 Nov 7, 2013 IxD and Visual Design Human Computer Interaction Assistant Professor Computer Science

2 Today 1. Schedule 2. Visual Design: Layout 3. Visual Design: Gestalt Principles 4. Visual Design: Golden Ratio

3

4

5 [Lidwell, et al., Universal Principles of Design, 2010] Sound design is not only within the reach of a small set of uniquely talented individuals, but can be achieved by virtually all designers. The use wellestablished design principles increases the probability that a design will be successful.

6 [Lidwell, et al., Universal Principles of Design, 2010] Sound design is not only within the reach of a small set of uniquely talented individuals, but can be achieved by virtually all designers. The use of wellestablished design principles increases the probability that a design will be successful.

7 [Lidwell, et al., Universal Principles of Design, 2010] Sound design is not only within the reach of a small set of uniquely talented individuals, but can be achieved by virtually all designers. The use of wellestablished design principles increases the probability that a design will be successful.*

8 Sound design is not only within the reach of a small set of uniquely talented individuals, but can be achieved by virtually all designers. The use of wellestablished design principles increases the probability that a design will be successful.* [Lidwell, et al., Universal Principles of Design, 2010] * The best designers sometimes disregard the principles of design. When they do so, however, there is usually some compensating merit attained at the cost of the violation. Unless you are certain of doing as well, it is best to abide by the principles.

9 se of grids n design

10

11

12

13

14

15

16 A system without a principled layout appears disorganized and can be confusing.

17

18

19

20 Well designed grid systems can make your designs not only more beautiful and legible, but more usable. MarkBoulton, Designer Runs Mark Boulton Design Author: Designing Grid Systems for the Web

21

22 magazines

23

24 [Cullen, Layout Workbook, 2007; Tondreau, Layout Essentials, 2011]

25 Flowlines support vertical columns by dividing up the page into horizontal intervals. Column intervals (or gutter widths) are negative spaces that separate one column from the next. Margins define the active area of a page and direct the eye toward visual elements. [Cullen, Layout Workbook, 2007; Tondreau, Layout Essentials, 2011] Grid modules are spatial areas that support visual content. The module size may vary from one design to the next.

26

27

28

29

30

31

32

33 Which do you prefer?

34 Grids and Rule of Thirds A technique of composition in which a medium is divided into thirds, creating aesthetic positions for the primary elements of a design. Technique has a loyal following in design circles due to its use by Renaissance masters and its rough relationship to the golden ratio (0.667 ~ 0.618) [Lidwell, et al., Universal Principles of Design, 2010, p208]

35

36

37

38

39

40

41

42

43

44 estalt principles n design

45

46 Gestalt-Related Design Principles Figure / Ground Proximity Similarity Connectedness 5 Continuity Closure Common Fate Transparency

47 Gestalt-Related Design Principles Figure / Ground Proximity Similarity Connectedness 5 Continuity Closure Common Fate Transparency

48 Figure/Ground Elements are perceived as either figures (objects of focus) or ground (the rest of the perceptual field). A stable relationship exists when a form/figure stands clearly apart from its background. Reversible occurs when positive and negatively attract our attention equally. The figure and ground alternates. Ambiguous challenges the viewer to find a focal point. Figure is enmeshed in ground. [Lidwell, et al., Universal Principles of Design, 2010, p96;

49 Figure/Ground Elements are perceived as either figures (objects of focus) or ground (the rest of the perceptual field). A stable relationship exists when a form/figure stands clearly apart from its background. Reversible occurs when positive & negative elements attract our attention equally. The figure & ground alternates. Ambiguous challenges the viewer to find a focal point. Figure is enmeshed in ground. [Lidwell, et al., Universal Principles of Design, 2010, p96;

50 Figure/Ground Elements are perceived as either figures (objects of focus) or ground (the rest of the perceptual field). A stable relationship exists when a form/figure stands clearly apart from its background. Reversible occurs when positive & negative elements attract our attention equally. The figure & ground alternates. Ambiguous challenges the viewer to find a focal point. Figure is enmeshed in ground. [Lidwell, et al., Universal Principles of Design, 2010, p96;

51 Figure/Ground Elements are perceived as either figures (objects of focus) or ground (the rest of the perceptual field). Designers/artists often seek a balance between figure and ground, using this relationship to bring energy and order to form and space. They build contrasts between form and counterform in order to construct icons, logos, and compositions that stimulate the eye. Creating figure/ground tension or ambiguity can add visual energy to an image. [Lidwell, et al., Universal Principles of Design, 2010, p96;

52 Figure/Ground Confronted by a visual image, our perceptual system separates a dominant shape (a figure ) from a background [Example from

53 Figure/Ground Confronted by a visual image, our perceptual system separates a dominant shape (a figure ) from a background [Example from

54 Figure/Ground Confronted by a visual image, our perceptual system separates a dominant shape (a figure ) from a background [Example from

55

56

57

58

59

60 Gestalt-Related Design Principles Figure / Ground Proximity Similarity Connectedness 5 Continuity Closure Common Fate Transparency

61 Proximity Three Columns Square Group Three Rows [Lidwell, et al., Universal Principles of Design, 2010, p196]

62 Proximity Elements closer together are interpreted as being more related than elements that are far apart. Three Columns Square Group Three Rows [Lidwell, et al., Universal Principles of Design, 2010, p196]

63 Proximity Elements closer together are interpreted as being more related than elements that are far apart. [Lidwell, et al., Universal Principles of Design, 2010, p196;

64 Proximity Elements closer together are interpreted as being more related than elements that are far apart. [

65 Gestalt-Related Design Principles Figure / Ground Proximity Similarity Connectedness 5 Continuity Closure Common Fate Transparency

66 A complex visual display is interpreted as having different areas and types of information depending on the similarity of color, size, and shape of its elements; similar elements are interpreted as similar to each other. [Lidwell, et al., Universal Principles of Design, 2010, p226]

67 Similarity Elements that are similar are perceived to be more related than elements that are dissimilar. [Lidwell, et al., Universal Principles of Design, 2010, p226]

68 Similarity Elements that are similar are perceived to be more related than elements that are dissimilar. [Lidwell, et al., Universal Principles of Design, 2010, p226]

69 Similarity Elements that are similar are perceived to be more related than elements that are dissimilar. Similarity of color results in the strongest grouping effect Similarity of size is effective when the size of elements are clearly distinguishable from one another Similarity of shape is the weakest grouping strategy; it is best used in conjunction with other properties. [Lidwell, et al., Universal Principles of Design, 2010, p226]

70

71

72 What happens if you start mixing these principles together?

73 [

74 [

75 Usually only one principle more powerful than proximity

76 Gestalt-Related Design Principles Figure / Ground Proximity Similarity Connectedness 5 Continuity Closure Common Fate Transparency

77 Connectedness Elements that are connected by uniform visual properties are perceived to be more related than elements that are not connected [Lidwell, et al., Universal Principles of Design, 2010, p246; Han et al., Uniform Connected & Classical Gestalt Principles, Perception & Psychophysics 1999]

78 Connectedness Elements that are connected by uniform visual properties are perceived to be more related than elements that are not connected [Lidwell, et al., Universal Principles of Design, 2010, p246; Han et al., Uniform Connected & Classical Gestalt Principles, Perception & Psychophysics 1999]

79 Connectedness Two basic strategies for applying uniform connectedness in a design: connecting lines and common regions [Lidwell, et al., Universal Principles of Design, 2010, p246; Han et al., Uniform Connected & Classical Gestalt Principles, Perception & Psychophysics 1999]

80 Connectedness Even subtle outlining can override other principles [Lidwell, et al., Universal Principles of Design, 2010, p246; Han et al., Uniform Connected & Classical Gestalt Principles, Perception & Psychophysics 1999]

81 Connectedness Even subtle outlining can override other principles [Lidwell, et al., Universal Principles of Design, 2010, p246; Han et al., Uniform Connected & Classical Gestalt Principles, Perception & Psychophysics 1999]

82 Connectedness Uniform connectedness will generally overpower the other Gestalt principles. In a design that mixes visual properties, the elements that are uniformly connected will appear more related. [Lidwell, et al., Universal Principles of Design, 2010, p246; Han et al., Uniform Connected & Classical Gestalt Principles, Perception & Psychophysics 1999]

83 Connectedness Uniform connectedness will generally overpower the other Gestalt principles. In a design that mixes visual properties, the elements that are uniformly connected will appear more related. [Lidwell, et al., Universal Principles of Design, 2010, p246; Han et al., Uniform Connected & Classical Gestalt Principles, Perception & Psychophysics 1999]

84 Connectedness Uniform connectedness will generally overpower the other Gestalt principles. In a design that mixes visual properties, the elements that are uniformly connected will appear more related. [Lidwell, et al., Universal Principles of Design, 2010, p246; Han et al., Uniform Connected & Classical Gestalt Principles, Perception & Psychophysics 1999]

85 Connectedness Uniform connectedness will generally overpower the other Gestalt principles. In a design that mixes visual properties, the elements that are uniformly connected will appear more related. [Lidwell, et al., Universal Principles of Design, 2010, p246; Han et al., Uniform Connected & Classical Gestalt Principles, Perception & Psychophysics 1999]

86 Connectedness Uniform connectedness will generally overpower the other Gestalt principles. In a design that mixes visual properties, the elements that are uniformly connected will appear more related. [Lidwell, et al., Universal Principles of Design, 2010, p246; Han et al., Uniform Connected & Classical Gestalt Principles, Perception & Psychophysics 1999]

87 Connectedness [Lidwell, et al., Universal Principles of Design, 2010, p246; Han et al., Uniform Connected & Classical Gestalt Principles, Perception & Psychophysics 1999]

88

89 Gestalt-Related Design Principles Figure / Ground Proximity Similarity Connectedness 5 Continuity Closure Common Fate Transparency

90 Continuity/Good Continuation Elements arranged in a straight line or a smooth curve are perceived as a group, and are interpreted as being more related than elements not on the line or curve. [Lidwell, et al., Universal Principles of Design, 2010, p116;

91 The ability to accurately perceive objects depends largely on the perceptibility of the corners and shape curves that comprise the shape. When sections of a shape are hidden, continuation leads the eye to continue along visible segments. [Lidwell, et al., Universal Principles of Design, 2010, p226]

92 Continuity/Good Continuation Elements arranged in a straight line or a smooth curve are perceived as a group, and are interpreted as being more related than elements not on the line or curve. [Lidwell, et al., Universal Principles of Design, 2010, p116;

93 Continuity/Good Continuation Elements arranged in a straight line or a smooth curve are perceived as a group, and are interpreted as being more related than elements not on the line or curve. [Lidwell, et al., Universal Principles of Design, 2010, p116;

94 Continuity/Good Continuation Elements arranged in a straight line or a smooth curve are perceived as a group, and are interpreted as being more related than elements not on the line or curve. v X [Lidwell, et al., Universal Principles of Design, 2010, p116;

95 Continuity/Good Continuation Elements arranged in a straight line or a smooth curve are perceived as a group, and are interpreted as being more related than elements not on the line or curve. The first graph is easier to read than the second because the end points of its bars form a line that is more continuous. [Lidwell, et al., Universal Principles of Design, 2010, p116;

96 Gestalt-Related Design Principles Figure / Ground Proximity Similarity Connectedness 5 Continuity Closure Common Fate Transparency

97 Closure A tendency to perceive a set of individual elements as a single, recognizable pattern, rather than multiple individual elements. [Lidwell, et al., Universal Principles of Design, 2010, p44]

98 Gestalt-Related Design Principles Figure / Ground Proximity Similarity Connectedness 5 Continuity Closure Common Fate Transparency

99 Common Fate Elements that move in the same direction are perceived to be more related than elements that move in a different direction or are stationary. [Lidwell, et al., Universal Principles of Design, 2010, p50]

100 he olden ratio

101 Which rectangle do you like the best?

102

103

104 Golden Ratio

105 Golden Ratio [Lidwell, et al., Universal Principles of Design, 2010, p114;

106 Golden Ratio = = ϕ ϕ = The golden ratio is also known as the golden mean, the golden number, golden section, golden proportion, divine proportion, and sectio aurea [Lidwell, et al., Universal Principles of Design, 2010, p114;

107 Stradivari utilized the golden ratio in the construction of his violins [Lidwell, et al., Universal Principles of Design, 2010, p114;

108 Stradivari utilized the golden ratio in the construction of his violins [Lidwell, et al., Universal Principles of Design, 2010, p114;

109 [

110

111 Golden Rectangle Has side lengths with the golden ratio: ~1:1.618 [Lidwell, et al., Universal Principles of Design, 2010, p114;

112 Golden Rectangle Has side lengths with the golden ratio: ~1:1.618 [Lidwell, et al., Universal Principles of Design, 2010, p114;

113 Golden Rectangle Has side lengths with the golden ratio: ~1:1.618 A distinctive feature of the golden rectangle is that when the square section is removed, the remainder is another golden rectangle Square removal can be repeated infinitely, in which case the corners of the squares form the sequence of points in the golden spiral [Lidwell, et al., Universal Principles of Design, 2010, p114;

114

115

116

117 Golden Spiral A logarithmic spiral w/growth factor φ (the golden ratio). The golden spiral gets wider by a factor of φ for every ¼ turn. [

118 Fibonacci Spiral [

119 Fibonacci Spiral [

120

121

122

123

124

125

126

127

128 The web has gone a bit crazy; finding the golden ratio everywhere.

129

130

131

132 [

133

134

135 In-class activity!

136