usability schmoozability: make your website work for customers

Usability Schmoozability

5 tips to make your website work for customers

Kristin Kinnamon

WordCamp Seattle 2016

Definition of Usability

can figure out how to use the thing

to accomplish some desired goal

without it being more trouble than it’s worth

Something is usable if a person:

Steve Krug, “Don’t Make Me Think”

How Changing a Button

Increased a Site’s Annual

Revenues by $300 Million

- Jared Spool

Technology keeps changing

Business phone Business website

A good website is not about

technology.

Sorry

A good website

is about people

Schmooze Rule #1:

Put people first

1.Get to know your customers

2.Identify their needs & wants

3.Satisfy them

4.Keep paying attention

Google Analytics: Top sections

Incoming phone calls

Bridge staff tracked calls for one week:

Equipment availability 17

Equipment accepted 4

Equipment donation pickup/process 5

Directions to Mobility Center 2

Bridge user needs and wants

I want to donate equipment. Where are you?

I need medical equipment. What do you have?

I want to find out about upcoming events.

What’s new?

Bridge business goals for site

Increase financial

donations through website

Attract more volunteersMake it easier to donate

medical equipment

Increase visibility of Bridge

programs and partnerships

Most

popular

page of

the site

Results 43% increase

in equipment

revenue

66% increase

in donations

10% decrease

in bounce rate

People first: Do user research

Website data shows popular pages

Search shows topics and terms

Phone calls and customer service requests

Listen, observe – interviews, research

Usability Schmoozability

1. Put people first

2.Content matters

3. Don’t force it

4. Be like the 99%

5. Make it accessible

Start with content, not layout

Plan for content

Contact information, hours, directions.

Don’t forget this.

What will be updated frequently?

How will people know?

How will it display on different devices?

What is most important?

Remember, not everyone sees the home page

Re-purposing

designs is

possible …

But it takes extra

money and time

Anderson

School in

Bothell is now

a McMenamin’s

Gas station restaurant

Write your content as a

conversation with the customer

Answer their questions - directly

Talk to them directly – “you”

Use everyday language – not legalese

Our Vision

Whether it's recyclables that

we can use again, yard waste

that we can turn into mulch,

or items we haul to the

landfill, we are always looking

for ways to keep the Bluegrass

beautiful. Our work is not just

about getting rid of things, it's

about Lexington's quality of

life, its health, and the look

of our community.

Waste Management page

User-focused content

Not flashy, but focused

on exactly what citizens

actually want to know

Examples from the National Assoc.

of Government Webmasters

Usable content = readable text

LIMIT ALL CAPS, red text

Centered text slows reading

Size matters – small text makes me leave

Use headings – they provide structure, support

scanning, improve SEO, add accessibility

What content matters here?

Usability Schmoozability

1. Put people first

2. Content matters

3.Don’t force it

4. Be like the 99%

5. Make it accessible

Don’t force users to:

Register first (see $300 billion button)

Open a new window

Download a full document when a summary will do

Scrolling is OK (within limits)

Usability Schmoozability

1. Put people first

2. Content matters

3. Don’t force it

4.Be like the 99%

5. Make it accessible

Website design recommendations

Logo top left – links to Home

Main menu across the top

Search, shopping cart top right

Describe what you do – above the fold

Link style, visited links

Footer – contact info, social media

Usability Schmoozability

1. Put people first

2. Content matters

3. Don’t force it

4. Be like the 99%

5.Make it accessible

Basic accessibility

1. Images – with “alt text”

2. Use appropriate format

3. Color – contrast, not sole means of communicating

4. Keep It Simple – avoid clutter, fancy features

A picture is worth a 1,000 words

When you can see it

Alt TextText is read by assistive

technology and

displayed in browsers

when loading.

Good text describes

content, function.

Don’t duplicate “alt” and

“title” text

Right format

Don’t use images

for text

Be purposeful

with PDFs

Use tables for

data, not design

Using color

Minimum

contrast?

Don’t use

color as the

sole means

of conveying

information.

WebAIM.org color checker

K.I.S.S. Hoquiam

http://cityofhoquiam.com/residents/forms

-bill-pay/

Cool WordPress features

and plug-ins could make

your users feel out of

control, and may not be

ADA accessible

Your website visitors

are like cats

https://www.youtube.com/watch?v=dln9xDsmCoY

Usability Schmoozability

1. Put people first

2. Content matters

3. Don’t force it

4. Be like the 99%

5. Make it accessible

Usability Resources

Nielsen Norman Group – research-based articles

The $300 Million Button – User Interface Engineering

Writing for the Web – Usability.gov

What Does Usability Mean – Whitney Quesenbery

Don’t Make Me Think – Steve Krug

Accessibility Resources

WordPress Accessibility Plugin

“WordPress Accessibility for Devs” – Mark Root Wiley

WP Devsigners presentation – Mark Root Wiley

http://a11yproject.com/

WP Theme developer handbook

Kinnamon Communications

Kristin Kinnamon

KinnaComm@gmail.com

425-923-7868

Website consulting, content & usability

for local government & nonprofits

Good Government, Good Websites

Schmooze:Making ingratiating small talk – talk that is

business oriented, designed to both provide

and solicit personal information but avoids

overt pitching.

- Urban Dictionary

To chat in a friendly and persuasive manner

especially so as to gain favor, business, or

connections.

- - Merriam Webster