How Should Government Web Sites Be Designed?

Wally Hartshorn asks: "Do Slashdot's readers have some examples of government Web sites that they particularly like or dislike? I'm the Web coordinator for the Web site of a state government agency, and I am looking for some ideas to improve our site's usefulness and design. I've read numerous articles about Web design, but they virtually all focus on commercial sites, where the information to be provided tends to be short and voluntary. There are many good ideas to take from these articles. However, I'm reasonably certain that there are some very different issues to consider when designing a site that is trying to present regulatory requirements (to an audience that would really rather be doing something else) rather than a site focused on selling or providing news. Any suggested good/bad examples to visit?" I think the key word for government sites is 'accessibility'. Do you all agree or disagree?

Re:Make it work fast -

Sans serif fonts only

Why? The entire purpose of serif fonts is to make them easier to read by drawing your eye down the line. Personally, I'd much prefer if people left the FONT tag alone. I chose the fonts that were easy for me to read, don't presume I find 6 point Arial easier on the eyes, even if you do. Actually, it got so bad there for awhile that I even clicked on the "override document fonts" checkbox, even though that tends to break those pages that are assume you're browsing with IE at 800x600 under Windows.

Re:Make them printer-friendly

BTW, I always use the printer-friendly version (if there is one) for ordinary Web browsing.

The BBC's website has a CGI script Betsie [bbc.co.uk] which automatically generates an 'accessible' version of a web page. But this is not an ideal solution, it would be better to write the page in an accessible way to start with. HTML-linters like Bobby [cast.org], Weblint [weblint.org], and Tidy [w3.org], not to mention just validating properly with nsgmls, can help here. Also read the W3C's accessibility guidelines [w3.org].

But I don't mean to rant too much on the web purist's favourite topic of alt tags and not using tables for layout. I mean, it's not as if I even use Lynx for browsing. One thing I would like to have is a clear sense of real people behind the site. This means having a contact address (or at least a link to a contact page) on every page, and where appropriate, other meta-data like which department is responsible for this page, where the information comes from, when it was last updated, and so on.

Also try to make your URLs last a reasonably long time (i.e. not like microsoft.com, for anyone familiar with that site). This means that people can bookmark a site containing useful information and go back to the same page later. It also helps search engines.

Finally, it might be a good idea to support SSL connections and get a certificate, possibly signed by the government itself. That way people can feel reassured that 'the bad guys' aren't getting in the way.

My thoughts

Dos

1. Be sure to get it indexed on all the major search engines and directories
2. Include a local search feature (even if it is only Google's site search feature)
3. Include contact information
4. Meta tags to enable easier finding of info.
5. Accessability! [w3.org]

Don'ts

1. Shockwave, Java, IE/Netscape tags, (excessive) javascript (all sections should worth with or without it)
2. Don't make any page more than ~4 clicks from the main page.
3. Here [w3.org] are some (karma whoring) tips from Tim Berners-Lee and Friends
4. Don't link to goatse.cx

Re:Accessibility issues

I disagree with some of these:

Text should be in a table with a width of approx 200 - 500 pxls.

Let people decide this with their browsers, and never specify sizes in pixels. It looks awful on small monitors (say, PDAs, or Grandma's 640x480 monitor), and it's awful AND hard to read on a 1600x1200 display.

Do NOT put large amounts of text into a single, monolithic table. This may cause a user's browser to have to wait for the whole page to be loaded until they see any text.

This is a government web site, not a sales site. The goal is complete and accurate information, not loading speed. You need to realize that there are some people who HAVE to use special browsers (blind, etc.), and there are others who just don't want to use IE or Netscape, and these users would rather have all of their information in a single block rather than having their browser say "left-brace table right-brace left-brace tee arr right-brace left-brace tee dee right-brace" etc. before and after each paragraph.

Use sans-serif fonts

No. Let the user choose his own fonts in his browser. You're wrong about serifs and readability. Sans-serif is easier to read when the words are unfamiliar (proper nouns, technical jargon, etc.). Serifed fonts are easier to read for normal text, so long as the reader understands the words that are being used.

Give links for a zip-file of all text

There are many people, particularly in this august forum, who do not use windows. For these people, zip files are an inconvenience. Providing plain text files is a good idea, though.

--

Re:Accessibility issues

-if you're going to include M$ word documents.. make sure they're also available in plain text or html.
-look at it with lynx. it should be readable. this is a decent test to see if it's accessible to the blind
-no flash, or at least offer an alternative. it's not nice to require viewers to download a plugin.
-no banners
-no cookies
-a searchengine (htdig?)

//rdj

Re:Accessibility issues

These are all excellent suggestions. I'd also append onto #5 that PDFs are appreciated by a lot of people. I think it's annoying to use them most of the time, but others disagree and that's okay -- they're cross platform and print well, so they're worth using. People also like Word documents, but I'm a lot less eager to support that format for a whole lot of reasons (cross-platform issues, cross-version issues, macro viruses, Word sucks, etc :).

I'd also point out Philip Greenspun's [greenspun.com] scorecard.org [scorecard.org], a clearing house for environmental data. It's a very accessible, data-rich site that might be a sort of model for things a government data-distribution site could do.

Accessibility issues

Just a few ideas:

If you have a lot of text:

1) Limit the width that the text can flow -- do not allow it to expand to full browser width. Text should be in a table with a width of approx 200 - 500 pxls.

2) Use style sheets to make the LINE-HEIGHT at least 1.2 if not 1.3 or 1.4. The extra leading will be appreciated as it will make for easier reading.

3) Do NOT put large amounts of text into a single, monolithic table. This may cause a user's browser to have to wait for the whole page to be loaded until they see any text. This may seem contrary to #1, where text is required to be in a table. The solution -- put blocks of text (maybe on a paragraphy-by paragraph basis) into their own separate tables of fixed width. This will allow the text to load progressively. (see search results on Half.com for a good example.)

4) Use sans-serif fonts -- verdana, arial, helvetica, sans-serif -- specified in style sheets. This improves readability, and will cut down on page size by not requiring a million *font* tags.

5) Give links for a zip-file of all text in a plain format. Users can then open it in their favorite word processor to print, copy to pda, etc.

Please! No Flash!

Flash immediately destroys the accessibility of the site to a large portion of your audience, and frustrates many of the rest of them. Not only do users need the Flash plugin (which some have and many don't), it kills the usability of many of the features of a browser (try bookmarking, copy/pasting, using the Find command, etc). I've never seen a site done in Flash that couldn't be done in HTML -- if you're trying to make a site easier to use, there are better ways to do it rather than giving your users a whole new set of controls to learn. Please, stick to basics!

Jakob Nielsen has a great article covering this, see http://www.useit.com/alertbox/20001029.html .
---
Josh Woodward

One thing that is important for a government site

Have a contact e-mail. Don't have a form submission version (user doesn't get a copy). Do have an automatic confirmation. Do make sure that somebody is assigned to check it regularly.

Nothing worse than sending off an e-mail and not knowing if it's even been received, yet alone if anyone's ever going to read it.

I'm speaking to you, david shepard [state.tn.us]

Rich

Don't be a Toad

DO NOT waste space toadying to your chief bureaucrat at the expense of useful content.

For example, the top of the menu bar at NASA [nasa.gov] is a paean to NASA administrator Daniel Goldin: links to his bio, his welcome letter, his speeches. Click hot topics [nasa.gov] and the menu bar full of juicy Dan Goldin information is still there. In contrast, try to find out what's up with the NEAR mission to Eros. Go ahead-- I gave up.

This problem isn't isolated. Pick another site, say Department of Commerce [commerce.gov]. The "tribute link" [doc.gov] to the chief bureaucrat is top-right, and you get a biography, speeches, op-eds, even "official photographs".

Here's the USDA [usda.gov] site, where prime position is taken by a big picture of Secretary Glickman [usda.gov] at the ribbon cutting for a new wing of the Dept. of Agriculture.

Gag.

Access to what people want

<credentials>

I work in DC as a web development trainer for this [westlake.com] company.

</credentials>

There are a few things you can do to make your website work better for your clientele:

• Accessibility is key. Don't go too fancy with the design. Make sure that the interface makes sense. Provide a text-only version.
• View your logs. Learn where people are going. Make that stuff more accessible so that people don't have to go through a lot of links to get to what they want. Believe it or not, the IRS is a really good example of this. If you're really hip, you can write a web log analyzer that posts the top ten favorite links.
• Get a sensible URL for your agency. The INS used to be www.ins.usdoj.gov. Now it's www.ins.gov. That makes sense.
• You're presenting regulatory requirements? Post a FAQ. Talk to the people who field phone calls for the agency. Find out what questions they get. Post them in the FAQ.
• Provide an area for feedback on the website. React to it. The toughest part about building a web site is that you are, to a certain extent, groping in the dark. You should expect that the first version of the website should change a bit in the first few months. Make it modular. In the first year, you'll make a lot of changes, but after that, the pace of change will drop dramatically.

• My $.02

Step 1: Listen to Jakob Nielsen

The guru of Web usability got the title through being right a lot. Check out his website [useit.com] and buy his book, Designing Web Usability.

There may be a whole load of specific issues to consider, but on the general issue of making a website that people can stand to use, he's your man.
--

Good and Bad: irs.gov

Every time I go to the IRS web site (www.irs.gov [irs.gov]), they always have these cheesy "articles" about how people are using IRS services to make their life SO EASY... quite frankly, it's rather annoying.

However, that said, I rarely have a problem finding information on their site within, say, 5 clicks. So that's a plus on the usability front. But if you're looking for design, don't "steal" from the IRS. :-)

My ideas

Yes, accessibility is a good keyword.

I think the the new Washington, DC government page (washingtondc.gov [washingtondc.gov]) is actually a pretty good site.

Right on the front page there are links for "Today in DC", including meetings, weather, and (very important) closures.

There's a link to an alphabetic list of DC Government agencies. Most of these subsites contain relevant information like contact information, hours of operation, procedures, an deven forms in some cases.

In fact, I've had better luck getting information from the DC website than I have trying to get somebody to answer the phone.

Now if only we had real congressional representation...
--

Check out the UK government web site

Its here [open.gov.uk]. It is truly excellent. Not just regulatory stuff, but lots of general info. The Environment Agency provides clickable maps of environmental problems in your area, for instance (currently running a limited service due to load from people afraid of flooding).

As for how to present regulatory info, the main thing is to think from the user's point of view. E.g. "I'm running a photographic processing shop with 10 employees. What do I need to do to comply with waste management/employment/tax laws?". Then present information in that kind of format.

Oh, and put a good site search engine on the front end, and if you have any database system for accessing data then see if you can figure out how to let outside search engines see the data as well.

Paul.

Accessibility? Call Bobby!

So far the best tool I've found for helping to make sure your site is accessible is Bobby [cast.org], a free service provided by CAST (Center for Applied Special Technology) to check websites versus usability standards. It can be run online, or there's a downloadable version, and generates a prioritized report of everything that you have to look at and potentially fix to help special browsers (such as text-to-speech) function better.

Search!

Make it organized. But more importantly,

You need a powerful search capability.

Say I want to know about the legality of putting extra lights of various colors on my truck...
Or where to register to vote...
Or who to contact about the title of a vehicle...

There are a lot of questions one can ask of a state government--provide a way for us to ask them.

Eli

Make them printer-friendly

As someone who has designed a few government web-sites in the past, probably the number one demanded feature is printer-friendliness. Usually the pages are full of detailed info of which many visitors will want a hard copy. If you have too many images (especially large ones), outlandish formatting, or even a black background, it won't come out right for a lot of people. If you absolutely need to put that kind of thing in there, consider making a second, plainer version with a 'Printer Friendly' link to it.

Got it in One

I think the key word for government sites is 'accessibility'.

Bullseye.

The rules for content are simple:

• The users have to be able to find it.
• The users have to be able to read it.

The first item means that you have to be really careful how you lay out your site navigation. Other posters have some good suggestions here. In particular, consider how your users will try to find things. Hint -- it aint by regulation number.

It is also important to provide your data in a usable form. Thomas [loc.gov] is a particularly bad example here. This site lists bills before the US Congress. Unfortunately, the "real" text of the bills is almost invariably in the form of a diff to a current law; it's impossible to tell what's going on without reference to the original, and even then, it's not easy.

In terms of fancy layout, etc:

• Take the graphic designers out and shoot them.
• Delete all the fancy "web design" tools. Anybody who uses a tool more sophisticated than Homesite will be designated a "graphic designer" and shot. Anybody can learn enough HTML to format a basic page in about 10 minutes.
• All testers must connect to your pages at no more than 14400 bits/sec. Broadband connections and local Ethernets are specifically forbidden.

In particular:

• Don't make assumptions about your users' hardware or software. In particular, don't assume any particular screen size or browser.
• No animation, Shockwave, graphics maps, Java, Javascript, background music, etc. Duh!
• User defaults are your friend; style sheets are your enemy. In particular, don't mess with fonts. Every commercial site out there tries to force me to read a tiny, san-serif font. Every usability study I've ever seen shows that serif fonts (Times Roman, for example) are more readable.
• Don't use tables for layout. They don't improve readability and they slow things down. Use tables for tables, and don't make assumptions about your users' screen size or resolution.
• Use graphics only when necessary and keep them small. Use the minimum color and resolution that you can get away with. Don't forget the ALT tags.
• Validate your HTML. There are a number of HTML validatiors out there; find one you like and use it. Amazing how often this gets forgotten ....

Above all, look at it! Look at it with every browser you can find. Don't forget the old versions. (And don't forget Lynx.) Get some blind (excuse me, Visually Impared) testers if at all possible to "look" at it with screen magnifiers and screen readers. Look at it over slow lines.

Note that, depending on the laws in your area, you may have specific requirements that won't fit these (or probably, any) guidelines (line numbering, fonts, etc). In this case, you may be limited to letting folks download a PDF file. Even in this case you should be able to post your HTML regs "for information only" and tell people to refer to the PDF for the "real" regs.

Anyway, good luck! One advantage of the current crowd of crap Webpages is that it's easy to look good.
--