presentation by Sara Smith of Sapient Design at Santa Cruz Wordpress Meetup, Aug 21, 2013

1. 10 Ways to Improve the
User Experience of
Your Wordpress Site
Sara Smith
Web Designer and UX
Specialist

2. “UX is really just good
marketing. It’s about
knowing who your market
is, knowing what is
important to them, knowing
why it is important to
them, and designing
accordingly.”
Joshua Porter

4. Some principles to good design
1. Make your website easy to
navigate
2. Format text to maximize
readability
3. Don't make users wait
4. Keep your message simple
and provide clear calls to
action

10. P1 - Make your website easy to navigate
Don’t
Place navigation where it’s difficult
to find
Blend it in with the design
Move the position of the menu
around
Use low contrast between
background and font color
Use ornate, difficult to read fonts

11. P1 - Make your website easy to navigate
Do
Keep main navigation to no more than
7 items
Put navigation near the top of the page
Keep the placement and appearance
consistent on all pages
Show users where they are by
highlighting the active menu item
Put menu items in a logical order

14. Fixing Nav problems in Wordpress
Tip#1 - Move position of menu using Hooks
Code and method are dependent on your
theme or framework.

15. Fixing Nav problems in Wordpress
Tip#2 - Style your menu
good contrast between background and
font
Contrasting hover and current (active)
menu item

16. Fixing Nav problems in Wordpress
Tip#3 - Use
Appearance >
Menus in WP to
create custom
menus and
change default
order of items

21. P2 - Format text to maximize readability
Don’t
Center large quantities of text
Don’t go crazy with the fonts – 2 max
Have odd gaps between paragraphs
Mix center, right, and left alignment
Put text all in same color unless you vary
size and weight of headings, sub-
headings, etc.

22. P2 - Format text to maximize readability
Do
Use sans-serif fonts for body text
Use a consistent color/style for links
Clean up text when pasting from another
source
Visually break up long passages with pull-
out quotes, bullets, highlighting, etc.
Create a visual hierarchy for headings, sub-
headings, etc.
Use color for emphasis, but keep most text
in black/gray

24. Text formatting tips in Wordpress
Tip#4 - Look to see if
your theme settings
allow you to set font
styles
Or Install a typography
plugin
Google Typography
WP Google Fonts

25. Text formatting tips in Wordpress
Apply headings in the Page/Posts editor

26. Text formatting tips in Wordpress
Tip#5 - Make use of shortcodes for styling
text

27. Text formatting tips in Wordpress
Look to see if your
theme has options for
inserting shortcodes
Or Install a shortcodes
plugin
Wordpress
Shortcodes
Symple Shortcodes

28. Text formatting tips in Wordpress
Tip#6 - Use custom post types when you
will have blocks of text in a repeating style
Examples:
 Testimonials
 Address List
 Product List
DEMO – Plugin: Quotes Collection

29. P3. Don't make users wait
How does page load time impact UX? Consider these statistics:
 47% of consumers expect a web page to load in 2 seconds
or less.
 40% of people abandon a website that takes more than 3
seconds to load.
 A 1 second delay in page response can result in a 7%
reduction in conversions.
 75% of users will leave after a 4 second delay
Source: Akamai, 2009

30. P3. Don't make users wait
What factors contribute to page load time?
Bulky, code heavy themes
Large image sizes
Lots of Javascript
Inefficient CSS
Website hosting
Lots of redirects

31. P3. Don't make users wait
How can you test the speed of your website?
Tools.pingdom.com

32. P3. Don't make users wait
How can you test the speed of your website?
http://developers.google.com/speed/pagespeed/insight
s/

33. Page speed tips in Wordpress
Tip#7 – Resize your images automatically to use
less memory (or do it manually before
uploading).
Plugin: Auto Image Resizer or similar

34. Page speed tips in Wordpress
Tip#8 – Condense your CSS and javascripts using
a minification plugin
Tip#9 – Use a caching plugin to increase server
performance
Plugin: W3 Total Cache (does both)

35. Page speed tips in Wordpress
Plugin: W3 Total Cache (does both)
Before:
function toggleImage(id){
if (document.getElementById(id).src.indexOf("1.png") > -1){
document.getElementById(id).src = document.getElementById »
(id).src.replace("1.png", "2.png");
}
}
After:
function toggleImage(a){
if(document.getElementById(a).src.indexOf » ("1.png")>-
1){document.getElementById(a).src=document.getElementBy »
Id(a).src.replace("1.png","2.png")}};

36. Page speed tips in Wordpress
Tip#10 – Clean out your database
Plugin: WP Optimize

38. P4 - Keep your message simple and
provide clear calls to action
Only 28% of website text is read
Source: Nielsen Norman Group

39. P4 - Keep your message simple and
provide clear calls to action
People tend to focus on F shaped areas of the
page according to eye-tracking studies
Source: Nielsen Norman Group

40. Messaging tips in Wordpress
Bonus Tip –
Put only excerpts on top level pages with short
descriptions – then link to more information.
Many themes come with predefined sections.

41. Messaging tips in Wordpress
Bonus Tip –
Put your most important information on the top
and left of your page (if in US where we read left
to right).
Bonus Tip –
Use a Word Counting tool (like in Google Docs or
Word) to see how long your text is. Then reduce
it by 50%

42. Good Design in Wordpress
In Summary:
1.Make your website easy to navigate
2. Format text to maximize readability
3. Don't make users wait
4. Keep your message simple and provide clear
calls to action

43. Thank you!
sara@sapientdesign.net
@slorien
http://www.sapientdesign.net