All the design wisdom I have right now.

In this talk Steve Berry goes over design heuristics for creating persuasive digital products. In the past 7 years Steve has created a rolodex of best practices, tips, and research findings. We will go over these findings with quick examples and easy to understand language. You will have a much better understanding of core design heuristics to make products you are working on better right now.

Transcript

1. All the design wisdom I have right now.
2. Steve Berry Principal @ Thought Merchants User experience + product design consultancy thoughtmerchants.com @thoughtmerchant
3. I work with start-ups & emerging companies.
4. 1 person → 13
5. 11 people → 160+
6. 8 people → 120+
7. Goal Simple, straight forward guidelines to make anything online look awesome.
8. Why? Following heuristics reduces the design problem space. makes design easier.
9. http://www.studioaum.in/service_ux.html
10. All the design wisdom I have right now.
12. Start with type. Type sets the grid.
15. typecast.com
16. gridlover.net
17. http://www.thinkingwithtype.com/ Learn about type here:
19. Use a framework!
20. Bootstrap http://getbootstrap.com/
22. Typebase devinhunt.github.io/typebase.css/
24. Refills http://refills.bourbon.io/
26. No arbitrary font sizes.
27. 16px 22px 32px 45px
28. Type Scale http://type-scale.com/
30. Steal.
31. The secret to creativity is knowing how to hide your sources. — Not Einstein
32. Stealing is a NY Times best seller. http://austinkleon.com/steal/
33. SNATCH it. http://getsnatchrr.com/
35. Inspect it.
37. typewolf.com
39. for pairs.
40. Not sure? Try fontreach.com
42. 30 Essential typefaces for a lifetime.
44. We do all this because nobody reads online.
46. They don't. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences. JAKOB NIELSEN on October 1, 1997 How users read online.
48. http://www.nngroup.com/
50. Alert box Newsletter http://www.nngroup.com/articles/subscribe/
52. Line everything up to the left.
54. F-Patterns • Line things up on the left • Create a clear left hand scan line • Put important words first • Use a grid
55. Why? • Increase scanability • Increase ambient findability • Decrease eye fixations • Easily control user gaze
57. F F
59. Don’t Don’t Don’t repeat things.
64. Optimal line length
65. ~12 - 17 words per line. 45 - 75 characters.
66. 9 12 11 10 12 10
67. 27 24 26
68. 14 15 16 13 12
70. The best icons are words, unless they are not.
71. Settings
72. Share
73. Sprout
74. A successful icon is inversely correlated to time it takes to think of the icon.
75. < 5 seconds = gold > 10 seconds = garbage
77. Never use “learn more.”
79. Labels should work in isolation.
82. Top designers use Mail Chimp
83. the best ultra thin iPhone case.
85. Consistency Makes users comfortable.
87. Carousels do not work.
89. 89% of clicks were in the first position.
90. The user's target was at the top of the page in 98-point font. But she failed to find it because the panel auto-rotated instead of staying still.
91. http://shouldiuseacarousel.com/
94. Do not use lorem ipsum.
95. Bad
96. Better
97. Best
98. http://blokkfont.com/
100. Design the dashboard last.
103. Make “that.”
105. Junk Drawer.
107. Parting Tips
108. Don’t be too clever.
109. Leverage patterns that exist already.
110. People are not on your site most of the time.
111. Thanks! steve@thoughtmerchants.com @thoughtmerchant thoughtmerchants.com