@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