How we made our camera app’s User Interface smarter than the rest

When it comes to app design, details matter. Good developers and designers sweat bullets to create user interfaces that don’t get in the way of the user’s experience, obsessing over every pixel of every element.

No where is user interface design more challenging than for camera and video apps, where user interface elements — otherwise known as buttons — have to exist over or alongside an ever changing camera view.

The camera view removes the ability of the app designer to decide on the background design. The background is of course whatever scene the user decides to point their phone at. Sunny beaches, fireworks at night, selfies in crowded bars. You get the picture.

So how can designers ensure their camera app’s user interface shows up well against every conceivable kind of camera view?

At infltr, we don’t mind admitting we obsessed big time over this question while developing our app. infltr is a new type of camera app that allows users to discover an infinite variety of filters using touch. No more presets or complicated settings — users just swipe in any direction to discover endless new filters. Here’s a twenty second video to illustrate what we mean:

Central to our design ethos was a minimal user interface but even so, we still needed to display various buttons over the real-time camera view. Before we share the solution we came up with, let’s explain how we got there.

Firstly, we checked out the competition, looking at how the most popular photo and video apps approach the problem. What we found really surprised us.

We kicked off with Apple’s native iPhone camera app. Apple sidestep the challenge of adding a user interface over the camera view by restricting the camera view shown. Rather than offer a full screen camera view, Apple’s camera app view occupies only around 60% of the screen. For the photo functions, they add big black bars to the top and bottom of the screen and use that space to display elements. For the video function, the bars become semi-opaque. The white elements are guaranteed to show up but it’s a pretty clunky solution which sacrifices a full screen camera view in favor of an easy to see UI.

We gave Apple’s approach a meagre 4/10 — really, they should’ve done better what with them being Apple and all.

Next, we looked at the photo and video apps that only allow users to capture a square image. We’re talking about apps like Instagram, Vine and Seene. (Yes, Instagram now allow users to edit pictures in portrait, but they don’t let users capture them that way.) Given pictures and video can only be taken in a square ratio, these apps avoid the need to add UI buttons to the real time camera view — they have plenty of “dead” space around the restricted camera view to add buttons.

As UIs go, this approach works OK, but it severely restricts users’ creativity. Instagram now recognises users want to post portrait images — so why don’t they let users capture portrait images through their app? Perhaps the challenge of figuring out how to show the UI over the real-time camera view has something to do with it.

Anyways, we gave these square ratio apps a meagre 3/10 for side-stepping the camera view UI challenge and restricting users’ creativity by being so… well, square.

We also looked at VSCOcam. Rather like Instagram, they sandwich the camera view between two fat grey bars, with the main elements appearing over the grey in white. VSCO do show some advanced features like focus over the camera view. They opt for a bright red colour for most of these elements. It’s a colour not frequently found in nature so the elements usually stand out against the background, but aren’t ideal if you’re taking pictures of Santa drinking Coca-Cola in a pair of Louboutins while driving a Ferrari.

Even though the UI effect is rather heavy handed and intrusive, at least VSCO have attempted to display UI over the camera view. We were feeling generous and gave them 7/10.

Twitter’s camera feature looks pretty much like a clone of Apple’s native camera app. In portrait mode, we get the same old bars top and bottom of the camera view. But rotate the phone into landscape, and the top UI buttons suddenly appear in white over the camera view. A very subtle grey gradient is placed underneath the UI elements to help them stand out a bit against a potentially light or white background. It’s actually one of the better solutions we found, but it’s not ideal as it adds a murky grey smudge to the camera view and wouldn’t work well when combined with the vignette feature our app infltr offers.

On balance, we decided to give Twitter’s camera UI some tough love: 6/10.

We had high hopes, but Retrica and Facebook really disappointed us with their respective approaches. Both display white icons on top of the camera view, but with no drop shadow or gradient background. Fingers crossed their users don’t take any pictures on a ski trip, hey? Facebook’s portrait-only camera feature also has smaller UI elements in white at the top of the screen, but here they overlay the elements on a grey semi-opaque bar across the camera view. It’s fugly but functional.

Facebook loses marks for inconsistency in their UI approach and potentially poor visibility— we gave them and Retrica a slow hand clap and 5/10.

Of the pack, Snapchat provides one of the best user experiences by sticking to two simple rules for elements shown over the camera view. They present white icons with either a black outline or a bright colour backfill to ensure visibility against all backgrounds. We love the fact the whole screen is devoted to the camera view but in our humble opinion, those white icons with black outlines look a bit dated. Just sayin’.

We rated Snapchat’s approach 8/10.

Clearly, there are lots of different approaches to the design challenge of showing user interfaces over a camera view — but none of them in our opinion really nailed it.

With our own app infltr, we wanted to make the full screen camera view the hero in both our portrait and landscape mode. That ruled out restricting the camera view to a square or adding dark bars top and bottom for UI elements. We wanted to show elements over the camera view in a way that guaranteed visibility, but without resorting to opaque backgrounds, drop shadows, icon outlines or whacky colours.

We realised that the only way to do this was to make the UI elements themselves smarter. A smarter UI element would change colour according to the real-time camera view. A light background would result in a dark UI element, and a darker background in a lighter UI element.

Given the camera view is likely to change as the user composes the shot, we figured out we needed to continually sample the camera view and adapt the user interface elements in real-time to stand out from their background.

Watch the video again — but this time keep your eyes on the buttons on the sides of the screen…

The user interface subtly animates to ensure consistent visibility regardless of the ever changing camera view. Sampling the camera view is computationally non-intensive, as is adapting the colour of the UI elements. We think it’s an elegant approach that many users don’t even notice — and for us, that’s a mark of its success.

We haven’t seen any other examples of an adaptive user interface for camera or video apps so decided before launching infltr in August 2015 to progress a patent application with the USPTO. We’ll keep you posted on how that goes. Meanwhile, the time we spent obsessing over the user experience seems to be paying off — Apple named us ‘Best New App’ in over 40 countries, our community’s growing and infltr has been widely covered in the media with coverage including The New York Times, Wired, Engadget, The New Scientist, Fast Company and Peta Pixel. We’re especially happy to have been featured in a beautiful new Japanese book ‘UI Graphics’ published by BNN. No surprises, we’re in the chapter devoted to Minimalism.

Our biggest learning from developing infltr has been that user interfaces no longer need to be “one size fits all”. As our devices become ever more powerful, designers and developers have the opportunity to make app interfaces smarter so they automatically adapt to environmental changes, location and user-generated data.

This smart approach opens up the potential development of more natural user interfaces and better, more intuitive app experiences. Users may not consciously notice the end result of all those hours we spend obsessing over detail, but hey, that’s the art of great design. It’s supposed to be seamless.

There are three of us behind infltr — me, Tamara Sword and Nick Pelling— which just goes to show you don’t need a big team and unicorn resources to create innovative user interfaces. We’re always interested to hear about novel design approaches for camera and video apps so please reach out to us over on Twitter or Instagram if you spot any out in the wild. Happy UI hunting!