The bifocal effect

Good design requires attention at many different levels of detail. How do we focus on each one?

Joe Bernstein
UX Collective

--

Illustration of a pair of glasses overlooking a set of big-picture UI screens and a set of zoomed-in redline specs. One lens blurs out the big picture screens and one lens blurs out the redlines.
Original illustration by Joe Bernstein

Let’s talk about blind spots. Weaknesses. It’s a tough subject. Nobody likes to think about their poorer qualities, and it’s even harder to acknowledge them in the workplace. But I’ve been practicing my interview skills lately and these self-reflections on my process are fresh on my mind. If you were to ask me my biggest weakness, I’d tell you that sometimes I prematurely consider my design work complete without catching some minor detail until it gets pointed out to me later. I thought I captured all the right details, but it turns out I missed the forest for the trees, or possibly I missed the trees for the forest.

Confession: I miss some really small details in my work sometimes

Have you ever mapped out a complex set of customer scenarios, making sure to capture every possible click path along the way, and just as you sit back to admire your handiwork — an impressive 36 visually charming screens — you notice you misspelled the page title before duplicating it three dozen times?

Maybe you drew a great flowchart linking to a variety of user actions and their associated screens and when you’re certain that it’s ready to hand off to developers, one of them asks you why this one button color doesn’t match the others. You swapped the button out a few weeks ago, but somewhere in this tangled web of user flows, you forgot to update this one page.

I could be wrong, but I think these situations resonate with other designers. If you’re working on just ten screens of web content at 1366x768px, that’s 10 million pixels you’re responsible for. The more your work scales out, that’s a lot of chances to miss a tiny detail in your work. It happens. And it’s okay, because at least you’re getting the big picture right. Right?

Confession: I also miss some really large details in my work sometimes

Have you ever spent an hour painstakingly pushing pixels into perfect alignment and victoriously showed it off to a stakeholder only for them to point out a big, glaring mistake: you accidentally duplicated one of your screens and inadvertently omitted a key piece of your user journey?

Maybe you toiled over the granular details of an icon only to later struggle when someone asks you what that icon will link to. Or maybe you focused so much on achieving a long list of customer requirements only to overlook a detail of the onboarding experience that would get them there.

I would be lying if I said I haven’t been guilty of some of these scenarios. Designing a complete and thorough user experience requires attention to detail at both a high and low level. It’s not always easy to get those two right at the same time. If you don’t, it’s not your fault; it’s just how human vision works.

Maintaining focus

I swear I’m not lying on my resume when I say I think about big-picture scenarios while maintaining pixel-perfect attention to detail. I don’t believe in the mythical UX Unicorn, but I do believe these two important skills can coexist — just rarely at the exact same time. Our ability to perform visual design largely depends on our eyes and our brain’s capacity to interpret visual stimuli.

Eyes work in a fascinating way. Much like a computer, eyes have to process tons of background stimuli while projecting a front-end experience for our brains. At any given time, our eyes are only focused on 5–10° of our visual field. The remaining 120–200° account for our peripheral vision, which is essentially a highly compressed summary of the remaining space around us. Central and peripheral vision work in complementary ways, allowing us to focus on reading a sign while not walking into objects in our path.

Radial map that outlines the angular regions of a human’s field of view. In the very middle is a small circle identifying the central focal range and everything around it is considered peripheral vision.
Regions within the field of view. Source

Things get even more interesting when you consider how imperfect eyes are. Roughly 75% of American adults wear glasses or have otherwise imperfect vision. Among them are people who experience presbyopia, which is a gradual weakening of the eye’s mechanisms for focus, and begins to affect most adults in their 40s and onward. When presbyopia sets in, people who already had trouble focusing on distance objects also struggle to focus on nearby objects. While there are newer approaches to correct these vision issues, the classic solution has been bifocal glasses, which fuse two types of lenses together and allow the wearer to use the top portion or bottom portion to focus on various objects as necessary.

An image illustrating a bifocal lens. The top half of the lens is labeled ‘distance’ and the bottom half is labeled ‘near.’
The most classic type of executive bifocal glasses, known as the Franklin bifocal. Source

Solutions

I mentioned that this focal problem is one of my weaknesses as a designer. So how have I been addressing this?

Put on some “design bifocals”

As with overcoming most weaknesses, self-awareness is key. As I have gotten to know my own work habits, I’ve noticed that I’m usually in one mode — detail or big picture — at a time. I’ve learned to check in with myself periodically while I’m working and make note of whether I’m “zoomed in” or “zoomed out.” This allows me to make a mental note to take a second pass through my work later while wearing my “glasses” and make sure I account for the other level of focus. If nothing else, practicing this self-check forces me to be more mindful when I think I’m “done” with a task; this bifocal method reminds me to edit my work more than I would otherwise.

Delegate the details

If the zoom-in/zoom-out bifocal method just isn’t the way you operate, it’s equally great self-awareness to know your own strengths and stick to them. Designers and design teams are responsible for a broad range of design topics: graphics, iconography, information architecture, content and copy, UI, and visual consistency just to name a handful. Some of these are big picture items and some are highly detailed items. If you’re fortunate enough to work in a large enough organization with specialists in these areas, you might be able to play to your abilities and pick a level of detail that works best for you. For example, maybe you recognize your blind spot for pixel perfection, so you specialize in information architecture and team up with an icon designer and UI designer to round out your blind spots.

Ask for your advice

Can you relate to the bifocal effect? Is this something you currently experience or something you overcame in the past? If you have any tips, tricks, or advice, please feel free to comment.

The UX Collective donates US$1 for each article we publish. This story contributed to World-Class Designer School: a college-level, tuition-free design school focused on preparing young and talented African designers for the local and international digital product market. Build the design community you believe in.

--

--

UX designer, wordsmith, thought leader. Specializes in data viz, Figma, and design systems. Unwinds with trivia, softball, and crosswords. Resides in Seattle.