Halide: How to Design for iPhone X (without an iPhone X)

Fascinating article from the developers of the highly acclaimed Halide camera app for iOS on how they redesigned the app for the iPhone X before it was even announced.

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’.

This is a way of thinking that more designers need to seriously consider; as devices get taller, interactions need to be increasingly accessible from the bottom of the screen.

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.

I love this. Since the app was being designed before the iPhone X had been revealed, let alone shipped, it was absolutely necessary to get a feel for its proportions.

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

The bottom quarter of the screen. Makes sense.

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.

The importance of ergonomics within an app’s design cannot be understated. Not only does this make the UI more functional, but to the user the entire app feels like a better thought out and more cohesive experience – not a battle against the screen to access functions.

In the case of Halide, buttons that require taps are in the bottom quarter of the screen, and functions that can be controlled with less accuracy such as a swipe, in the prime space where thumbs can pivot yet don’t need to reach the opposite side of the device.

Testing on a physical mockup proves valuable; speeding up the learning process in-house rather than when the app ships, leading to a better first experience for users.

Connected app concept project: Listener

Not everything can be connected into the Internet of Things, or turned into a smart appliance. Listener is the conversion from analogue into digital. It hears and understands the real world so that you can be even more connected to it.

Listener bridges this gap by combining listening hardware with a concept app for the connected world, with the goal of bringing notifications to the things in life that aren’t digital.

The app was prototyped in Sketch and uses Marvel to deliver an interactive demo.