Optimizing Your App UI for iPhone X

28 Sep, 2017

4 min read

iPhone X just hit the stores on November, 3. Actually, pre-orders are scheduled for delivery until the mid of December already, because the hype is real. But lucky guys can grab the phone if they dare to wait in a line of hundreds of people.

Regardless of whether you love Apple or not – iPhone X is really a new page in mobile phones history. The design looks new and it’s totally different from everything we had on the market. Apple didn’t make big changes to the design of their phones since iPhone 6 – and now it’s time.

However, with the new look come new responsibilities. At least for iOS application developers.

When Apple just announced the device, every developer was struggling with application updates. Everything was totally different from a mobile developer perspective, when iPhone 5 and iPhone 6 appeared. Engineers just had to make applications “bigger” for the new larger screen sizes. It took much less time to optimize an application for those screen types. With iPhone X, it’s not that simple and this approach is not going to work. Luckily, Apple kindly provides a set of instructions for application optimization along with new human interface guidelines.

Optimizing your app UI for iPhone X

The provided instructions cover basic cases, but updating some custom UI elements remains an open question – it’s not so clear how developers should handle them.

The main innovations are the “notch” at the top of the screen (officially it called “sensor housing”) and the missing home button. Apple says “Don’t attempt to hide the device’s rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen”. That’s why human interface guidelines are totally different for the new device. Application developers and UI/UX designers had and are still having a lot of work to think through how users should interact with the applications on new devices.

Optimizing your app UI for iPhone X

At Sigma Software, we’re working on different kinds of apps and frameworks. And after the announcement, we started making adjustments. Because every app is unique we’ve met a lot of issues with the UI and UX of elements. Some of them were pretty easy to optimize and the other ones were specifically made to match screens from edge to edge. Because iPhone X screen edges are curved, we faced major problems with the following elements: top elements, bottom elements, and landscape orientation.

The “notch” caused a lot of issues with custom navigation bars and status bars. For example, we’ve got no status bar at some applications, but new guidelines require it unless you show fullscreen content like video. Also, because the default height for status bars was increased, we had to redraw custom navigation bars.

When we were dealing with the missing home button, we have updated our buttons, progress bars and banners that were placed at the bottom of the screen. Because those elements were colliding with home indicator and curved corners, we had to revise their positions.

For example, if we need to place progress bars at the bottom of navigation bars, all other elements at the screen must be replaced, otherwise it will not be clear for the user where the progress bar belongs to.

Another challenge was to update applications for the landscape mode. In landscape, things go crazy almost with every element at the screen. It was really tricky to handle table views in the landscape – content should be placed within safe area layout guides, while background colors of cells should reach the edges to imitate full-screen experience.

If you still have not updated your application for iPhone X – it’s time to hurry up! The new device is really popular, so most likely your application will have a lot of users accessing it via iPhone X. And if you don’t want to upset them – you should update all the apps as soon as possible.