There’s something you should know about me: as far as developers (even developers-turned-UXers) go, I’m pretty anal when it comes to pixel perfection. If something doesn’t look exactly right to me, it will haunt me forever (the tale recounted below still does). Actually, before I let it haunt me forever, I usually completely exhaust my colleagues and all others involved by trying to convey what it is precisely that I want things to look like. As a personal example, imagine this setting: it’s about 11PM on a “school night”, I’m holed up in a meeting room at work trying to madly finish coding before a demo in a couple of days. As design resources and time are scarce, I outsource the creation of the demo-accompanying poster to a trusted third party (unpaid labour in form of immensely talented boyfriend), while I continue to pound at the keyboard. I’ve given the general idea (“a stump and some bubbles on one side with an arrow pointing to the other side, where the stump has grown into a tree with a full crown”) and left a quick sketch already, so I don’t foresee any problems.

At the first checkpoint (it’s hopelessly past midnight by now), I am delighted – the stump is picturesque, the tree fully-grown, the bubbles a-floating. Beauty! Just a couple of minor corrections – “could the bubbles be a little more reflective and the arrow be centered, pretty please” – and this baby will be smokin’! Type, type, type…

Checkpoint #2: marvellous! Reflections are reflecting, the tree detail is looking within epsilon of photo-realism, but – what’s this? – the arrow isn’t centered! “It’s centered”, he says, “I used the auto-align”. OK, maybe once this is polished it’ll look centered. It’s bloody late.

Third and final checkpoint. The arrow. Doesn’t. Look. Centered. I don’t care what your auto-align says, there is a bunch of white space on the left near the stump, which is making it look like the arrow is much closer to the tree on the right with its abundant, seemingly rustling leaves (my eye begins to twitch). Please, move the arrow. “I don’t understand what you want”. Seriously? Here’s an MS Paint sketch (did I mention resources are scarce?). Obviously, it doesn’t help. A follow-on phone conversation does more damage than good at this point. This poster has to be out at 9AM, from which we are only a couple of hours away. Everyone’s pouting really hard, so, finally, I admit defeat and concede. Damn you, optical illusion.

The poster was printed and presented, along with the demo, in a semi-timely fashion. I’m pretty sure noone else noticed, but the arrow really bothered me (it’s also been kind of a running joke among my colleagues, when I insist something minuscule be changed, I get “Oh, what, you want me to center the arrow?”). Anyway, you probably think I’m crazy at this point, but do this quick little experiment for me: if you own an iPhone, and have installed iOS4 on it, go ahead and place a call to somebody – anybody. Now wait for the “End” button to appear. Look at it closely… do you see it? Clearly, the little phone icon and the text have been grouped and centered, leaving equal amounts of white space on each side. Doesn’t it look off? It seems to throw the entire otherwise perfectly symmetrical UI off-balance. This isn’t anal antics, people, this is polish!

The real moral of this story, though, is that the way your interface is received is entirely independent of how well you’ve lined your pixels up in a row. Of course, I’m not promoting approximate layouts – the grid had, has, and always will have its place. But the next time you’re putting something together – be it a web app UI or a poster – consider the people looking at it. Will the arrow fall too close to the tree? Only real user exposure can decide.
P.S.: The lesson for me out of this is that beauty (or perfection) is in the eye of the beholder. If I’m the only one bothered by a particular detail, which causes me (and others I involve) to waste time on it and no real user would ever notice it – I have got to learn to let it go. I swear I’ll try it… next time.