Thursday, June 1, 2023

Centering the macOS Ventura Form Layout

Vidit Bhargava (Mastodon):

As you can see with this design, it’s got a couple of glaring of issues when used in wide width situation:

  1. There’s too much space between the title and value. This makes reading the values veery difficult.
  2. Even when grouping, the sameness of each item makes it look like a block of text even more so than the previous versions

[…]

The center equalise process, solves the issue of tracking values very elegantly, and overall offers a much more readable UI.

The design where the control and its label are as far from each other as possible makes a lot more sense on a narrow phone screen that’s in portrait orientation. There, they’re not actually that far apart, and it makes everything line up. Federighi claims that this is not where the idea for the macOS System Settings came from, but it’s hard to see why this design would make sense on its own. He says that the main goal was “consistency,” but System Settings is not consistent, with some areas using the sidebar and form interface and other areas using:

A modal sheet has a navigation link to another… sheet? which can close the modals or take you back. But the back button is now in the bottom bar.

This is just so odd because you see the gymnastics they had to do because they brought a design that was born out of mobile, extended for tablet, and now trying to make it work on desktop.

Previously:

Update (2023-06-02): Clarko:

SwiftUI isn’t responsible for what you dislike about System Settings.

By default, SwiftUI uses the AppKit widgets. You have to opt in to different styles, which System Settings has done.

And you can quibble about those styles, for sure. But this is about the designers, not the technology.

Difference between the screenshots below:

.formStyle(.grouped)
.toggleStyle(.switch)

Otherwise it’s the same code in both cases.

Sarah Reichelt:

The things people object to in the System Settings app are design decisions, not SwiftUI bugs. It also seems that a different team designed each pane, leading to a lot of inconsistent UI. But I seem to be in the minority who actually likes the formStyle(.grouped) look.

I mostly agree with this, but I would note that (especially early on) there were a lot of glitches that seemed to be due to SwiftUI bugs, or I suppose perhaps the developers not knowing how to use SwiftUI properly. Secondly, it’s not only about widget styles but also layouts and navigation. Using SwiftUI encourages the developer to choose certain kinds of designs. And perhaps it also influences which engineers management assigns to the project and how much time they are given to work on it.

Update (2023-06-09): Craig Hockenberry:

Not only is the new macOS Settings app confusing when you do find something, it’s also confusing when you don’t.

Restricted USB access is only for laptops and I’m on an iMac. Showing search results made me think it was all Apple Silicon devices.

Update (2023-06-23): Vidit Bhargava:

I revisited some of my six month old redesigns today and have compiled, how I feel the Settings app must be redesigned.

4 Comments RSS · Twitter · Mastodon

Stop the madness with the UI, Apple. It's more than enough. I wish they would reintroduce Aqua at WWDC.

It just looks like they want to be able to write cross (Apple) platform apps in SwiftUI and they want it to be EASY so it’s probably going to get worse.

"The center equalise process, solves the issue of tracking values very elegantly, and overall offers a much more readable UI."

But this is still not the way macOS used to work (or works if you are skipping macOS Ventura). In the last screenshot, the groups of widgets are still too much on the left.

I also have a problem with the toolbar/tabview buttons in this example. It feels like the unselected item can not be selected.

Setting aside the differences between the styles, what is the point of a platform even *supporting* two drastically different ways to display functionally equivalent controls?

Leave a Comment