New mobile device displays achieve a level of clarity such that users are unable to discern individual pixels. Far from being a purely technical advance, this is causing a remarkable effect on end users, who can observe new levels of detail and find them more relaxing when consuming large volumes of visual information.

Pixel counts are growing exponentially while individual pixels are shrinking to accomodate an ever higher density of these tiny visual building blocks within a relatively constant handheld form factor. This increased fidelity challenges designers to reconsider the visual fabric of services, the detail of interactions and even the overall utility of mobile devices.

The significance of the change is analogous to a brick layer evolving into a mosaic artist.

Media consumption is the most obvious beneficiary. The 1280 x 720 pixel displays featured on some LG and Samsung products show the same number of pixels as most ‘high definition’ televisions found in users’ living rooms but, crucially, do so within a physical area measuring approximately 4 inches diagonally. The result is high definition video content with a density and richness incomparable to that of 30+ inch televisions. Photos are similarly enhanced.

It is a capability which transcends age and technical knowledge. My 89 year old grandmother’s immediate and unprompted reaction upon seeing photos for the first time on an iPhone 4S was to comment on the extraordinary picture quality. She has never used a computer or a mobile phone.

Higher quality media reproduction, however, is just the start. Increased pixel density also affords designers the opportunity to enhance the intricacy of their screen designs. Proponents of skeuomorphism, for instance, will be better able to reproduce the details necessary for the real world textures at the heart of their illusory art.

Consuming text is more relaxing on such screens as the brain is not given additional ‘fuzzy logic’ workload of deciphering the faintly jagged edges usually associated with digitised characters. Apple claims its ‘Retina’ displays, with 326 pixels per inch, actually show a higher density of pixels than the human eye is capable of seeing, resulting in a text quality akin to the finest print.

Individual interactions, from the turning of a virtual page to the glowing pixel trail of a swipe, will also benefit. Animations are enriched by visual clarity. Indeed, higher pixel counts raise the possibility of wholly new interactions, made possible only by the ability to show subtle variations unachievable at lower densities. To take the example of a virtual page turn, higher visual fidelity may allow designers to accurately represent several pages being turned at once, where before they could show only a generic representation of a single virtual page corner.

To illustrate the difference between how much information can be shown on the previous generation versus the latest displays, I’ve created 3 mock-up screenshots. They have been adjusted to give a realistic physical size representation of a mobile display on a 1280 x 800 computer monitor (the resolution of a 13 inch Macbook, the most common in the MEX web stats). However, some caveats apply: the pixel density of most computer monitors or laptop panels is relatively low, about 100 – 150 per inch, making it difficult to illustrate the sharpness of higher pixel density. However, the mockups should give a reasonable representation of 3 things: how much 12 point text can be displayed on each single screen, the physical size of that text and how much of the photograph remains visible.

The first example is the 320 x 480 at 163 PPI (pixels per inch) of the original iPhones, also common to today’s low-end Android devices and feature phones. Note that only a single paragraph of 12 point text fits on the screen, but the physical character size is large enough that it can be viewed without zooming. About 20 percent of the photo is visible.

The screenshot below shows 640 x 960 at 326 PPI, as found on the iPhone 4 and 4S, as well as some high-end Android devices. Three paragraphs of 12 point text fit on a single screen and about 80 percent of the photo is visible. Even when viewed on a more pixel dense mobile display, you’d need very good eyes to view the text without zooming.

The final screenshot shows 720 x 1280 at 316 PPI, as found on the Samsung Galaxy Nexus. Over four paragraphs of 12 point text are shown and the photo is fully visible. The individual characters, however, are tiny.

These mock-ups highlight some of the immediate challenges designers face in creating the best experience on high resolution mobile displays:

• The size of text and interface elements should remain relative to the physical size of the display, not the pixel measurements.
• Testing the true clarity of screens requires on-device testing and is difficult to simulate on a monitor with a different pixel density.
• Text blocks are more likely to require dynamic reflowing to accomodate the higher probability a user will zoom to increase the relative size of characters.

The opportunities for higher resolution displays, however, are legion:

• More intricate user interface textures
• New utility for photo and video content, such as doctors reviewing medical images
• Games built specifically around the ability to display increased detail, such as hunting for hidden visual clues
• More delicate, subtle animations and transitions

This theme of clarity, its challenges and opportunities, will be central to the next MEX event. I’d love to hear from anyone with a view to share on what it means for the mobile user experience – please get in touch.