Usability Schmoozability: Make your website work for customers
-
Upload
kristin-kinnamon -
Category
Technology
-
view
57 -
download
0
Transcript of Usability Schmoozability: Make your website work for customers
![Page 1: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/1.jpg)
Usability Schmoozability
5 tips to make your website work for customers
Kristin Kinnamon
WordCamp Seattle 2016
![Page 2: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/2.jpg)
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”
![Page 3: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/3.jpg)
How Changing a Button
Increased a Site’s Annual
Revenues by $300 Million
- Jared Spool
![Page 4: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/4.jpg)
Technology keeps changing
Business phone Business website
![Page 5: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/5.jpg)
A good website is not about
technology.
Sorry
A good website
is about people
![Page 6: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/6.jpg)
Schmooze Rule #1:
Put people first
1.Get to know your customers
2.Identify their needs & wants
3.Satisfy them
4.Keep paying attention
![Page 7: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/7.jpg)
![Page 8: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/8.jpg)
Google Analytics: Top sections
![Page 9: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/9.jpg)
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
![Page 10: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/10.jpg)
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?
![Page 11: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/11.jpg)
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
![Page 12: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/12.jpg)
Most
popular
page of
the site
![Page 13: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/13.jpg)
Results 43% increase
in equipment
revenue
66% increase
in donations
10% decrease
in bounce rate
![Page 14: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/14.jpg)
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
![Page 15: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/15.jpg)
Usability Schmoozability
1. Put people first
2.Content matters
3. Don’t force it
4. Be like the 99%
5. Make it accessible
![Page 16: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/16.jpg)
Start with content, not layout
![Page 17: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/17.jpg)
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
![Page 18: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/18.jpg)
Re-purposing
designs is
possible …
But it takes extra
money and time
Anderson
School in
Bothell is now
a McMenamin’s
Gas station restaurant
![Page 19: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/19.jpg)
Write your content as a
conversation with the customer
Answer their questions - directly
Talk to them directly – “you”
Use everyday language – not legalese
![Page 20: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/20.jpg)
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
![Page 21: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/21.jpg)
User-focused content
Not flashy, but focused
on exactly what citizens
actually want to know
Examples from the National Assoc.
of Government Webmasters
![Page 22: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/22.jpg)
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
![Page 23: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/23.jpg)
What content matters here?
![Page 24: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/24.jpg)
Usability Schmoozability
1. Put people first
2. Content matters
3.Don’t force it
4. Be like the 99%
5. Make it accessible
![Page 25: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/25.jpg)
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)
![Page 26: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/26.jpg)
Usability Schmoozability
1. Put people first
2. Content matters
3. Don’t force it
4.Be like the 99%
5. Make it accessible
![Page 27: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/27.jpg)
![Page 28: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/28.jpg)
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
![Page 29: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/29.jpg)
Usability Schmoozability
1. Put people first
2. Content matters
3. Don’t force it
4. Be like the 99%
5.Make it accessible
![Page 30: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/30.jpg)
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
![Page 31: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/31.jpg)
A picture is worth a 1,000 words
When you can see it
![Page 32: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/32.jpg)
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
![Page 33: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/33.jpg)
Right format
Don’t use images
for text
Be purposeful
with PDFs
Use tables for
data, not design
![Page 34: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/34.jpg)
Using color
Minimum
contrast?
Don’t use
color as the
sole means
of conveying
information.
WebAIM.org color checker
![Page 35: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/35.jpg)
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
![Page 36: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/36.jpg)
Your website visitors
are like cats
https://www.youtube.com/watch?v=dln9xDsmCoY
![Page 37: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/37.jpg)
Usability Schmoozability
1. Put people first
2. Content matters
3. Don’t force it
4. Be like the 99%
5. Make it accessible
![Page 38: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/38.jpg)
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
![Page 39: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/39.jpg)
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
![Page 40: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/40.jpg)
Kinnamon Communications
Kristin Kinnamon
425-923-7868
Website consulting, content & usability
for local government & nonprofits
Good Government, Good Websites
![Page 41: Usability Schmoozability: Make your website work for customers](https://reader033.fdocuments.net/reader033/viewer/2022042722/589c0c371a28ab4f598b6f71/html5/thumbnails/41.jpg)
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