Author: Ryan Lau (ryanlauprsnl@gmail.com)
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.
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.
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.
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 sugggesting 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.
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.
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.
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.
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. http://ryanlau.qiniudn.com/ios11bugs/video/4.m4v When invoked from Lock Screen, there’re animations everywhere and pulling down Widget page will correctly show Search screen, very smooth and natural experience. http://ryanlau.qiniudn.com/ios11bugs/video/5.m4v 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.
http://ryanlau.qiniudn.com/ios11bugs/video/6.m4v
(Pay attention to Search Bar on top of screen).
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.
http://ryanlau.qiniudn.com/ios11bugs/video/7.m4v
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.
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.
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.
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.
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). The video below is for 2nd case: http://ryanlau.qiniudn.com/ios11bugs/video/9.m4v There’s also an inappropriate animation in Control Center, the 3D Touch animation in Screen Mirroring: http://ryanlau.qiniudn.com/ios11bugs/video/10.mp4
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.
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.
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 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 wisdom words, 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.
Thank you! This is amazing!