An introduction to a handful of universal principles of User Experience (UX) design with tips on how to implement them on a WordPress site. Many of the ideas are easy to implement and will be useful for any site really - large or small, wordpress or not.
Presented to the WordPress Geneva group on April 23, 2013. Thanks & enjoy!
The Elements of User Experience Design by Jesse James Garrett
User Experience adds value to products and services.
Better User Experience for WordPress Sites
BetterUser Experiencefor WordPress sitesWordPress Geneva | April 23, 2013@AdamUngstad
• Senior Information Architect, Province ofBritish Columbia (Canada)• UX Specialist, Province of British Columbia(Canada)• Independent UX Consultant• WordPress Developer• Author & PublisherAdam Ungstad
2012, 2013EuroIA - Edinburgh Sept 26-28WordCamp Victoria 2012UX Romandie April 2013
Good UX Helps Users...• Find what they came for• Complete tasks quickly• Understand primary content• Discover related content• Navigate across channels• Recall content later• Feel that they got what they came for
A Few UX Methods• Content Inventory• Card Sorting• Contextual Inquiry• Diary Studies• Personas• Scenarios• Co-Design Studios• A / B Testing
A Few UX Deliverables• Site Maps• Wireframes• Wireflows• Storyboards• Journey maps• Functional Specifications• Prototypes• Design Guidelines
UX takes a lot of work!But there are some ‘universal’principles and patterns.
Q: What is the mostimportant page on your site?
Q: What is the mostimportant page on your site?A: Whatever page the user landson.
Source: http://en.wikipedia.org/wiki/Main_PageEver seen this before?
Use ContrastUsing contrast is a good thing. It helpspeople to read your content.Using contrast is a good thing. It helpspeople to read your content.Using contrast is a good thing. It helpspeople to read your content.
NOTE: this setting only appliesto photos added after the settingis changed
Q: What is the easiest way tomake your site look good?
Q: What is the easiest way tomake your site look good?A: Let other people do the workfor you.
This doesn’t mean you should hire expensive:• graphic designers• photographers• flash developers• UX Designers(well, maybe UX designers... ;-)Don’t re-invent the wheel
You bought a premium theme for $30.For a couple dollars more you can buy:• fancy sliders• icons & backgrounds• stock photos• Responsive plugins• anything you need really!Don’t re-invent the wheel
Spend $20, get that responsive jqueryslider, and impress your users like you wantto.Spend $3, and get the background you wantso you can stop trying to design it yourself.You have content to write!Don’t re-invent the wheel
• Comfight lets you search Flickr with specificcriteria on usage rights (IE CreativeCommons).• Need a picture of a garden to go with yourpost? Try compfight.Give credit where it is due.compfight.com
• Metacontent• Readability• Contact on every page• FontsContent
The excerpt…. Not just for search results!Metadata
The excerpt appears when your post isshared on social networks.Metadata
Always, Always, Always...1. Have a relevant image with your post.2. Write a good excerpt.Metadata
Readability is more than“write at a grade 8 reading level”Readability
Use Active / Positive Tense. Change thesesentences:• Geneva is not a large city• I don’t like the cold• WordPress does not cost a lot of moneyReadability
Use Active / Positive Tense. Change thesesentences:• Geneva is not a large cityGeneva is a small city• I don’t like the coldI like the heat• WordPress does not cost a lot of moneyWordPress is affordableReadability
Talk about what things are,not about what they aren’t.
Use white space:• Small paragraphs• Small column widths• Bullet points, numbered lists• Subheaders• TablesReadability
Good typography is like new paint for thewalls of your living room...It is:• inexpensive,• easy, and• it makes you look good.Typography
The easiest way to use good fontson your site is to use anonline service.
• You (usually) pay a small fee• You drop some code into your header• You can use all kinds of cool fonts.• Don’t go too crazy however. Arial is finefor the body of your posts!Online Font Services