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 Designer

User Experience Expert

Usability Consultant...

“Behaviour is our Medium”*

* Robert Fabricant, Vice President of Creative, Frog DesignFrom a talk at the 2009 Interaction Design Association (IXDA)Convention in Vancouver

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.

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

Contact the Author

Search it

How Do Users:

Share/Bookmark it

Comment on Posts

Refer to Posts

Subscribe to its Feed

Topics1. 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

Content: Readability

Typography Rules

webtypography.net

Key Chapters2.1.2 Choose a comfortable measureAnything 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 }

Key Chapters2.2.1 Choose a basic leading that suits the typeface, text and measureVertical 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:

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

The wp-Typography PluginHyphenation

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)

Content: AudioPros:

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:

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

MetadataAuthor BylineDo you need one?Are there guest authors on the blog?

Date/TimeDo 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?

MetadataTags - 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.

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.)

NavigationIn 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

NavigationBreadcrumbs

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.

SearchInclude 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)

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 (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

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

ContactOptions

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>

Comments and Contact FormFollow 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

ColoursLink 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!

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 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

020406080

100120140160180

Cats DogsMonkeys

Ferrets 020406080

100120140

0 50 100

No. users

Entries per yr

Visually Impaired Users

Reader Software

Convert your Blog to Audio:

odiogo.com

ispeech.org

spoken-web.com (a site, not a feed or software)

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 can be done by Machine, sometimes to hysterical effect

Fonts from Typekit.com, etc. getting better, but stick to headlines for the time being

Big Takeaways

1) Less is More

Big Takeaways

2) Create Hierarchies of Information

Big Takeaways

3) Test, test, test!

Thanks!

David Druckerdavid@drucker.ca

http://www.drucker.ca