This document discusses improving user experience for WordPress sites. It defines user experience and outlines several methods for evaluating and improving UX, such as card sorting, personas and usability testing. The document then provides tips for good design practices like using tables and contrast to improve readability, implementing responsive and mobile-first design, and using stock images and fonts to enhance a site's visual design without reinventing elements. It stresses the importance of content, calls to action, and metadata like excerpts and contact details to create a high-quality user experience.

1. Better
User Experience
for WordPress sites
WordPress Geneva | April 23, 2013
@AdamUngstad

3. • Senior Information Architect, Province of
British Columbia (Canada)
• UX Specialist, Province of British Columbia
(Canada)
• Independent UX Consultant
• WordPress Developer
• Author & Publisher
Adam Ungstad

4. 2012, 2013
EuroIA - Edinburgh Sept 26-28
WordCamp Victoria 2012
UX Romandie April 2013

5. User Experience

6. User Experience is…
“the way a person feels about using a
product, system or service.”
- Wikipedia

7. “a person's perceptions and responses
that result from the use or anticipated use
of a product, system or service”
- International Standards Organization
User Experience is…

8. “how a person feels when interfacing
with a system.”
-Smashing Magazine
User Experience is…

9. www.jjg.net/elements/pdf/elements.pdf

10. http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/

11. http://beep.peterboersma.com/2004/11/t-model-big-ia-is-now-ux.html

12. Source: http://www.flickr.com/photos/curtisperry/57104815/sizes/z/in/photostream/

13. Source: http://www.flickr.com/photos/khalid-

14. Good UX Helps Users...
• Find what they came for
• Complete tasks quickly
• Understand primary content
• Discover related content
• Navigate across channels
• Recall content later
• Feel that they got what they came for

15. A Few UX Methods
• Content Inventory
• Card Sorting
• Contextual Inquiry
• Diary Studies
• Personas
• Scenarios
• Co-Design Studios
• A / B Testing

16. A Few UX Deliverables
• Site Maps
• Wireframes
• Wireflows
• Storyboards
• Journey maps
• Functional Specifications
• Prototypes
• Design Guidelines

17. UX takes a lot of work!
But there are some ‘universal’
principles and patterns.

18. Q: What is the most
important page on your site?

19. Q: What is the most
important page on your site?
A: Whatever page the user lands
on.

20. Source: http://en.wikipedia.org/wiki/Main_Page
Ever seen this before?

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

22. Vertical
• Static
Primary Navigation

23. Primary Navigation
Vertical
• Accordion

24. Primary Navigation
Vertical
• Flyouts

25. Primary Navigation
Horizontal
• Static

26. Primary Navigation
Source:
Horizontal
• Dropdowns

27. Primary Navigation
Horizontal
• Flyouts

28. Primary Navigation
Horizontal
• Mega-
Dropdowns

29. Primary Navigation
Horizontal
• Tabs

30. Static is generally best

31. Flyouts obscure content & are
difficult to use with a mouse

32. Use an accordion
or
If you need 2 levels...

33. Use Tabs
If you need 2 levels...

34. Secondary Navigation
Supports Primary Navigation:
• Tags
• Breadcrumbs
• Related Posts
• Footers

35. Categories
Primary Topics

36. Tags
Secondary Topics

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

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

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

40. Secondary Navigation
Footers....
don’t hold back.
Mega footers are
a good thing.

41. Source: www.theglobeandmail.com

42. Source: www.lynda.com

43. Inline Navigation

44. Source: www.apple.com

45. Source: www.amazon.ca

46. Source: www.theglobeandmail.com

47. Q: What type of navigation do
users use most?
a) Primary
b) Secondary
c) Inline

48. Q: What type of navigation do
users use most?
a) Primary
b) Secondary
c) Inline

49. Making the most of inline navigation…

50. “Store hours are Monday 9 – 5 PM,
Tuesday 9-6 PM, Wednesdays closed,
Thursdays 9-9PM, Fridays 9-5PM
Saturdays 10-5 PM, Sundays 12- 4PM”
Use tables to help users scan content

51. Use tables to help users scan content

52. Use tables to help users scan content
You use tables in MS Word all the time...

53. The standard WP Editor doesn’t support
tables, but you don’t have to use HTML...
Use tables to help users scan content

54. Two options:
1. Change your editor
(get CK Editor plugin), or
Use tables to help users scan content

55. Or:
2. Use an offline editor such as Windows
Live Editor or Mars Edit
Use tables to help users scan content

56. Don’t Expect, Suggest.
v
Your Post
Related Posts

57. Search

58. Use Columns

59. Use Columns

60. Ouch!

62. 3 is the magic number...

64. 1 2 3

66. 1 2 3

68. 1 2 3

69. Use Contrast
Using contrast is a good thing. It helps
people to read your content.
Using contrast is a good thing. It helps
people to read your content.
Using contrast is a good thing. It helps
people to read your content.

70. Default shapes
for thumbnails
are square:
Image Gallery Thumbnails

71. But think about the things you look at
all day:
• Your Computer Monitor
• Your TV
• Your SmartPhone
• Your Photographs
• The windshield on your car
Image Gallery Thumbnails

72. Yes, they are all rectangles.

73. Image Gallery Thumbnails

74. It’s easy to change the size of the
thumbnails for your galleries...

75. Settings  Media  Thumbnail Size

76. NOTE: this setting only applies
to photos added after the setting
is changed

77. Q: What is the easiest way to
make your site look good?

78. Q: What is the easiest way to
make your site look good?
A: Let other people do the work
for you.

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

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

81. Spend $20, get that responsive jquery
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!
Don’t re-invent the wheel

82. activeden.com

83. wpplugins.com

84. photodune.com

85. compfight.com

86. • 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.
compfight.com

87. • Metacontent
• Readability
• Contact on every page
• Fonts
Content

88. The excerpt…. Not just for search results!
Metadata

89. The excerpt appears when your post is
shared on social networks.
Metadata

90. Always, Always, Always...
1. Have a relevant image with your post.
2. Write a good excerpt.
Metadata

91. Readability is more than
“write at a grade 8 reading level”
Readability

92. Use Active / Positive Tense. Change these
sentences:
• Geneva is not a large city
• I don’t like the cold
• WordPress does not cost a lot of money
Readability

93. Use Active / Positive Tense. Change these
sentences:
• Geneva is not a large city
Geneva is a small city
• I don’t like the cold
I like the heat
• WordPress does not cost a lot of money
WordPress is affordable
Readability

94. Talk about what things are,
not about what they aren’t.

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

96. Good typography is like new paint for the
walls of your living room...
It is:
• inexpensive,
• easy, and
• it makes you look good.
Typography

97. The easiest way to use good fonts
on your site is to use an
online service.

98. • 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!
Online Font Services

99. google.com/webfonts

100. typekit.com

101. fontsquirrel.com

102. Put it on every page.
• Good for findability
• Good for SEO
• Builds trust
Contact Information

103. 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.
Contact Information

104. • Scrolling vs Clicking
• Calls to Action
• Responsive Design
• The Last Word
Miscellaneous

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

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

107. • Use High Contrast
• Consider bundling products
• Place them before and after the fold
• Don’t interrupt a sequential process
Calls to Action

108. Get a Responsive 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.
Responsive Design

109. The Last Word...

110. • Awesome
• Important
• Engaging
• Critical
• Time consuming....
User Experience is….

111. But don’t forget...

112. Content is still king.

113. Thank you!
@AdamUngstad