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.

A shop like GAK should know better than to mess with the intellectual property of a giant like Amazon! Look at the screenshots below and tell me if you think they went a bit too far.

Amazon 'Add to basket' button

GAK 'Add to Shopping Cart' button

However, I’m not aware of any serious peer-reviewed research that provides evidence for these claims. My guess is that after 30+ years of maturing user interface design, that both platforms are about equal – with strengths and weaknesses in different areas.

But what about when the interaction is not all about clicking on windows with a mouse? Both Apple and Microsoft have invested heavily in ‘haptic’ or’ touch-screen interfaces in recent years, but as usual it looks like Apple has cornered the market with their first product – the iPad.

iPad – a good first try

I’ve been using an iPad for the best part of a week, and I have to admit, I’m impressed – but don’t buy it yet! Wait a few years till you see the 2nd or 3rd generation iPad, and consider what the competitors come up with. The iPad is a very good first attempt at a 21st century tablet computer, but it does have its faults:

The good

• Very handy – small form factor means it can adapt your needs rather than the other way around
• Powers up in a second – quite revolutionary for a computer
• By far the best device for using maps and looking at photos
• No impression of eye-strain from reading the screen
• Long battery life

The bad

• Surprisingly heavy and tiring to hold after a few minutes
• Typing and editing text can be fiddly and even infuriating
• Lack of multitasking can make some tasks quite inefficient
• No flash support (but maybe that’s for the best if it encourages the take up of HTML5 for video)
• Almost useless without an internet connection
• Very expensive

What impresses me most in using the iPad is that you can easily imagine the game-changing potential for many people of a well thought-out tablet computer…they just don’t know it yet!

Links must be always be underlined when they are embedded in body text. You can do without underlines when the links are used for:

• Navigation bars
• Tabs
• Buttons
• Any other element that looks obviously clickable by its visual design or context.

Colour

Recommended colours:

• Blue for unvisited links (HTML colour code: #0000ff)
• Purple for visited links (HTML colour code: #800080)

Guidelines for other colours:

• Unvisited links should be more vivid, bright, luminous, and saturated than the colour for visited links.
• Visited links should look “used” (dull and washed out).
• The two colours should be variants or shades of the same colour, so it is easy to understand the relationship between the two types of links and to identify which colour is the “used” version of the other.

See more guidance: Guidelines for Visualizing Links (useit.com).