Designing for that extra height on the iPhone X
The iPhone X adds 145 points to the height of the iPhone 7 without changing the width. Because if it was any wider you’d have to use that weird keyboard option with everything smashed to one side.
Apple has recognized that when things get too wide, we can’t reach the buttons. What about too tall? Well this is what they’ve done for the super tall iPhone X:
- They kept your navigation buttons up there at the tippy top. Now I definitely have to use two hands, because I don’t have hands like Shaq. (Are his fingers too wide to press those buttons anyway?)
- Navbar. Still at the top. Now extra unreachable. Need I say more? Brad Ellis does a good job explaining this more in depth if you want to check it out.
These all highlight key point number one. Don’t put anything you want your users to interact with at the top of the iPhone X. They can’t reach them without extra two handed effort. Your job as a designer it to REMOVE extra effort.
A smart guy named William Hick, did some psychology research and got a law named after him. You guessed it — Hick’s law. Hick’s law states that the more options a user has, the more time they will take to make a decision. Too many elements designed to share information with the user makes it harder to get things done. It takes more energy, and it takes more time.
That gives us point number two. Don’t add anything you want your users to think about with that extra space. Not only will they not be able to reach it, it will increase their cognitive load (how much they have to think when they user your app).
So what should you do with that extra height? With a taller screen we now have the opportunity to meld the simplicity of the mobile user experience with graphic elements that have only been viable on larger displays.
Apple did get one thing right with iOS 11 and the iPhone X. The large titles are actually a great use for that extra height. It takes very little thinking or searching for users to know exactly where they are within the navigation of an app. As mobile continues to become our most used form of computing and apps continue to expand their abilities it is increasingly important to clue users in to where they are without making them search. Apple used the extra space to make a better experience for the user without increasing their cognitive load.
Lately every app has begun to look basically the same as everything non-essential has been stripped away. White background. Bold tittles. Extra white space. No borders or boxes. Very sparing use of color. Apps are using the same look and the same patterns. This is great! It makes using an app feel totally familiar for new users, and maintains focus on only the most important actions a user needs to perform. The downside is that your app doesn’t stand out. It doesn’t create a unique feeling, and it doesn’t build a brand.
That extra height gives you the opportunity to make your app stand out without losing the common patterns and aesthetics. Graphic elements still have to be simple and they can’t be too distracting. One way to do this is to include an element that reinforces an already existing aspect of UI.
Here’s and example from a project I’m working on:
In this example the navbar has been moved to the middle of the screen (where normal people can reach it), and some simple artwork has been added in between the title and the the navbar. The space hasn’t been filled with something for the user to interact with, or anything they need to think about. Instead I tried to use the space to make a delightful visual experience for the user. The flying paper air plane reinforces the main function of this screen (doesn’t add an all-together new element) and makes the app feel less bland, and more fun. The waves reinforce our brand, Wavelet, for this app, in addition to making an interesting transition from the colored background to white.
That extra height means you can add some brand back into your app. It means you can make your app feel different than every other white minimalist app out there. I’m interested in seeing what you come up with. Let me know how it goes!
