Save 37% off PRO during our Black Friday Sale! »

All the design wisdom I have right now.

0a18181c939633240e4c377cc309f7d9?s=47 thoughtmerchant
February 11, 2016

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.

0a18181c939633240e4c377cc309f7d9?s=128

thoughtmerchant

February 11, 2016
Tweet

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.

  11. 1

  12. Start with type. Type sets the grid.

  13. None
  14. None
  15. typecast.com

  16. gridlover.net

  17. http://www.thinkingwithtype.com/ Learn about type here:

  18. 2

  19. Use a framework!

  20. Bootstrap http://getbootstrap.com/

  21. None
  22. Typebase devinhunt.github.io/typebase.css/

  23. None
  24. Refills http://refills.bourbon.io/

  25. 3

  26. No arbitrary font sizes.

  27. 16px 22px 32px 45px

  28. Type Scale http://type-scale.com/

  29. 4

  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/

  34. None
  35. Inspect it.

  36. None
  37. typewolf.com

  38. None
  39. for pairs.

  40. Not sure? Try fontreach.com

  41. None
  42. 30 Essential typefaces for a lifetime.

  43. 5

  44. We do all this because nobody reads online.

  45. None
  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.
  47. None
  48. http://www.nngroup.com/

  49. None
  50. Alert box Newsletter http://www.nngroup.com/articles/subscribe/

  51. 6

  52. Line everything up to the left.

  53. None
  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
  56. None
  57. F F

  58. 7

  59. Don’t Don’t Don’t repeat things.

  60. None
  61. None
  62. None
  63. 8

  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

  69. 9

  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

  76. 10

  77. Never use “learn more.”

  78. None
  79. Labels should work in isolation.

  80. None
  81. None
  82. Top designers use Mail Chimp

  83. the best ultra thin iPhone case.

  84. None
  85. Consistency Makes users comfortable.

  86. 11

  87. Carousels do not work.

  88. None
  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/

  92. None
  93. 12

  94. Do not use lorem ipsum.

  95. Bad

  96. Better

  97. Best

  98. http://blokkfont.com/

  99. 13

  100. Design the dashboard last.

  101. None
  102. None
  103. Make “that.”

  104. None
  105. Junk Drawer.

  106. None
  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