From a presentation given in Vancouver on November 25, 2010 at The Network Hub http://www.thenetworkhub.ca on how to make your blog more usable (readable, sharable, comment-friendly) by following some universal guidelines and rules of thumb. Presented by UX Architect David Drucker.

1. User Experience Design for
Wordpress Web Sites
because Blogs are Web Sites too
by David Drucker

2. Who Am I & What Do I Do?
I’m a...
User Interface Architect
Information Architect
Interaction Designer
User Interface Designer
User Experience Expert
Usability Consultant...

3. “Behaviour is our Medium”*
* Robert Fabricant, Vice President of Creative, Frog Design
From a talk at the 2009 Interaction Design Association (IXDA)
Convention in Vancouver

4. User Experi... What?
User Experience: “A person’s perceptions and
responses that result from the use or anticipated
use of a product, system or service”*
* ISO FDIS 9241-210:2009. Ergonomics of human system interaction -
Part 210: Human-centred design for interactive systems (formerly known as 13407).
International Organization for Standardization (ISO). Switzerland.

5. User Experience also includes:
What You (Fondly/Bitterly) Remember

6. It’s Not (Just) What Theme to Choose or Tweak
Read your Blog
Listen to or watch non-text content
Navigate within it
Contact the Author
Search it
How Do Users:
Share/Bookmark it
Comment on Posts
Refer to Posts
Subscribe to its Feed

7. Topics
1. Content (Text, Audio, Video)
2. Metadata (Tags, Categories)
3. Sidebars
4. Comments
5. Search
6. Permalinks
7. Favicons and Gravatars
8. Sharing and Bookmarking
9. Contact Forms
10. Colours and Information Design
11. Visually Impaired User Support
12. Mobile User Support

8. Content: Readability
Typography Rules

9. webtypography.net

10. Key Chapters
2.1.2 Choose a comfortable measure
Anything from 45 to 75 characters is widely regarded as a satisfactory length of line
for a single-column page set in a serifed text face in a text size. The 66-character
line (counting both letters and spaces) is widely regarded as ideal. For multiple
column work, a better average is 40 to 50 characters.
DIV#column1
{ width:400px
}
OK for fixed layouts, but if the user increases text
size, number of characters per line changes
Assumes browser window size of 800px for a 400px
wide column (and in turn, 66 characters per line)
Since on average, 1 char = 0.5em, this column will
get about 66 char per line no matter what the user
resizes text or browser window to.
DIV#column2
{ width:50% }
DIV#column3
{ width:33em }

11. Key Chapters
2.2.1 Choose a basic leading that suits the typeface, text
and measure
Vertical space is metered in a different way [to horizontal space]. You must
choose not only the overall measure — the depth of the column or page —
but also a basic rhythmical unit. This unit is the leading, which is the distance
from one baseline to the next.
p {
font-size: 12pt;
line-height: 1.25 }
For a fixed font size:
p{
font-size: 0.750em;
line-height: 1.5em;
margin: 1.5em;
}
For a variable font size:

12. http://blog.echoenduring.com/2010/5/13/create-beautiful-css3-typography/

13. The wp-Typography Plugin
Hyphenation
Straight quotes ( ' ) to curly quotes (‘ ’)
Double Hyphens -- to dashes, minus signs and hyphens
Three periods ... into an ellipsis … (looks the same but
doesn’t break in the wrong place)
Fractions like 1
/2 , 1
/3 and 3
/4
Widows and Orphans (lines with just one word, either at
the beginning or end of a paragraph)

14. Content: Audio
Pros:
So, until someone does an HTML5
version, include a link to the same
audio file.
Flash-based, so won’t work on
iPhone, iPad, or Macs shipped
without Flash
Only works with MP3 files
Not beautiful (but satisfactory)
Audio Player Plugin
 Plays audio Inline (Doesn’t
launch a new window)
 Play-pause control & Progress
bar
 Loads While Playing (no wait to
download - not the same as
streaming)
 If tagged MP3, scrolls
metadata
 Built-in Volume control
Cons:

15. Content: Video
YouTube: Flash based player,
so no good on non-Flash
devices
Vimeo: Support HTML5 video if
you get a paid subscription
Veoh.com : Free accounts do
get non-Flash playback. (limits
on uploads)
The worst experience is no video at all. So...
HTML5 Video (do it yourself) hosting:
Mobile phones like Apple’s iPhone
and Google Android phones
support H.264 video (baseline
profile) and AAC audio (“low
complexity” profile) in an MP4
container
For info on encoding & HTML5
tags, check out:
http://diveintohtml5.org/video.html

16. Metadata
Author Byline
Do you need one?
Are there guest authors on the blog?
Date/Time
Do your readers need to know the time of a post?
Comments
If there are no comments on a post, Should you show ‘0
Comments’, ‘No Comments’ or ‘No Comments yet, Add
Yours?’
Should commenters have a full WYSIWYG editor?

17. Metadata
Tags - What’s optimal number?
10-20 in the metatags, < 10 visible
Categories - don’t go crazy here either
< 20
Key idea: Keep the Hierarchy of Information clear. This
is Metadata, not Data. It is secondary, and should be
visible but not detract from the content it refers to.

18. Sidebars
Try to avoid S.O.S. (Sidebar Overload Syndrome)
Badges
Length of items (Blogrolls, Archive listings)
Ads
Other Paraphernalia (About the Author blurbs,
slogans, etc.)

19. Navigation
In Descending Order of Usability...
Tabs
Menus
Horizontal and Vertical
Links
Drop-down menus
Horizontal Scrolling (Yes, This Exists):
http://www.hopstudios.com/nep/unvarnished
Flash or Silverlight-based Navigation:
http://www.blastradius.com

20. Navigation
Breadcrumbs
Technically a misleading term: structural or chronological?
Most breadcrumbs are structural (reflect the Information
Architecture). Very few are chronological (path based).
Make sure Breadcrumbs are styled appropriately
Don’t use the new built-in Menu as a tag-cloud
Make it clear how to navigate backward to earlier posts
(usually to the left, in Western cultures, but label it). Look
into the pagination plugin if you think users will often move
that way.

21. Search
Include a button (return is not enough)
Search options
Wildcards, Boolean
Posts, Pages, Comments, Titles, URLs, Tags, and
Meta-data
Search Results - Highlighting, number of hits per article
Search Unleashed Plugin (from Urban Giraffe)

22. Permalinks
Human-friendly
Not Human-friendly

23. Favicons - a nice visual branding element, but
also nice for browsers that support them, as well
as other services (Facebook, about.me, etc.)
Gravatar (Globally Recognized Avatars)
96x96 pixels
A human/creative element in comments,
but ultimately, a personal choice.
Implement with a couple of lines of code
or a plugin (like SexyComments)
Favicons & Gravatars

24. Sharing & Bookmarking
What options to support?
Delicious, Google Bookmarks, Facebook, MySpace,
Twitter, Digg, Reddit, Google and Yahoo Buzz, etc.
How?
Sociable Plugin
Add-To-Any

25. Contact
Options
Contact Form 7
Captcha: If you
must, keep it
simple
Mailto Link with a
script to obscure
the address from
SPAM harvesters
In External JS File:
<script type="text/javascript">function create_mail(naam, domain, tld, label) { var
mail; mail += '<a href="' + 'ma' + 'il' + 'to:' + naam; mail += '&#64;' + mail +
domain '.' + tld; mail += '">' + label + '<' + '/a>'; document.write(mail);}</script>
--------------------------------------
Then in document: <a mailto
<script type="text/javascript">create_mail("user", "email", "com", "e-mail");</script>

26. Comments and Contact Form
Follow good Form Design Practices:
Labels should be near the fields they pertain to
Make clear what’s optional and what’s required
More than 6 choices (for example, how reader found your
blog)? Then use a drop-down. Otherwise, a radio button
group is better
Make sure a large field is large enough
Consider making entry text big

27. Colours
Link Colour set to... bright green? If it isn’t blue, you’re
swimming upstream.
Red = Danger
Avoid Using Colour as an Organizing Method
White text on black is hard to read for a Blog*
1 out of every 10 males is red-green colour-blind
So ‘double code’ anything that they need to see
!!
*I know, I know, presentations are a different matter!

28. That said, I think we all have the Blues...

29. Information Design (Charts & Graphs)
Use the right Charts for the right
data:
Pie for percentages
Line for change over time
Bar for comparing 1-4 datasets, perhaps with
breakdowns
Scatter for seeing 2 axes of info against each
other:
Example: Frequency of Blogging vs.
Number of Users
Again, Double Code (or use patterns along
with colours) if necessary for Colour blind men
0
20
40
60
80
100
120
2007 2008 2009 2010
0
20
40
60
80
100
120
140
160
180
Cats Dogs
Monkeys
Ferrets
0
20
40
60
80
100
120
140
0 50 100
No. users
Entries per yr

30. Visually Impaired Users
Reader Software
Convert your Blog to Audio:
odiogo.com
ispeech.org
spoken-web.com (a site, not a feed or software)

31. Mobile Users
Plugins that reformat your Blog for iPhones:
WPTouch Plugin
iWPhone Plugin
WPtap Mobile Detector (Plugin)

32. A Couple of Odds and Ends
Make RSS Subscribe link Visible
Include Creative Commons messages at the bottom
Translation - It can be done by Machine, sometimes to
hysterical effect
Fonts from Typekit.com, etc. getting better, but stick to
headlines for the time being

33. Big Takeaways
1) Less is More

34. Big Takeaways
2) Create Hierarchies of
Information

35. Big Takeaways
3) Test, test, test!

36. Thanks!

37. David Drucker
david@drucker.ca
http://www.drucker.ca