Usability


10
May 11

Council website adverts: A design perspective

Anyone can design a website, just like anyone can take a photograph. But good web design, like good photography, is really, really hard to do.

And the evidence is all around us. Most websites aren’t that great, even those from well-resourced organisations that can hire teams of people to work on them.

Council websites are just about the hardest kind of website to design. Councils are large organisations that deliver an extremely diverse range of services within a sensitive public/political context. And they have to serve the whole community, not just most of it. And so while it’s undeniably true that many if not most council sites have a long way to go before they realise their full potential, I have every sympathy for those who are trying to deliver such complex designs with often very limited resources.

Good design means getting the big ideas right and then sweating the details. These are both really tough jobs and you don’t have forever to do them.

You don’t need to be an extreme minimalist to understand that every time you add something to a website you take something away. You increase users’ cognitive load. You draw their eye. You displace other page elements, or if you’re adding pages, you add another item to your navigation and search results. It all adds up.

I’ve never seen a website that was improved by adverts.

Every great website has come about because people worked hard and smart at stopping it being crap. They had the balls to say “no” more often than they said “yes”. They trimmed out flabby content, sharpened up the writing, weren’t satisfied with second-rate images. Engineers worked to progressively trim fractions of a second from the page load times, tweaking the front-end code, the back-end application and the server infrastructure. Titles and headlines were rewritten. Everything was meticulously researched and tested.

It’s hard to see how slapping a couple of ad blocks on the page is going to make this job any easier. And it’s not like the average council website is so fast, clear and simple that it can afford to take any kind of usability hit.

Ah, but they do it in the private sector. Indeed they do.

And their websites are undeniably worse for it. Of course they’d rather not do it, but if selling ad space on your site is necessary to bring in essential revenue to run it, you don’t have a choice.

The best private sector sites running adverts are very different from council websites. Take The Guardian. Although this is a big and complex site, essentially all most visitors are doing is finding and reading news. That’s just a single task. Council sites have to support hundreds of tasks. And The Guardian has design and development resources several orders of magnitude greater than any council. All their content is produced by professional writers and photographers, too.

So councils have the challenge of producing some of the most complex websites imaginable. But they also have the advantage that they’re funded to do that. They don’t need to raise revenue through the site itself. They can concentrate their resources on producing the absolutely best user experience possible without having to shill for a few pennies on the side.

Councils should fight for every inch of quality on their websites. Adverts are a completely unnecessary and harmful distraction from the real task at hand. Make your site great and the benefits will far exceed any cash you can drum up by encouraging people to click away from it.


12
Oct 10

Designing with the Delete key

We keep hearing about the cuts. About how councils are going to have to do more with less. It seems like an impossible task, and maybe it is.

But if you work on a council website you can make a start today by simply removing all the stuff on your site that really doesn’t need to be there.

This will be both the cheapest and highest-value redesign you’ll ever do.

It will save you money on your hosting costs. Less stuff on a page means less data coming down the pipe. Lower bandwidth charges.

Your pages will load faster and you’ll be able to defer server upgrades longer.

People will be happier that their pages load more quickly.

People will be happier that they can find what they want more easily without having to wade through clutter and confusion.

You will save on development and maintenance costs. Deleted content and features cost nothing to maintain. You’ll never have to review, fix, redesign or rewrite them again.

With a bit of luck you’ll find that you don’t need a mobile website. Your current site, without the clutter, will do just fine.

And once you get into the habit, you’ll start to be a lot more discriminating about what you put on your site in the first place. The default answer is no. Anything that goes on has to fight for its place.

To get started you’ll need a structure and a strategy.

The structure is that you’ll remove one thing every day. It’s very unlikely that you’ll run out of things to delete, but worry about that “problem” when you get there.

One page.

One section.

One microsite.

One feature.

One sidebar.

One word, sentence or paragraph.

One link.

One form field.

One button.

One image.

One form.

Just something. Get rid of it.

The strategy is a little bit harder. How do you know what to delete?

The short answer is anything you can live without.

I’ve been through my own council’s website looking for examples. So far they break down into these categories, which should give you some inspiration:

Cargo Cults

A to Z navigation. Every council site has it. But what’s it for? Your site surely isn’t a phone book that needs an index. It’s probably a hold-over from the days of static sites that didn’t have a good search feature, if they had one at all. You probably had far fewer pages in those days too so the list of links on each letter page was much shorter. Sort out your search if you need to (make it prominent, fast and accurate) and drop the A to Z.

Cargo cults are things you do because other sites do them without you giving any serious consideration of the value they provide. Perhaps they’re required by some guidelines somewhere. Maybe they made sense once but not any longer. Question them. Challenge them. Think about it. Then do what you think is right as long as you can defend it.

Content

Badly written copy. Copy that’s too long. Stuff that’s too time-sensitive for you to maintain properly. Reams of instructions for things that should be simple enough to use without explanation. Fix the underlying issues if necessary, then delete them.

Feature Duplication

There’s no need to reinvent the wheel. Browsers and computers have got built-in features for changing the text size, adding bookmarks, displaying the time and date and managing subscriptions to content. Don’t waste your time doing things that are already done perfectly adequately elsewhere. Could your contact form be replaced with just a simple email address?

Images

A picture is worth a thousand words, several thousand bytes, quite a bit of money every year in bandwidth and a fair amount of time to source, resize, upload and review. They take up your readers’ time and attention too, often drawing their eye from the real content on a page. Imagine this page without the text headings. Now imagine it without the photos. See which one works?

So treat pictures as content rather than decoration and make every one count. If a picture isn’t high-quality and supremely relevant to the page then drop it. There should never be a rule that every web page must have a picture. Stock photos to illustrate generic concepts are nearly always unnecessary. Showing real people, places and activities at your council may well be fine, but not much else.

Forms

Every field you add reduces the chances of someone completing the form. If you don’t need to know something, don’t ask for it. You don’t need my postal address when I’m reporting some graffiti to you.

Multi-page forms are painful. They seem to go on forever and you never know what’s on the next page. They require some kind of navigation between the pages, which adds to the complication and the scope for error. Fit the whole form on one page, even if the page looks a bit long. People can scroll. You’re not designing for a bit of paper.

The one button every form needs is the Submit button, but it should probably be called Send or Save or Report It or something that makes sense in the context of the task. If you’ve got any other buttons like Reset (i.e. Delete everything I’ve just typed) ask whether you really need it.

And it’s worth asking whether the whole form is really needed at all.

So…

Getting rid of all the clutter on your website doesn’t require a great deal of design insight or technical skill. But it needs a lot of discipline. So once a day just delete something that you can live without and you’ll be working towards a faster, cheaper, simpler website with much happier users.


7
Aug 09

Worst practice: 10 ways that Sutton Council’s website (still) drives me nuts

UPDATE 1 March 2010: Let’s see how the site’s doing seven months after I originally published this article.

Someone famous once said that the true definition of madness is doing the same thing over and over and expecting the results to be different. Well I keep going back to the Sutton Council website and nine months after launch it’s still not any better. Arguably it’s worse.

Continue reading →


13
Oct 08

Some pleas to reduce WordPress misery

This blog runs on WordPress and I have a love/hate relationship with it.

Actually, it’s just a hate relationship really. I hate the way it works, I hate the scrappy, crappy codebase and most of all I hate myself for not finding something better, or in lieu of that, making something better.

Phew.

WordPress 2.7 is currently in development and the wireframes show some improvements in the admin interface. That’s to be welcomed. However, as an encouragement to take usability further here are a few pointers for other improvements.

  1. Generally when I log in its because I want to write. I care little for the Dashboard. Take me straight to the new post editor or at the very least give me the option of configuring the admin so that it does it. A cramped “QuickPress” box isn’t a substitute for the real thing.
  2. Stop telling me about how much spam you’ve caught. The purpose of a spam catcher is to make it disappear, not to bother me further with reports on how successful the spam catching is.
  3. Matt Mullenweg’s thoughts on his breakfast, USian politics, the Amazon Kindle or indeed WordPress itself form no part of my workflow. If I want to subscribe to any WordPress development blogs I’ll do that in my feed reader. This functionality doesn’t belong in WordPress anywhere.
  4. You’ve just bought a brand new Moleskine notebook. Unwrapping it and opening it up, you discover that someone has already scrawled on the first page, “This is an example of a handwritten page in your new Moleskine notebook. You can write pages just like this yourself. Try it!” You then have to rip out the example page to actually get started. WordPress should employ effective blank slate techniques, not stuff the database with example content on a new installation that users have to delete before they can use it. Ditto, bookmarks in the links section.
  5. The default theme should be as minimal as possible both to encourage users to switch to something else and also to provide the simplest possible starting point for theme development.
  6. Uncategorized isn’t a category, it’s information architecture leftovers. Make the app work with no categories and start like that by default.
  7. I’m not your pardner. Please don’t address me with “Howdy”.
  8. Is it a blog? Is it a CMS? No, it’s a “state-of-the-art publishing platform“. This means nothing whatsoever. WordPress rapidly needs to work out what it is and who it’s for before it goes even further down the route of being jack of all trades and master of none. If this is the state of the art then the art is in a pretty poor state altogether.

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 h4x0rz.

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 →


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.