You’re at home in front of your laptop browsing the Internet. If I ask you what you’re seeing in your central vision at any particular time, you could probably describe it fairly well. You might say, “I’m looking at text on a page. I’m reading the word ‘The’ and I see that the capital T is a vertical line with a shorter horizontal line on top.”
But what if I asked you to describe what you’re seeing in your peripheral vision while you’re reading the word “The” with your central vision? It would be more difficult for you to articulate it. Your peripheral vision is blurry out toward the edges, and you’re less aware of what you’re seeing in peripheral vision, so it’s harder to describe.
The MIT Computer Science and Artificial Intelligence Laboratory has an answer about what your peripheral vision looks like. Ruth Rosenholtz and her team created a computer model to simulate what the brain “sees” in peripheral vision. Rosenholtz calls these simulated images “mongrels.”
Peripheral Vision Is Blurry
One way to think about peripheral vision compared to central vision is that peripheral vision trades detail for an overall impression. In order to process the visual information quickly, and over a larger field than central vision, peripheral vision sends a broader view that ends up looking kind of like a really low-resolution image, and it becomes blurrier at the edges.
How Peripheral Vision Won A Design Competition
In 2013, the city of Boston held a competition to redesign its mass transit map. Rosenholtz (being located at MIT in the Boston area) took the subway map as it existed before the redesign competition, and the new subway map design that won the competition, and ran both maps through her mongrel computer model.
Figure 6.1 shows the subway map before the redesign. The Kendall/MIT stop on the Red Line is circled.
Assume that your central vision is focused on that circle. According to Rosenholtz’s computer model, your combined central and peripheral vision would look like Figure 6.2. The central vision area is crisp and clear, but the peripheral vision area is blurry.
FIGURE 6.2 The “mongrel” computer model that includes peripheral vision of the Boston subway transit map before the redesign.
Michael Kvrivishvili is a designer from Moscow who won the competition for a new map. His map is in Figure 6.3. I’ve placed that same circle at the Kendall stop.
FIGURE 6.3 Michael Kvrivishvili’s winning redesign. (Photo courtesy of Michael Kvrivishvili)
Again, assuming that your central vision is focused on that circle, Figure 6.4 shows what your composite central and peripheral vision looks like with Kvrivishvili’s map. It too is blurry, but there are some differences between Kvrivishvili’s mongrel and the original mongrel.
FIGURE 6.4 The “mongrel” computer model that includes peripheral vision of Kvrivishvili’s winning redesign.
When Less Is More
In Figure 6.1, the previous version of the map, parts of the map are geographically correct, for example, the western part of the Green Line and the southern part of the Red Line. But they are also fairly complex, so in the Figure 6.2 mongrel model, these features of the map lose informational impact.
Compare those areas to Kvrivishvili’s redesigned map in Figure 6.3. His map is less literal, and more representational. In Figure 6.4, peripheral vision is able to keep the gist of those areas truer to the information they are attempting to convey, even if the visual design is less correct geographically. By simplifying the design, Kvrivishvili increases clarity, especially when it comes to peripheral vision.
Designing For Both Vision States
Probably without realizing it, many designers design primarily for central vision. After all, central vision is the vision designers are most familiar with and most conscious of. But you may want to design for peripheral vision as well. Try to simplify the design, especially on the outer edges.
Assuming you don’t have Rosenholtz’s mongrel computer model, you can try a simple peripheral vision test of your own. Pick a part of your design that you expect people to be looking at with central vision, for example, a navigation bar at a website, and then, while keeping your central vision there, see if you can get an impression of the rest of the screen. Does it need to be simplified to convey information through the peripheral vision channel?
A Surprising Guideline For Designing For Screen Size
One of the interesting conclusions from this research on peripheral vision goes against some oft-repeated design wisdom. It’s common to find guidelines that say, for example, that icons and logos on a smartphone should be both smaller and simpler than those on a desktop. On the surface, this makes sense: if the icons or logos are highly detailed, they’ll become muddier and harder to perceive as the screen gets smaller.
However, there’s another way to think about this interplay of size and visual detail. On a large screen, a small percentage of the visual area is within central vision. Most of the screen is in peripheral vision. On a smaller screen, the amount of the screen within central vision increases compared to the amount of the screen within peripheral vision. These days smartphones are getting bigger. With a large smartphone, it’s certainly possible to have both central and peripheral vision active, but even then as much as 75 percent of the visual field will be in central vision. On a relatively small smartphone screen, most or all of the visual field may be within central vision. And with a small device, such as a smartwatch, chances are that the entire display is within central vision.
The more of the visual field that’s in central vision, the more detail you can use, not less. Central vision will pick up the detail. As the screen gets larger, a logo at the top left, or an icon at the top right is likely appearing in peripheral vision, which means that the logo or icon should be simpler, so that peripheral vision will have an easier time picking it up visually and understanding what it is—the opposite of some of some current design guidelines.
Takeaways
- Whether you’re designing a standalone image, an infographic, or a web page, design for both peripheral and central vision.
- Since peripheral vision is blurry, make the design in the outer edges simple.
- When you’re designing a small display (for example, a smartphone), the design can be more detailed.
- When you’re designing for a larger display (for example, a laptop), the design should be simpler and less detailed.
Leave a Reply