What is Apple’s new “notch” feature on iPhones, and what does it mean for software developers and testers? Keep reading to find out.
What is the notch?
OEM manufacturers have long been on a quest for the perfect bezel-less display. Samsung and Apple have been fierce sparring rivals on this front. With its flagship Galaxy phones, Samsung introduced a curved display that added some complications with user experience.
Wanting in on the edgeless action, Apple recently introduced a major redesign to its iPhone X device—a notch at the top of the screen.
The response to the notch has been polarized, with many ardent Apple enthusiasts calling it a design disaster. From Apple’s perspective, though, there are reasons for the notch. The key reason: FaceID. The IR sensors for FaceID are too big to be hidden in a slim bezel, and hence, the notch was the only option if the phone was to house a FaceID system. If your app already uses Touch ID, a way to log in using fingerprint, then FaceID will be a natural upgrade, which brings added convenience and security.
iPhone X is not the first phone with a notch, however. The Essential phone introduced the design a few months earlier, but the notch on the iPhone X is much bigger and more intrusive to the user experience. With Android phones following suit and including a notch, the onus is now on app developers to build their apps keeping in mind the constraints of the notch. But what should developers pay attention to? Let’s discuss.
App Store policies
The notch presents some challenges to the user experience, as when the scroll bar disappears under the notch. However, many users find the notch does not interfere with the core user experience on the iPhone X.
One way to completely avoid the notch is to introduce a black strip that hides the notch. In fact, there’s an app for that. As an app developer, you may consider having a black strip like this on every window of your app. However, this is not allowed by Apple’s policy. They don’t want to hide the notch, and would rather have it as a visible and integral part of the on-screen experience. Despite the notch being an odd design choice, only Apple can work around it because of their tight control over apps in the App Store.
To help design apps that are compliant, Apple has outlined a detailed list of human interface guidelines. It particularly focuses on compatibility between the new iPhone X and older smaller versions of the iPhone which feature 4.7-inch screens. Apple suggests using letterboxing and pillarboxing to resize images and windows so that they are scaled appropriately to screen size.
Apple requires you to place the most important content of your app within (and not outside) the safe area as shown in the image above. This prevents content from being underlapped by elements like the notch, the status bar, or the navigation bar. With the removal of the physical home button and the addition of a new on-screen Home indicator, there’s one more element that needs its space, like the notch. There are other usability factors to keep in mind, like how easy it is for users to reach the controls of your app on the big screen of the iPhone X.
There are many elements to consider when designing the interface of an app today. This could change in the future, as Apple may discover a way to reduce the size of the notch until it’s not required at all, but for now, the notch is here to stay, and this means having to adapt to the change.
The notch effect on Android
Interestingly, it’s not just iOS apps but also Android apps that now need to consider the notch. Android device makers inevitably follow trends that Apple sets, and we’ve already seen many Android phones cloning the notch. Notably, the OnePlus 6, Huawei P20 Pro and Asus ZenFone 5 are among the many flagship Android phones that feature a notch. Google has taken notice of this and has already announced support for the notch in Android P, its next OS release.
Google has enabled Display cutout support in the Android device emulator. There are three types of cutouts—narrow, tall, and wide. Further, the getBounds() class returns the exact dimensions of the screen of a device that can safely display content without interference. Not surprisingly, Android is taking a more relaxed approach to the notch, unlike Apple, which has stringent regulations around how apps are designed. Still, as an app developer, it’s on you to ensure your app is not just usable but elegant, despite all the UX challenges.
UX testing to the rescue
UX testing is now much more complicated with the addition of the notch, on-screen navigation, and other changes. The goal is to ensure visibility and usability around these sensitive areas. App controls like buttons and menus should also be placed carefully away from the notch and Home indicator. Margins need to be adhered to, or you’ll risk content being clipped off.
A testing tool that is aware of screen size across multiple devices and can automatically check for content scaling within the safe area is essential. The emulators used in testing should accurately reflect different scenarios as they would occur on real devices. It’s good to use real devices in testing when possible, but it’s expensive and cumbersome to maintain a device lab. As an alternative, you can always choose a cloud-based mobile device. This way you get a range of devices to test on so you can accurately check usability across many real-world scenarios, without having to splurge on buying the actual device or maintaining it for your tests.
The notch is an inconvenient reality that app developers will need to live with for the foreseeable future. It introduces complexities with app design, and if ignored, can result in your app being disapproved by the App Store, or even losing users because of a bad user experience. But by keeping in mind the guidelines laid out by Apple and Google, and by leveraging a robust UX testing solution, you can safely display your content on the gorgeous, large-screen displays of today’s bleeding-edge devices.
Twain is a Fixate IO Contributor and began his career at Google, where, among other things, he was involved in technical support for the AdWords team. His work involved reviewing stack traces, and resolving issues affecting both customers and the Support team, and handling escalations. Later, he built branded social media applications, and automation scripts to help startups better manage their marketing operations. Today, as a technology journalist he helps IT magazines, and startups change the way teams build and ship applications.