Our camera app, Halide, was just weeks old when the first leaks of the iPhone X surfaced. We didn’t know what the device was called, let alone exactly how it would impact our user interface — but we nevertheless decided to start working on what a camera app for it could look like.

An early ‘leak’. We’re grateful the actual iPhone X didn’t have this ‘virtual home button’

Now, a month after the release of iPhone X, I want to show you how we designed and released an app redesigned for iPhone X, without ever even having held one.

What we knew

There were a few assumptions we made about the iPhone X (which still apply today!)

it has a significantly taller screen than the regular iPhone

the bottom area of the screen is occupied by a system navigation area

it packs a dual camera into a smaller package than the Plus iPhones that came before

These assumptions would significantly affect our UI design. Fortunately, Ben built Halide with auto-layout, so it could theoretically automatically scale to fit a larger screen. We could be ready for the new iPhone with as little as a few tweaks!

But these kind of form factor changes don’t come around often. We thought there was a better way to approach it.

Design like it’s Version One

With some information known about the new device, I decided to basically go back to the drawing board. Forcing yourself to start the design process from scratch helps you design for all the particularities of the hardware and helps you verify if your current approaches are valid.

To start mocking things up, we listed all the features of our app and ranked them by importance to the user. When it comes to reading, most of us read from left to right, but as humans we reach things from the bottom up.

If you design with this in mind, it’s called ‘Reachable UI’. A fantastic example of this in the wild is the Maps app for iOS:

Ever use Maps and notice how pleasant it is to use with one hand? This is Reachable UI.

I loved this approach. One of the things that always bothered me on the Plus-sized phones was how difficult it was for me to reach controls near the top of the screen. The iPhone 5 was probably my favorite iPhone for that reason: everything was within reach. Even on the regular iPhones 6/7/8, I had trouble reaching anything at the top of the screen — and I have pretty big hands. iPhone X would be even more affected by this issue.

I had also always been bothered by having some camera controls get in the way of my viewfinder: this supposedly taller screen on the iPhone X would let me finally create a camera without obscuring the users’ view of their subject.

And thus, this was my rough mockup:

We’d place some controls a bit further down, and then place features in distinct ‘quadrants’, depending on how important they were to the user. This is difficult, as tools like cameras have different workflows for different users, but in Halide we already let users customize the button layout so I figured we could let the user pick what was important to them.

Finger Gymnastics

It was time to verify my findings. Here they are visualized:

With the help of a mockup of an approximate device size, I found that putting interactive functions at the top of the display was painful. Not only was it literally impossible to reach, tapping anything at the very corner of the device tilts it significantly, which feels terrible. I realized that I had to take ergonomics in mind far more than when designing for the previous series of iPhones.

Seems simple, right? We wish. I found it was quite difficult to figure out what was ergonomically sound without an actual device to test on.

Then, Ben built an iPhone X.

Due to the sheer size of the iPhone 8+, he found we can essentially simulate an iPhone X inside of its screen. He built Halide with a special flag that would put our rough iPhone X layout on the Plus-sized iPhones.

This helped immensely in testing the layout and ergonomics of the app. In fact, it helped me create an ergonomic map for the iPhone X:

Many a finger has attempted an expedition to No Hand’s Land, but none have returned successful.

Ergonomics are a very specific thing. There’s an entire field dedicated to it, and I don’t claim to be an expert, but from your own experiments you can deduct there’s different ideal zones for tapping, horizontal swiping and vertical swiping, as well as the Thumb Frontier: the limit of how far an average thumb can reach.

This is what should inform your design considerations. For instance, in your day-to-day life this to effectively describes home screen order of preference:

Apple seems to still adhere to the original iPhone home screen icon arrangement, from an age when top icons were still reachable.

It also explains why people are not too pleased about the notification center and control center gestures: they are utterly unreachable for the majority of users. The gestures to navigate the iPhone X are fun; the gestures to get to the control center or notifications are a finger workout.

Halide for iPhone X

We used the ergonomic map and Ben’s simulated iPhone X to make our Halide redesign for iPhone X.

Buttons that require a tap were put in the area that was best for interacting:

The area from the shutter button up to halfway into the viewfinder are the best place for controls. Easily reachable with both hands, and comfortable to swipe horizontally or vertically on.

We put emphasis on being able to reach the shutter button (duh), the last photo taken, and all the feature controls which we refer to as the ‘Quick Bar’.

Halide features two signature gestures: our up-and-down exposure adjustment / shutter control, and our left-to-right focus adjustment.

Halide’s key gestures follow the intuitive control scheme of all cameras.

Seems familiar? That’s because we based it on how you naturally control a camera when you are holding it.

We adjusted these to fit the ergonomics of the new device; for exposure adjustment, we ensured you could compensate for at least 5 EV (exposure values) with your thumb, giving you great exposure adjustment without requiring serious finger gymnastics.