Easy User Exerpience Improvements for Your WordPress Site - Make Your Site Easier to Use and...
112
@AdamUngstad Easy User Experience Improvements for your WordPress Site @AdamUngstad
description
A collection of simple and practical ways to make improvements to your WordPress Sites. Anyone with a website really will be ab
Transcript of Easy User Exerpience Improvements for Your WordPress Site - Make Your Site Easier to Use and...
@AdamUngstad
EasyUser ExperienceImprovements
for your WordPress Site
@AdamUngstad
@AdamUngstad
About Me
• In various IT roles for 10 years• Photographer•Writer – Poetry & Non-Fiction• Freelance WordPress work in
2011
@AdamUngstad
Living Water Smart
@AdamUngstad
What is User Experience?
“the way a person feels about using a product, system
or service.” - Wikipedia
@AdamUngstad
What is User Experience?
"a person's perceptions and responses that result from
the use or anticipated use of a product, system or service”
- ISO 9421-210
@AdamUngstad
What is User Experience?
“how a person feels when interfacing with a system.”
- Smashing Magazine
@AdamUngstad
The Original Elements
Source: www.jjg.net/elements/pdf/elements.pdf
@AdamUngstad
The Boersma T-model
Source: http://beep.peterboersma.com/2004/11/t-model-big-ia-is-now-ux.html
@AdamUngstadSource: http://www.flickr.com/photos/curtisperry/57104815/sizes/z/in/photostream/
@AdamUngstadSource: http://www.flickr.com/photos/khalid-almasoud/2048373700/sizes/m/in/photostream/
@AdamUngstad
User Experience
adds VALUE
@AdamUngstad
Good UX Helps Users...• Find what they came for• Discover related content• Complete tasks quicker• Understand content• Navigate on different platforms
@AdamUngstad
UX Deliverables
• User Research / Testing• Personas, Use Cases•Wireframes• Prototypes• Journey Maps
@AdamUngstad
Easy UX for WordPress
• Navigation• Visual Elements• Content•Miscellaneous
@AdamUngstad
Q: What is the most
important page on your site?
@AdamUngstad
A: Whatever page the user lands on.
Most users arrive at a page within a site, rather than the home page.
@AdamUngstadSource: http://en.wikipedia.org/wiki/Main_Page
Ever seen this before?
@AdamUngstad
Navigation
4 Types:1. Primary (menus)
2. Secondary (tags, breadcrumb, footer)
3. Inline (content)
4. Search
@AdamUngstad
Primary Navigation
Vertical• Static
@AdamUngstad
Primary Navigation
Vertical• Accordion
@AdamUngstad
Primary Navigation
Vertical• Flyouts
@AdamUngstad
Primary Navigation
Horizontal• Static
@AdamUngstad
Primary Navigation
Source:
Horizontal• Dropdowns
@AdamUngstad
Primary Navigation
Horizontal• Flyouts
@AdamUngstad
Primary Navigation
Horizontal• Mega-Dropdowns
@AdamUngstad
Primary Navigation
Horizontal• Tabs
@AdamUngstad
Static is generally best
@AdamUngstad
Flyouts obscure content
@AdamUngstad
Use an accordion
or
If you need 2 levels...
@AdamUngstad
Use Tabs
If you need 2 levels...
@AdamUngstad
Secondary Navigation
Supporting Primary Navigation:• Tags• Breadcrumbs• Footers
@AdamUngstad
Secondary Navigation
Categories Tags
Primary Subject Secondary Subject
@AdamUngstad
Secondary NavigationUse Tags to:• Link content across categories• Create an index• Help users discover what they
didn’t know they were looking for...
@AdamUngstad
Secondary Navigation
Breadcrumbs
Tell users •where they are •what’s around them
1 2 3 4
@AdamUngstad
Secondary Navigation
Breadcrumbs
Use them only if:• You have highly structured,
layered, hierarchical content.
1 2 3 4
@AdamUngstad
Secondary Navigation
Footers.... don’t hold back.
Mega footers are a good thing.
@AdamUngstadSource: www.theglobeandmail.com
@AdamUngstadSource: www.lynda.com
@AdamUngstad
Inline Navigation
@AdamUngstadSource: www.apple.com
@AdamUngstadSource: www.amazon.ca
@AdamUngstadSource: www.theglobeandmail.com
@AdamUngstad
Q: What do users use most?
a) Primaryb) Secondaryc) Inline
@AdamUngstad
Q: What do users use most?
a) Primaryb) Secondary
c) Inline
@AdamUngstad
Easy Inline Navigation
on Your Home Page....
@AdamUngstad
1) Create a Sticky Post
@AdamUngstad
2) Use Tables for layout
You use tables in MS Word all the time...
@AdamUngstad
2) Use Tables for layout
The standard WP editor doesn’t support tables, but you don’t have to use HTML...
@AdamUngstad
2) Use Tables for layout Two options: 1. Change your editor
(get Ultimate Tiny MCE plugin), or
2. Use an offline editor such as Windows Live Editor
@AdamUngstad
Don’t Expect, Suggest.
v
Your Post
Related Posts
@AdamUngstad
Search
@AdamUngstad
Next up....
• Navigation• Visual Elements• Content•Miscellaneous
@AdamUngstad
Visual Elements• Columns• Contrast• The Magic Number• Thumbnails• Fonts
@AdamUngstad
Use Columns
@AdamUngstad
Use Columns
@AdamUngstad
Ouch!
@AdamUngstad
@AdamUngstad
3 Is the magic number...
@AdamUngstad
@AdamUngstad
1 2 3
@AdamUngstad
@AdamUngstad
1 2 3
@AdamUngstad
@AdamUngstad
1 2 3
@AdamUngstad
ContrastUsing contrast is a good thing. It helps people to read your content. Not everyone sees as well as you do.
Using contrast is a good thing. It helps people to read your content. Not everyone sees as well as you do.
@AdamUngstad
Gallery ThumbnailsDefault sizes are square:
@AdamUngstad
Gallery ThumbnailsBut think about the things you look at all day: • Your Computer Monitor• Your TV• Your Paintings / Pictures
@AdamUngstad
Gallery ThumbnailsYes, they are all rectangles.
@AdamUngstad
@AdamUngstad
It’s easy to change the size of the thumbnails for your galleries...
@AdamUngstad
Settings -> Media
@AdamUngstad
Note:This setting
only applies to photos you add
after the setting is changed.
@AdamUngstad
This next one is important...
@AdamUngstad
What is the easiest way
to make your site
look good?
@AdamUngstad
Let other people do the work for you.
Don’t re-invent the wheel!
@AdamUngstad
Don’t re-invent the wheelThis doesn’t mean you should hire expensive: • graphic designers• photographers• flash developers• UX Designers (well, maybe UX designers... ;-)
@AdamUngstad
Don’t re-invent the wheelJust as you bought a premium theme for $30. For a couple dollars more you can buy: • fancy sliders• icons & backgrounds• stock photos• anything you need really!
@AdamUngstad
Don’t re-invent the wheelSpend $20, get the superduper flash 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!
@AdamUngstad
activeden.com
@AdamUngstad
wpplugins.com
@AdamUngstad
photodune.com
@AdamUngstad
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.
@AdamUngstad
compfight.com
@AdamUngstad
Next up....
• Navigation• Visual Elements• Content•Miscellaneous
@AdamUngstad
Content•Metacontent• Readability• Contact on every page• Fonts
@AdamUngstad
MetacontentNot just for search engines... Your WP Excerpt:
@AdamUngstad
MetacontentShows up when people share with their networks.
@AdamUngstad
MetacontentAlways, Always, Always... 1. Have a relevant image with
your post.2. Write a good excerpt.
@AdamUngstad
Readability
Readability is more than “write at a grade 8 reading level”
@AdamUngstad
Readability
Use Active / Positive Tense. Change: • Victoria is not a large city
• I don’t like the cold
@AdamUngstad
Readability
Use Active / Positive Tense.Change: • Victoria is not a large city• Victoria is a small city
• I don’t like the cold• I like it when it is warm
@AdamUngstad
Talk about what things are
not what they are not.
@AdamUngstad
Readability
Use white space: • Small paragraphs• Small column widths• Bullet points, numbered lists• Subheaders• Tables
@AdamUngstad
FontsGood fonts are like new paint for the walls of your living room...
They are inexpensive, easy, and they make you look good.
@AdamUngstad
The easy way to use good fonts on
your site....
@AdamUngstad
... Is to use an online web font service.
@AdamUngstad
Web Fonts
• 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!
@AdamUngstad
google.com/webfonts
@AdamUngstad
typekit.com
@AdamUngstad
fontsquirrel.com
@AdamUngstad
Contact InformationPut it on every page.•Good for findability•Good for SEO•Builds trust
@AdamUngstad
Contact InformationThis 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.
@AdamUngstad
Next up....
• Navigation• Visual Elements• Content•Miscellaneous
@AdamUngstad
Miscellaneous• Scrolling vs Clicking•Mobile• The Last Word
@AdamUngstad
Scrolling vs ClickingScrolling is better because:
• It is faster• Requires less effort• Doesn’t load new pages• Mouse wheels and swipes
@AdamUngstad
Scrolling vs ClickingNo one uses scroll bars anymore, because we have mouse wheels and swipes.
Don’t be afraid of long pages.
@AdamUngstad
MobileGet a mobile 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.
@AdamUngstad
The Last Word...
@AdamUngstad
User Experience Is:• Awesome• Important• Engaging• Critical• Time consuming....
@AdamUngstad
But don’t forget...
@AdamUngstad
Content is still king.
@AdamUngstad
Thank you!
@AdamUngstad
