The Invisible Side of Design

Vitaly Friedman

October 11, 2011

Tweet Share

Transcript

1. The Invisible Side of Design Vitaly Friedman, @smashingmag Tuesday, October

   11, 11

2. Dear Web designers, something fishy is going on. Tuesday, October

   11, 11

3. Inspiration. Tuesday, October 11, 11

4. Tuesday, October 11, 11

5. in-spi-ra-tion noun, \ˌin(t)-spə-ˈrā-shən\ “A divine influence or action on a

   person believed to qualify him or her to receive and communicate sacred revelation.” Tuesday, October 11, 11

6. The inspiration that we seek online is of a different

   nature. Tuesday, October 11, 11

7. We spend too much time exploring what other designers do.

   Tuesday, October 11, 11

8. We collect reusable design examples. Tuesday, October 11, 11

9. We aspire to design trends. Tuesday, October 11, 11

10. We are drowning in an ocean of visual inspiration. Tuesday,

    October 11, 11

11. Our workflow is poisoned with search for existing solutions. Tuesday,

    October 11, 11

12. Tuesday, October 11, 11

13. http://www.ruhotenuf.ca/ Tuesday, October 11, 11

14. http://www.ruhotenuf.ca/ Tuesday, October 11, 11

15. http://www.ruhotenuf.ca/ Tuesday, October 11, 11

16. Tuesday, October 11, 11

17. http://www.ruhotenuf.ca/ Tuesday, October 11, 11

18. Such “inspired” designs are often generic or stuck in the

    ”trends trap”. Tuesday, October 11, 11

19. We should strive for holistic designs. Tuesday, October 11, 11

20. Tuesday, October 11, 11

21. Tuesday, October 11, 11

22. Tuesday, October 11, 11

23. Tuesday, October 11, 11

24. When we look at a design, we don’t see a

    design, we are experiencing it. Tuesday, October 11, 11

25. We can’t see a design, we are experiencing it. We

    are just passive observers and there isn’t much we can do about it because we laack context. It’s just solution to someone else’s problem Tuesday, October 11, 11

26. Tuesday, October 11, 11

27. It doesn’t explain design decisions. problems. requirements. constraints. testing. context.

    Tuesday, October 11, 11

28. Every time we look at a design, we are reading

    the language of design expressed differently. We might understand the vocabulary of single words, but we don't understand the meaning of sentences. — an unknown designer “ Tuesday, October 11, 11

29. What we miss is the invisible side of those designs.

    Tuesday, October 11, 11

30. 1Good Design Is Invisible Tuesday, October 11, 11

31. As designers, we tend to get distracted by aesthetics of

    our creations, and often do not pay enough attention to the other, invisible side of our work. This talk discusses the significance of purpose, substance as well as context in our design decisions. It argues about the value of storytelling, content strategy and thorough editorial work. It also provides practical examples of and insights into the invisible side of design. To recognize invisible design and understand how to create it, we have to look differently at the world around us. We have to open our mind to the idea that design is not only what we see, but also (and most importantly) what we don't see. Design is a constant in this life of ours. It surrounds us and touches us daily. It exists everywhere and it supports and guides us. The stage you are looking at right now has been designed based on certain criteria and aesthetics. You might have looked at colors and placement of things. Things you might not have considered as closely are the size of this stage, the position of the microphone, the lighting and the color of my shirt. Both of these are important parts of your user experience and the design of the stage. Tuesday, October 11, 11

32. As designers, we tend to get distracted by aesthetics of

    our creations, and often do not pay enough attention to the other, invisible side of our work. This talk discusses the significance of purpose, substance as well as context in our design decisions. It argues about the value of storytelling, content strategy and thorough editorial work. It also provides practical examples of and insights into the invisible side of design. To recognize invisible design and understand how to create it, we have to look differently at the world around us. We have to open our mind to the idea that design is not only what we see, but also (and most importantly) what we don't see. Design is a constant in this life of ours. It surrounds us and touches us daily. It exists everywhere and it supports and guides us. The stage you are looking at right now has been designed based on certain criteria and aesthetics. You might have looked at colors and placement of things. Things you might not have considered as closely are the size of this stage, the position of the microphone, the lighting and the color of my shirt. Both of these are important parts of your user experience and the design of the stage. Tuesday, October 11, 11

33. As designers, we tend to get distracted by aesthetics of

    our creations, and often do not pay enough attention to the other, invisible side of our work. This talk discusses the significance of purpose, substance as well as context in our design decisions. It argues about the value of storytelling, content strategy and thorough editorial work. It also provides practical examples of and insights into the invisible side of design. To recognize invisible design and understand how to create it, we have to look differently at the world around us. We have to open our mind to the idea that design is not only what we see, but also (and most importantly) what we don't see. Design is a constant in this life of ours. It surrounds us and touches us daily. It exists everywhere and it supports and guides us. The stage you are looking at right now has been designed based on certain criteria and aesthetics. You might have looked at colors and placement of things. Things you might not have considered as closely are the size of this stage, the position of the microphone, the lighting and the color of my shirt. Both of these are important parts of your user experience and the design of the stage. Tuesday, October 11, 11

34. As designers, we tend to get distracted by aesthetics of

    our creations, and often do not pay enough attention to the other, invisible side of our work. This talk discusses the significance of purpose, substance as well as context in our design decisions. It argues about the value of storytelling, content strategy and thorough editorial work. It also provides practical examples of and insights into the invisible side of design. To recognize invisible design and understand how to create it, we have to look differently at the world around us. We have to open our mind to the idea that design is not only what we see, but also (and most importantly) what we don't see. Design is a constant in this life of ours. It surrounds us and touches us daily. It exists everywhere and it supports and guides us. The stage you are looking at right now has been designed based on certain criteria and aesthetics. You might have looked at colors and placement of things. Things you might not have considered as closely are the size of this stage, the position of the microphone, the lighting and the color of my shirt. Both of these are important parts of your user experience and the design of the stage. Tuesday, October 11, 11

35. As designers, we tend to get distracted by aesthetics of

    our creations, and often do not pay enough attention to the other, invisible side of our work. This talk discusses the significance of purpose, substance as well as context in our design decisions. It argues about the value of storytelling, content strategy and thorough editorial work. It also provides practical examples of and insights into the invisible side of design. To recognize invisible design and understand how to create it, we have to look differently at the world around us. We have to open our mind to the idea that design is not only what we see, but also (and most importantly) what we don't see. Design is a constant in this life of ours. It surrounds us and touches us daily. It exists everywhere and it supports and guides us. The stage you are looking at right now has been designed based on certain criteria and aesthetics. You might have looked at colors and placement of things. Things you might not have considered as closely are the size of this stage, the position of the microphone, the lighting and the color of my shirt. Both of these are important parts of your user experience and the design of the stage. Tuesday, October 11, 11

36. Everything was designed at some point. Tuesday, October 11, 11

37. Some things are so well designed that we don’t notice

    them anymore. Tuesday, October 11, 11

38. Tuesday, October 11, 11

39. Our experience of them is invisible; almost beyond form and

    function. Tuesday, October 11, 11

40. ...unless they break. Tuesday, October 11, 11

41. The same holds true for Web design. Tuesday, October 11,

    11

42. Users stop noticing Web design if it works. Tuesday, October

    11, 11

43. Users keep noticing design if it’s broken. Tuesday, October 11,

    11

44. ...or when it gets in the way. Tuesday, October 11,

    11

45. ...or when it just hurts. Tuesday, October 11, 11

46. Good design strikes a balance between elegance and invisibility. Tuesday,

    October 11, 11

47. Invisible design relates to function and purpose, rather than appearance.

    Tuesday, October 11, 11

48. Yet compared to visible design, the invisible layer is barely

    explored. Tuesday, October 11, 11

49. 2 Elements Of Invisible Design Tuesday, October 11, 11

50. Invisible design forces us to approach design problems from a

    different angle. Tuesday, October 11, 11

51. It makes us think about the substance of our decisions.

    Tuesday, October 11, 11

52. http://www.ruhotenuf.ca/ Parallax / Nike Better World as the first example

    and many copycats. I actually asked one of the designers why he used it - and he replied because it’s trendy and cool. One of the most beautiful examples I’ve seen in a while, but t doesn’t mean that it performs better than a classic list of links. In fact, we know literally nothing about its usability. We can discuss the atmosphere the design creates, design of body copy, slider, placement of the search box, but the truth is that we have no idea about the core of this design: reasons for every single design element. Tuesday, October 11, 11

53. Substance combines six key qualities of invisible design. the power

    of Virtue the power of Idea the power of Language the power of Utility the power of Measurement the power of Ambition Tuesday, October 11, 11

54. Invisible design is driven by a timeless idea. The power

    of Idea It’s original, tailored to the client’s needs. Tuesday, October 11, 11

55. Tuesday, October 11, 11

56. Tuesday, October 11, 11

57. Invisible design always has a value, a purpose, a meaning

    — a character. The power of Virtue It has a consistent, authentic voice. Tuesday, October 11, 11

58. http://www.ruhotenuf.ca/ Parallax / Nike Better World as the first example

    and many copycats. I actually asked one of the designers why he used it - and he replied because it’s trendy and cool. One of the most beautiful examples I’ve seen in a while, but t doesn’t mean that it performs better than a classic list of links. In fact, we know literally nothing about its usability. We can discuss the atmosphere the design creates, design of body copy, slider, placement of the search box, but the truth is that we have no idea about the core of this design: reasons for every single design element If you had “go to the next page” in the slider, it wouldn’t work. Tuesday, October 11, 11

59. Invisible design never cries for attention. It stands to the

    side and serves its function. The power of Utility It’s useful and usable. Tuesday, October 11, 11

60. Tuesday, October 11, 11

61. Tuesday, October 11, 11

62. Tuesday, October 11, 11

63. Tuesday, October 11, 11

64. Tuesday, October 11, 11

65. Tuesday, October 11, 11

66. Tuesday, October 11, 11

67. Tuesday, October 11, 11

68. Invisible design is never guesswork. It demands informed decisions. The

    power of Measurement It’s always tested, verified, measured. Tuesday, October 11, 11

69. Tuesday, October 11, 11

70. Tuesday, October 11, 11

71. Tuesday, October 11, 11

72. Tuesday, October 11, 11

73. Tuesday, October 11, 11

74. Tuesday, October 11, 11

75. Tuesday, October 11, 11

76. Invisible design is committed to quality and improvement. The power

    of Ambition It never takes shortcuts. Tuesday, October 11, 11

77. Quality of our design decisions. Tuesday, October 11, 11

78. Quality of our content. Tuesday, October 11, 11

79. Quality of our deliverables. Tuesday, October 11, 11

80. Quality of our code. Tuesday, October 11, 11

81. Invisible design communicates through the tone, voice and meaning of

    its copy. The power of Language It informs and engages. Tuesday, October 11, 11

82. “[...] the empty dog-kennel was filled up with a great

    dog—deep mouthed and black-haired like Him, and he was very angry at the sight of me, and sprang out to get at me. [...]” — Charles Dickens Tuesday, October 11, 11

83. “Eating well is as important as living well. So everything

    we offer is made from great, fresh-tasting ingredients.” Tuesday, October 11, 11

84. Tuesday, October 11, 11

85. Tuesday, October 11, 11

86. Tuesday, October 11, 11

87. “Fancy joining our family? Love, friendship but no pocket money.”

    Tuesday, October 11, 11

88. “By the way, we will never, ever pass your details

    on to anyone else, but you knew that anyway, didn't you.” Tuesday, October 11, 11

89. Tuesday, October 11, 11

90. With language, we can also engage users emotionally. Tuesday, October

    11, 11

91. And the key to it is storytelling. Tuesday, October 11,

    11

92. Tuesday, October 11, 11

93. Stories can inspire and illuminate. They can help us empathize

    with users. Tuesday, October 11, 11

94. Tuesday, October 11, 11

95. What if we approach design like writers approach stories? Tuesday,

    October 11, 11

96. Mystery Suspense Uncertainty Intrigue Romance Cliffhanger Game mechanics Flashback Reversed

    story Chekov’s gun Tuesday, October 11, 11

97. On the Web, we can seed powerful stories in our

    user interfaces. Tuesday, October 11, 11

98. Tuesday, October 11, 11

99. Tuesday, October 11, 11

100. Tuesday, October 11, 11

101. Tuesday, October 11, 11

102. Tuesday, October 11, 11

103. Tuesday, October 11, 11

104. Tuesday, October 11, 11

105. Tuesday, October 11, 11

106. Tuesday, October 11, 11

107. Tuesday, October 11, 11

108. Tuesday, October 11, 11

109. Tuesday, October 11, 11

110. Tuesday, October 11, 11

111. Tuesday, October 11, 11

112. Tuesday, October 11, 11

113. Tuesday, October 11, 11

114. Tuesday, October 11, 11

115. Web designers are storytellers. Tuesday, October 11, 11

116. Substance combines six key qualities of invisible design. the power

     of Virtue the power of Idea the power of Language the power of Utility the power of Measurement the power of Ambition Tuesday, October 11, 11

117. All these attributes form a gateway to effective and usable

     interfaces. Tuesday, October 11, 11

118. Adhering to them consistently makes design invisible over time. Tuesday,

     October 11, 11

119. 3To Conclude Tuesday, October 11, 11

120. Our work would benefit from a stronger focus on its

     invisible side. Tuesday, October 11, 11

121. Good designers can see both the forest and the trees,

     the visible and invisible halves of design. — Francisco Inchauste “ Tuesday, October 11, 11

122. Tuesday, October 11, 11

123. We could all benefit from writing and talking about the

     ways we work, the decisions we make and the solutions we come up with. That’s the core of invisible design. Tuesday, October 11, 11

124. Let’s start right now. Tuesday, October 11, 11

125. @smashingmag Thank you for your attention! Tuesday, October 11, 11

126. Sources Francisco Inchauste, “The Smashing Book 2” Robert Mills, “A

     Practical Guide to Designing the Invisible” Inspiration: http://www.flickr.com/photos/ashleyrosex/5121483039/sizes/l/in/photostream/ Inspiration 2: http://www.flickr.com/photos/sparth/4030081242/sizes/o/in/photostream/ Mosaic: http://www.flickr.com/photos/slavers/370944125/sizes/z/in/photostream/ Mug: http://www.flickr.com/photos/kelleyleigh/5144104014/ Theatre: http://www.flickr.com/photos/thisisbossi/3017227698/in/photostream/lightbox/ Painting: The Boyhood of Raleigh by Sir John Everett Millais, oil on canvas, 1870. Comic: http://www.flickr.com/photos/bampop/2690586982/in/photostream/ Tijuana: http://www.flickr.com/photos/terri0325/2432811458/sizes/l/in/photostream/ Black Box: http://bit.ly/nXuCAT Craft: http://www.flickr.com/photos/s-t-r-a-n-g-e/2239001689/sizes/z/ Ford model: http://www.atomicmall.com/view.php?id=1205765 Front cover image: Craig Henry Tuesday, October 11, 11