As the kinds of digital interactive user experiences we’re designing at T+L begin to move beyond the computer screen, fundamental things like display resolution become a little more complicated and a lot more interesting.

Effective resolution is a perceptual term—I’ll define it here* as the perceived pixel density of a display image at a given viewing distance. Math-wise, the basic equation can be pretty simple: Effective Resolution (ER) = DPI x Distance**. From this, we can see that for a given absolute resolution, the effective resolution increases along with viewing distance.

Pretty straightforward stuff so far. Here’s where it starts to get interesting…

Comparing resolution across devices

You can compare the effective resolution for different devices using the formula above. For example Using this DPI calculator, here’s what you get for an iPhone, Macbook, and generic mid-sized HDTV:

Notice that even though the iPhone has the highest absolute resolution of the 3, it has the lowest effective resolution***.

Optimizing for effective resolution

In terms of user experience, ER is a better way to compare display technology because it takes the context of use into account. For example, let’s say that the optimal effective resolution was the threshold at which individual pixels were just no longer noticeable, and let’s say this happened hypothetically at ER=300 (red line below). Based on the comparison example above, we could see that while the MacBook over-performs against this measure, the viewing experience for both the iPhone and HDTV could still benefit from higher (absolute) resolution displays.

Optimal viewing distance

You can calculate an optimal viewing distance based on effective resolution. Just set ER to a desired value—say, to 300 as in the example above—and solve for distance (D = ER/DPI).

Practical and ergonomic constraints on effective resolution

Depending on usage and input modality for a given device, the viewing distance will be a constraining factor on effective resolution. For example, an iPhone’s effective resolution is constrained by the fact that you hold it in your hand. Similarly, laptop or surface-based computing devices need to remain within reach. TVs are a little more flexible, although there are recommended viewing distances for those too.

Interaction design implications

So how could or should interaction designers be taking effective resolution into account? Here are two suggestions for starters:

1. Improving readability. This article is actually what started us thinking about effective resolution. Most digital design use pixel height for specifying font size. (Point size is more appropriate for print media.) We could use effective resolution to set baseline pixel heights that are relative to both display technology and context of use in order to ensure readability.

2. Design tools. I think it’d be great to be able to simulate different effective resolution modes in design environments like Photoshop. This could be achieved through a combination of pixel interpolation and zooming transformations. For example, say you were designing icons for an IPTV interface and wanted to know if they will be easily recognizable from the couch. Toggling into an HDTV preview mode would automatically zoom out and slightly degrade the resolution to give you a rough idea of what they’ll look like.