The uncanny valley hypothesis holds that when robots and other facsimiles of humans look and act almost like actual humans, it causes a response of revulsion among human observers.

Source: Wikipedia

I’m talking about the uncanny valley in regards to creating prototypes, so revulsion may be too strong a term; but I think the principle still applies.

I was lucky enough to attend UX London recently, and one of the workshops in which I participated was Mark Baskinger and William Bardel’s Quick Sketching for Interaction Design. In this workshop we were taught to draw squares, and one of the key tips we were given was to make them good, but not perfect; if the corners don’t have a little overlap, your prototype sketches start to look complete and are less inviting for comment and participation.

There’s another way in which small imperfections can work in your favour. While my sketches (such as this one, for a project which, unfortunately, never saw the light of day) could never be accused of being too perfect — that’s the reason I attended the workshop, after all! — I do like to use the same principle in my more formal wireframes:

Although I use a basic grid to provide regularity to the eye (usually 3/6 columns), I make sure that large blocks of ‘text’ don’t end at the same point:

This is only a small detail, but it more accurately mimics how text appears on pages, and suggests to the viewer a more realistic impression of how the final page will appear, where a series of identical, regular blocks would appear false. That small detail can help get your prototypes approved.

* Scott McCloud looks at the subject from a different angle in his excellent book, Understanding Comics:

Here’s a quick round-up of a few links that have grabbed my interest over the past weeks; I’d like to write more about them, but time forbids.

Yahoo’s New Application Platform Is Heavy On Social Features

The work that Yahoo (sorry, I refuse to use the exclamation mark) has been doing on open web standards and platforms recently has been fantastic, and the recently-announced Yahoo Open Strategy looks like a logical next step. I don’t agree with this article’s conclusion that this is Yahoo playing catch-up with Facebook, but otherwise it’s a good introduction.

Windows Toolkit Gives Oomph to Microformats

For a company that so often gives the impression (perhaps not always fairly) that it has no time for open standards, Microsoft’s support for Microformats has been impressive. As well as the hAtom-powered Slices feature in IE8, the recently released Oomph toolkit provides in-browser Microformats detection (similar to Firefox’s Operator) and a set of standard CSS styles. Nice work.

Firefox Themes: The Contention Between Visual Hierarchy and Toolbar Customization

A really interesting look at the theory behind the design of the Firefox 3 toolbar and icon set, as well as a general overview of visual hierarchy and interactive design.

I’m not saying that to boast of my geek credentials, but to introduce something I never imagined I’d find: a connection between the two.

Garrett’s famous diagram introduced the concept of the five Elements which make User Experience on the web:

He later distilled those five elements to: Strategy; Scope; Structure; Skeleton; Surface.

McCloud’s book is an analysis of the visual language of comics, and he lists six elements which he says make up any work in any medium: Idea/Purpose; Form; Idiom; Structure; Craft; Surface.

I think you can see where I’m going with this; although McCloud uses six steps to Garrett’s five, the mapping is still quite straightforward:

1. User Needs / Site Objectives = Idea / Purpose
2. Content Requirements = Form & Idiom
3. Information Architecture = Structure
4. Information Design = Craft
5. Visual Design = Surface

Although I can’t be the first to draw the parallel, I think it’s quite nice. It adds extra validation to both concepts, and helps me to convince my friends and colleagues that reading comics isn’t a sign of arrested development.

I recommend both books very highly, of course.