Fixing Sutton Council’s usability with Greasemonkey

Having dealt with the issue of broken links on Sutton Council’s new website, today I’ll turn to some of the other usability issues that beset the hapless traveller on their road to local government web nirvana. True to the spirit of my own advice about fixing problems where possible rather than just moaning about them, I’ll present a fix that will curb some of the worst excesses and give the site better usability in some areas. Scroll to the bottom for the good stuff if you can’t wait. First, the discussion.

1. No distinct link colours, no visited link colours.

I’ve read half of these stories, but which ones?

Two of the web’s strongest conventions are to use different colours for links and body text, and to use different colours for visited and unvisited links. Ignore them at your peril.

Links need to stand out from body text so they’re easily visible at a glance, not just on closer scrutiny. The usual method is to use a contrasting colour for the links and to underline them. The underlining can be dropped in obvious groups of links such as navigation bars and at a push in body text. A different colour is pretty much mandatory. If you’ve got links, why camouflage them?

Using a different colour for visited links is all but essential so that the user can easily see which links they’ve used and which they haven’t. The more links a page has, the more important this becomes. Again, it’s effectively a mandatory usability requirement and so widespread it’s ubiquitous. Not using different colours for visited links is one of Jakob Nielsen’s Top 10 Mistakes in Web Design.

On Sutton Council’s new site, the body text is black, the links are black and underlined and the visited links are black and underlined. Spot the difference? Clearly, badly-conceived ideas about graphic design have taken precedence over the convenience and sanity of the poor souls that might actually have to plough through some of the site’s several hundred pages. Or maybe the designers have short-term memories that can hold twenty or thirty items. Who knows?

2. The Clock/Calendar anti-pattern

Perhaps I’m not really in the target audience, but when I want to know the time or the date my first instinct isn’t to visit Sutton Council’s website. Right now I can see the time in three different places (watch, wall clock, taskbar) and finding the date requires no more effort than hovering my mouse over the clock in the corner of my screen.

Putting the current date and time in a web page is rarely necessary and often confuses. Aside from the obvious cost of cluttering the page with something that just doesn’t belong there, it can lull the user into a false sense of contemporaneity. Hey, this site is bang up to date! Just like the clock on my wall!

Sadly, the current date on a web page is often mistaken for the publication date of the web page itself. This is a problem as I hazard to suggest that very little of Sutton Council’s web content has been published within the last minute. It would be all too easy to see that date as being relevant to an otherwise undated news article or press release.

Dumping the current date and time into a web page is a shoddy anti-pattern that needs to stop. It’s a bad habit picked up by lousy designers (or lousy clients) who presumably feel that it’ll liven up an otherwise pedestrian site. If it’s not contextual it’s clutter, so leave it out.

Incidentally, given that the council’s PR department ploughs through nearly £600,000 a year, it’s worth asking whether we can get dated press releases and news articles for that money or will we have to stump up a bit more. What’s it worth?

3. Teeny text

Is it just me getting old or is the text just a tad too small? Yes, there are gratuitous “accessibility” widgets at the top of every page to adjust it, but a better approach might well have been to make it a bit bigger by default. Not everyone on the web is a 20-something 1337 h4×0rz.

Help is at hand!

Better Sutton Council is a Greasemonkey script I’ve written to fix these problems and enable colourful, legible and bad-date-free browsing.

How to get it:

1. You must be using the Firefox browser. No Internet Explorer, Opera, Chrome or what have you.

2. Install the Greasemonkey add-on if you don’t already have it. You’ll probably know about it if you do.

3. Install Better Sutton Council as a user script and if necessary, activate Greasemonkey by clicking on the greyed-out sad monkey face on the status bar at the bottom of your browser window. Once the monkey face is smiling happy and colourful, you should be ready to go.

4. Just refresh/reload/visit Sutton Council and enjoy a whole new way of browsing.

A couple of important points:

  • I haven’t been bothered to track down the exceptions to the default link colours I’ve defined for darker backgrounds. My aim is to make the site more legible and usable, not to improve its overall prettiness. If you’re expecting a comprehensive redesign you’ll be disappointed.
  • This “hack” operates purely in the user’s browser within a well-managed script framework for modifying downloaded web pages before they’re displayed. At no point have I compromised Sutton Council’s security or created any vulnerability on anyone’s computers. Don’t embarrass yourself by trying to McKinnon me: I haven’t done anything worse than the web equivalent of colouring my daily newspaper with crayons.

The software’s in the public domain. Modify to taste if you know how. If not, just enjoy it as it is or uninstall through Manage User Scripts on the Greasemonkey menu (right-click on the monkey face).

That’s better.

2 comments.

  1. thank you for this. i used it to figure out how to “fix” the links at accesstoinsight.org :)

  2. [...] clicked? Tough. Perhaps the designers were off for Usability 101. So irritating that I wrote a Greasemonkey script to fix it. (Who says users never want to customise their council’s [...]

Post a comment.