Refreshing Your Mobile Application for iOS 11

Author Filip Fajdetić
Category Development
Date Sep 17, 2018
3 min read

Our LikeUs iOS app looked really neat on iOS 9 and iOS 10, but then iOS 11 came with the beautiful redesign of the App Store and an overall new look and feel adapted to the Apple’s flagship model, the iPhone X. So we decided to ditch the old design and create a new experience for our users and we faced some interesting challenges along the way.

Here’s how we did it!

1. The Uniqueness of iPhone X

Before iOS 11, you could more or less easily fit the same UI in iPhone 5C and iPhone 7 Plus. Auto Layout is very powerful and if you use it correctly, your UI should resize according to the width and height of the window. However, the iPhone X does not have a rectangular screen and therefore requires a different UI in some cases. That means your designer may need to draw two different versions of the UI, one for iPhone X and one for other devices. Let’s see an example.

Here we can see that the “SCAN QR CODE” button is fixed to the bottom of the screen on the iPhone 8 (right). This is fine and looks good, but on the iPhone X it would clash with the Home button, so we need to lift it up a bit, pad it on the side and round it so it fits nicely with the iPhone X curved screen edges.

You should also adopt the Safe Area Layout Guide so your UI respects the iPhone X home button and the notch. Don’t ignore the extra screen space on the iPhone X and avoid putting a black background on it to look rectangular like on other iPhones. Instead, use this space to extend your content when possible to give your users a more immersive experience.

2. UINavigationBar

The navigation bar received a significant update in iOS 11. First of all, it now uses Auto Layout internally to arrange its subviews and UIBarButtonItems. Secondly, you can enable large titles and if you do, your navigation bar will expand as you scroll up and down and change between a normal and a large title. The new large titles look works really well on iPhone X but it does bring some problems. If you configure your navigation bar to not be transparent, you may notice that the UIRefreshControl becomes rather glitchy. The easiest solution is to modify your navigation bar colour to be a little darker so it will look the same when the transparency is applied.

If you are doing some form of hiding/showing the navigation bar depending on which controller is currently shown, you may experience weird UI issues if you’re using large titles. Until these issues are fixed and the new navigation bar becomes less glitchy, it is recommended that you always show the navigation bar on all screens in the hierarchy and modify your design a bit if necessary. All in all, until the new navigation bar implementation becomes more mature, use it with care and be prepared to make some compromises.

3. iOS 10 Is Still Here

Unless you’re very lucky and are supporting only the latest iOS, you will need to make sure that your UI looks nice on iOS 10 (and maybe earlier versions) as well. Again, we can look at UIRefreshControl. The standard place where UIRefreshControl lives if you add it to your UITableView is right under the navigation bar and above your table view content. When you start pulling down, it shows itself from under the navigation bar. But if you are using large titles on iOS 11, the UIRefreshControl changes position and appears directly in your navigation bar right above the large title. Since the colour of the navigation bar and table view background is likely to be different, you should change the tint colour of the UIRefreshControl accordingly. This is quite simple to do:

if #available(iOS 11.0, *) {
viewController.refreshControl.tintColor = UIColor.white
} else {
viewController.refreshControl.tintColor = UIColor.AppColors.GoldenLighter
}

You may also find that your scroll view insets are wrong on some view controllers when running iOS 10. The most common solution is to uncheck the Adjust Scroll View Insets in your view controller, but you could also have an issue with layout guides/safe area, so be sure to check that as well.

4. Don’t Forget to Have Fun

Creating a new UI should be fun as well as challenging, so don’t be afraid to throw in a subtle animation here or there, or something else that might cheer up your users. Of course, check with your designers first, so you don’t end up in the wrong UX lane. 🙂 Adding small interactions with which a user can play with is almost always a good idea.

This is a small video demonstrating such an interaction. A user initially only sees a portion of the cover image, so if he wants to reveal more, he has to pull down. When he starts scrolling the image will slowly shrink and melt into the background color of the navigation bar. It provides the user something to play with, as well as seeing a bit more content in the process.

These are some of the challenges we faced during our redesign of the LikeUs app. We would love to hear your side of the story if you went through a similar process or redesign. Feel free to reach out and comment 🙂