making your website sing!
DESCRIPTION
Engaging users through good usability, design, presentation, and storytelling.TRANSCRIPT
![Page 1: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/1.jpg)
![Page 2: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/2.jpg)
Making Your Website Sing! Engaging users through good usability, design,
presentation, and storytelling.
![Page 3: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/3.jpg)
Embolden
An award-winning web development, design and online communications strategy firm.
• Nonprofits and Community Foundations
• Professional Services
• Financial Sector
![Page 4: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/4.jpg)
How many…?
![Page 5: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/5.jpg)
Online communication channels
![Page 6: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/6.jpg)
• Do you have a strategic plan or road map?
• Who is your audience?
• What are your goals?
• What is our criteria for success?
• Do you know how you will move people to act?
• Can we measure our success?
• What online channels can we use to meet our goals?
Online Communications Strategy
![Page 7: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/7.jpg)
Traffic & Engagement
![Page 8: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/8.jpg)
Engagement is Action
• To comment, reply, share
• To donate
• To get involved
• To volunteer
• To feel something
• To act
Move People!
![Page 9: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/9.jpg)
Usability: The Good,
The Bad,
and The Ugly...
What is Usability?
![Page 10: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/10.jpg)
As defined most succinctly by Usability.gov
Usability “refers to how well users can learn and use a product [or a website] to achieve their goals and how satisfied they are with that
process.”
![Page 11: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/11.jpg)
Usability is everywhere
Via: http://www.flickr.com/photos/paulsherman/
![Page 12: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/12.jpg)
Usability is everywhere
![Page 13: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/13.jpg)
Usability: The Bad is The Ugly
Fabric Land
• Where do I look?• What do they want me to do?• How do I buy?• I see people, squished people.• Where are the fabrics?• Is there a brick & mortar store?
![Page 14: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/14.jpg)
Usability: The Bad is The Ugly
Yvette’s Bridal (with sound)
• Where do I look?• What’s that noise?• How do I turn it off?• Why can’t I turn it off?• Is that an airplane?• Enter Yvette’s?! Didn’t I do that already?• Should I enter or check the glamorous models that seem so important?• This page scrolls on and on, in both directions!
![Page 15: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/15.jpg)
Usability: The Bad is The Ugly
How about a news site?
HavenWorks
![Page 16: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/16.jpg)
Usability:
CFFC
Remember this style?
• Organized. • It could be a lot worse.• It could be a lot better.
![Page 17: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/17.jpg)
Ok.
But those sites are really old.
We know better.
![Page 18: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/18.jpg)
Usability: The Bad is The Ugly
Can You Tell Who's Site??
• Do you know what to do?• Where to go?• How to find anything?• Which video is playing?
• What’s the giant + in footer for?
![Page 19: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/19.jpg)
Usability: Design does not equal good usability
Brill Publications
• Highly designed• Easy on the eye doesn’t equal easy on the brain• Where to click?• Difference between riding the lift and quickstart lift?• Become a member of what?• Meaningless terms in navigation• Non-clickable areas• The Issue: what is it?• The Issue: too many options
![Page 20: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/20.jpg)
Ok.
Those were highly designed, but not good usability.
Again, we know better.
![Page 21: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/21.jpg)
.
![Page 22: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/22.jpg)
Users coming to your site via search are looking
to find something or do something.
Usability: There’s not much time
• They’ll visit up to 3 sites.• 25% land on the homepage (and spend 25 seconds)• 75% will land on a page other than the homepage (and spend 47 seconds)
• 1:42 on sites where they moved on• 2:34 on final site for a task
Source: Nielsen Norman Group
Total time on site:
![Page 23: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/23.jpg)
Usability: The Good
Apple
• Few choices to make
• Clean and simple navigation
• Scannable
• Organized
• Most important item takes up the most
real estate
• Callouts for other features
• Search
![Page 24: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/24.jpg)
Jakob Nielsen: How Little Do Users Read?
“On the average Web page, users have time to read at most 28%
of the words during an average visit; 20% is more likely.”
Based on pages with approximately 600 words.http://www.useit.com/alertbox/percent-text-read.html
![Page 25: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/25.jpg)
Content is Scannable when it’s easy for the eye and brain to process.
• fewer words
• headlines, headers, and sub-headers to convey the meaning
• information-laden words at the beginning of paragraphs
• small sections
• use bullets, lists, and related images where possible
• use well-labeled tabs, accordions, and tables where appropriate
• if a lot of text is required, provide a very brief summary at the beginning
![Page 26: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/26.jpg)
Usability: The Good
Mint
• Lots of whitespace• Easy on the eye• Clear text• Scannable• Action-driven navigation• Informative tagline• Options and callouts, but not too many• Preview of what’s inside•Informative tag line
![Page 27: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/27.jpg)
Jakob Nielsen: The F-Shaped Pattern
Not only do we know what users
read, we know how they read it.
Eyetracking studies show web users
scan content in an F-pattern.
Alertbox: F-Shaped PatternUseit.com: Eyetracking Overview
![Page 28: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/28.jpg)
Content Writing:Scan this Page
Krug: Chapter Two
• Part of a long text, but highly
scannable
• Informative headers
• Short paragraphs
• Bullets and bold text
• Possible to scan and get the
meaning of the chapter in a few
seconds.
![Page 29: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/29.jpg)
Usability: Key Ingredients
![Page 30: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/30.jpg)
Homepage Content: Just Say No!• You are the curator of your site.
• Keep things organized.
• Don’t get wordy.
• Does the new content fit into one of the
main buckets on the homepage? If not, it
probably belongs elsewhere.
• Work with the homepage design, not
against it.
• Learn to say no.
![Page 31: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/31.jpg)
Steve Krug on content:
“People are not going to read
very much on your home
page; they just want the gist
in a short sentence or two.”
Common sense web design
![Page 32: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/32.jpg)
Usability: The Good
Lance Armstrong Foundation
• Very action-oriented
• Clear calls to action
• Clear navigation
• Chunked content
• Weighted design
• Lots of whitespace
•Could improve link styling
![Page 33: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/33.jpg)
The good.
![Page 34: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/34.jpg)
Usability: The Good
CNN – News redux
• Entire page in chunks
• Option to select Edition
• Update timestamp
• User feedback solicited on all pages
• Videos clearly indicated
• Editor’s Choice: sorting options and
scroll options
![Page 35: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/35.jpg)
2007 2009
![Page 36: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/36.jpg)
Usability: The Good
The Silk Road Project
• Well-organized
• Clean and simple navigation
• Scannable
• Callouts for other features
• User-controls for slideshow
• Search
• Support for languages
![Page 38: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/38.jpg)
Usability: The Good
Nike
• Search field is giant and clear
• Results sorted and filtered
• # of items and pagination
![Page 39: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/39.jpg)
Ford Foundation - Beta
• Video central – but does not autoplay• User controls are visible• Scannable & Focused• Grants & Fellowships navigation has been better-highlighted• Clean navigation• Use of color• Mega Menu
Usability: Design can enhance usability
![Page 40: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/40.jpg)
Ford Foundation - Beta
•Mega Menu
“Keep the navigation in the same place on every page, so I don't have to go looking for it.”
- Steve Krug
Usability: Design can enhance usability
![Page 41: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/41.jpg)
Usability: Design can enhance usability
White House
• Before and after the Inauguration Jan 20, 2009
![Page 42: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/42.jpg)
Silverback (Mac UX Testing App)
• Designed• Scannable & Focused• Clear actions• Flow leads the user through the page• Hits all of the main points
Usability: Design can enhance usability
![Page 43: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/43.jpg)
Usability: Design does not equal good usability
Donors Choose
• Designed• Callouts• Calls to action front and center• But how do blocks relate to each other?• What does Donors Choose do?• Scannable?• Comments way off to the side
![Page 44: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/44.jpg)
But my page can’t look like Apple; I have a lot of content!
What do I put on the homepage?
![Page 45: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/45.jpg)
Usability: The Good
W.K.Kellogg Foundation
• Engagement messages with big photos and headlines• Navigation and user controls• User-targeted navigation• Clear visual layout and heirarchy• Search suggestions (try it!)
![Page 46: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/46.jpg)
I have too much stuff on my site.
What do I say and how do I say it?
![Page 47: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/47.jpg)
Janice Redish on Writing Content:
People come to websites for the content that they think (or hope) is there. They want information that:
• Answers a question or helps them complete a task
• Is easy to find and easy to understand
• Is accurate, up to date, and credible
Letting Go of the Words, Chapter One
![Page 48: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/48.jpg)
Janice Redish on Writing Content:
Good web writing:
• is like a conversation• answers people’s questions• lets people grab and go
Letting Go of the Words, Chapter One
![Page 49: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/49.jpg)
Content Writing:
Mint
• Large, informative headlines and headers
• Bite-size chunks for grab and go
• Answers questions
• Very easy to read
• Callouts
• Tools
• Related Tutorials
![Page 50: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/50.jpg)
Content Writing:
CNN.com
• Large, informative headline
• Bulleted summary – Highlights
• Brief paragraphs
• Usability: related video, related
topics, recommendations
![Page 51: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/51.jpg)
Content: Organize & Be Concise
The RI Foundation
• Use accordions with tables to
present only the information the user
needs
![Page 52: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/52.jpg)
• Be concise
• Answer questions
• Use short paragraphs for grab and go reading
• Remember the F-Pattern
• Write descriptive headlines and sub-headers using informative keywords
• Summarize
• Avoid marketing-ese and jargon
Write Better Content
![Page 53: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/53.jpg)
Storytelling
![Page 54: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/54.jpg)
Storytelling: A picture’s worth a thousand words.
NY Times One in 8 Million
![Page 55: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/55.jpg)
Storytelling: A picture’s worth a thousand words.
Gates Foundation
• Gates Foundation homepage• Annual Report
![Page 56: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/56.jpg)
Why tell stories?
![Page 57: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/57.jpg)
What Donors Want
Content is the most important consideration when making an online donation.
Information important to online donors:
• The organization’s mission, goals, objectives, and work. (This is 3.6 times more important as the organization’s presence in the user’s own community.)
• How it uses donations and contributions.
Alertbox: Donation Usability StudyMarch 30, 2009
![Page 58: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/58.jpg)
Measure!
![Page 59: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/59.jpg)
Usability pays off
MetricAverage
Improvement
Sales /Conversion 87%
Traffic/Visitors 96%
User Productivity 119%
Use of Specific Features 223%
Source: Nielsen Norman Group, 2009
![Page 60: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/60.jpg)
Measure it!
• Google analytics
• Feedburner
• Swix, Scout Labs (social)
• Bit.ly
• ClickTale
• Crazy Egg
• Eyetools
• Loop 11
• Silverback (mac)
• UserZoom
• Etc.
![Page 61: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/61.jpg)
Gurus & Blog Resources
• Jakob Nielsen: http://www.useit.com/
• Steve Krug: http://www.sensible.com
• Jesse James Garrett: http://blog.jjg.net/
• UX Booth
• Bokardo – Social Web Design
• Everyday UX
• UIE Brain Sparks
• Good Experience
• Usability Post
• Boxes and Arrows – IA and Design
![Page 62: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/62.jpg)
References• Alertbox: How little do users read?• Alertbox: Donation Usability Study• Alertbox: F-Shaped Pattern• Alertbox: Microcontent• Alertbox: How to Write for the Web• Apple• Barackobama.com• Brill Publications• Crispin Porter + Bogusky• Community Foundation of Frederick County• CNN.com• Donors Choose• Don’t Make Me Think• Embolden• Fabric Land• Ford Foundation• Ford Foundation Beta• Gates Foundation• Google• Google: 5 Objectives of Website Copy
• HavenWorks• Kellogg Foundation• LIVESTRONG• Mint• The New York Times• Nike• Paul Sherman (photo credit)• The Rhode Island Foundation• Janice Redish: Letting Go of the Words• The Silk Road Project• Silverback• Steve Krug: Advanced Common Sense• Steve Krug Interview• Usability.gov • Useit.com: Eyetracking Overview• White House• Yvette’s Bridal
![Page 63: Making Your Website Sing!](https://reader035.vdocuments.mx/reader035/viewer/2022062617/54c83bd64a7959d54e8b459f/html5/thumbnails/63.jpg)
Thank you.