Content Strategy and ROI

“How do you prove ROI of content to the boardroom,” was the question on the Content Strategy Google Group.

Before answering this question, stop and ask yourself – “What’s important to your boardroom?”  That should drive how you prove ROI.  You may think you don’t know – just look at any mission statement, marketing material, or annual report kicking around, and you’ll find your answers.

Here are examples:

  • If new prospects or customers is an objective, then look at site traffic and new visits, how many pages per visit, etc.
  • If conversion (visits –> customers, transactions) is objective, then look at how many site visits generated transactions.
  • If increased public awareness is a goal, then mentions in media / blogs, etc. would be a good indicator.
  • If SEO is a goal, then look at search rankings before / after.

If you work with a large organization, chances are they’ve tied these types of objectives to some dollar amount (e.g., attract new customers to generate revenues that push us over $1 Bn).  If you can get those numbers (or make guesses based on where company is now and just assume 10-12% growth goals), you can start to translate increased visits, new customers, conversion, etc. into dollar amounts.

“How do I check for Section 508 compliance?”

You just found out your application or website needs to be accessible and are handed a set of Section 508 standards. Where do you start? After the question came up on the IXDA discussion list recently, I realized it still seems like a scary prospect for people new to accessibility. So hopefully this will help.

Validate

It’s not a Section 508 standard, but before you do anything else, validate your code. Why? Because when assistive technologies are looking through code and trying to translate that into spoken text, Braille displays, etc., they’re trying to figure out what’s what. If you have unclosed tags, improperly nested tags, etc. they don’t know what’s what and choke. Take a listen to some bad code with JAWS (popular screen reader) – you won’t know what hit you.

There are free tools out there like the W3C Validator tool (http://validator.w3.org) and many IDEs like Dreamweaver have built in validation options. It can take a few minutes per site or page, depending on what type of site you have (content or application), and it will make a huge difference.

Content Sites

If your site contains content, which even web-based applications will, look at it in this way:

  • Navigation / links – can you reach all navigation (including nav bar menus) via the keyboard? if not, do you have landing pages that can be reached by keyboard as alternative to mouseover menus?
  • Text – if you use images for headings, nav links, etc. do you have alt attribute or text behind it (and is your image still readable when zoomed in?)
  • Headings – are they identified via <h1>, <h2>, etc.? That helps people jump to different parts of the document and bypass nav menus
  • Tables of data – do you have table headers identified with <th> (CSS classes like “heading” etc. aren’t enough)
  • CSS for general site and content layout, not a table-based layout - and following on tables, imagine hearing there are 10 tables on a page? or checking to see if your tables are used for data and need <th> tags? If the web standards mavens haven’t convinced you to go with CSS, run your page through Fangs (mentioned below) or JAWS and maybe that will convince you! “3 tables…table with 1 column and 20 rows…table with 3 columns and 18 rows” (and nothing contains any data worthy of a table! ugh)
  • Search, contact fields – when you have form elements, do you use label tags or title attribute to provide labels? (preferrably visible onscreen to help all visitors) if you have drop-down menus, can users select from them and then select the action (e.g., select a category, then click Go; vs. automatically moving to another place as they select)
  • Unique labels for documents – if you have PDFs and other doc lists, are the links or icons labeled with unique on-screen text (preferrably) or title attribute (so someone using screen reader doesn’t har “PDF PDF PDF” etc.)

Web-based Applications

If the site’s a web-based app, forms and tables for presenting record/data collections are usually more of the beast. You’ll want to check items above, and then really go deep into the forms, checking that:

  • <label> tags are used, preferrably explicitly (e.g., <label for=”idforfield”>labelname</label><input id=”idforfield”>…
  • <fieldset> and <legend> are used with groupings of related fields (e.g., multiple parts to an address block, phone numbers with extensions, etc.)
  • Error messages and feedback can be communicated to users, possibly via <span> tags within the <label> tags (set span to hidden when there’s no error message, and then set to visible when there’s an error so it’s picked up by assistive technology)
  • Any data-dependent items (e.g., lists refresh based on selection)? is the change downstream?
  • You’ve used CSS for laying out forms, rather than using a table-driven layout
  • If you’re using AJAX and other RIA components, and want to know about ARIA, well, that can cover several posts or a full-day tutorial! (talk to me)

There’s more (e.g., image maps, frames, etc.), but the above covers most of the usual problems.

Favorite Plugins & Tools

Firefox is great if you have the flexibility to use it for checking pages. Here’s a list of my favorite plugins…

The Opera browser’s great for checking accessibility too.

If you’re using IE, you can install the Web Developer Toolbar that’s useful. Jim Thatcher has some great favelets as well to help tweak the Web Developer toolbar.

Hope it helps. This may seem overwhelming – once you run through it once or twice, you become familiar with what to check.

For what it’s worth, the automated tools can help spot items to check, but you’re better off with a good approach and plugins for Firefox / IE to check things. The automated tools can give some false positives and negatives that could be pretty critical. I’ve seen organizations get excited when the tools give a green light (despite major accessibility flaws, especially where forms are concerned), and concerned customers when the report shows all the “warnings” for elements that needed manual checks. And the times, they are a-changing, so the techniques that were givens 5 years ago aren’t the only way to provide information to users anymore.

Delicious Resources

If you’re brave, check out my Delicious bookmarks on Section 508 and accessibility – I’ve bookmarked a bunch of tools and articles I’ve found over the years at http://delicious.com/walserk/accessibility.

Today I Was Left Speechless – World Refugee Day

Note: “Today” was Thursday, June 18.
If you’re returning, please see the updates I’ve added since hearing from others.

Angelina Jolie speaks at World Refugee Day 2009 (Photo: UNHCR)

Today I attended the World Refugee Day in DC event.

Today I saw 200 some people who know there’s a refugee crisis come together to recognize those who are helping them, the 42 million uprooted people – 16 million forced to leave their countries, 26 million internally displaced people and 827,000 asylum seekers. (Reference: http://www.unhcr.org/4a3b98706.html)

It’s not like these refugees are planning their next vacation and pack several suitcases to go. Nor do they have stores where they’re going to buy what the toothbrush, underwear, or snacks they forgot to bring. They go in the night. They run when the “bad men” come. Sometimes with a bag of their most precious belongings. Often with just the clothes on their back. Continue reading

SEO & the Customer Experience – Usability Trumps Adwords in ROI

Note: Aside from quotes by others, the ideas set forth in this article, mainly, that Usability Trumps Adwords in ROI, are my own opinions based on years of experience working with organizations to improve their site’s findability and conversion. The ideas are meant to incite a small riot and discussion. To date, I’ve spent embarassingly little on adwords, yet those organizations found their site traffic increasing dramatically and return visitors and conversion improving.

‘Usability Can Complement SEO to Up Conversions’

An article entitled, “Usability ‘can complement SEO to up conversions‘” just appeared this month in the UK‘s DirectNews news source. Similar articles are popping up all over as organizations begin to realize that the two are somehow related. This article caught my eye though because of a reported quote by Herndon Hasty, a senior SEO evangelist at Range Online Media.

Herndon Hasty, senior SEO evangelist at Range Online Media, claimed that a site with a high search engine ranking and low usability is on a par with a site that offers good usability but cannot be indexed by search engines at all, Online Media Daily reports.

An article in MediaPost News reports that Hasty and Chris Knoch, a search engine marketing specialist at Omniture, presented and fielded questions during a Search Marketing Now Webinar, “SEO and Conversion Rates: Hand-in-hand.”

A site that ranks well in search engines but can’t convert customers from browsers to buyers is just as bad as a site that provides a great user experience but search engines cannot index it, Hasty said.

It’s a great connection organizations often overlook. Throw in Web standards too for that measure.

Usability + Accessibility + Web Standards = A Winning Plan + Optimized SEO

Usability + Accessibility + Web Standards – that’s the winning combination for me. Continue reading

UPA & Knowbility Team on Web Accessibility Evaluation Certificate Training

The Usability Professionals’ Association (UPA) and Knowbility have teamed up to create a curriculum and training program designed to enhance usability practitioners’ knowledge and understanding of accessibility standards and what constitutes an accessible product. The first offering will be at Access U in Austin, Texas, on May 11-12, 2009.

The Web Accessibility Evaluation Certificate program is designed as a way for usability professionals to:

  • Expand their “toolkit” of professional practice to include accessibility.
  • Understand the standards, guidelines, and US and international laws that apply to accessible information technology.
  • Learn a set of tools and benchmarks to gauge success in the implementation of accessible design goals from a user perspective.
  • Gain skills needed to accurately assess and report on web application compliance to standards and best practices in accessible web design.
  • And prove to their companies that they have gotten the training they need to do all this.

More information, check out UPA Voice February 2009 article about the Web Accessibility Evaluation Certificate program or the 2009 Access U curriculum and course descriptions.

The Web Accessibility Evaluation Certificate program advisory board includes:

  • Leaders
    • Whitney Quesenbery and Paul Sherman (UPA past-presidents)
    • Sharron Rush (Knowbility)
  • Members
    • Cindy Lu (UPA Member)
    • Karen Mardahl (STC AccessAbility SIG)
    • Amanda Nance (UPA Board of Directors)
    • Mike Paciello (The Paciello Group)
    • Ginny Redish (Redish & Associates)
    • Sarah Swierenga (MSU Usabilty and Accessibilty Center, UPA representative to TEITAC)
    • Gregg Vanderheiden (The Trace Center)
    • Kate Walser (CX Insights and member of TEITAC).

Joining the Open Government Bullet Train

I’d call it a train, but the Open Government initiative is moving so much faster than that that it warrants bullet train. Since President Obama came into office, his top leaders have been organizing the masses and showing promise in establishing open dialogue with citizens. How will it turn out? It’s up to us.

What’s Open Government?

Open government is many things to many people. So far, the most interesting ideas I’ve heard have been the following.

A Dialogue Between Agencies and Citizens

One definition for “open government” is establishing a two-way dialogue between agencies and citizens in hopes that the ideas and discussion will provide new insights for improving relationships and operations. It might involve social media tools that exist, like YouTube (video), Twitter (status updates / short text broadcasts), Facebook (post updates and keep in touch with friends and organizations), and others. The idea is that there are now more ways to open up the discussion lines with that faceless, nameless public than ever before, just by using some simple tools that exist.

Adopting Open Source Products

Another way to describe it, depending on your perspective, is that open government is a movement towards using open source products more widely in government with the possibility of lowering acquisition and maintenance costs (you can argue this and other points of course) and having more opportunities in tying together different products to do more interesting things. All the open source products and application programming interfaces (APIs) available now make it even easier for developers (and even non-developers!) to tap into products and Web applications and do some interesting things. For the last couple years it’s been a joke at Web 2.0 conferences as to whether you can make it through an entire presentation without hearing about Google Maps or a Google Maps mashup (overlaying some hopefully interesting data atop Google Maps). But either way, the availability of the Google Maps API and geographic data coupled with open source products have made the prospects even more interesting. The DC‘s government Office of the Chief Technology Officer raised the bar via its data catalog and the Apps for Democracy competition.

The data catalog provides XML and KML data sets that let developers and designers and whoever else might be ML-savvy a chance to do something interesting. The crowd favorite of many seems to be Stumble Safely, an app that lets you see neighborhoods in DC and whether there’ve been any safety incidents that might interfere with you safely going out on the town. Useful information even if you left the clubbing and pubbing scene long ago and just want to take a safe stroll at night.

Making Data More Visible (aka Transparency)

The old robots.txt file for WhiteHouse.gov had over 2000 lines like these, which prevented search engines from crawling it.

The old robots.txt file for WhiteHouse.gov had over 2000 lines like these, which prevented search engines from crawling it.

One of the first things the IT world saw on Day One of the Obama Administration was the major change to the WhiteHouse.gov robots.txt file. It even made international news and a BBC article, “White House plans open government.”

What was the big deal? And why’d it make international news?

For those of you who don’t know what a robots.txt file is – it’s the file you include on your Web site to permit or deny search engines (among other “crawlers”) from indexing your content. Before January 20, 2009, the old WhiteHouse.gov site run by the old administration had 2377 lines in the robots file. These lines prevented search engines from indexing and caching, which in a sense stores a snapshot of the page for later searchability. This file gave more credence to speculation that in the eight years before the Obama Administration came into office, there was a “black box” of data in the federal government and attempts to cover up data the public might want.

So on day 1, when that same file shrunk to 3 lines, there was much rejoicing and progress in the pursuit of transparency and open data seemed to grow exponentially, literally overnight.

Leading the charge are a few non-government organizations, including the Sunlight Foundation and OpentheGovernment.org. There’s even a whole week, Sunshine Week, devoted entirely to “your right to know.”

Now We Know What Open Government May Be…Now What?

Now the fun starts. Open government holds huge promise as well as many opportunities and challenges in making it happen. It won’t be an easy ride, but the momentum and the leaders at the helm, including the first federal CIO, Vivek Kundra and Technology Innovation and Government Reform team, known affectionately as the TIGR (pronounced like Tigger from Winnie the Pooh) team, increase the chances that open government will in fact happen.

There are unconferences that have popped up all over the DC metropolitan area, including Transparency Camp and Government 2.0 Camp. There’s also a W3C eGov Interest Group.

So you can watch and see in the coming months and year how the bullet train takes off and try and catch up down the road (good luck – it’s already moving out quickly!) or see how you can join now. Whether you watch or whether you jump on, it will be fun to see how things evolve!

UFP Watch: The Chumby

Note: The User-friendly Product (UFP) Watch is a way to spot and discuss products that have paid attention to details and are useful, intuitive, and fun to use.

So back to the main point, what’s a Chumby, you ask?

What’s a Chumby?

According to Chumby.com,

Chumby takes your favorite parts of the Internet and delivers them to you in a friendly, always-on, always-fresh format. It’s a window into your Internet life that lives outside your desktop, so content like weather, news, celebrity gossip, podcasts, music, and more has a place to play away from your world of documents and spreadsheets. Just plug in your chumby, connect to your wireless network, and use your computer to create a lineup of favorites from over 1,000 widgets in more than 30 categories, with new ones arriving all the time. Then let your chumby do its thing—streaming everything you like, from sports scores to stock tips, from video clips to interactive games, from photos to trivia.

And that’s seriously no joke. It really does do all those things and does them well.

A Chumby can display widgets like a NY Times news feed or pictures of the year.

A Chumby can display widgets like a NY Times news feed or pictures of the year.

I stumbled upon the Chumby when I was looking at digital picture frame reviews. A site I found, whose name unfortunately escapes me now, had reviewed the Chumby concept model (it wasn’t yet available) and had included a picture, which grabbed my attention, and a quick description of what the idea of it was. I was sold. It looks like a big marshmallow with a screen. Sure that’s the reason my husband and others won’t ever buy one, but for me, it’s part of its charm.

Chumby’s Charm is in Its Thoughtful User-friendly Details

I’m a user experience designer, so I’m always looking at products with that lens and wondering how much thought was put into their design. When it comes to Chumby, it seems like there was a lot of attention paid to small details that matter. Everything from the initial setup that was so much easier than any other product setup I remember to the size of the touchscreen buttons and alarm options (wake up to Pandora radio? Awe-some).

Chumby works with your wireless network, so unfortunately if you haven’t yet gone wireless, wait until Verizon Fios finally sucks you in and then set up a wireless hub before next holiday season.

Touchscreen with Big Buttons

The Chumby works almost entirely by touch. You can go to the Chumby Web site to set up widgets and preferences, but primarily, you’ll find yourself tapping your options on the display to:

  • Change the display to Night setting, which dims the light and just displays the time and an alarm on indicato
  • Scroll through your widget set and tapping the Chumby picture on the display to go back to full-screen mode
  • “Stay,” “send,” “rate,” and even “delete” a widget from your stream
  • Interact with the widgets, and pause news feeds that have that options or moving among Current, Forecast, and Radar on my favorite widget – The Weather Channel

1000+ Widgets in 30 Categories

Besides the useful and interesting news feeds from sources including The New York Times, Wired, and many others, there are widgets around fun things as well. Some great ones I’ve found include:

  • Flickr photo stream, to cycle through your Flickr photos (that was where the digital picture frame piece came in and how I originally found it)
  • Food Network Recipe of the Day
  • “Screen clean” widget with a dog licking the inside of the Chumby screen
  • Weather Channel Weather Forecast, with tabs including the Current weather, forecast for the next 3 days, and radar
  • Letterman’s Top 10 lists
  • Social media feeds from Facebook, Twitter, Yelp, etc.
  • Gmail feed

There are so many more at http://www.chumby.com/guide.

Alarm Options

It took me a while to ditch my old, ugly but reliable, brown and frustrating-to-program alarm clock. I wasn’t sure the Chumby could hold its own in the real alarm clock division. And then one day I realized what I was missing. With the Chumby I can set up so many different alarm options it’s almost ridiculous. I can set one for:

  • Weekday mornings with a Klaxon noise to wake me up and a short snooze time
  • Weekend mornings with a nice lulling Alternative Radio streaming radio feed as the alarm and a different volume setting
  • Naptime alarm with Pandora radio waking me up
  • A just-in-time alarm to try the NOAA Weather Station radio feed to see if that would announce the weather forecast to me as I’m waking up like the coming Sleep.fm promises to do (which incidentally will be available for the Chumby platform)

I’ll have to time how long it takes to set the alarm on the Chumby vs. on the old model. I suspect it’s a couple seconds longer on the Chumby, but that’s also due to all the different alarm options (hmm, would Monday start better with a Klaxon waking me up or with Pandora?).

Snooze-like Button on Top to Get Back to Options

The big target at the top of the marshmallow-looking thing gets you back to your options quickly. Very handy when you want to jump quickly to the Weather widget or over to the news feed widget to get a quick update.

Web Access Synced with Your Chumby

It’s the little details that make a product shine. Whenever I visit Chumby.com to do anything fancy or just explore different widgets, the Chumby frame on the site and my account credentials combine to show me what’s “playing” on my Chumby at home while I’m monkeying with the online virtual version of it. Nifty.

Its Logo’s an Octopus – What’s Not to Love?

Chumby logo includes an octopus

The Chumby logo includes an octopus

It may have been the Chumby’s logo that grabbed my attention too. It’s an octopus as best I can tell. About 10 years ago, there was a Web site called My Octopus or something like that that let you set up windows into other Web sites. Log on to My Octopus (name?) and you could see the headlines from the NY Times and other sites. That was a bit more groundbreaking back then, when XML feeds and readers weren’t quite available yet. The site disappeared abruptly one day, after I’d captured another victim’s attentions to tell them about its glory. I’ve long suspected copyright problems were to blame, but since then, I’ve somehow tied the ideas of “octopus,” “great,” and “cutting edge” in my mind.

Either way, the Chumby with its nice octopus logo and marshamallowy looking housing is a great product and holiday list worthy.

Recording JAWS Sound Output

If you run through Web sites with screen readers like JAWS, the steps below that describe how to record JAWS output could save you time.

Notes:

  • For simplicity sake, I’ll refer just to JAWS in this post. Window-Eyes and others work well also -  JAWS just happens to be what I learned and have used most often. The steps below will work for others too.
  • Though I love my Mac, I don’t use screen readers on it and am not sure yet how to do this on a Mac. I suspect there’s a way, so if you know, feel free to share!

Background

I work with customers and project teams to see how accessible their products are to people with disabilities. I do some basic things first like check that anything that a user should be able to touch (navigation, forms, etc.) is keyboard accessible and that code is valid and well-formed, with no major issues that would hobble an assistive technology like a screen reader. If it passes those tests, it’s on to a screen reader to see how well an assistive technology can handle it.

Dunh dunh dunh dunh… Imagine the theme song from “Jaws” playing for a moment. That’s about how it feels when you’re trying to listen, process, and jot down what JAWS is reading and where it’s reading. Like you’re about to be attacked by a shark. And inevitably, or at least in about 95% of the times I was testing products, just as I was about to make the big breakthrough and figure out what JAWS was reading, the phone would ring, someone would stop in, or it’d be fire alarm testing day at work.

Every time I’d reload the page or try and dig up my cheat sheet of JAWS keyboard shortcuts and remember which one I needed to use, I’d think “there’s got to be a better way.”

There is.

Recording Screen Reader Output

What if you could record what JAWS says on its first run through and not need to have it repeat each time? That’d save time, wouldn’t it? I hear what you’re thinking – “you mean like put up an old-school tape recorder or new-school MP3 recorder next to the speaker and record it? That seems klugy.”

Nope. Even easier than that, and more elegant.

You can internally route the sound output as an input for the microphone. “What?” That’s right. No new cables, wires, or even external speakers required.

A big thank you to YouTube user ‘pbj746′ for cluing me into this one.

What You’ll Need

  1. PC with Windows OS and a sound card
  2. Sound recorder software (check Start > Programs > Accessories – there’s usually some basic movie maker or sound recorder tool that comes with the OS). If you don’t have one, try Audacity, an open source sound editing and recording tool.

Set Up to Record Audio Output

  1. In Windows, go to your Sound control settings, either by going through Control Panel or by right-clicking on the sound icon in the lower right.
  2. In the Sound settings window, go to Options > Properties.
  3. Click on the Recording tab.
  4. Check the checkbox next to “Sound Mix” (or “Wave Out” if you don’t see “Sound Mix”).
  5. Uncheck the checkbox next to “Microphone.”

Record the JAWS Output

  1. Now that you’ve set up the recording to use the internal sound mixer, launch your sound recording software.
  2. Launch JAWS. (Note: for my sake, I usually began recording before I launched JAWS, just to be sure I captured everything and to avoid needing to restart JAWS once it started reading the Web page. It’s up to you how you want to handle it.)
  3. When you’re ready to start recording JAWS’s output, go ahead and click “Record” in the sound recording software. When you’re done, click stop, save the file, and you’ll now have the output that lets you share how JAWS read the screen with others.

And better yet, you’ll have a referenceable file to replay if you get interrupted or can’t seem to repeat the same problem again! Have fun!

Designing for Cognitive Disabilities

More people are wondering – “How do we design for people with cognitive disabilities?”

When you’re designing sites that sell services and products, especially health-related services and products, this question often comes up. Usually when it’s raised as a requirement, it’s followed by an awkward pause and silence. Those in the room would agree it’s important, as is accessibility in general. But in that pause and silence, you can see steam pouring out of designers’ and usability specialists’ heads, who are wondering, “How do we design for people with disabilities? What does that even entail? Can we handle that? And…what do we mean by cognitive disabilities?”

In our “Designing for Cognitive Disabilities” talk at the Usability Professionals’ Association International 2008 Conference in Baltimore, MD, Whitney Quesenbery, Sarah Swierenga, and I talked about what we’ve learned through the Telecommunications & Electronic and Information Technology Advisory Committee (
TEITAC, aka Section 508 and Section 255 refresh), from Dr. Clayton Lewis of the Coleman Institute, and from Sarah’s research at Michigan State University. The biggest discovery, which is not so shocking when you think about it, is that if you follow usability best practices – use consistency, use plain language, include landmarks, include ways for people to back up and correct mistakes… – you’ll be making great strides in making your site or application accessible by people with cognitive disabilities as well. (see below for our slides – our paper is available in the UPA 2008 proceedings (visit UPAssoc.org for more info))

I fell into the “wheels spinning, steam pouring, awkward silence” category when this topic came up in early conversations. I’ve worked with children and adults who have autism, Asperger Syndrome, Down Syndrome, cerebral palsy, and mental retardation. I have family members who’ve had various cognitive disabilities, including dyslexia, brain injuries, and mental retardation. And I was still at a loss – it’s hard to envision how to accommodate people without stopping to think about what they can do and what they do differently.

So here are some things to consider – these are not at all meant to oversimplify the field of cognitive disabilities – it’s really a complex and amazing topic. These items are meant to help you stop, think, and consider ways to improve on your existing site and product designs and accessibility, and, at the same time, improve usability for all your visitors.

Design Considerations

The following are based on our experiences working with users with various cognitive disabilities, as well as best practices that we’ve gathered from sites like Dyslexia.org, that focus on audiences with different disabilities.

All users

  • Apply consistency in labeling, titles, navigation positions, etc. – match labels with the destination page’s heading so users know they clicked the right link.
  • Include landmarks, to easily tell where you are
  • Provide ways to back up if you make mistakes
  • If your site automatically times users out after periods of inactivity, offer timer reset features – this will benefit users who take some additional time to process information or read through material
  • Apply plain language guidelines!
  • Offer spell check capabilities or suggestions for features like search engines or document generation

Users with dyslexia

Drawn from dyslexia.org

  • Provide options to change background, foreground colors – high contrast like black on stark white can be challenging for these users to read. See dyslexia.org for examples. (Aside: my nephew has a much easier time reading things that are printed on green paper – the white paper was too busy for him)
  • Use narrow columns, with 60-70 characters – easier to scan and read.
  • Left justify content, as opposed to using full justification where left and right sides are even. Full justification creates varying white space that can cause problems.

Resources