September, 2008


29
Sep 08

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.


27
Sep 08

Permalinks — a guide for the perplexed at Sutton Council

Sutton Council launched their long-awaited new website this week and it’s disappointingly dreadful in many ways. Possibly worse than anything in the design or content of the site is the sad fact that the new design has broken all the inbound links to the site, just like it did the last time and the time before that.

What does this mean, why does it matter and what can be done about it?

Continue reading →


22
Sep 08

Morden town centre regeneration consultation — a Plain English summary

Merton Council are running a consultation called moreMorden until 10 October 2008 on outline proposals for regenerating Morden town centre. What follows is my summary of the main consultation document (PDF) and its supporting fact sheet (PDF). I don’t work for the council, so these are just my words, not my ideas.

Members of the public and local organisations can make their views known via a paper questionnaire (PDF), an online form and unusually, on a moreMorden Facebook group.

Continue reading →


20
Sep 08

Estimating upload and download times with Google Calculator

While this won’t be news to some, most people still don’t know that you can use the standard Google search box as a sophisticated calculator and unit conversion tool. So if you type:

2 * 3

into the search box, you’ll get 6. Pretty handy, but nothing you couldn’t do easily with your desktop or computer calculator.

Where Google Calculator comes into its own is handling almost every conceivable unit of weight, volume, time and even computer storage. This is great if you need to estimate an upload or download time. Here’s how you do it.

Continue reading →


17
Sep 08

Parsimonious design (or not)

Perhaps ironically, parsimonious design suffers from the lack of a clear definition. For some it’s practically synonymous with simplicity. For others it takes a narrower meaning that’s nearer to frugal.

Parisimonious design is when you’ve got enough, but no more. It prefers simple solutions to complex ones and conserves scarce resources wisely. We might think of these resources in economic or environmental terms and design products that are both cheap and don’t consume an excess of material or energy. We might consider the user and reject designs that squander their time, attention, energy and space.

Many bad designs offend against the principle of parsimony by being too big, too wasteful, too expensive, too complex, too high maintenance. Such designs are the metaphorical sledgehammer to crack a nut. We find ourselves thinking, “Do we really need all this just to do that?

Continue reading →


12
Sep 08

The features you have vs. the features you use

As my own small contribution to the literature on featuritis, here’s a personal illustration. My mobile phone isn’t anything fancy. It’s cheap and very basic by today’s standards. No internet, no camera, no MP3 player. I bought it because all I wanted to do was to make calls and send texts.

So here’s a list of what my “simple” Nokia 1100 can do, and what I actually do with it.

Continue reading →


12
Sep 08

Reboxing videos

I’m quite sure that very few technology enthusiasts have missed out on the phenomenon of unboxing videos, whereby enthusiastic customers record the unpacking of their new products with trite and inane commentary. But what happens a few months down the line when your latest darling has been superseded and you’re selling it to be able to buy the latest, greatest model?

Recently I sold my Asus Eee PC 701 netbook and it took me longer to get it back into its complex cardboard home than it did to work out how to restore the operating system and run it. In fact, I never did work out the various flaps and folds of that box properly — I just packed the power brick and battery in a separate box and gave up.

So here’s to a practical application of unboxing videos beyond conspicuous consumption. Play them backwards and work out how to get the spaghetti back in the box when its end comes.

Bring on the reboxing videos.


9
Sep 08

Estimated date of birth — an interaction design pattern

Context

You want to collect the dates of birth of a group of people so that you can analyse and segment the group by age, but asking for a date of birth isn’t necessary for any specific reason and many people in the group may balk at giving you this private information.

Continue reading →