Better User Experience for WordPress Sites

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