I notice that many people (myself included) tend to create, observe, present, and critique designs in a zoomed out state. This can be the case when looking at work-in-progress designs in an application like Sketch or Figma — or even when looking at a mock-up that’s been printed out.

With a zoomed-out view, you can easily end up seeing twice the screen real estate or more compared to what users would typically see when using the product for real. This provides a better overview of the page, but can also skew perceptions of how well the design is working in a few subtle ways.

Once you become consciously aware of these effects you may find that they actually come into play a surprising amount.

Here are a few problems you’ll come across when looking at a zoomed-out view:

1. Individual elements stand out less

Because you can see more at once, individual elements will have to compete more fiercely to stand out among the other elements on the page. Consider the example in the image below.

A stakeholder looking at the view on the left may think that the yellow button in the top right doesn’t stand out enough — even though it’s clearly the most prominent element when the view-port is seen at a more realistic size.

The view you’d see in a design app is on the left. The view in a real browser is on the right.

2. Your perception of scale becomes distorted

This is something that I’ve noticed can be a particular issue for junior designers working outside of an established design system. They might set text or graphics at a size that looks good in the application, but when it comes time to implement, everything ends up looking far too large.

The following image is a recreation of a design where the body text was originally set at 26px. This looked OK within the design application, but when viewed at the actual size the text seemed enormous — especially compared to text throughout the rest of the site which was mostly set at 16px.

The image on the left lacks the framing of the browser view-port, so it isn’t as clear how massive the text is.

3. Viewing the totality of an art-board at once overemphasizes the length of the page.

Seeing the full view of an art-board at once can make a page seem much more intimidating than it really is. This can easily lead to overestimating the negative impacts of scrolling.

While it’s not impossible for scrolling to be a usability issue, that judgement shouldn’t be based solely on how tall the art-board looks when viewed in a design application.

You might be surprised how long the pages of common websites seem when viewed as full-page screenshots. Consider this screenshot of an Amazon product page:

If I presented an art-board this long to a stakeholder I wouldn’t be at all surprised to hear objections to the length even if it’s perfectly possible for it to work well in practice.

There is a flip side to this which I should also mention, which is that the zoomed out view may make the overall content structure of the page clearer to you than it actually would be to users.

As a result you might end up overestimating how easily a user will be able to predict the structure of page content that isn’t immediately in view. In an extreme case you might even fail to notice a “false floor” where users think the page has no more content to show at all.

The good news though, is that all of these issues can be mitigated as long as you stay aware of them. Just by having read the above you should already be in a better place to notice and call out these biases when they occur.

When designing, it may help to return to the most accurate zoom level for your screen whenever possible (Cmd + 0 in sketch and Shift + 0 in Figma). When presenting or reviewing, you can make use of whatever functionality is available to you that simulates the field of view of the device you’re designing for (like a prototype view).

The bigger conceptual lesson is that it’s important to stay hyper-aware of the differences between your experience creating or evaluating a design and the experience a user will have when interacting with the product. Just because you see something in a certain way doesn’t mean your users will see the same thing, and even subtle disparities can lead to surprisingly different experiences.