Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

8 Designing Tips for iPhone X

DZone's Guide to

8 Designing Tips for iPhone X

Designing for iPhone X will pose some big challenges. These tips will help you create an attractive app with a functional user interface.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

It's been about a month since the iPhone X (read iPhone 10) was launched in spectacular fashion, and now everyone is scrambling to figure out how to design apps for it. Because the latest iPhone has a bigger screen, while being smaller than its predecessor, the challenge is unique. Also, not having a designated home/exit button is further vexing. In this article, we will be discussing the nuances of designing an app interface for the new iPhone X.

iPhone X will start shipping November 3rd. It rocks an edge-to-edge super retina display that has a resolution of 1125x2436 px. Additionally, it has a futuristic Face ID unlock feature that is expected to be the game changer for the entire industry.

Designing for the iPhone X will have some new challenges, but mostly new design opportunities. In portrait mode, the width of the iPhone X is similar to the iPhone 7 and 8, but it is 145pt taller. This 15% increase in screen space gives developers and designers an opportunity to enhance the user experience.

Tip #1: Don't Obscure

As the iPhone X has a retina display with round edges, make sure your UI is not obscured by these features. Also, as the home button has been completely removed, the new "home button" is actually a horizontal line that sits at the bottom of the screen. Users will have to swipe up to exit an app or multitask. If your current app uses iOS native components, then it should be fine, as it is already adapted to the new iPhone. What this means is that your app will be automatically positioned to the new iPhone.

Tip #2: Use the Retina Display to Your Advantage

The new iPhone X's screen is taller, and it has a higher resolution for its size. The resolution on the iPhone is 2436×1125, and this is packed into 5.8 inches of space! The PPI for this screen is 458, meaning that assets can be imported at 3x instead of 2x.

Tip #3: Be Wary of the Shape of the Display

The iPhone X's display is not just taller, but also has rounded corners. The screen does not sit flush with the edge, at least at the top. It has a rectangular space to accommodate an ambient light sensor, proximity sensor, flood illuminator, infrared camera, speaker, microphone, a front-facing camera, and a dot projector. Is there anything more that can be housed in this small space (pun intended)! This rectangular space allows for two scalloped screen edges, which the designers at Apple have used to house the status bar, which includes battery status, signal bars, and Wi-Fi strength on the right, and a digital timekeeper on the left. This is a blessing in disguise because it gives app developers more space to use while designing apps for the iPhone X. Apple has asked developers to reconsider any past decisions of hiding the status bar in previous app versions.

Apple has explicitly asked app developers and designers to make sure their apps are full screen. The tech giant does not want developers to black out the scalloped edges, which in their (Apple's) view would be similar to their previous models like the iPhone 7, 8, and 8 plus.

Tip #4: Stay Away From Gestures - for Now

As the new iPhone X does not have a physical home button, the company has advised app developers and designers to not remove the home indicator that is placed at the bottom of the screen. Another aspect to stay away from is the placement of any button close to the home indicator, which might hinder with users when they are trying to exit the app. Also, we recommend to not have any interactive gestures just yet - as users will take time getting accustomed to the iPhone X.

Apple suggests not interfering with the systemwide screen edge gestures: "People rely on these gestures to work in every app. In rare cases, immersive apps like games might require custom screen-edge gestures that take priority over the system's gestures-the first swipe invokes the app-specific gesture and a second-swipe invokes the system gesture. This behavior (known as edge protect) should be implemented sparingly, as it makes it harder for people to access the system-level actions."

Tip #5: Respect the Aspect Ratio

The new display on the iPhone X is taller, which has an improved aspect ratio. With this, the artwork in landscape mode will have to change to fit the new display. Usually, if there is a mismatch in aspect ratio, content usually ends up being letterboxed or cropped.

Tip #6: Stay in the Middle - Stay Safe

As the iPhone X has an edge-to-edge display, it is safe to stay in the middle - literally! What we mean by this is that app developers and designers should make sure that the content is aligned in the center. We suggest this because the chances of the content getting clipped is high if it is not in the center - the device's sensors and corners do this, by the way. The best way to handle this is by using the Auto Layout function. This allows for your content to be automatically placed within the safe area so that your design is not hidden behind corners or sensors, or even the home indicator.

Tip #7: Get the Authentication Right!

Apple has one of the best authentication technologies in the form of Touch ID in the iPhone 7 and 8. While I personally prefer the fingerprint sensor on OnePlus devices, I feel that Apple's Touch ID is just as great, if not better. For the iPhone X, Apple has ditched the Touch ID and has opted for something called Face ID. Previously, the sensor was hidden under the home button, which is not present in the iPhone X. Authentication can be replaced by using the Face ID. If an app that uses Touch ID unlocks the phone or authenticate purchases, the same app can now use Face ID to authenticate.

Apple claims that Face ID is better than Touch ID - the chance that a random person can unlock an iPhone X with their face is one in a million. How is this done? The iPhone X projects over 25,000 invisible dots onto an individual's face to create a precise depth map of the face. What does this mean for app developers? Make sure to omit Touch ID going forward while designing apps for the iPhone X and replace it with Face ID.

Tip #8: Use the Wide Color to Enhance Visual Experience

The new iPhone X's display supports P3 color space. This helps it produce richer and more saturated colors than a standard RGB display. App developers and designers can use this to enhance user visual experience. Videos and photos will look more lifelike, and status indicators and visual data will appear more impactful.

TL;DR:

-The iPhone X is taller by 145pt. Design should be for 375x812pt.

-Use the entire screen. Focus on creating full-screen experiences.

-Don't hide the home indicator.

-Use aspect ratio wisely.

-Don't add new gestures just yet.

-Use auto layout to stay in the middle.

-Replace Touch ID with Face ID.

-Use the richer retina display to your advantage.

Did we miss something? What do you think about this article? Was it helpful? Share your thoughts and suggestions by commenting below.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
mobile ,iphone x ,mobile app development ,mobile design

Published at DZone with permission of Robby Gupta, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}