{"id":39561,"date":"2023-06-01T13:02:58","date_gmt":"2023-06-01T17:02:58","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=39561"},"modified":"2023-06-23T10:25:43","modified_gmt":"2023-06-23T14:25:43","slug":"centering-the-macos-ventura-form-layout","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2023\/06\/01\/centering-the-macos-ventura-form-layout\/","title":{"rendered":"Centering the macOS Ventura Form Layout"},"content":{"rendered":"

Vidit Bhargava<\/a> (Mastodon<\/a>):<\/p>\n

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

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

    […]<\/p>

    The center equalise process, solves the issue of tracking values very elegantly, and overall offers a much more readable UI.<\/p><\/blockquote>\n

    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<\/a> that this is not<\/em> 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<\/em> consistent, with some areas using the sidebar and form interface and other areas using<\/a>:<\/p>\n\n

    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.<\/p>

    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.<\/p><\/blockquote>\n\n

    Previously:<\/p>\n