View
5.949
Download
0
Category
Preview:
DESCRIPTION
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.
Citation preview
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 += '@' + 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!
Recommended