Progressive Refinement

Latency … is the worst. At the root of our cognitive abilities is our appreciation for cause and effect. The tighter the loop between an action we initiate and the effect we precipitate, the better we are able to correlate them. In many ways this serves as a cognitive short cut — the smaller the time between the input and output limits the amount of interference that could have been caused by a third party. An instantaneous failure result implies that we’ve misjudged the situation as it is, a delayed result suggests that the environment in which we’ve responded may have changed. Every millisecond of delay forces us to ask ourselves, “Have I done something wrong?”

As people who make things that others interact with we are responsible for reducing this potential window of fear and replacing it with a level of comfort our users can embrace. Our goal is to have effect follow cause as immediately and as responsively as possible. This may be old hat and a restating of a previous piece but it’s still a worthwhile point to make.

Using a rough approximation of a visual during animation is a subset of what I’ll call progressive refinement. When animating we’re trying to accomplish two things. First, and if you’ve elected to employ an animation this should be foremost, we’re communicating to the user a change of state or modality. Secondarily, we’re using the time we’ve spent entertaining our user to figure out what we actually want to show them. The state of our application has changed and we’re trying to communicate that to our user progressively. When zooming in on some text in a Safari column, we’re using a lower resolution image and scaling it up we’re using an interpolation (a bilinear filter, from the looks of it) of the original rendering as a progressive refinement of what they can expect the final result to be. After zooming in on a column in Safari the letters are basically the same size and in the same positions and once the final rendering is done, the view is replaced with a higher resolution version of the page that correlates well to the preview that’s been presented.

We take progressive refinement for granted in iOS apps. When we scroll in Twitterrific or Tweetie the scrolling is instantaneous. Filling in the user avatars can come later, or even highlighting the links in the Tweets. These are considered secondary refinements upon what is most important to the user — when they scroll the list it must be responsive. This is drawn from the iPod, or other media listing apps but is especially evident when using Home Sharing — A user will accept a slight delay in the progressive refinement of their view of the data but they’ll be frustrated with a delay in delivering that data to them.

Consider human vision. We’re accustomed to quickly changing our focus or entering a lightened or darkened room. We’re adapted to the idea that details may well present themselves gradually. We don’t find this onerous, we find it natural. If you’re writing software that interacts with humans this is worth keeping in mind — present an outline as quickly and as responsively as possible and from there refine your presentation of the data. Present buttons as disabled and then enable them once you know they’re applicable. Present a list of posts quickly but fill in the avatars individually as you’ve finished fetching them. Present a body of text and then present the result of the Data Detectors that have discovered that “Tomorrow 1pm” is a meaningful phrase. Progressive refinement is a hidden HIG directive that all of you should be aware of.

The hierarchy of information interaction is this: Immediacy, Accuracy, Fidelity. When interacting with information you want it to be fast, then you want it to be accurate, and then you want it to be exactly what was originally expressed.

It’s up to you to decide how the information you’re presenting to your users fits into these categories. If you think stalling a scroll gesture to pull in album artwork or user avatars is the right thing to do though — you’re very wrong and everything that’s good on iOS proves that. Consider what you’re presenting to your customer, consider the costs involved in providing each detail, optimize your interaction to provide the most value in the least amount of time. Then, fill in the blanks.

There’s no magic in software, there’s only ever forethought.

Luckily thinking is free but, hey, feel free to charge your clients for the time you’ve spent reading this.