Well, the other day I was watching the film Friends with Benefits when a scene came on that had me throwing imaginary bricks at the screen – not because I saw some silly UI design, but because of some ridiculous UX ideas that would surely lead to a significant loss in sales and a customer revolt for the website involved.

Let me know if you feel the same…

Note: There’s an interactive transcript on the video page or you can just activate captions above.

We asked people to use the microwave in the staff canteen to heat up some food for 1 minute and 40 seconds.

A simple everyday task you might think – but no, almost no-one could do it due to confusing button layout, bad button labelling and vague feedback on the LCD.

It’s crazy – who would sign the order to produce thousands of these microwaves without submitting a prototype to some simple user testing first?

Watch out for the classic line from one exasperated user: “I’ll have it cold!“.

Fans of good typography are like any other – they love a good fight and take sides easily, and sometimes the comment thread under my review of serif/sans-serif legibility heats up as if they’re arguing about religion, politics or even climate change.

Now, some commenters on the thread have claimed they’ve found research showing undeniable evidence of a massive difference in legibility between serif and sans-serif fonts, despite the overwhelming body of evidence showing that there is either no difference, or if there is a difference it is too small to worry about.

The research they’re talking about is from Colin Wheildon’s 1984 report – “Communicating, or just making pretty shapes?” (here reprinted in 1990). The report later formed a part of his 1995 book “Type and layout: How typography and design can get your message across–or get in your way“.

When you hear claims which are radically different from the established body of research, you should rightly be sceptical, especially when they haven’t been published in a peer-reviewed scholarly journal. Nevertheless, being sceptical means examining the merits of any research even if it goes against the consensus view…

Round 1: Down but not out

A few years after Wheildon’s book came out, it was savaged by researcher Ole Lund in a book review and PhD thesis, including what looked like personal attacks. But he failed to mention the basic problem with the research study – that it is very badly designed and the conclusions drawn from it are not credible.

Round 2: It’s a knock out?

Let’s take a closer look at the study as it is described in the copy of the report I have…

The set-up

In Wheildon’s experiment people were shown a newspaper article set in a sans-serif font, asked about their comprehension of the article and any other comments about difficulty in reading, then they were shown an article set in a serif font and were then asked the same questions.

Immediately we can see a problem -  The purpose of the experiment is revealed after one test condition but before the other, so biasing the second condition. People taking part in research studies are notoriously open to bias and leading questions, so the volunteers may have simply been saying what they thought the experimenters wanted to hear - this alone has the potential to invalidate the test (see the Hawthorne effect).

It looks like there may have only been one or two rounds of testing, which isn’t enough to produce a valid result either.  If it was the same article content shown each time, then obviously it will be easier to read 2nd time round. If you solve it by randomising the article order you’re going to need a lot more rounds of testing. If you solve it by using different article content how do you make sure they are equal in terms of reading difficulty to isolate the effects of different fonts?

Measuring the results

There is a table listing comprehension levels but we don’t get to see the questions. Why is comprehension the only measure used?

What about these other recognised measures of legibility or readability?:

• speed of reading
• speed of perception
• fatigue in reading
• backtracking and other eye movements
• perceptibility at a distance
• perceptibility in peripheral vision

A lot of space is given for comments from people about how they felt, the actions they performed or what they thought they understood when reading, but these are only anecdotal claims – there were no objective observations made using stopwatches or eye trackers to see what really happened.

The final bell

The research is poorly designed, wide-open to unintentional (and perhaps intentional) bias and doesn’t provide credible objective data.

However, perhaps I’ve got it wrong – the write-up I’m working from is very poorly described – If anyone can send me what they consider to be the definitive version of the report, I’d be glad to take another look.

But for now, I hope these 28 year old rogue claims about serifs are finally out for the count.

It reminds me that a lone zombie is slightly pathetic, but a horde (the proper collective noun) is terrifying!

Zombies!

Open Source Ecology

This site offers a  ‘Global Village Construction Set‘ for building your own industrial machines and living sustainably. I like the blueprint backdrop because it serves to reinforce the idea that you’re embarking on an exciting project to build a machine with the support of a community of other builders.

Open Source Ecology

Post-it

It’s quite easy to incorporate post-it notes, flags and tabs into a web page design – here it’s done in a fun way to highlight the practical aspects of the products, and to keep you in the post-it universe. Note: The design of the Post-it website has since changed.

Post-it products

Field Notes

The Field Notes site sells premium notebooks and makes every aspect of the visual design reflect the product, from the heavy grain paper backdrop to the faux ink printed typography. This is my favourite because it does it consistently and elegantly throughout the site, although it’s a shame that the visual theme isn’t carried over during the payment process as it is handled by a 3rd party vendor.

Field Notes

There can be a fine line between persuasion and deceit, and you have to have your wits about you if you don’t want to get fooled.

The ‘hide and seek’ button

When you want to access your online Barclays Bank account, you used to see a screen like this after entering your password.

Where is the button to access my account?

You’re focused on your goal of checking your accounts so you pay no notice to the rest of the page – the ‘continue’ button looks like the only choice to progress. But clicking on that button takes you off to a marketing opportunity, not your account. What you want is the ‘next’ button which is curiously hidden just under the fold.

Where is the real button to progress?

There it is!

Now it could be a coincidence due to my screen resolution, but those buttons are almost identical in meaning and visual aspect, and it’s easy to mistake one for the other when you’re in a hurry. Even after seeing this screen several times I would still click on the wrong button and be interrupted with a commercial offer I wasn’t interested in.

Verdict: A cheeky trick that relies on muscle memory and task blindness to reel you in.

The ‘camouflage’ button

If you have the free AVG anti-virus installed it will ask you to upgrade once in a while. The upgrades remain free as you can see from the screenshot, and they prime you to expect a green button to finally access the upgrade.

It's free...

But when you reach the download page the big green button that you will most likely click on without reading sells you the paid version -  the real button you want to click is hidden as much as possible. It’s at the bottom of the page, small, grey, inactive and uninteresting looking.

Verdict: A cheap trick – Find a more honest way to get me interested in the pay version.

...but we REALLY want you to buy the paid version

The ‘counterfeit’ button

Yes, I know it is bad to watch shows online from unofficial sources, not just because it’s a form of piracy but also because often you can’t trust the site. Here it is pretending to be a Firefox browser notification, the kind you get when you try to install a flash plugin. I don’t know for sure if it would download a virus but if it turned out to be a real video player then it would make it worse – that a legitimate software company would stoop as low as virus makers to spread their product.

Verdict: A shameful deceit that traps inexperienced users.

Fake Firefox notification

No need to be sneaky

If you have a product that you think your customers might like, don’t try to trick them into buying it – that approach will tend to backfire. Instead try to understand your customer and find honest ways to win them over where hopefully the value and the quality of the product will speak for itself.

The designers save you time here by automatically inserting the items in a tidy way while indicating exactly where you originally placed them (a line is stretched from the text label to the risk rating) – no annoying precision mouse movements needed.

This time we’d thought we’d go all the way to capture that important non-verbal communication. Here’s a representation of what I could see from the video-conferencing room in Paris:

There were 2 large flatscreen monitors on the wall, with a camera between them. One screen showed the system under test, and the other showed all the people taking part:

• The test facilitator (me) in Paris
• The test participant in Vienna
• A standby translator in Cologne
• The project managers observing from London

It was quite tricky setting up the simultaneous feeds from 4 different countries, and there was a slight delay in the audio – similiar to what happens when you see a TV satelite link up, but overall it was worth it. There would have been no other way to bring all these people together within a reasonable financial or ecological budget.