Between desire and reality

The eagle-eyed among you may have noticed a slight change in the wallpaper. For many a happy year the top few pixels of my beloved weblog were emblazoned with the somewhat opaque Fact & Breakfast the supposed title to all the musings that lay within.

Underneath sat a P.G. Wodehouse quote: No good can come of any association with anything labelled Kathryn just so the reader was sure they’d arrived at the right place, given the only other mention of my name is in the url itself.

I don’t know why I’m telling you this. I could just show you:

But now, alas, no more.

I picked the name back in 2009 when I needed ‘proper’ website (I use the term lightly). It comes from the usual dated obscurity I thrive on: the opening title to A Bit of Fry & Laurie series four.

I’ve long admired their mix of stupidity and sarcasm. Between fact and breakfast madness lies was full of brusied language and mangled semantics and its shortened version summed up my content perfectly: the occasional ‘proper’ article mixed with all manner of nonsense I needed to get out of my head. And between the two there surely is madness.

It’s served me in good stead. It’s proved as incomprehensible as much of the content that sits beneath it. And yet… the darling site needed an overhaul because it broke several IA rules (101: let the user know where they are. 208: Use clear, understandable language., 305: don’t expect everyone to live their lives via comedy quotes from the 1990s.), it didn’t look right in IE9 and… you know what? I’m looking for a job and I didn’t want to put people off. There you go: your favourite left-wing slapstick lover is MERCENARY AT HEART. Damnit, John, we’re not in Uxbridge anymore.

So, it’s gone. But it’s still all over the site. Partly as tribute, party because I’m not going to edit out every reference to it. If anything the stupidity lives on its Tumblr sister site. But for now we’re boring old Kathryn Hegarty. Some comfort at least that if nothing else you finally know my name.

Conform

Much as we try, humankind has yet to find an alternative way to gather semi-structured information from its fellows, so sticks to complicated, confusing, consequently soul-destroying forms. (And, I guess, helps keep me in a job.)

But employed or not, they’re a bugger, pure and simple.

It struck me one balmy afternoon that unlike many other interaction staples, (e.g. navigation, search, links) that there’s still not a definitive design pattern for forms. Not that those other three are always done correctly but there’s a common agreement about what good practise is. I think we’re still getting there with forms.

One obvious reason for this is that every form should be bespoke. It needs to be thought about as its own individual case. What was right previously might not be right this time. In fact, going in thought-blind is probably watch causes at lot of the problems.

But even though individual attention is needed there are a few overarching principles and patterns that I like to include. I believe they make the form easier to complete (which in turn decreases drop-off rate yadda yadda ).

Ulitmately we’re trying to assist the user and reduce the risk of errors. So:

Structure logically according to the task.

First things first, why do we need the form? If the information can be gathered any other way, don’t subject your users to it. They’ll only hate you for it.

Oh, and pre-populate fields where you can. Nothing’s more annoying than entering information unnecessarily.

Once you’ve established that form and all its content is absolutely necessary, structure it according to what it’s trying to achieve. If it’s long, break it into sections and include progress indicators. A task with an end in sight is more managable than one than a potentially infinite one.

I’m not going to witter on about the best way to do this – it really does depend on what the form’s for. But at the form field level, I think there’s a strong argument for consistent design patterns.

Tell the user what they have to do.

Each form field or field group should have a title.
Form title

Indicate whether the field is mandatory.
Mandatory fields

Add explanatory text.
Explanatory text

Offer further help e.g. rollover tool-tips or text blocks.
Tooltip off

Clicking the tool top shows the text block with help information.
Tooltip on

Hide fields the user does not need to complete.
Fields hidden

The secondary field isn’t shown until it’s been established the user needs to complete it.
Fields shown

Help the user to avoid mistakes and assist them when they do.

Using pre-submit error validation.

As the user types the system verifies their input, in this case 8 characters, alphanumeric characters and spaces only.

Success, or not, is highlighted and the user can make corrections before submission.

Using post-submit validation.
If fields cannot be verified on the fly, display the number of errors at the top of the page, and mark the individual fields that need correcting.

Clearly highlight errors and give clear instructions how to fix them.
Provide explanatory text against all error fields, whether using pre or post-submit validation.

That’ll do for starters. Play nicely now.

It’s not what’s wrong, it’s what’s right.

So Vincent Flanders’, author of Web Pages That Suck (an educational tour around some complete car-crashes of websites), has said that from a design perspective, there’s little point in looking at good websites, as they are unlikely to inspire.

Now I love ripping sucky websites to shreds as much as the next person, but I wouldn’t dream of developing my designs purely on a what-not-to-do basis. Good websites are exactly the sort of sites I want to look at because they encourage me to raise my game in a creative, non-prescriptive way.

Whenever I get involved in a website redesign, I’ll look at websites that fall roughly into two categories:
1. Great site, simple as, for any number of reasons e.g. design, navigation, cross-channel integration
2. Sites that might be viewed as ‘competitors’ to my site because they operate in the same business arena, have similar content, or are actually companies in direct competition.

I’ll look at these sites to understand what’s being done well, across the internet as whole, as well as more contextually. Apple might have a beautiful site, but doesn’t sit next to a government quango in terms of business space. So to balance out, I’ll also see if any other government quangos have a really inspired way of using social media, for instance. (This is an area where government can often go wrong, by trying to appear too ‘with it’, which Apple gives the appearance of doing effortlessly). Some principles of good web design are global, some are contextual.

Looking at these sites does not put me off or dishearten me, but drives me to be as good as them. My thoughts are about what can I learn and how I can apply it, positive aspirations. If I were to look at only bad websites, I would quickly feel angry, depressed, and unchallenged. If I’m unchallenged I won’t put in proper effort, I won’t be striving for anything, because I know I can do better than the sites featured on Vince’s site.

That’s not to say that rules aren’t needed. I think part of the reason I disagree with Vince over the value of looking at bad sites is because I’m already well aware of the fatal mistakes websites can make and what should be done to avoid making them in the first place. It’s my job to know. So maybe I’m not the audience he’s trying to reach with this.

But I would say to anyone who’s interested in web design at all that learning from others’ successes is just as important as learning from others’ failures. After all, no one learned to write by reading Dan Brown.*

*yeah, it’s a needless pay off, but I really don’t want to read anything he writes, ever again. It hurts.