100 More Things #170: DISTANCE FROM THE SCREEN IS CRITICAL

Some designers have always designed for situations where people are at varying distances from the display, for example, signage in public places like train stations or airports, or displays on a factory floor or a hospital operating theater.

But many designers are used to designing for people who are sitting in front of a desktop or a laptop. If that’s true for you, then it may be new for you to think about the user’s distance from the thing you’re designing, and how that should affect your design.

It’s Distance, Not Resolution

Most designers are used to thinking about designing for different size screens (large monitor, regular desktop monitor, laptop, tablet, smartphone). And many designers are used to thinking about different screen resolutions. Luke Wroblewski, who has been a product director at places like Google, says that instead of designing for the screen resolution, you need to design for the distance that the viewer is from the screen.

Wroblewski uses the example of someone viewing Netflix to choose a movie to watch. Here are typical viewing distances (Wroblewski gave them in feet, but I’ve added in metric measurements):

• Smartphone: 1 ft (~ 30.5 cm)
• Tablet: 1.5 ft (~ 46 cm)
• Laptop: 2 ft (~ 61 cm)
• TV: 10 ft (~ 3 meters)

Why does viewing distance matter? If people are at different viewing distances from the display, then the size of the objects on the display needs to change. When the icon is on a TV that’s 10 feet away, the size of the movie icon needs to be 5.25 inches, or 13.33 cm high.

Figures 70.1, 70.2, 70.3, and 70.4 show the different sizes that the movie icons need to be on the display for the viewer to effectively browse the movie choices.

FIGURE 70.1 An icon on a smartphone needs to be 1 inch (~2.5 cm).

FIGURE 70.2 An icon on a tablet needs to be 1.75 inches (~4.5 cm).

FIGURE 70.3 An icon on a laptop needs to be 2.25 inches (~5.7 cm).

FIGURE 70.4 An icon on a TV needs to be 5.25 inches (~13.33 cm).

Takeaways

• Decide how large items need to be on the screen based on the viewer’s distance from the screen.
• Use this rule of thumb when determining the size of images or targets on a display: for every foot (30 cm) you add in distance from the display, add 1/2 inch (1.3 cm) in size for the item on the display.