3 Ways You Can Give and Get Good Design Feedback

1. Inﬂuence Others and Win Meetings Ryan Riddle, from ZURB ZURB.com/expo Forrst.com Oct. 5, 2013 for Silicon Valley Code Camp 3 Ways to Give and Get Good Feedback

2. “I just don’t really like this color.” “I wish all of you were dead.” “The page feels...weird.”

3. Feedback makes us uncomfortable.

4. We feel like assholes when we give it.

5. “oh god I have to tell them this sucks.”

6. Some people enjoy it a little too much.

7. “I told him it was terrible and to do the whole thing over again!”

8. We all take it a little too... personally.

9. What do you mean you don’t like it?! (I stab you.)

10. Okay, so feedback is tricky.

11. But we all know we need it. We just don’t want it, or know how to ask for it, or know how to give it.

12. Hi. I’m from ZURB.

13. ZURB has worked with startups and enterprises for 15 years.

15. Soliciting Feedback Taking Feedback Well Giving Great Feedback

16. Conclusion First

17. Have clear goals

18. People want to win feedback

19. Example: internal email

20. Subject: NotableGo is Live for ZURB! Yay! All hail Skroob! We've gone ludicrous speed with NotableGo! The new mobile layouts are accessible from your mobile devices. You can only visit the mobile layout if you click on a link in a mobile email. With NotableGo we wanted a fast and responsive way for users to access their feedback on their posts. While you can't create new notes in the mobile layout, you can reply to notes and leave comments on posts. NotableGo is currently enabled only on posts that are created by ZURBians. Please give it a whirl and let me know what you think.

21. “What?”

22. Subject: NotableGo is Live for ZURB! Yay! All hail Skroob! We've gone ludicrous speed with NotableGo! The new mobile layouts are accessible from your mobile devices. You can only visit the mobile layout if you click on a link in a mobile email. With NotableGo we wanted a fast and responsive way for users to access their feedback on their posts. While you can't create new notes in the mobile layout, you can reply to notes and leave comments on posts. NotableGo is currently enabled only on posts that are created by ZURBians. Please give it a whirl and let me know what you think.

23. Subject: NotableGo is Live for ZURB, We Need Your Feedback Hey Notable fans - We're making Notable even faster by adding a mobile layout code named NotableGo! We’re getting ready to launch this for all our customers, but we need your help to test it out and make sure it works as expected. Please check all your posts on your phone and email me by the end of the week if you see anything broken. Here is what’s hot with NotableGo • Light weight pages - We’re using Zepto and very light CSS so that the page loads as fast as possible on mobile devices • Reply to Notes and leave comments - Let’s you leave quick reply while you are on the go. • Built with Backbone.js so all the interactions are done with a single page load for super snapy interactions There’s a lot of great stuff in here, so use those iPhones we bought you (guilt trip!) to check your Notable posts and email me when you find something busted.

24. Subject: NotableGo is Live for ZURB, We Need Your Feedback Hey Notable fans - We're making Notable even faster by adding a mobile layout code named NotableGo! We’re getting ready to launch this for all our customers, but we need your help to test it out and make sure it works as expected. Please check all your posts on your phone and email me by the end of the week if you see anything broken. Here is what’s hot with NotableGo • Light weight pages - We’re using Zepto and very light CSS so that the page loads as fast as possible on mobile devices • Reply to Notes and leave comments - Let’s you leave quick reply while you are on the go. • Built with Backbone.js so all the interactions are done with a single page load for super snapy interactions There’s a lot of great stuff in here, so use those iPhones we bought you (guilt trip!) to check your Notable posts and email me when you find something busted.

25. Example: Design meeting with a client

27. Subject: ZURB | Opportunity Sketches Posted, Call Monday at 6PM Bill and Team - We are excited to share with you some opportunity sketches we put together. These sketches are not meant to represent layouts of the site, but instead ask questions about features, concepts, and content. Our goal for these is to get a sense of the concepts that resonate with you that we can incorporate into more reﬁned sketches next week. Let's plan on reviewing them together Monday at 6PM. Our sketches are grouped into three buckets: • Engagement - These sketches deal with first impressions and user engagement on the site – how we connect with the user to get them interested in what 234Give is going. • Adoption & Retention - These sketches are focused on interactions on the site that encourage users to interact with it and come back for return visits. • Interface - These are more tactical sketches focused on user interface elements that can improve the interactions on the site. Check out the sketches on the extranet here before our call, and we'll walk through your questions and feedback when we talk: http://zurb.net/234give/projects/website-design/ideate/opportunities.php Here is the conference information for our call Monday at 6PM: https://www4.gotomeeting.com/join/341282599 Dial +1 (267) 507-9999 Access Code: 341-482-501 Meeting ID: 395-124-074 Talk to you then. Have a great weekend! Cheers, Matt

28. Subject should allude to the conclusion

31. “We are excited to share with you some opportunity sketches we put together. These sketches are not meant to represent layouts of the site, but instead ask questions about features, concepts, and content. Our goal for these is to get a sense of the concepts that resonate with you that we can incorporate into more reﬁned sketches next week. Let's plan on reviewing them together Monday at 6PM.”

35. A bolded conclusion in the ﬁrst paragraph means they will follow through

36. Repeat yourself three times

38. Be direct with email

39. Save the emotion for in person

40. Tell me, show me, tell me what you showed me

42. Present Work in the Best Light

43. It’s not what design work says, it’s how it’s presented

44. Design is not abstract art

46. Subject: ZURB | Opportunity Sketches Posted, Call Monday at 6PM Bill and Team - We are excited to share with you some opportunity sketches we put together. These sketches are not meant to represent layouts of the site, but instead ask questions about features, concepts, and content. Our goal for these is to get a sense of the concepts that resonate with you that we can incorporate into more reﬁned sketches next week. Let's plan on reviewing them together Monday at 6PM. Our sketches are grouped into three buckets: • Engagement - These sketches deal with first impressions and user engagement on the site – how we connect with the user to get them interested in what 234Give is doing. • Adoption & Retention - These sketches are focused on interactions on the site that encourage users to interact with it and come back for return visits. • Interface - These are more tactical sketches focused on user interface elements that can improve the interactions on the site. Check out the sketches on the extranet here before our call, and we'll walk through your questions and feedback when we talk: http://zurb.net/234give/projects/website-design/ideate/opportunities.php Here is the conference information for our call Monday at 6PM: https://www4.gotomeeting.com/join/341282599 Dial +1 (267) 507-9999 Access Code: 341-482-501 Meeting ID: 395-124-074 Talk to you then. Have a great weekend! Cheers, Matt

49. No more then 3–5 big ideas for one piece of information

50. Use an eﬀective presentation vehicle

52. N notableapp.com (shameless plug)

54. Put it up on a white board

56. When sitting at a table avoid us vs. them

57. You’re going down suits What is this, biz cas fri?

58. The big reveal is diﬃcult to pull oﬀ

60. Email is a terrible place to get feedback

61. Get feedback on actual designs

62. Show the designs for in-person feedback

64. Show people how to give feedback

65. Get feedback directly on the work for online feedback

67. Show the work in a read-only format for phone feedback

69. Choose speciﬁc people to give you feedback.

70. “Your visual hierarchy seems oﬀ, right here.”

72. Don’t take it personally.

73. “He said it was a hard to discover interaction.”

74. Feedback is an opportunity, not a problem

75. Is the person design literate?

76. Ask why ﬁve times

77. Don’t be a pushover

78. Educate people who are not design-literate

79. Visualize success for the customer

80. It’s OK to table an issue

81. But you can’t table an issue in email

82. “Let’s version 2 that”

83. Repeat back the issue so people know they are heard

84. “My god you were right – I never should have made the call to action invisible.”

85. Be willing to admit you’re wrong

86. Follow through.

87. “We made the product better! Let’s celebrate by all shaking hands at the same time.”

89. 30 second visual design critique

90. Note where your eyes go

95. Five second memory test

97. Write down the ﬁve things you remember

98. Squint your eyes

100. Scan the page diagonally

106. Make it speciﬁc

107. “This looks really good!” “I know, so good!”

108. Don’t be cryptic

113. Composition • Rule of thirds: An image should be imagined as divided into nine equal parts. Important compositional elements are placed along these lines or their intersections. Aligning a subject with these points creates more tension, energy and interest in the composition than simply centering the subject would. • Rule of odds: An odd number of subjects is more interesting than an even number of them. Think of it this way, if you have more than one subject in your picture, then choose an arrangement with at least three subjects in it. An even number of subjects produces symmetries in the image, which can appear less natural for a naturalistic, informal composition. • Rule of space: Create the illusion of movement, or of a contextual bubble in the viewer's mind. For example, leave white space in the direction of where the subject's eyes are looking. Or with a picture of a runner, add white space in front of him rather than behind him to indicate movement. • Simplification: By decreasing the extraneous content, the viewer is more likely to focus on the primary objects. Clutter can be cut through the use of lighting. The brighter parts of an image draw in the eye, as do lines, squares and color. For instance, a painting may use less detailed and defined brushwork towards the edges. • Limiting focus: In photography, shallow depth of field (creating a blurred background) is used to focus the eye on the primary subject of interest. • Hierarchy: A layout should have a center of interest or focus. Good design contains elements that leads the reader through each element in order of its significance. • Balance: This is where there's an equal amount of tension and equilibrium. ◦ Symmetry: Designs that need more stability, a strong organizational structure, and a classic and trusting message, tend to use more symmetry in the design. This type of balance is a boon for patterns, backgrounds, the general layout, content, and anything else that is meant to be visually passive. ◦ Asymmetry: Asymmetry can be used to create points of interest and organize visual hierarchy within a group of similar elements. Asymmetry is effective in drawing attention and breaking monotony. • Scale: Using the relative size of elements against each other can attract attention to a focal point. • Visual Weight: Small, high contrast, elements have as much impact as larger, duller elements • Contrast: If two items are alike, make them very different. Contrast makes your page visually interesting. Wield color, size and weight to create contrast. Good thing to remember: when two elements are merely similar, you have conflict instead of contrast. White/Negative Space White space is the absence of text and graphics. It breaks up text and graphics, providing visual breathing room for the eye. Add white space to make a page less cramped, confusing, or overwhelming. • Alignment: Every elements should have some visual connection with another element on the page. The eye looks for visual alignment of elements align along edges or vertically through their centers. • Proximity: Related elements should be grouped together (Example: headlines & paragraphs). Equally spaced elements throughout the layout create trapped white space, which pushed elements apart. • Repetition: Repetition creates unity. Repeat some aspect of the design throughout the layout. • Padding: Defines space between element's content and its border. • Margins: Defines space between element's border and other elements.

114. Color • Hue: Color pigment — that is, red, blue, green. • Value: Perceived brightness of a color along a light–dark axis. • Saturation: Perceived intensity of color. Typography • Leading: Line-height in a block of text. • Tracking: Overall letter-spacing that affects density in a line or block of text. • Kerning: Spacing between two characters. • Extenders (ascenders, descenders): Parts of the letter that sticks out. • Baseline: The line upon which most letters "sit" and below which descenders extend. • Rivers: Gaps in typesetting, which run through a paragraph of text, due to a coincidental alignment of spaces. You can test for rivers by turning a layout upside down to examine the text. • Orphan: A word, part of a word, or very short line that appears by itself at the end of a paragraph. • Widow: A paragraph-ending line that falls at the beginning of the following page/column. In other words, separated from the rest of the text. • Drop Cap: The initial that sits within the margins and runs several lines deep into the paragraph, indenting normal-sized text in these lines. • Justification ◦ Justified: Align along both the left and right margin ◦ Left/Right/Center Justified: Align text on the left/right/center. Also referred to as "flush left/right." ◦ Rag: The uneven edges of text in a paragraph that is aligned on one side. A bad rag creates distracting shapes of irregular white space in the margins of the page or column where line breaks are varied and inconsistent. • Legibility: Refers to clarity of the typeface. • Readability: Refers to ability to comprehend content through setting and placement. Texture • Tactile: Makes a plain old two-dimensional surface more three-dimensional through texture. • Pattern: Usually a group of geometric shapes that are repeated on a grid. • Gradient: Smooth transition from one color to another. Shading • Highlight: The brightest parts of a subject. • Shade: The darkest part of a subject. • Cast Shadow: Object's shadow onto a surface or other object.

115. Keep it contextual

116. Bring the design to the meeting

119. Present any riﬀs with a sketch or visual

120. “Slide the tiddly wink over the diddly bob” “Do what now?”

121. Sketches provide clarity and create momentum

124. Timing is everything

125. “I have some ideas on that thing you were thinking about”

126. If they don’t take notes, you have a problem

127. “Wow, I can’t believe you can memorize this much detail.” lol busted

128. Meaningful feedback resonates more

130. In person is the best place to show emotion

132. The phone works too

133. Be direct

134. Don’t just give lists, inspire action

135. “This needs to be tagged with an H2 header.”

136. “There is a huge opportunity for us to rank in Google by using the right tags! Like an H2 right here.”

137. Feedback is where you show you give a damn and inspire people to do great things

138. “Yeah, feedback!”

139. Questions?

140. Thanks!

141. zurb.com @zurb

142. @ryantriddle (if you want to get personal)

3 Ways You Can Give and Get Good Design Feedback

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 3 Ways You Can Give and Get Good Design Feedback

Similar to 3 Ways You Can Give and Get Good Design Feedback (20)

More from ZURB

More from ZURB (20)

Recently uploaded

Recently uploaded (20)

3 Ways You Can Give and Get Good Design Feedback