A collection of simple and practical ways to make improvements to your WordPress Sites. Anyone with a website really will be ab

1. Easy
User Experience
Improvements
for your
WordPress Site
@AdamUngstad
@AdamUngstad

2. About Me
• In various IT roles for 10 years
• Photographer
• Writer – Poetry & Non-Fiction
• Freelance WordPress work in
2011
@AdamUngstad

3. Living Water Smart
@AdamUngstad

4. What is User Experience?
“the way a person feels about
using a product, system
or service.”
- Wikipedia
@AdamUngstad

5. What is User Experience?
"a person's perceptions and
responses that result from
the use or anticipated use of
a product, system or
service”
- ISO 9421-210
@AdamUngstad

6. What is User Experience?
“how a person feels when
interfacing with a system.”
- Smashing Magazine
@AdamUngstad

7. The Original Elements
Source: www.jjg.net/elements/pdf/elements.pdf @AdamUngstad

8. The Boersma T-model
Source: http://beep.peterboersma.com/2004/11/t-model-big-ia-is-now-ux.html @AdamUngstad

9. Source: http://www.flickr.com/photos/curtisperry/57104815/sizes/z/in/photostream/ @AdamUngstad

10. Source: http://www.flickr.com/photos/khalid- @AdamUngstad

11. User
Experience
adds
VALUE
@AdamUngstad

12. Good UX Helps Users...
• Find what they came for
• Discover related content
• Complete tasks quicker
• Understand content
• Navigate on different platforms
@AdamUngstad

13. UX Deliverables
• User Research / Testing
• Personas, Use Cases
• Wireframes
• Prototypes
• Journey Maps
@AdamUngstad

14. Easy UX for WordPress
• Navigation
• Visual Elements
• Content
• Miscellaneous
@AdamUngstad

15. Q: What is
the most
important page
on your site?
@AdamUngstad

16. A: Whatever page the
user lands on.
Most users arrive at a page within
a site, rather than the home page.
@AdamUngstad

17. Ever seen this before?
Source: http://en.wikipedia.org/wiki/Main_Page @AdamUngstad

18. Navigation
4 Types:
1. Primary (menus)
2. Secondary (tags, breadcrumb, footer)
3. Inline (content)
4. Search
@AdamUngstad

19. Primary Navigation
Vertical
• Static
@AdamUngstad

20. Primary Navigation
Vertical
• Accordion
@AdamUngstad

21. Primary Navigation
Vertical
• Flyouts
@AdamUngstad

22. Primary Navigation
Horizontal
• Static
@AdamUngstad

23. Primary Navigation
Horizontal
• Dropdowns
Source: @AdamUngstad

24. Primary Navigation
Horizontal
• Flyouts
@AdamUngstad

25. Primary Navigation
Horizontal
• Mega-Dropdowns
@AdamUngstad

26. Primary Navigation
Horizontal
• Tabs
@AdamUngstad

27. Static is generally best
@AdamUngstad

28. Flyouts obscure content
@AdamUngstad

29. If you need 2 levels...
Use an accordion
or
@AdamUngstad

30. If you need 2 levels...
Use Tabs
@AdamUngstad

31. Secondary Navigation
Supporting Primary Navigation:
• Tags
• Breadcrumbs
• Footers
@AdamUngstad

32. Secondary Navigation
Categories Tags
Primary Subject Secondary Subject
@AdamUngstad

33. Secondary Navigation
Use Tags to:
• Link content across categories
• Create an index
• Help users discover what they
didn’t know they were looking
for...
@AdamUngstad

34. Secondary Navigation
Breadcrumbs
1 2 3 4
Tell users
• where they are
• what’s around them
@AdamUngstad

35. Secondary Navigation
Breadcrumbs
1 2 3 4
Use them only if:
• You have highly structured,
layered, hierarchical content.
@AdamUngstad

36. Secondary Navigation
Footers....
don’t hold
back.
Mega footers are
a good thing.
@AdamUngstad

37. Source: www.theglobeandmail.com @AdamUngstad

38. Source: www.lynda.com @AdamUngstad

39. Inline Navigation
@AdamUngstad

40. Source: www.apple.com @AdamUngstad

41. Source: www.amazon.ca @AdamUngstad

42. Source: www.theglobeandmail.com @AdamUngstad

43. Q: What do users
use most?
a) Primary
b) Secondary
c) Inline
@AdamUngstad

44. Q: What do users
use most?
a) Primary
b) Secondary
c) Inline
@AdamUngstad

45. Easy
Inline Navigation
on Your
Home Page....
@AdamUngstad

46. 1) Create a Sticky Post
@AdamUngstad

47. 2) Use Tables for layout
You use tables in MS Word all the time...
@AdamUngstad

48. 2) Use Tables for layout
The standard WP editor doesn’t support
tables, but you don’t have to use HTML...
@AdamUngstad

49. 2) Use Tables for layout
Two options:
1. Change your editor
(get Ultimate Tiny MCE
plugin), or
2. Use an offline editor such as
Windows Live Editor
@AdamUngstad

50. Don’t Expect, Suggest.
Your Post
v
Related Posts
@AdamUngstad

51. Search
@AdamUngstad

52. Next up....
• Navigation
• Visual Elements
• Content
• Miscellaneous
@AdamUngstad

53. Visual Elements
• Columns
• Contrast
• The Magic Number
• Thumbnails
• Fonts
@AdamUngstad

54. Use Columns
@AdamUngstad

55. Use Columns
@AdamUngstad

56. Ouch!
@AdamUngstad

57. @AdamUngstad

58. 3 Is the magic number...
@AdamUngstad

59. @AdamUngstad

60. 1 2 3
@AdamUngstad

61. @AdamUngstad

62. 1 2 3
@AdamUngstad

63. @AdamUngstad

64. 1 2 3
@AdamUngstad

65. Contrast
Using contrast is a good thing. It
helps people to read your content.
Not everyone sees as well as you do.
Using contrast is a good thing. It
helps people to read your content.
Not everyone sees as well as you do.
@AdamUngstad

66. Gallery Thumbnails
Default sizes
are square:
@AdamUngstad

67. Gallery Thumbnails
But think about the things you
look at all day:
• Your Computer Monitor
• Your TV
• Your Paintings / Pictures
@AdamUngstad

68. Gallery Thumbnails
Yes, they are all rectangles.
@AdamUngstad

69. @AdamUngstad

70. It’s easy
to change the size
of the thumbnails
for your galleries...
@AdamUngstad

71. Settings -> Media
@AdamUngstad

72. Note:
This setting
only applies to
photos you add
after
the setting is changed.
@AdamUngstad

73. This next one is
important...
@AdamUngstad

74. What is the
easiest way
to make
your site
look good?
@AdamUngstad

75. Let other people do the
work for you.
Don’t re-invent the wheel!
@AdamUngstad

76. Don’t re-invent the wheel
This doesn’t mean you should hire
expensive:
• graphic designers
• photographers
• flash developers
• UX Designers (well, maybe UX designers... ;-)
@AdamUngstad

77. Don’t re-invent the wheel
Just as you bought a premium theme
for $30. For a couple dollars more
you can buy:
• fancy sliders
• icons & backgrounds
• stock photos
• anything you need really!
@AdamUngstad

78. Don’t re-invent the wheel
Spend $20, get the superduper flash
slider, and impress your users like you
want to.
Spend $3, and get the background
you want so you can stop trying to
design it yourself. You have content
to write!
@AdamUngstad

79. activeden.com
@AdamUngstad

80. wpplugins.com
@AdamUngstad

81. photodune.com
@AdamUngstad

82. compfight.com
• Comfight lets you search Flickr
with specific criteria on usage
rights (IE Creative Commons).
• Need a picture of a garden to go
with your post? Try compfight.
Give credit where it is due.
@AdamUngstad

83. compfight.com
@AdamUngstad

84. Next up....
• Navigation
• Visual Elements
• Content
• Miscellaneous
@AdamUngstad

85. Content
• Metacontent
• Readability
• Contact on every page
• Fonts
@AdamUngstad

86. Metacontent
Not just for search engines...
Your WP Excerpt:
@AdamUngstad

87. Metacontent
Shows up when people share
with their networks.
@AdamUngstad

88. Metacontent
Always, Always, Always...
1. Have a relevant image with
your post.
2. Write a good excerpt.
@AdamUngstad

89. Readability
Readability is more than
“write at a grade 8 reading level”
@AdamUngstad

90. Readability
Use Active / Positive Tense.
Change:
• Victoria is not a large city
• I don’t like the cold
@AdamUngstad

91. Readability
Use Active / Positive Tense.
Change:
• Victoria is not a large city
• Victoria is a small city
• I don’t like the cold
• I like it when it is warm @AdamUngstad

92. Talk about
what things are
not
what they are not.
@AdamUngstad

93. Readability
Use white space:
• Small paragraphs
• Small column widths
• Bullet points, numbered lists
• Subheaders
• Tables
@AdamUngstad

94. Fonts
Good fonts are like new paint for
the walls of your living room...
They are inexpensive, easy, and
they make you look good.
@AdamUngstad

95. The easy way
to use good fonts on
your site....
@AdamUngstad

96. ... Is to use an online
web font service.
@AdamUngstad

97. Web Fonts
• You (usually) pay a small fee
• You drop some code into your
header
• You can use all kinds of cool fonts.
• Don’t go too crazy however. Arial
is fine for the body of your posts!
@AdamUngstad

98. google.com/webfonts
@AdamUngstad

99. typekit.com
@AdamUngstad

100. fontsquirrel.com
@AdamUngstad

101. Contact Information
Put it on every page.
• Good for findability
• Good for SEO
• Builds trust
@AdamUngstad

102. Contact Information
This doesn’t mean put a link to
your “contact us” form.
If you have an address or phone
number, put it on each page.
Then people know you are real.
@AdamUngstad

103. Next up....
• Navigation
• Visual Elements
• Content
• Miscellaneous
@AdamUngstad

104. Miscellaneous
• Scrolling vs Clicking
• Mobile
• The Last Word
@AdamUngstad

105. Scrolling vs Clicking
Scrolling is better because:
• It is faster
• Requires less effort
• Doesn’t load new pages
• Mouse wheels and swipes
@AdamUngstad

106. Scrolling vs Clicking
No one uses scroll bars
anymore, because we have
mouse wheels and swipes.
Don’t be afraid of long pages.
@AdamUngstad

107. Mobile
Get a mobile theme, especially if
you are using social media.
Don’t worry if your home page
looks weird with it... chances are
no one will see the home page
anyways.
@AdamUngstad

108. The Last Word...
@AdamUngstad

109. User Experience Is:
• Awesome
• Important
• Engaging
• Critical
• Time consuming....
@AdamUngstad

110. But don’t forget...
@AdamUngstad

111. Content is still king.
@AdamUngstad

112. Thank you!
@AdamUngstad
@AdamUngstad