Attention & Detail

Too much time is spent talking about attention to detail in user interface design. Forget that. Or at least let’s all agree to take it as a given, a prerequisite.

I’ll lay this out simply: when things are static our brain will pick out the details, when things are in motion we’re in tracking mode and the details escape us. This is the order of things and it’ll likely be a very long time before that changes.

This is one of the truisms baked into the earliest GUIs. On the oldest Macs you’d double click to open a document and a zoom rect would appear to illustrate that an action was in progress. If you dragged a window, on Mac OS or Windows, you’d drag a simple outline. The developer-designers (that’s how it was back then) understood that the immediacy of dragging an outline was more valuable than slowly dragging the object itself. Given the trade offs of the time they were correct.

If you think this is a quaint notion, read this piece in mobile Safari and double tap this column of text to zoom it to fit the screen. Did you see what happened? The lower resolution rendering of the page zoomed to fill your screen and was then replaced by a higher resolution rendering once the transition was completed. This is the modern zoom rect and is enabled by leveraging the extremely fast graphics hardware we enjoy today. What started as a way to quickly render brown wall textures in a 3D shooter is now being used to make interacting with an obnoxiously binary device feel like a more natural, analog affair.

There’s a long litany of effects I’m tempted to dive into here. From the old NeXT window server full-window drag, to OS X fully buffered windows and the Minimize to Dock effect and to Core Animation and iOS in which all content is backed by a texture. I’ll dodge that for now because it’s too rich a history.

If you write interactive software know this: fluidity of motion is more important than accurate rendering, once a scene is static fidelity is paramount.

To boil it down, your take away is: drop fancy rendering effects to achieve the most fluid interaction possible.

If you’re using iOS or Core Animation you’re doing this already in more places than you’d guess. Keep this technique in mind when dealing with your own interaction issues. You can labour endlessly to make accurate rendering as fast as possible or you can appreciate how people perceive things and end up with the best possible interaction.