Published on <a href="https://blog.prototypr.io/iphone-x-and-peripheral-vision-813b2599bf8c?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Costantino Pistagna 
No doubt, the most popular topic of the next 3 months (maybe 6) will be iPhoneX and related issues to applications development, especially designed for this device. I could not escape from the temptation to write something on the subject.
The following article is about my personal experiences and considerations spending the last couple of weeks to upgrade some customer applications to Apple’s new iPhone X guidelines.
When creating something, it is important to have a clear and concrete vision of what needs to be done. However, to have a clear and concrete vision of iPhone X you need to hold it in your hand and work with it. Fortunately, the Xcode 9.1 simulator plays a good part of this task and even without being able to put your hands at day 1 on Apple’s new flagship, you can still know what to do.
It is clear that the new device has a more visible area — about 12% more — than its predecessor (iPhone 8). At the same time it inherits the width of 375pt but not the height.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*SgZhNJ6RogXAxIJIlWoKlQ.png">Fig. 1 — different screen areas between iPhone 6/6s/7/8 and iPhone X. — Courtesy of Apple™.
When I have to talk about this topic during a technical conference, I like to start with this concept of a larger screen portion that maintains the same visible area. A couple of years ago Philips created something real innovative by delivering the first TVs that emitted a soft light on the background to mimic the screen light with the ambient light.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*roWI0v__JYlzBIeOYdTVLQ.jpeg">Fig. 1a — Philips example TV with ambience light — Courtesy of Philips®.
What? Why is this interesting? We are talking about Apple and iPhone X! What this means? Are you serious? Absolutely!
Philips engineers exploited near or para-central peripheral vision to increase the cognitive perception of the scene on the screen.
<img alt="" src="https://cdn-images-1.medium.com/max/400/1*ZPmwVHYCtUizorGNmUV8lg.png">Fig. 2 — Human vision fields and degree. — Courtesy of Wikipedia.
As noted by Strasburger, Rentschler and Jüttner in Peripheral Vision and Pattern Recognition: A review — Journal of Vision (2011), the para-central vision provides the brain with an immediate peripheral vision that contributes to the release of sensations that create the background of a detailed visual perception.
Short and simple version: using a delicate contour surrounding a precise detail, helps to focus more attention on the details. I think that this concept is the closest thing to what Apple and iOS designers thought when they studied and realized the interface guidelines that create the iPhone X experience.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cgAvG_jX1fC8O_SpRxlt1g.png">Fig. 3 — iPhone X — Example guidelines — Courtesy of Apple™.
What this mean for the developers and architects of a mobile iPhone app? If you’ve kept yourself up to date, studying the latest news coming from WWDC 2017, then you’ve probably heard about Safe Area. It’s time to connecting the dots: concepts that were abstract a few months ago, now count within the new Apple device and its design guidelines. Nothing was left to chance.
With iOS 11 Apple has introduced the Safe Area concept to replace the Top and Bottom layout guides.
<img alt="" src="https://cdn-images-1.medium.com/max/1000/1*A5La-OwDHwnFsGCFIdXZQg.png">Fig. 4 — Safe Area representation
Here’s how the safe area (the one in white) appears in a hypothetical application on iPhone 8 (left) and on iPhone X (right). As you can see, in addition to being a wider area that extends to the top area (topAnchor), there is also a 34 points bottom area (bottomAnchor) underneath a control zone that works as the alternative to the lack of Home button. Let’s take a close look:
667pt — 64pt = 603pt (visible height area on iPhone8)
812pt — 88pt — 34pt = 690pt (visible height area on iPhone X)
The concept becomes even more interesting if we move to the landscape. In this condition, regardless of whether the sensing zone (notch) is right or left, both margins are re-entered with an inset of 44pt.
<img alt="" src="https://cdn-images-1.medium.com/max/800/1*ETke626lnSBQp6gxSqsk8Q.png">Fig. 5 — Safe area in landscape (left: iPhone 8, right: iPhone X)
Note that as in the case of iPhone X, landscape height is no longer similar to that of iPhone 8 (375pt) but is somewhat smaller due to the control zone for replacing the home button:
375–32–21 = 322 (landscape height on iPhone X)
375–32 = 343 (landscape height on iPhone 8)
and if we make the ratio:
(667/343) ~= 1,9 (width:height ratio on iPhone 8)
(724/322) ~= 2,25 (width:height ratio on iPhone X)
This means that the two devices have different relationships, and hence a full screen image in the background, for example, on the two devices must be handled properly in order to deliver the same user experience.
<img alt="" src="https://cdn-images-1.medium.com/max/600/1*RBGX063kbep2xBTJpcNlCA.png">Fig. 6 — iPhone 8 Aspect ratio juxtaposed to iPhone X aspect ratio — Courtesy of Apple™.
This is what would happen if a device with the height / width ratio equal to that of iPhone8 but with an iPhoneX size overlaid on the latter.
An application for iPhone X must exploit the space available intelligently, in order to “extend” the visible area outside the safe area by using these characteristics to make the content of our screen more interesting and direct.
What does this mean in practical terms? Not all the screen is the same and not all screen areas can be used for the same thing. Let’s give it a look.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BUj0bcDQ-77tlJmfeXlbzg.png">Fig. 7 — Different level interaction area on iPhone X
<ul>
<li>The BLUE and the GREEN area indicate zones that would hardly be used, except for showing those visual extension of outbound lights (remember Philips’s TV at the very beginning of the article?).</li>
<li>The VIOLA zone indicates a useful screen area for navigation and control tools.</li>
<li>The RED zone indicates the area where our application should be more responsive and concrete: the heart of the app where users should direct their eyesight, attentions and taps.</li>
</ul>
Let’s try, for example, to see how Apple’s engineers have been applied this concept to contacts application on iPhone X. To make things more clear lets overlap the graph above on the contacts screen.
<img alt="" src="https://cdn-images-1.medium.com/max/693/1*TzKERhxQbbK_jZyzmFq-5Q.png">Fig. 8 — Right interpretation of iPhone X extended screen area vs iPhone 8. — Courtesy of Apple™
In this case, the concept we tried to express above seems to be exactly the same used by the engineers who worked on the contact application provided with iOS11; the main area reflects the safe area (the one where to direct the attention and the touches). All other areas have a more peripheral contribution, to “complement” the user experience. Awesome.
References:
<ul>
<li><a href="https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/">iPhone X &#8211; Overview &#8211; iOS Human Interface Guidelines</a></li>
<li><a href="https://ivomynttinen.com/blog/ios-design-guidelines">The iOS Design Guidelines &#8211; Ivo Mynttinen / User Interface Designer</a></li>
<li><a href="https://developer.apple.com/videos/play/fall2017/801/">Designing for iPhone X &#8211; Fall 2017 &#8211; Videos &#8211; Apple Developer</a></li>
<li><a href="https://developer.apple.com/videos/play/fall2017/201/">Building Apps for iPhone X &#8211; Fall 2017 &#8211; Videos &#8211; Apple Developer</a></li>
<li><a href="https://useyourloaf.com/blog/supporting-iphone-x/">Supporting iPhone X</a></li>
</ul>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=813b2599bf8c" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/iphone-x-and-peripheral-vision-813b2599bf8c">iPhone X and peripheral vision</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

iPhone X and peripheral vision

Top Stories