Design State: A weblog about government web design

I’ve started using Eric Meyer’s Reset Stylesheet at work, as I slowly build a framework for our County sites. Using the reset has cut down on the time I spend getting each site to look the same in most browsers. Something like 88% of the folks using County sites are browsing with Internet Explorer, and fully half of those are still using IE6, so getting the CSS to hang together in a framework that has a consistent, bug free look in the quirkiest of browsers is a high priority. The way using the reset saves me time here is by highlighting the limitations of IE6 only. Judicious use of my adaptation of Eric’s stylesheet has made my framework stable in Opera, Safari, Firefox and IE7, so if I take a look at a site in IE6 and see something broken, I know it is a IE6-only issue and finding the work-around is as simple as a quick Google. I sometimes wonder if IE6 has the most thoroughly documented bug list of any piece of software, ever.

The framework hasn’t saved me any time yet. I’m still streamlining the design elements, adding accessibility features, and integrating it with our .NET content management system. Once I’ve got all of the kinks worked out, however, creating new versions of our sites will be as simple as clicking a button in Visual Studio, changing the colors in the CSS, and adding the content to the CMS. All of the glory and the craftsmanship is done up front, which makes pumping out sites conveyor belt-style seem a bit low-class, I suppose. I can live with that though, since for me, consistency and expeditious site development are high priorities in the face of the often torpid pace at which a bureaucracy moves. It’s also an added bonus in a shop with 3 designers and nearly 100 sites to manage.

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