Design State: A weblog about government web design

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.

Doesn’t exist¹. About a year ago, I was working site for a regional terrorism early warning group; naturally, one of the items they wanted on their site was the National Threat Advisory provided by the Department of Homeland Security (DHS). I figured that it wouldn’t be that hard to find information on the DHS site about how I could get the threat advisory on the site I was working on. This was not the case. Nowhere on the DHS site is there an indication about how one might go about putting the Threat Advisory on a site of their own. My emails to the DHS staff went unanswered.

What I ended up doing was just grabbing the current Threat Advisory image and posting it on the website I was working on. I didn’t have a set of images to switch in case the advisory changed, if it had changed I would have just copied the new one onto the site. So far I haven’t had to worry about it, because I don’t think the threat advisory has changed for a few years. Even if the threat advisory has become somewhat of a joke, having the DHS appear to think of it as a joke as well (considering that there is no real effective way of knowing what the threat advisory is on a day to day basis apart from visiting the DHS site) is pretty counterproductive.

Here’s how the National Threat Advisory could be made more useful across the board:

1. Create a badge like the ones provided by Flickr, or AddThis!, which allow users to grab content from other sites to display on their own page. The DHS main page even has an AddThis! plugin in case you want to share it with Digg, MySpace, Facebook or Yahoo Buzz. Which is cool, I guess. What would be cooler: a DHS-managed National Threat Advisory badge that security groups or whomever can embed directly into their pages and one that will update in real time as the threat advisory changes.

   The benefit of this should be obvious; as soon as the threat level changes, this information is disseminated across all of the state, regional and local government security agencies that have sprung up since the DHS was formed. Instant communication, with a minimum of effort. They’ve already got RSS feeds, why not a Threat Advisory Badge?

2. If figuring out how to program a badge is too difficult, the DHS could at least provide a downloadable set of Threat Advisory images that could be used by the kind of site I was working on and the opportunity to sign-up for email notification if the threat level changes. The email subscription page states “Selected pages throughout DHS.gov feature an “E-mail me when this page is updated” button. Clicking on that button will allow you to subscribe to updates for that particular page.” The Threat Advisory page doesn’t have one.
3. Make the Threat Advisory more accessible. Instead of having one image serve for the entire threat advisory, it would be quite easy to replicate the entire thing, colors and all, with CSS. On the bright side, at least the advisory image has good alt text.

In the end, the lack of a National Threat Advisory Feed is just a small failure of customer service. The prevailing sentiment of the 2.0 web is “give it to me” not “I’ll go get it”, and the fact that I couldn’t even contact an actual human at the DHS to talk about this issue shows a distinct lack of understanding of the needs of one of their most involved groups of stakeholders; the government departments and agencies that get DHS funding and do their best to help make America a more secure place.

Although National Terror Alert, a “private homeland security blog … not affiliated with any government agency” already has a Terror Alert Badge available, its unaffiliated, unofficial status would make me leery of putting it on a government web page. That feed is featured on over 50,000 web pages though, so it was definitely a niche that needed filling.
The DHS hasn’t missed its window yet.

¹ In an official capacity.

A clean, simple home page design like Ohio.gov is an exception, rather than a rule among State government websites.

One of my favorite government sites is the main page for the State of Ohio. Each time I visit the page, I’m struck by how clean and well organized the content is, and how the minimal use of graphic elements serves to add just the right amount of texture to the content’s presentation. Most importantly, however, the site is designed with the Ohio resident in mind. There isn’t a list of useless facts, or a mission statement, or some banal welcome text from the governor; instead, if you’re worried about the incoming winter and interested in HEAP it is front and center. If you want to know what the latest lottery numbers are, update your vehicle’s registration, or contact your elected officials you’re only one click away.

Unfortunately, but not unexpectedly, this economy of design doesn’t extend itself to the rest of the State’s websites. This is not unexpected because most State agencies are responsible for their own content and website. Since the State government is such a large operation and funding varies from agency to agency, the means and manpower to keep a site updated are sometimes not there. That doesn’t mean that a consistent design standard across all Ohio.gov sites is a bad idea, just that it will take some concerted effort.

In contrast, Indiana’s website isn’t as easy to navigate as Ohio’s (both of them are better than Illinois, however) but the design is quite consistent throughout. Indiana’s CIO, Gerry Weaver, has managed to save the state $14 million per year in operating costs according to a nice write-up in Government Technology. There’s not a lot of talk about whether or not the web site standardization was one of the pieces in this savings (I sent an email to Mr. Weaver, but haven’t heard back); but I know that using a standard template for our sites saves my group a lot of time in design and implementation, and that savings is passed on to all of the agencies and departments we work for. We create a few graphics, change the colors in the CSS, and don’t really have to worry about much else. Needless to say, I think the State of Ohio could really benefit from design consistency throughout Agency websites; and getting someone like Gerry Weaver behind the project seems like a good first step.

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.

The Change.gov website is a first shot at including and encouraging a broad cast of citizen input and involvement with the federal government.

First Impressions

It is some kind of excellent that I started The Design State on the same day that Change.gov website went live. It looks good, although obviously the offspring of the presidential campaign website of President-Elect Obama. Obama’s campaign was notable for its graphic and web design production values although these certainly changed over time [e.g. The Evolution of Barack Obama's Campaign Website, The Brand Called Obama], and it is nice to see that care extended to this first official site of the Obama Administration.

Audience

The audience for this site is clearly the American people. That might seem a bit too broad, since I think the folks most likely to know about it so soon are the same folks who supported Obama’s campaign for President; but in the same way that Obama made his campaign about inclusiveness and the power of individual impacts, this site is encouraging citizens to become involved in civil service. My Greatest Generation grandparents would be happy to see this if they were still around.

Content

Although the content is very sparse at this time, and much of it is cribbed from the Obama campaign website, it appears that Change.gov plans to offer employment and involvement opportunities on the various listed issues and also pass the time as a sort of giant suggestion box for the American people. A bunch of the pages seems to have no content at all on them, so I wonder if there was more of a push to get the site out quickly than wait until it was ready to go. Earlier today there was still some designer spoor trash latin on a few of the pages that is looks like someone cleaned up.

Bells & Whistles

Well, its got a blog and at least three different RSS feeds [e.g. Blog, News, Press]. There’s a YouTube Channel, and an eNewsletter sign-up that encourages you to get your friends involved and will even load your address book into the fields for you. None of which are much use at the moment since there’s no content to look at.

Graphic Design & Markup

The design is great, but not perfect. There is a rich color depth and it looks like there is a bit of Golden Ratio at work as well. The images have some artifacts in them due to image compression. This is most noticeable with images that contain text, and has been present on official Obama-related sites for quite some time. The text is also a bit too small here and there. I have a nice monitor at a high resolution, but the small text size hurts my eyes, especially when it couples with the image compression artifacts.

The markup is XHTML Transitional and is close enough to validating to not really pick on. The markup does seem to have a preponderance of the <div> element, but they seem to be there mostly to force the graphic design elements to behave. The CSS appears to be using a customized reset stylesheet for its foundation. The site also uses jQuery, a very nice CSS-friendly JavaScript library that I hope to learn how to use someday.

Usability & Accessibility

The accessibility statement sounds nice, but is terrible. While the Change.gov website gives every indication of being accessible to my eye, the statement does nothing to explain to a user just how the site has been made accessible to them. Are there access keys or navigation aids? It would be much nicer to see something like what Mark Pilgrim has been known to put together.

The site is quite usable; it is easy to find the sections you’re interested in, even if there is no content in them. The forms are intuitive and simple to fill out, and it is obvious that someone spent time thinking about how they could improve the user’s experience.

What I’d Change

1. More content: There’s no point in having a beautifully designed site if there’s not equally good content on it. People come for the content, stay for the content and return for the content;
2. Fix the image artifacting: It’ll make the site look nicer, and the image text will be easier to read;
3. Increase the text size;
4. Add more accessibility features and make the accessibility statement meaningful;
5. Make what content is there seem less about Obama and more about how anyone can get involved in improving the government and the nation; and
6. Put all of the RSS feeds in one spot, so that I can subscribe to as many as I want instead of having to hunt them down piecemeal.

Final Impressions

Although the site is very pretty and has some nice shiny Web 2.0 points of access, right now it looks more like a public relations hit than anything else. There’s not much to see once you get past the good design except for the employment sign-up and the suggestion box. It is a good start, but I still feel like I need to wait and see what happens to the site as it matures before I pass an unambivalent verdict.