better user experience for wordpress sites
DESCRIPTION
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!TRANSCRIPT
Better User Experience
for WordPress sites
WordPress Geneva | April 23, 2013 @AdamUngstad
• Senior Information Architect, Province of British Columbia (Canada)
• UX Specialist, Province of British Columbia (Canada)
• Independent UX Consultant• WordPress Developer• Author & Publisher
Adam Ungstad
WordCamp Victoria 2012
UX Romandie April 2013
User Experience
User Experience is…
“the way a person feels about using a product, system or service.”
- Wikipedia
“a person's perceptions and responses that result from the use or anticipated use of a product, system or service”
- International Standards Organization
User Experience is…
“how a person feels when interfacing with a system.”
-Smashing Magazine
User Experience is…
www.jjg.net/elements/pdf/elements.pdf
http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/
http://beep.peterboersma.com/2004/11/t-model-big-ia-is-now-ux.html
Source: http://www.flickr.com/photos/curtisperry/57104815/sizes/z/in/photostream/
Source: http://www.flickr.com/photos/khalid-almasoud/2048373700/sizes/m/in/photostream/
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 most important page on your site?
Q: What is the most important page on your site?
A: Whatever page the user lands on.
Source: http://en.wikipedia.org/wiki/Main_Page
Ever seen this before?
Navigation
4 Types:
1. Primary (menus)
2. Secondary (tags, breadcrumb, footer)
3. Inline (content)
4. Search
Vertical• Static
Primary Navigation
Primary Navigation
Vertical• Accordion
Primary Navigation
Vertical• Flyouts
Primary Navigation
Horizontal• Static
Primary Navigation
Source:
Horizontal• Dropdowns
Primary Navigation
Horizontal• Flyouts
Primary Navigation
Horizontal• Mega-
Dropdowns
Primary Navigation
Horizontal• Tabs
Static is generally best
Flyouts obscure content & are difficult to use with a mouse
Use an accordion
or
If you need 2 levels...
Use Tabs
If you need 2 levels...
Secondary Navigation
Supports Primary Navigation:• Tags• Breadcrumbs• Related Posts• Footers
Categories
Primary Topics
Tags
Secondary Topics
Tags
Use Tags to:• Link content across categories• Create an index• Help users discover what they didn’t
know they were looking for...
Secondary Navigation
Breadcrumbs
Tell users • where they are • what’s around them
1 2 3 4
Secondary Navigation
1 2 3 4
Breadcrumbs
Use them only if:• You have highly structured, layered,
deep hierarchical content.
Secondary Navigation
Footers.... don’t hold back.
Mega footers are a good thing.
Source: www.theglobeandmail.com
Source: www.lynda.com
Inline Navigation
Source: www.apple.com
Source: www.amazon.ca
Source: www.theglobeandmail.com
Q: What type of navigation do users use most?
a) Primaryb) Secondaryc) Inline
Q: What type of navigation do users use most?
a) Primaryb) Secondary
c) Inline
Making the most of inline navigation…
“Store hours are Monday 9 – 5 PM, Tuesday 9-6 PM, Wednesdays closed, Thursdays 9-9PM, Fridays 9-5PM Saturdays 10-5 PM, Sundays 12- 4PM”
Use tables to help users scan content
Use tables to help users scan content
Use tables to help users scan content
You use tables in MS Word all the time...
The standard WP Editor doesn’t support tables, but you don’t have to use HTML...
Use tables to help users scan content
Two options:
1. Change your editor(get CK Editor plugin), or
Use tables to help users scan content
Or:
2. Use an offline editor such as Windows Live Editor or Mars Edit
Use tables to help users scan content
Don’t Expect, Suggest.
v
Your Post
Related Posts
Search
Use Columns
Use Columns
Ouch!
3 is the magic number...
1 2 3
1 2 3
1 2 3
Use Contrast
Using contrast is a good thing. It helps people to read your content.
Using contrast is a good thing. It helps people to read your content.
Using contrast is a good thing. It helps people to read your content.
Default shapes for thumbnails are square:
Image Gallery Thumbnails
But think about the things you look at all day:
• Your Computer Monitor• Your TV• Your SmartPhone• Your Photographs• The windshield on your car
Image Gallery Thumbnails
Yes, they are all rectangles.
Image Gallery Thumbnails
It’s easy to change the size of the thumbnails for your galleries...
Settings Media Thumbnail Size
NOTE: this setting only applies to photos added after the setting is changed
Q: What is the easiest way to make your site look good?
Q: What is the easiest way to make your site look good?
A: Let other people do the work for 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 jquery slider, and impress your users like you want to.
Spend $3, and get the background you want so you can stop trying to design it yourself.
You have content to write!
Don’t re-invent the wheel
activeden.com
wpplugins.com
photodune.com
compfight.com
• Comfight lets you search Flickr with specific criteria on usage rights (IE Creative Commons).
• Need a picture of a garden to go with your
post? Try compfight.
Give credit where it is due.
compfight.com
• Metacontent• Readability• Contact on every page• Fonts
Content
The excerpt…. Not just for search results!
Metadata
The excerpt appears when your post is shared 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 these sentences: • Geneva is not a large city
• I don’t like the cold
• WordPress does not cost a lot of money
Readability
Use Active / Positive Tense. Change these sentences: • Geneva is not a large city
Geneva is a small city• I don’t like the cold
I like the heat• WordPress does not cost a lot of money
WordPress is affordable
Readability
Talk about what things are, not about what they aren’t.
Use white space:
• Small paragraphs• Small column widths• Bullet points, numbered lists• Subheaders• Tables
Readability
Good typography is like new paint for the walls of your living room...
It is:• inexpensive, • easy, and • it makes you look good.
Typography
The easiest way to use good fonts on your site is to use an
online 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 fine
for the body of your posts!
Online Font Services
google.com/webfonts
typekit.com
fontsquirrel.com
Put it on every page.• Good for findability• Good for SEO• Builds trust
Contact Information
This doesn’t mean put a link to your “contact us” form.
If you have an address or phone number, put it on each page. Then people know you are real.
Contact Information
• Scrolling vs Clicking• Calls to Action• Responsive Design• The Last Word
Miscellaneous
Scrolling is better because:
• It is faster• Requires less effort• Doesn’t load new pages• Mouse wheels and swipes
Scrolling vs Clicking
No one uses scroll bars anymore, because we have mouse wheels and swipes.
Don’t be afraid of long pages.
Scrolling vs Clicking
• Use High Contrast• Consider bundling products• Place them before and after the fold• Don’t interrupt a sequential process
Calls to Action
Get a Responsive theme, especially if you are using social media.
Don’t worry if your home page looks weird with it... chances are no one will see the home page anyways.
Responsive Design
The Last Word...
• Awesome• Important• Engaging• Critical• Time consuming....
User Experience is….
But don’t forget...
Content is still king.
Thank you!
@AdamUngstad