Learn some basics on how to communicate, not decorate; how to draw attention to your content and how to keep attention on your content.

1. ways to
make your
blog more
user friendly

2. Hi, I’m GUSTAVO
http://gustavohernando.com
@gehernando

3. why is usability important?

4. “What we remember about the
pleasurable quality of our past experience
is almost entirely determined by two
things: how the experiences felt when they
were at their peak (best or worst), and how
they felt when they ended.”
Daniel Kahneman

5. happy visitors
=
loyal readers

6. what you will learn
• how to create a blog that is easy to use,
intuitive, accessible, and makes finding
things very easy
• how to communicate, not decorate
• how to draw attention to your content
• how to keep attention on your content

7. 1
make
content
scannable

8. shortcake

9. • short and sweet paragraphs
• break up text with subheadings

11. • use bulleted and numbered lists
• bold important concepts

13. 2
use
fewer
links

14. • links in text reduce comprehension
• put relevant links at the bottom
• have each link serve a purpose

15. no
yes

16. 3
predictable
layouts
3

17. • logo top-left
• navigation top horizontal
• sidebar right
• search box top-right

19. • keep amount of primary nav links low
• reserve for quick access to major areas
• minimize the number of clicks
• keep sidebar free of random links
• divide sidebar into different areas

20. 4
white
space

21. • no text running into images or sidebar
• increase line heights and padding
• give headings special breathing room

22. no
yes

23. 5
use
excerpts
5

24. • users can see more posts in homepage
• increases the number of page views
• better track popular posts

26. 6
make
headlines
pop
6

27. • color headlines different than body text
• use a different (serif) font
• not just a little bigger, WAY bigger

28. Serif
vs.
Sans-serif

30. 7
categorize
simply

31. • have clear, distinct categories
• use tags for sub-categorizing
• use words that relate to your visitors

32. yes
no

33. 

34. 8
8
use
easy-to-read
colors

35. • dark text on light background.

36. Hi, I’m Text.
I’m black.
Yay.

37. 9
make it
easy to
comment
9

38. • don’t take users to a new page
• require registration only if necessary
• kill those CAPTCHAs

39. no
yes

40. • separate each comment visually
• make author comments stand out
• separate author, date, number etc

42. 10
do not cram with junk !!!

43. “In anything, perfection is
finally attained not when there
is nothing to add, but when
there is nothing to take away.”
Saint Exupery

44. • don’t allow auto-play music, videos or ads
• don’t blend ads in content
• don’t embed every widget known to man
• don’t list 20 social media share links

45. 
Blog Roll

46. designing for ads
• place 125 x 125 ads in the sidebar, up to 6
• noticeable but do not overpower the content
• don’t let them be mistaken for actual links

47. some no-nos...
!

48. • don't upload huge images
• don’t use a domain owned by a blogging service
• don’t have posts wider than 2/3 of the screen
• don’t use complex URLs
• don’t open links in new window
• don’t use small buttons

49. lets review

50. logo top left

51. navigation top horizontal

52. sidebar right

53. search top right

54. use excerpts

55. bullet lists

56. play nice with ads

57. categorize simply

58. easy to read comments

59. clean and simple sharing

60. make headlines pop

61. thanks!
http://gustavohernando.com
@gehernando