Make every pixel earn its space — a simple formula

When I’m working on a particular product feature, I often have the subconscious desire to take up as much space as possible in the product so my feature can make its mark.  Maybe I can use a full-screen NUX (New User Experience) to introduce my feature, or even update the navigation of the app to highlight it.

But my users only get value from the pixels they see on their screen.  And if I take up more pixels with my one specific feature, that means it’s harder for users to get the value they’re looking for from the rest of the product — because there’s literally less visual room for those other features in the app.

This isn’t only about the number of pixels a feature takes up. It’s also about how many times a user sees that visual footprint, because every view takes up space in the user’s mind. 

So I have a rule of thumb for how much visual space a feature or NUX should take inside a product: 

A feature’s value to a user should be greater than the amount of space it takes up given how often it shows up – ie, 

(User value) has to be >> (pixels * frequency)

For example, an icon in a navigation bar has to add a lot of value. The icon takes up a small amount of space, but it’ll be seen by a user every time they look at the app. That icon has to be immediately understandable to a range of people, accessible to people with low visibility, clear on a range of screen sizes and device types, and is worth a ton of iteration.

Similarly, for a full-screen NUX, I ask myself, “Does this new feature add so much user value that it requires a full screen, even if it’s only shown once? Does it really require four additional screens of explanation?” Unless it’s a major addition or change, it generally doesn’t, because the user value of the new info doesn’t merit a full screen of explanation.

In a messaging product like WhatsApp, this meant we invested a lot of time refining small-but-frequent visual indicators like icons and controls, or in ironing out smaller details like color palette and chat bubble legibility in large-and-frequent main views like message inboxes or calling UIs.

Making every pixel earn its place helps me hold a high bar for everything we put in front of a user. This quick rule of thumb helps me remind myself of what the user is looking for across the app (not just my specific feature), and aim to make the app overall a better reflection of where the user finds the most value.