Rendering in Reality

The imperfection of “pixel-perfection”

A lot of web design is about managing points of failure. Servers go down, databases become disconnected, browser updates break previous designs. Lots of things can prevent your message from rendering on your audience’s screens.

But even if everything goes swimmingly and your message is flawlessly rendered in the visitor’s browser, it still has to overcome another huge hurdle to be effective: it also has to “render” in the person’s head so that they understand it, and hopefully act on it.

So much of our attention is taken up with making sure our message renders well in the browser, but the next jump is even more crucial: if it’s rendering poorly in people’s heads, does it really even matter how “perfectly” it renders on their screens?

Weighing Screen/Head Render Issues

In the heat of battle, “screen-render” issues always seem to be prioritized over “head-render” issues, and I think a lot of it has to do with the immediate availability of supporting evidence for one over the other.

Psychologists have identified a bias called the “availability heuristic”, which basically refers to our tendency to form opinions based on the ease with which examples come to mind, rather than the information that best represents reality.

For example, I was recently shocked to find out that in the US, suicides are twice as frequent as homicides. Since I could recall all kinds of newsworthy murders and only a very small handful of suicides, I thought it was at least the other way around, if not more. That’s the availability heuristic in action.

For web design, it’s just so easy to come up with examples of screen-rendering problems — it’s as simple as opening up your laptop and clicking around until you find them.

“Head-rendering” problems, however, are another story. Sometimes you need a lot of usage data to diagnose an issue. Or have to spend time and money recruiting people to come in for interviews or usability tests. It’s slow, expensive and still a bit fuzzy even if done correctly.

Why go to all that trouble when there are all these issues we can clearly see just by pulling it up the browser?

Circuits fail when any part breaks

The reason we go to all that trouble is because if we don’t, it leads to the dangerous thinking that once it renders perfectly onscreen, our job is effectively done.

If we only base our decisions on the information that’s the most convenient to access, we have no way of knowing how well that matches up with reality. We are intentionally flying blind in regard to the whole point of putting websites online to begin with: getting people to do things.

This is why I’m so skeptical of the term “pixel perfection” — it seems to imply the point is to display something that perfectly matches what’s in the designer’s head, not what clicks in the users’ heads.

There is nothing inherently valuable about pixels themselves — they’re only as “perfect” as the outcomes they engender.

It’s easy to get caught up in it, but we’re not here to transmit electronic signals from one computer to another — we’re here to inspire action by transmitting messages from one brain to another.

Let’s not lose sight of that, and remember to monitor all points of failure — not just in browsers, but reality as well.

Fin

I hope you enjoyed the article!
You can follow me on Twitter at @SamuelHulick to find out whenever others just like it come out.
I'm also writing a book on User Onboarding!