Design State: A weblog about government web design

When I get involved in a new project, whether it is a completely new site or a redesign, the first thing I do is analyze the content & content expectations of the client and try to figure out the best way to organize things so that the correct information is easy to find, and the important information makes sure that it can be found. Where this gets complicated is when there are differing ideas as to what constitutes important or correct content. So, communication is a key part of the content analysis process. I’m going to skip talking about that piece, assuming that y’all know how to effectively communicate, and instead I’m going to focus on some of the pitfalls of content organization and a few ways you can make your content more user-friendly on the home page of your site.

Content that weighs too little

You’ve seen it. The site with no useful information on it. A site where the home page consists of a mission statement and the navigation links to pages describing services provided by the office, but no details are available, and little reason to return to the site after grabbing a telephone number or address. Typically these sites are from the early days of the WWW, when people were still figuring out what a website was for. They’re essentially web presences, not proper sites, but just something minimal that directs people to call or come visit.

When you’re dealing with a site that weighs too little, the first thing to do is identify what the agency does and figure out which of those things can be better translated into web content. It’s easier than you think. Here are some things to ask yourself or your client:

• Do you have regular meetings that are open to the public? (Put up a calendar with agenda and minutes)
• Do you have forms or applications that your citizens will need to use? Can any of them be filled out online? (Post PDFs (interactive ones if you’ve got the ability) or create online forms that can be filled out and submitted at the citizen convenience)
• Are there questions you get regular calls about? (Put up a FAQ)
• Are there specific programs that could use a little publicity?
• Are there reports (annual or otherwise) that could be put online for citizens to view?
• Is there a staff page listing contact information for various departments within the agency?
• Is there a contact form?

It is surprising how much content you can get from asking these few questions. Basically, anything an agency does can be translated to a website in one way or another. If the resources are available it is even better if you can make some of these processes interactive, and user-friendly enough to reduce the weight of red tape and bureaucratic turnaround.

Content that weighs too much

On the other hand, there’s the site where the agency has gotten the point about putting content out there, but doesn’t have a clear plan on organizing, displaying or distributing it. What you can end up with here is a rabbit-hole of pages and no clear direction regarding where you are or how you got there (adding breadcrumbs is only one part of solving this issue), long paragraphs of text with no distinguishing characteristics, and inconsistent organization of programs, forms, policies and other information. This site is the result of content accretion, a bit like your junk drawer (or closet as the case may be). What you need is in there, but it might be at the bottom of the pile, or else somehow ended up in your bowling ball bag. When you’re dealing with one of these monstrosities, this time you need an ordered list to follow:

1. Dig through the site, the whole thing. Have a piece of note paper handy to write down your general ideas for content groupings. By department, program, clientele or a combination of all three? Is there some other way of organizing the content into a meaningful hierarchy?
2. Identify sections that can be split into subsections. Are all of the programs on one page? Make a page for each one.
3. Remove unnecessary or outdated content. Is the mission statement at the top of every page? Put it on the About Us page. Is there a notice for an event that has long since passed? An advisory or press release that no longer needs to be prominent? Create an organized, searchable archive for these items.
4. Design your page layout and keep it consistent. Use HTML headings to help users separate content into sections, name consistent sections consistently (e.g. Forms, Contact Info). Don’t be afraid to use different font sizes, bold, or italics, but don’t over use them either.
5. Make sure that the most important thing sticks out the most.
6. Make sure that everything doesn’t end up being the most important thing. Prioritize.
7. Use your home page to collect all of the important things from the rest of the site. Prioritize and distinguish these items in the same way.
8. Keep your eyes on the goal: you’re organizing the site for your citizens, strike a balance between what is important to internal stakeholders and external ones, but prioritize for the people who visit the site to use your services.

If you go through this list (and I’m sure it can be added to and adapted) you should have a better idea of how to wrestle your site’s content and pin it just where you’d like it to be.

If you want to know how folks read webpages, Jakob Nielsen will tell you right away: They don’t. The average user skims and scans the pages they visit in order to determine whether the page content is relevant to their interests. The point: cut to the chase. No one wants to read mission statements, statements from the director, or anything that doesn’t help direct them to the content they are looking for.

If you’re in Washington DC the week of April 5th – 10th, you can take Jakob Nielsen’s class on writing for the web.

They’ll also be in London, San Francisco and Sydney this year, but if you can’t make it to any of these conferences, you can always read through the section on his website devoted to Writing for the Web.

I tried to make this post short, so you wouldn’t skim it. Did you?

I was interviewed by Steve Hargreaves at CNN Money for an article about the federal government’s stimulus tracking site Recovery.gov. Entitled Recovery.gov’s citizen accounting effort, the article examines the efficacy of the site in terms of its goal of being an unprecedented example of government transparency.

The government’s http://www.Recovery.gov/ is supposed to be the place where everyday citizens can go and see exactly who’s getting the $787 billion in taxpayer funds designed to boost the economy.

“This is your money,” reads a statement on the Web site’s homepage. “You have a right to know where it’s going and how it’s being spent.”

Yet the first thing one sees on the homepage is a big pie chart saying 60% of the money is going to states and 40% to local governments, hardly the detailed breakdown the government has promised.

Recovery.gov’s citizen accounting effort, Steve Hargreaves, 19 March 2009.

The general consensus seems to be that the site could be much better, but it’s a step in the right direction. Only time will tell. Some of the things I’d like to see on Recovery.gov include:

• Front page notifications of updated content, not just news items which mainly seem to be PR blurbs;
• Get rid of the annoying pop-ups that appear when you click on an external link. This is the web equivalent of Microsoft Vista’s abominable User Account Control, a “feature” deliberately designed to annoy users. When you close the pop-up you aren’t taken to the external link. Apparently what you have to do is click on the link inside of the pop-up to actually leave the site. If I click on a link, I want to be taken to the referenced file, not receive a confusing pop-up that makes me click on the link within the window to get where I was trying to go in the first place. Designing for the lowest common denominator is a sure way to destroy the user experience;
• Granular RSS feeds for each specific category of reporting. Wordpress does this natively, and it very useful for sites with broad topical range where only certain types of information are going to be of interest for folks; and
• Make finding information more intuitive. I thought clicking on the Accountability and Transparency link made sense for finding the information I was looking for, instead it just goes to a page of memorandum boilerplate. You end up having to click through all over the place, and sometimes leave the site altogether for a State’s stimulus site to find any meaty information.

[Updated on 26 May 2009] What’s the good of having an accessibility statement on your website if a user who is using a text only browser or screen reader can’t find it right away? In other words, why bury all of the usability cues that you’ve provided somewhere on the page so that it is too late to do any good when a user finally stumbles across it?

This hide-and-seek is something I’ve noticed across a lot of sites with accessibility statements. These statements are by no means ubiquitous, so even if I’m trained to look for one I’m probably going to stop looking altogether after going to the hundredth site that doesn’t have one. Thankfully, the solution is one that is blindingly obvious once you think of it, and quite easy to implement.

If you look at Mark Pilgrim’s great accessibility resource, Dive Into Accessibility, with the stylesheet turned off, you’ll see a link near the top that says “Skip to Navigation.” This link is hidden by the CSS, so folks with regular browsers won’t see it. This navigation aid is supposed to make the site easier to use for the kind of people who need more accessible websites. So if you’re on a site that has an accessibility statement, you’re probably also on a site that has a hidden “Skip to” link or two. The markup is usually some variation of this:

<h1 class="title">
<a href="/" accesskey="1">Dive Into Accessibility</a>
</h1>
<p>30 days to a more accessible web site</p>
<a class="skip" href="#startnavigation">Skip to navigation</a>

and the CSS to hide it from view:

.divider, .invisibletitle, a.skip {
display: none;
}

Update: Based on the post Hiding with CSS: Problems and Solutions from Roger Johansson, it turns out using display: none; will hide elements even from screen readers. The alternative is to use the off-left CSS hack:


.divider, .invisibletitle, a.skip {
position:absolute;
left:-9999px;
}

which is definitely hacky, but gets the job done, without breaking anything.

If you try to find the accessibility statement, and you’re looking at the page without the benefit of layout from the stylesheet, the link to it is way down at the bottom in the site links, after all of the content and the navigation. There’s already a link up top to assist in jumping past the content to the navigation, so why not use that hidden space to invite the user to read the accessibility statement first thing? Here’s the additional markup:

<h1 class="title">
<a href="/" accesskey="1">Dive Into Accessibility</a>
</h1>
<p>30 days to a more accessible web site</p>
<a class="skip" title="Accessibility features of this site" href="/accessibility_statement.html">Please take a moment to review the accessibility features of this site.</a>
<a class="skip" href="#startnavigation">Skip to navigation</a>

Voilà, the user gets an immediate prompt that you’ve taken the time to make the site easier for them to use. Now I’ve just got to go back and put this in to all of the old sites I’ve worked on.

Hay Net is provided by the Farm Service Agency as a means to assist folks who either have too much or not enough hay. The two main options in the old design: Need Hay and Have Hay are considered an excellent example of User Interface design by Jeff Veen.

One of the things Jeff Veen talked about during his presentation on User Interface design at An Event Apart 2008 was a federal government site called Hay Net. The old version of this site remains one of his favorite examples of good user interface design. Mr. Veen is worth listening to on this topic; he was the project lead for the redesign of Google Analytics, among other things.

It is sort of funny to visit a site that has links titled “Need Hay” and “Have Hay”, but it is important to realize that those two links create an immediate and obvious fork in the road for the kind of person who visits Hay Net out of necessity. The current version of the site has a huge disclaimer page to get past, and significantly more gee-gaws wrapping around the meat, but the core purpose of the site; to facilitate the transfer of hay from folks that have too much, to folks that have too little, is still there. I searched for Have Hay ads in Ohio and received a very readable list of ads with prominently displayed location and contact information for each person. If you need hay or have hay, it isn’t hard at all to get your problem taken care of on Hay Net.

The current Hay Net design is a bit more involved, but the core purpose and interface hasn’t been made needlessly complicated or obscure.

This empathetic focus on providing exactly what the user wants is the first step in creating user-interfaces for more complicated sets of data, like the ones processed by Google Analytics. The key, according to Mr. Veen is to “let the user tell their own story.” The more variables that are available in a data set, the more complicated displaying that information to the user in a meaningful way becomes. Veen’s solution presents the data in a manner defined by the user; instead of getting too much information, or not enough, as dictated by whomever, the user picks which variables they’d like to see and how they’d like to see them displayed.

Hay Net and Google Analytics are (respectively) simple and complex examples of user-empathetic interface design. By reducing barriers-to-entry like disclaimers, non-intuitive interfaces, sign-up forms and extraneous content, designers and developers of government websites can provide something all to rare in their field, useful information without all of the red tape.

Way back in 2004, Gerry McGovern, the guy who wrote Killer Web Content, tried to renew his driver’s license online. Here’s a list of some of the issues he ran into at the time:

• Conflicting information;
• Too much information;
• Too little information;
• Unnecessary information;
• Poorly scanned documents;
• Confusing terminology;
• Unavailable websites;
• Too many mouse clicks; and
• A “simple” 10-page online form.

Do any of these sound familiar? They’re mostly fundamental usability errors due to the website managers

“…thinking that something is better than nothing. Many managers see a website as a project. They measure success based on things done. The website has an online application form, it has a search engine, and it has content. The form and search engine may not work well, the content may be badly written, but that’s not what’s important. What is important is that the project is completed.

No manager sets out to design a bad website. The problem is that too many managers view content as a commodity instead of the critical asset that it is.”

E-Government: No website is better than a bad one 18 October 2004

Gerry went online to renew his driving license, found the correct form (which he downloaded but found to be a bad scan of a hard copy) and was told to call his local authority (which is actually called a council) to see if they accept forms downloaded from the web, found his council’s website (which was down), called another council that might also work in his case and was told that this council handled the driving licenses for the one whose website was down. Then he saw a link to a simple online form which happened to be a 10-page version of the one page badly scanned hard copy he’d downloaded before, and then on page 9 of that form, he discovered that it wasn’t an online application at all, but was going to print out the one page form he’d downloaded earlier. This is due to the fact the the driving license application requires a physical signature, a couple of photographs, a medical report and some other stuff to be mailed in to the local office.

If it was frustrating to read that, imagine how much easier it would have been to have found the following information on the first page of your search:

To renew your driving license, please ring your local county council office. A contact list follows.

E-Government: No website is better than a bad one 18 October 2004

While Gerry talks about this case-study in terms of the failure of the content, it’s actually a failure of the entire process that any eGovernment site or application should go through. There’s no indication time or care was spent in planning, implementing or testing any part of the process of renewing a driving license. In the private-sector such poorly executed projects would destroy the reputation of any business that provided them, but there is little impetus to strive for excellent usability, thorough planning and implementation in a government design shop. The jobs are safe, the money is guaranteed and there is usually such a high workload that the time simply isn’t there to give each site or application the care it deserves.

EGovernment services (such as driving license renewal) can be improved simply by sitting down with the developers and designers before the project starts and having a discussion about all the ways that the website or application can be simplified for the user. Getting everyone together and starting the conversation might seem a bit like cat herding, but it is sure to save time, money and end-user frustration in the long run.

Articles referenced in this post:

1. Renewing my driving license online in 50 tortuous steps: Part 1
2. Renewing my driving license online: a Kafkaesque experience: Part 2
3. E-Government: No website is better than a bad one