Making Your Website Sing!
Upcoming SlideShare
Loading in...5

Making Your Website Sing!



Engaging users through good usability, design, presentation, and storytelling.

Engaging users through good usability, design, presentation, and storytelling.



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Making Your Website Sing! Making Your Website Sing! Presentation 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 “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:
  • 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.
  • 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 Pattern 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:
    • 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 Study
    • March 30, 2009
    • Measure!
  • Usability pays off Source: Nielsen Norman Group, 2009 Metric Average Improvement Sales /Conversion 87% Traffic/Visitors 96% User Productivity 119% Use of Specific Features 223%
  • Measure it!
    • Google analytics
    • Feedburner
    • Swix, Scout Labs (social)
    • ClickTale
    • Crazy Egg
    • Eyetools
    • Loop 11
    • Silverback (mac)
    • UserZoom
    • Etc.
  • Gurus & Blog Resources
    • Jakob Nielsen:
    • Steve Krug:
    • Jesse James Garrett:
    • 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
    • Brill Publications
    • Crispin Porter + Bogusky
    • Community Foundation of Frederick County
    • 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
    • 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
    • Eyetracking Overview
    • White House
    • Yvette’s Bridal
  • Thank you.