Using imagery in apps

We’ve all seen it. Beautiful, professionally taken images dominating two-thirds of the screen with liberally kerned typography overlaid on top. It usually looks incredible and makes a statement, no doubt, but the image ends up taking over our first impression of the experience so much that the design ends up taking a backseat, screaming for attention through its invisible presence.

And I don’t mean invisible in the sense that “good design is invisible.” I mean invisible as in not factoring into the user’s actions and thought process as they navigate through the app. Designers do lots of things to make users want to use the app and use it easily, such as making beautiful iconography, creating large tap targets, allowing for gestural shortcuts, choreographing fluid transition animations, choosing the right typefaces, and so much more.

But when an image leads the charge in dictating the feel of an experience, it starts to overwhelm users’ visual senses. Suddenly, it doesn’t matter how much whitespace you used in the header. Your carefully considered type choices slowly fade into irrelevance because the photograph dominates over everything. All the users eyes need to do is focus on the image for two seconds so they can form an opinion about your app.

Let’s take a real life example. In a freelance project that I worked on, a fellow designer grabbed the prettiest stock photo he could find to use as the hero image for a landing page and created a style and theme for the rest of the site around it. I won’t lie, it looked amazing. He was even able to sell the client to go for it. Later, we discovered that the client was going to dynamically load images into the landing page through a CMS. And then we got into creating technical requirements for those images: rules around the resolution, the filesize, the format, the type, and the dimensions for each image.

And then we realized that the creative requirements weren’t even in our control. They didn’t have a photographer or a large enough budget to pay for good stock photography. So they were stuck using images from their internal database. They would have given Ansel Adams a heart attack; all these shots had poor composition, no focal point, no clear subject, and worst of all — overdone HDR. Our landing page mockup looked great, but every other image that was shoehorned into the design completely broke it. It felt out of place and unnecessary.

Imagery is a powerful thing and humans naturally have a tendency to be fascinated by a moment captured in time. This is actually why designers are inclined to use it to represent moods and evoke feeling in apps. But please, for the love of God, consider what happens when your magnificent stock photograph shot with a Canon 7D-III is replaced with a low-resolution GIF (yeah, don’t get me started) taken on a smartphone.

Make sure your design stands strong enough by itself to overcome the limitations of bad imagery:

• Limit the use of colors in the rest of the app if the photograph itself is going to be very colorful.
• Use circular crops to reduce the on-screen area that the image takes up, thus drawing less attention to itself.
• Consider using color overlays to slightly alter the overall hue of the image in order to better fit with your app’s look and feel.
• Think about desaturating the image entirely. This way, users can focus on the content of the image without being overwhelmed by its use of color.
• Make sure your images have a strong subject and a strong focal point. Without this, your users’ eyes will be all over the place and they won’t be sure what to look at.
• Always have a loading state for the image. This can be as simple as a gradient using the two primary colors of the image infinitely transitioning into each other until the image loads. The only thing worse than using poorly chosen imagery is when nothing at all shows up when the user lands on the screen, leading them to think that the app is broken. Another workaround is to use progressive JPEGs as the file format.

This is an interesting topic to me because it combines my day job, design, with one of my most cherished hobbies — photography. If I have full control over every single image displayed in an app I’m building, I for sure will go to town using large imagery wherever I can, because I know for a fact that the images I take will be good enough to reflect the tone of the app. But if I have no control over it, I’ll try to minimize (or ideally, entirely negate) the use of imagery in my designs.

I hope that this has inspired you to think twice about incorporating images into your next project. If you still want to do it (and it’s not a crime to want to do so), just make sure you do it right and that you’re thinking about every possible scenario that the user can find themselves in with that product.