Making Your Website Sing!

Making Your Website Sing! Engaging users through good usability, design,

presentation, and storytelling.

Embolden

An award-winning web development, design and online communications strategy firm.

• Nonprofits and Community Foundations

• Professional Services

• Financial Sector

How many…?

Online communication channels

• 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

Traffic & Engagement

Engagement is Action

• To comment, reply, share

• To donate

• To get involved

• To volunteer

• To feel something

• To act

Move People!

Usability: The Good,

The Bad,

and The Ugly...

What is Usability?

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.”

Usability is everywhere

Via: http://www.flickr.com/photos/paulsherman/

Usability is everywhere

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?

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!

Usability: The Bad is The Ugly

How about a news site?

HavenWorks

Usability:

CFFC

Remember this style?

• Organized. • It could be a lot worse.• It could be a lot better.

Ok.

But those sites are really old.

We know better.

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?

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

Ok.

Those were highly designed, but not good usability.

Again, we know better.

.

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:

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

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

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

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

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

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.

Usability: Key Ingredients

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.

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

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

The good.

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

2007 2009

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

Awareness Test

Usability: The Good

Nike

• Search field is giant and clear

• Results sorted and filtered

• # of items and pagination

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

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

Usability: Design can enhance usability

White House

• Before and after the Inauguration Jan 20, 2009

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

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

But my page can’t look like Apple; I have a lot of content!

What do I put on the homepage?

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!)

I have too much stuff on my site.

What do I say and how do I say it?

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

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

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

Content Writing:

CNN.com

• Large, informative headline

• Bulleted summary – Highlights

• Brief paragraphs

• Usability: related video, related

topics, recommendations

Content: Organize & Be Concise

The RI Foundation

• Use accordions with tables to

present only the information the user

needs

• 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

Storytelling

Storytelling: A picture’s worth a thousand words.

NY Times One in 8 Million

Storytelling: A picture’s worth a thousand words.

Gates Foundation

• Gates Foundation homepage• Annual Report

Why tell stories?

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

Measure!

Usability pays off

MetricAverage

Improvement

Sales /Conversion 87%

Traffic/Visitors 96%

User Productivity 119%

Use of Specific Features 223%

Source: Nielsen Norman Group, 2009

Measure it!

• Google analytics

• Feedburner

• Swix, Scout Labs (social)

• Bit.ly

• ClickTale

• Crazy Egg

• Eyetools

• Loop 11

• Silverback (mac)

• UserZoom

• Etc.

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

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

Thank you.