Post on 28-Jan-2015
description
transcript
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
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.