Bad design: Eyeball gremlins

It’s like a Norman Door for newspapers. I’m trying to scan the homepage of a leading national newspaper and it’s as though there’s a gremlin in my skull and he keeps making my eyeballs point at the wrong thing.

I let my gaze range over the screen looking for content that I might want to read. Each thumbnail image draws my eye, like a visual magnet; from there I attempt to read the story title. But, I can’t make sense of the text; it seems incongruent with the thumbnail image. Oh, wait, that isn’t the text for that thumbnail image at all. Here, have a look

Not even the designer to developer language barrier can account for it

It’s such a basic design fail that it’s shocking to find on the homepage of one of the nation’s leading newspapers. I can’t even see this being the result of miscommunication between the designer and the developers. There’s just too much fundamentally wrong in the design decisions that had to have been made (or not made) to blame it on anything other than bad design.

Does this beard even belong on my face

So, what is wrong with this newspaper? Any designer worth their hipster beard and moleskin notepad should intuitively know the Gestalt principles, even if he, or she, or I, can’t name them (Now I’m wondering if there even are female hipsters?). The design-fail in question is a screw-up of one of the most basic Gestalt principles, proximity. This principle states that elements that are closer to each other than they are to others are perceived as related, they form a whole.

What do you see above? A circle and a square sitting beside four circles? A weird-looking ‘i’ and four circles? The least likely is, one square and five circles?

Our minds have evolved to make sense of reality in very efficient ways (albeit with lots of errors). Perceiving separate elements as single entities based on relative proximity is so fundamental to the way our minds work that it’s almost impossible to see the picture above as five circles and a square, even when you try.

Back to our crappy online newspaper. Have a look at the close-up below and scan the stories. You can see, once you read the titles, some of the images are connected to the wrong stories. ‘Bishop welcomes…’ seems to be the suited male politician on the red leather bench reading papers when in fact it’s the blonde short haired woman who seems to be attached to ‘Terror charges for…”

The same goes for the ‘Climate forces…’ title for which the man with the painful squint seems to be related to the ‘More than 100 feared…’ story.

It’s all relative

To be clear the problem is not the absolute distance from the title to the thumbnail image. It’s the distance relative to other spaces. If they made the space between the centre column images and the stories to the right double the space that separates the images for their related stories to the left the problem would be resolved without even touching the formatting of the two elements that need to be perceived as related.

The longest mile

Then there’s the fact that in the West language is read from left to right. However, our eye is commonly drawn to the visually dense imagery first. So in this case even when we decipher the relationship between image and text we are forced to make a two steps forward one step backwards dance move with our gaze in a zigzag down the screen in order to glean what’s even worth reading in this newspaper (don’t bother, it’s crap, try the Guardian, the NY Times or Le Monde).

And another thing

Don’t make the spacing between every element the same. I had one otherwise very talented designer I worked with liked to have a ‘magic number’ for spacing on each interface he designed, and all spacing would be exactly and consistently this amount. Unfortunately, the result is an almost imperceptible destruction of information hierarchy and a full-blown challenge to our minds’ attempt to form meaningful chunks from the conglomerate of information on the screen. Leaving one option, look at the screen as one thing, just like we often do as designers, marvelling at the balance of our overall composition, while failing to realise that no one else is going to be looking at it this way. So don’t look at your information design as a design. Try and use it.

And another, another thing

Using separator lines is like a dyslexic sub-editor rewriting a poem by Bukowski. Just leave it alone, you’re distracting us from the main experience.

Two-minute eye bath

I had to tidy it up a little (below is cut and paste repair job), just to calm the angry brain gremlin twiddling my eyeball controllers. Although there’s still an editorial issue with the choice of images.