Dive into the details of iOS 11: Is Apple still detail-oriented?

Few days ago, Apple had their fall special event at Steve Jobs Theater located inside Apple Park, unveiling the all screen iPhone X, and later pushing iOS 11 GM to beta testers, which is going out officially next week. I updated my phone as soon as I got the push of iOS 11 GM.

Since WWDC in June, I’ve been a beta tester for iOS 11 which has been through an intensive summer of incremental updates. With my 4.7 inch iPhone 7 and iOS 11 GM at hand, there still exist quite a lot of unfinished feeling of Beta software. As a designer, I can’t help writing about my feelings.

I’m writing this to help people with realizing many details requiring further polishes, who hopefully includes folks at Apple and can push forward with changes to improve those details.

The unfinished feeling in iOS 11 mostly comes from UI and animation. UI elements in iOS are quite inconsistent, mixing a variety of UI elements, which might look quite similar but introduce a disconnected feeling for UX. The inconsistency of those elements majorly stems from those UI element updated in iOS 11, such as Large Title and new Search Bar. In my opinion, those newly introduced elements, which might be unfamiliar and new even to Apple engineers, have caused many inconsistent UI experience in iOS 11.

Mail.app

First let’s look at Mail.app in iOS 11. Like other native apps, Mail also introduces a new Navigation Bar with Large Title. However, Large Title in Mail, has extra left margin compared to the design guide example. Here we will use Search Bar as reference object. In design guide example, Large Title and Search Bar share same distance to the edge, but in Mail.app, Large Title clearly moves a bit right compared to Search Bar.

Watch.app

In Watch.app, Search Bar is not following the suggested style, standing out with its unfitted background. In native apps adopting iOS 11 styles, Search Bar should match Navigation bar naturally, unlike Watch.app.

In the instruction video of Building Apps for iPhone X published by Apple, they mentioned an exactly same case:

The WWDC.app on the left is counter-example which is not matching styles, and Contacts.app on the right is a best practice matching styles. The commenter in the video claims:

That’s move on to the second issue that I found… if I bring out the search field, well that doesn’t look quite right. Let’s compare this to the Contacts app list. A couple of things look wrong here. The color of the search bar background isn’t quite right. And the sizing is a bit off.

Therefore, iOS 11 is suggesting matched background between Search Bar and Navigation Bar. Yet Watch.app doesn’t follow it as a native app. What’s more, once clicked, Search Bar in Watch.app is almost kissing the Status bar, which shows more polish to do be done by Apple engineers.

Files.app

Search Bar in Files.app also has some issues. Seems Files.app engineers used a non-standard Search Bar. From the picture below, compared to standard Search Bar in Settings.app, Files.app has a slightly smaller Search bar, and lighter font color.

Besides color/size difference, animation after clicking Search Bar is also different. The animation of standard Search Bar in Settings.app:

<a href="https://medium.com/media/ada7f8f260786b8fc8897105f891ca6e/href">https://medium.com/media/ada7f8f260786b8fc8897105f891ca6e/href</a>

Then Search Bar in Files.app:

<a href="https://medium.com/media/7eb0846fee84795172f171d00c88c001/href">https://medium.com/media/7eb0846fee84795172f171d00c88c001/href</a>

Comparatively, Search Bar in Files.app has faster animation but less natural animation logic and a bit unfinished feeling.

App Store.app

iOS 11’s App Store has gone through a redesign and introduced similar style like Apple Music. However, in App Store’s Today tab, compared to Apple Music’s For You, the fonts of date are different as App Store uses a bold one while Apple Music uses a light one. And in Apple Music, “Wednesday” is followed by a comma but in App Store the comma is missing.

Also comparison between these two apps. In Search page, touching Trending item in App Store won’t trigger a hover effect as feedback for touch, while similar action in Apple Music search page will trigger a hover effect changing background/foreground color of the item. In my opinion, Apple Music does it better and native apps should be consistent upon decision of hover feedback, regardless of having it or not.

Besides, there’re still some miscellaneous issues among details. In App Store, open any app with banner image, slightly swipe from left edge to right (but not full swipe that will dismiss the app page). The banner section will render strangely after page bounces back:

You could check this bug with the video below.

<a href="https://medium.com/media/bc4362e61dfccbdf073fb0d86e7e0940/href">https://medium.com/media/bc4362e61dfccbdf073fb0d86e7e0940/href</a>

Also there’s a performance issue. In Updates tab, pull down to refresh the items and there’s a obvious frame drop if Large Title is pulled too much down. You can feel it yourself easily.

Health.app

In Health.app, between Today page and Health Data page, same data and same styles, but different width. This is an old issue from iOS 10 and still not fixed yet.

Today Widget

In iOS 11, there’re two ways to open Today Widget, either by swiping from left to right in Home Screen, or in Lock Screen, yet Search Bar in pages invoked in different way will have different behavior. When invoked from Home screen, pulling down Widget page will not show Search screen, and clicking Search Bar is missing animation of showing and dismissing frosted glass effect, and animation of widening search bar (though there’s animation of shortening it) after hitting cancel. The overall experience is quite awkward.

<a href="https://medium.com/media/ef8e69ae6ac6b0ff48df843c0a9a078f/href">https://medium.com/media/ef8e69ae6ac6b0ff48df843c0a9a078f/href</a>

When invoked from Lock Screen, there’re animations everywhere and pulling down Widget page will correctly show Search screen, very smooth and natural experience.

<a href="https://medium.com/media/6383ee56a435823a524709fb0f899338/href">https://medium.com/media/6383ee56a435823a524709fb0f899338/href</a>

This is causing quite disconnected feeling of Today Widget in two scenarios. Obviously, the one invoked from Home Screen is quite unfinished compared to the one invoked from Lock Screen. What’s weird is that Today Widget invoked from Home Screen in iOS 10 has all those animations and could show Search screen by pulling down. No idea why it goes backwards in iOS 11.

Nevertheless, the Today Widget invoked from locked screen in iOS 11 is also going a bit backwards compared to iOS 10. In Today Widget page, when user pull up page, Search Bar will hover widget with frosted glass, preventing widget from stacking onto Search Bar. However, clicking Search bar will cause frosted glass to disappear immediately then slowly rendering a full screen frosted glass. Cancelling Search Bar will cause full screen frosted glass to disappear slowly, then immediately rendering the small section of frosted glass without animation, a bit unnatural.

<a href="https://medium.com/media/301d51726d61d02209ca944bfafcf19a/href">https://medium.com/media/301d51726d61d02209ca944bfafcf19a/href</a>

If video is too fast, you could check it out by frame. What we can see is that full screen frosted glass is not related to top section frosted glass in terms of smooth rendering, leading to a disconnected feeling.

Besides missing animations, iOS 11 also brings redundant animation. In iOS 11, every time swiping from Today Widget back to locked screen, Player section will resize again and again, which is quite unnecessary.

<a href="https://medium.com/media/ea63c1c378ef2b06eeb77ed79a6fe6a7/href">https://medium.com/media/ea63c1c378ef2b06eeb77ed79a6fe6a7/href</a>

In Siri Search Suggestion page invoked after clicking Search Bar, there’re two issues. First, when touching suggestions, hover feedback is using a width less than screen width, causing hover feedback to become a weird rectangle. The appropriate hover feedback is already present in Apple Music, where hover effect takes full screen width.

Second, and quite strange, if you look carefully into Siri Search Suggestions font, you’ll see that they’re jagged (especially Latin script) near edges, not smooth at all, even compare to input text on same screen.

Photos.app

Inappropriate margin, either too much or too little, appears in many places of iOS 11, causing greater feelings of unfinished/unpolished work.

In Shared tab of Photos.app, the margin (as pointed below by arrow) is too narrow and inconsistent, compared to any other native apps with similar pages.

Settings.app

In Settings.app → Apple ID section, alignment of device list is completely off from ID section. This was correct in iOS 10 and broken in iOS 11.

Music.app

In Apple Music’s Connect section, some posts will have really small margin between picture and text. This shouldn’t be a design decision since margin in iTunes client on desktop macOS is appropriate. Though Connect is de facto a rarely used feature, Apple shouldn’t be making such basic mistake in UI design.

Also in Apple Music, entering Album list through Library, then clicking initial letter list to go quickly to that section. You’ll see that section of initial letter on top is cutting album covers.

Advertised as a feature in iOS 10 on WWDC, the player screen of Apple Music also becomes weird in iOS 11. Reopening the player screen will cause shadow under played album cover to disappear, and shrinked album cover during pausing will also enlarge back if reopening player screen.

Video are listed below:

Pause music, album cover zooms, close and reopen player screen, album cover zooms back:

<a href="https://medium.com/media/042fe8a72fe67ede7bc5c06dbc9d255e/href">https://medium.com/media/042fe8a72fe67ede7bc5c06dbc9d255e/href</a>

Music playing, shadow under album cover, close and reopen player screen, shadow gone:

<a href="https://medium.com/media/c6a48f9be2f4b36d613e907257a063ad/href">https://medium.com/media/c6a48f9be2f4b36d613e907257a063ad/href</a>

In iOS 10 with AirPods, when AirPlay device is connected, player screen will show device name near AirPlay icon. That’s gone in iOS 11.

Some folks might think this is a design choice, yet it’s a bug actually. In the video below, when AirPlay device is connected, device name is indeed displayed correctly. However reopening the player screen will make it disappear. If it’s a design choice, the device name shouldn’t have shown initially.

<a href="https://medium.com/media/18cd24da68b2adf374bfaf3e6fedfab5/href">https://medium.com/media/18cd24da68b2adf374bfaf3e6fedfab5/href</a>

And in Podcasts.app which use same design style as Apple Music, AirPlay device name is always there.

Another bug in Apple Music. As we know, there are two ways to go to slide to top in iOS, either by clicking Status Bar, or clicking icon on Tab Bar. In Apple Music, hitting Status Bar will correctly go back to Large Title navigation bar, while hitting Tab icon will return a small font navigation bar as shown below.

Since in Podcasts.app and App Store.app, clicking either will both return Large Title navigation bar, this behavior in Apple Music is definitely a bug.

Control Center

In Control Center, AirPlay device section also has issues. Often during usage of AirPods, Control Center will show iPhone as the device, and when AirPods is shown as device, pausing the music will cause device to become iPhone (though AirPods is still playing).

<a href="https://medium.com/media/82572349e9246dbe9537e084ef841866/href">https://medium.com/media/82572349e9246dbe9537e084ef841866/href</a>

There’s also an inappropriate animation in Control Center, the 3D Touch animation in Screen Mirroring:

<a href="https://medium.com/media/0a807f1932289cae814e61966cee9bb2/href">https://medium.com/media/0a807f1932289cae814e61966cee9bb2/href</a>

Weather.app

Weather.app in iOS 11 has also been updated using larger font and less margin. Yet I noticed that temperate text in iOS 11 is not center-aligned, while it was in iOS 10.

This might be a iOS 11 design decision. However during actual usage, due to the non-alignment, for some digits, it’s very obvious for user that text is closer to left edge, which doesn’t show any pro compared to iOS 10.

Faux bold issue for PingFang in Safari

The last and most serious issue, in my opinion, is font. The issues above might not impact normal usage, but the issue below will actually impact everyone of us.

That’s the faux bold font issue for PingFang (iOS’s default Chinese typeface) in iOS 11 Safari. I discovered this issue when I was testing personal websites on iOS 11. Below all comparisons are taken between iOS 11 and iOS 10.

As shown above, PingFang is actually rendering as faux bold. Faux bold is basically not using the font weight provided by font itself, but to add font weight on some base font weight forcibly. Faux bold is generated by algorithm and often lacking quality, causing issue of stroke weights and letter tracking. In the screenshot, you could see that the faux bold PingFang in iOS 11 has larger spacing between texts.

After some testing, I found that this would happen only when CSS font-family includes “-apple-system”, i.e. font-family using San Francisco font provided by system. Once we removed it, system will honor the font weight provided by font itself and faux bold is gone.

This issue is not only in Safari, but to impact all app using webkit engine of iOS to render web page, such as WeChat’s internal browser and Douban.app. As you can see, Douban.app has been dominated by faux PingFang bold, looking quite bad.

Randomly picking a movie review post, you’ll notice that title is in faux bold. Through comparison, you’ll also notice that font spacing in faux bold is problematic. Actually this is not just about bold font, but also about regular or any font weight, so that you’re seeing “faux regular” and so on. Faux regular is not easily identified from stroke weight, but from the comparison below you’ll notice that font spacing is different in iOS 11 so that each line of texts have different words, which proves “faux regular” presence.

And check more pictures of faux bold in WeChat.app.

This faux font issue from Safari has appeared in iOS 11 Beta 1 and I’ve submitted bug report through Feedback app earlier in August (the case number is #3436665). Yet it’s still an issue as of today, and likely for iOS 11 or further. As a typography enthusiast, I’m quite disappointed by this thing.

In the end

In recent years, there’s been discussion about degeneration of software quality of Apple. Apple has been stepping steadily in Bioinformatic, Machine Learning, AR and many other fields and growing its business, but slowly losing the detail-oriented focus on design and products like before. During the event of 12th, listening to The Beatles, and to Steve’s words of wisdom, I had a moment feeling that we’re still in the good old days. However Apple is different from those days. Honestly I have no intention of smearing Apple, as owner of many Apple products for many aspects of my life. Apple is still my only favorite and mostly respected company. I sincerely wish that, while stepping forward, Apple could still maintain those values they’ve cherished and built in the past.

Special thanks to Ted Li for his excellent assistance in translation.

Read the Chinese version in Zhihu: https://zhuanlan.zhihu.com/p/29313582