{"id":6927,"date":"2021-10-31T06:42:15","date_gmt":"2021-10-31T13:42:15","guid":{"rendered":"https:\/\/www.corbinstreehouse.com\/blog\/?p=6927"},"modified":"2021-10-31T06:42:19","modified_gmt":"2021-10-31T13:42:19","slug":"macos-12-monterey-and-user-interface-inconsistencies","status":"publish","type":"post","link":"https:\/\/www.corbinstreehouse.com\/blog\/2021\/10\/macos-12-monterey-and-user-interface-inconsistencies\/","title":{"rendered":"macOS 12 Monterey and User Interface Inconsistencies"},"content":{"rendered":"

\n

Details matter, but they are getting lost. <\/p>\n\n\n\n

At Apple I worked on the main User Interface (UI) framework called AppKit for about 13 years. I would help enforce UI consistency in applications by logging bugs and helping the application developers fix any issues. Back then a lot of people really cared about consistency and the small details really mattered. I just installed macOS 12.0.1 Monterey and I have found that the system is moving away from being homogeneous. Application-to-application consistency is getting lost, and it is becoming more like the web where every website is different. Part of the problem is the lazy-port of iOS applications over to macOS via Catalyst.<\/p>\n\n\n\n

It is easy for me to complain about issues, but I also take time to log bugs in Feedback Assistant for Apple and hope they fix the problems, but in the past three years since I left not much has been addressed.<\/p>\n\n\n\n

Sidebar Flashing<\/h2>\n\n\n\n

Catalyst apps, like News.app, suffer flashing issues when the application is brought in and out of focus; us developers call this the “key window”. Quickly Cmd-tab from any app into News.app and you’ll notice that the text and sidebar text flashes in to the proper dark color after a slight delay. The key window is not drawn key at the same time as the text, and the text color is re-drawn on a slight delay afterwards. This has happened since day zero when News.app was released, and I logged the issue a while ago (FB7880685). <\/p>\n\n\n\n

I took a video of the problem and here’s a screenshot from it showing the issue; the News.app window is no longer focused which can be noted with the gray title bar buttons, but the text is still black. A brief moment later the text color will pop and transform to the proper non-key gray color.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once you see the flashing you won’t ever not see it. I’m not sure how the Human Interface (HI) group at Apple let an issue like this slide, and not only that it has now appeared in three versions of the OS.<\/p>\n\n\n\n

Sidebar Text Layout<\/h2>\n\n\n\n

I used to work on the underlying tables of macOS so I’m particularly sad to see them have issues in text layout. Here’s a zoomed in screenshot of Mail.app on the left and Finder on the right. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The problem is obvious: the tables have an inconsistent layout, where the selected row in Finder is a bit higher than Mail.<\/p>\n\n\n\n

I saw this issue in macOS 11 and reported it back then as FB7880226, but I’ve previously noted the sad state of logging bugs at Apple<\/a> and it is no surprise to me on how they handled this bug. It came back as “potentially fixed in macOS 12”:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Of course, it wasn’t actually fixed, and obviously no one even checked it if was fixed. They just sent the bug back to me assuming it was fixed. This is extremely lazy engineering. But that is assuming the bug made it to engineering; it probably was stuck in limbo with Quality Assurance (QA) who just sent it back without even doing their QA job. I have a feeling this bug is specifically an issue with Mail.app, but I don’t know for sure.<\/p>\n\n\n\n

Table Style Consistency<\/h2>\n\n\n\n

Look at this sweet new table style in System Preference’s “Notifications and Focus”:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The corners are all nicely rounded, and it looks really slick. I bet one of the Human Interface (HI) designers spent a lot of time working out all these details. Normally HI would dictate that such a design be enforced across all applications across the OS.<\/p>\n\n\n\n

Unfortunately, if you flip over to “Desktop and Screensaver” you see a horrific UI mess. This is in the same application<\/strong>, where we don’t have rounded corners on the table and there is a double-line border around the section on the right hand side:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I logged this as FB9731767 for this app, but all tables throughout the system should have had this detail applied. The preferences in Mail.app could easily have had the rounded corner touch, but instead the Signatures tab has an ugly too-dark border around it.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Some apps have been updated. Finder’s preferences have a round corner around the table.<\/p>\n\n\n\n

Focused Buttons State<\/h2>\n\n\n\n

That great new UI in “Notifications & Focus” actually has inconsistencies right off the bat, and you might have noticed it in my first screen shot. If you didn’t, here it is zoomed in:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The top plus button is a lighter gray than the lower plus button. Sigh!<\/p>\n\n\n\n

What happens when you hit the plus button, and then hit escape?<\/p>\n\n\n\n

Now the plus button has a disabled look, when it is really enabled!<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Where are the QA engineers who are supposed to at least click on the buttons and see what happens? I haven’t taken the time to log this bug yet; it seems hopeless to do so.<\/p>\n\n\n\n

Conclusion<\/h2>\n\n\n\n

I know a lot of my old colleagues spent a lot of time on macOS Monterey. It’s easy for me to focus on the bad things, and to not even mention a bunch of the cool new things like the new Popover animation. I’m not trying to downplay all the good work, but it is important that we don’t forget about the details.<\/p>\n","protected":false},"excerpt":{"rendered":"

Details matter, but they are getting lost. At Apple I worked on the main User Interface (UI) framework called AppKit for about 13 years. I would help enforce UI consistency in applications by logging bugs… [read more]<\/a><\/p>\n","protected":false},"author":1,"featured_media":6938,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4,6,86],"tags":[62],"class_list":["post-6927","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apple","category-cocoa","category-coding","tag-apple"],"jetpack_featured_media_url":"https:\/\/www.corbinstreehouse.com\/blog\/wp-content\/uploads\/2021\/10\/Screen-Shot-2021-10-31-at-6.30.49-AM.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/posts\/6927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/comments?post=6927"}],"version-history":[{"count":2,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/posts\/6927\/revisions"}],"predecessor-version":[{"id":6939,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/posts\/6927\/revisions\/6939"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/media\/6938"}],"wp:attachment":[{"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/media?parent=6927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/categories?post=6927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.corbinstreehouse.com\/blog\/wp-json\/wp\/v2\/tags?post=6927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}