User Experience Design for
Wordpress Web Sites
because Blogs are Web Sites too
by David Drucker
Who Am I & What Do I Do?
I’m a...
User Interface Architect
Information Architect
Interaction Designer
User Interface Desig...
“Behaviour is our Medium”*
* Robert Fabricant, Vice President of Creative, Frog Design
From a talk at the 2009 Interaction...
User Experi... What?
User Experience: “A person’s perceptions and
responses that result from the use or anticipated
use of...
User Experience also includes:
What You (Fondly/Bitterly) Remember
It’s Not (Just) What Theme to Choose or Tweak
Read your Blog
Listen to or watch non-text content
Navigate within it
Contac...
Topics
1. Content (Text, Audio, Video)
2. Metadata (Tags, Categories)
3. Sidebars
4. Comments
5. Search
6. Permalinks
7. F...
Content: Readability
Typography Rules
webtypography.net
Key Chapters
2.1.2 Choose a comfortable measure
Anything from 45 to 75 characters is widely regarded as a satisfactory len...
Key Chapters
2.2.1 Choose a basic leading that suits the typeface, text
and measure
Vertical space is metered in a differe...
http://blog.echoenduring.com/2010/5/13/create-beautiful-css3-typography/
The wp-Typography Plugin
Hyphenation
Straight quotes ( ' ) to curly quotes (‘ ’)
Double Hyphens -- to dashes, minus signs ...
Content: Audio
Pros:
So, until someone does an HTML5
version, include a link to the same
audio file.
Flash-based, so won’t...
Content: Video
YouTube: Flash based player,
so no good on non-Flash
devices
Vimeo: Support HTML5 video if
you get a paid s...
Metadata
Author Byline
Do you need one?
Are there guest authors on the blog?
Date/Time
Do your readers need to know the ti...
Metadata
Tags - What’s optimal number?
10-20 in the metatags, < 10 visible
Categories - don’t go crazy here either
< 20
Ke...
Sidebars
Try to avoid S.O.S. (Sidebar Overload Syndrome)
Badges
Length of items (Blogrolls, Archive listings)
Ads
Other Pa...
Navigation
In Descending Order of Usability...
Tabs
Menus
Horizontal and Vertical
Links
Drop-down menus
Horizontal Scrolli...
Navigation
Breadcrumbs
Technically a misleading term: structural or chronological?
Most breadcrumbs are structural (reflec...
Search
Include a button (return is not enough)
Search options
Wildcards, Boolean
Posts, Pages, Comments, Titles, URLs, Tag...
Permalinks
Human-friendly
Not Human-friendly
Favicons - a nice visual branding element, but
also nice for browsers that support them, as well
as other services (Facebo...
Sharing & Bookmarking
What options to support?
Delicious, Google Bookmarks, Facebook, MySpace,
Twitter, Digg, Reddit, Goog...
Contact
Options
Contact Form 7
Captcha: If you
must, keep it
simple
Mailto Link with a
script to obscure
the address from
...
Comments and Contact Form
Follow good Form Design Practices:
Labels should be near the fields they pertain to
Make clear w...
Colours
Link Colour set to... bright green? If it isn’t blue, you’re
swimming upstream.
Red = Danger
Avoid Using Colour as...
That said, I think we all have the Blues...
Information Design (Charts & Graphs)
Use the right Charts for the right
data:
Pie for percentages
Line for change over tim...
Visually Impaired Users
Reader Software
Convert your Blog to Audio:
odiogo.com
ispeech.org
spoken-web.com (a site, not a f...
Mobile Users
Plugins that reformat your Blog for iPhones:
WPTouch Plugin
iWPhone Plugin
WPtap Mobile Detector (Plugin)
A Couple of Odds and Ends
Make RSS Subscribe link Visible
Include Creative Commons messages at the bottom
Translation - It...
Big Takeaways
1) Less is More
Big Takeaways
2) Create Hierarchies of
Information
Big Takeaways
3) Test, test, test!
Thanks!
David Drucker
david@drucker.ca
http://www.drucker.ca
Upcoming SlideShare
Loading in …5
×

UX Design for Wordpress Web Sites

8,828 views

Published on

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.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,828
On SlideShare
0
From Embeds
0
Number of Embeds
4,417
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

UX Design for Wordpress Web Sites

  1. 1. User Experience Design for Wordpress Web Sites because Blogs are Web Sites too by David Drucker
  2. 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. 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. 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. 5. User Experience also includes: What You (Fondly/Bitterly) Remember
  6. 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. 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. 8. Content: Readability Typography Rules
  9. 9. webtypography.net
  10. 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. 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. 12. http://blog.echoenduring.com/2010/5/13/create-beautiful-css3-typography/
  13. 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. 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. 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. 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. 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. 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. 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. 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. 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. 22. Permalinks Human-friendly Not Human-friendly
  23. 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. 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. 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 += '@' + 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. 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. 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. 28. That said, I think we all have the Blues...
  29. 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. 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. 31. Mobile Users Plugins that reformat your Blog for iPhones: WPTouch Plugin iWPhone Plugin WPtap Mobile Detector (Plugin)
  32. 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. 33. Big Takeaways 1) Less is More
  34. 34. Big Takeaways 2) Create Hierarchies of Information
  35. 35. Big Takeaways 3) Test, test, test!
  36. 36. Thanks!
  37. 37. David Drucker david@drucker.ca http://www.drucker.ca

×