usability schmoozability: make your website work for customers
TRANSCRIPT
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
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