Mac OS Big Sur logbook (7) - Dialog boxes

Software

While using the beta of Big Sur on my 13-inch retina MacBook Pro, I have occasionally encountered some dialog boxes, especially modal dialogs, whose redesign feels rather unpolished. It heavily borrows from iOS, and here’s the thing I don’t get…

Mail dialog box

…Why are they in portrait orientation?

I can understand such a design on an iPhone, since its display is in portrait orientation. On a Mac, this looks a bit strange. And those buttons, just piled on top of one another, with the same width and comparatively small space between them, don’t strike me as an elegant way of presenting choices.

Their layout is also inconsistent. This is the warning you get when you try opening an app coming from an ‘unverified developer’:

Open app warning 1
Buttons are side by side

And this is the similar warning you get when you tell Mac OS to open the application anyway by right-clicking on its icon and choosing Open from the contextual menu:

Open app warning 2
Buttons are one above the other

This second dialog box, as you can see, has an additional problem: the text block is longer than the space afforded. It looks truncated, but actually you can read it in its entirety by hovering over it with the mouse and scrolling down. Something that’s not at all apparent at first glance, by the way. A small scrollbar will appear next to the text on mouseover, but a clearer hint would be welcome. Sure, a verbose warning isn’t pretty no matter the dialog box design, and verbose warnings don’t happen that often, but this particular tall-and-narrow dialog box design makes the modal dialog look even busier.

Just for comparison’s sake, here are the same warnings on High Sierra. The dialog boxes are better designed and more balanced:

Open app warning 1 on High Sierra
Open app warning 2 on High Sierra

Another inconsistency is that sometimes — like in previous Mac OS versions — one of the buttons will be highlighted (see the first dialog above, from Mail), other times all buttons are grey. 

Historically, in the Mac OS user interface, most (if not all) modal dialogs have had an option highlighted, and its corresponding button preselected. Usually, the reason behind the highlighting was to provide a quick way to select either the most obvious choice, or the safest choice. And of course, for warnings where you don’t have a choice and you just acknowledge them, the OK button would always be preselected.

I presume the no-highlighted-choices in these dialog boxes in Big Sur are just temporary. By the way, I’m not arguing they’re wrong per se. Perhaps sometimes there isn’t an obvious choice or a suggested choice to highlight, therefore the user can’t just dismiss a dialog by pressing Enter — they have to actively read the dialog’s contents and respond accordingly by purposefully clicking on one of the buttons. Like maybe in this case:

Reminders permission

Yet another inconsistency is that dialogs like this one essentially retain the old design:

Restart dialog

So, what’s it going to be? An entirely new visual design, or a mash-up of old and new?

Sheets

As defined in Apple’s Human Interface Guidelines, a sheet is “a modal dialog that’s attached to a particular window — usually a document — and prevents further interaction with the window until the sheet is dismissed.”

It seems that in Big Sur, as far as I’ve noticed, sheets are getting visually detached from their corresponding window, and take the form of standalone dialog boxes, but further interaction with their corresponding window is nonetheless prevented by greying out that window which is now put in the background. I’m still undecided whether this is an improvement or not.

This is a confirmation sheet in High Sierra’s Mail app:
Mail dialog box full (High Sierra)
And this is the Big Sur equivalent:
Mail dialog box full

This is a confirmation sheet in High Sierra’s TextEdit:

Textedit confirmation (High Sierra)

And this is the Big Sur equivalent:

Textedit confirmation

What I like about the old design is that it emphasises the bond between the sheet and the application it belongs to. The animation, too, is unequivocal: the sheet comes out of the window like a sheet of paper comes out of a printer. In the new design, the sheet becomes a sort of dialog box linked to a window, and I guess that, with a Desktop crowded with application windows, that window behind the dialog box, so evidently darkened and in the background, may help make the whole interaction stand out more by attracting attention on itself. 

It has happened to me more than once: I’m bouncing between two or three open apps, I quickly press the keyboard shortcut to close a window or a tab, but instead I’m inadvertently telling TextEdit (or another writing app) to close the document. I keep switching between apps wondering why App 1 hasn’t registered my action, while TextEdit has produced that same confirmation sheet you see above, and it gets lost in the mess of white application windows on my Desktop. With Big Sur’s design change, I’d probably notice it sooner.

On the other hand, just from the two examples I posted above, you can see how this new sheet design still hasn’t been fully formalised. In Mail the dialog has this new, strange portrait-oriented look; it’s a slightly lighter grey than the background window, and it doesn’t really stand out as it should. While in the TextEdit example the dialog box is white, stands out more, and retains the older arrangement of all of its elements. Needless to say, I much prefer this latter look and feel.

I don’t know when Apple plans to ship the official release of Big Sur, but we’re already a week into September, and even if Big Sur is scheduled to be released in late October, time’s getting tight. I have the feeling the user interface polishing is going to still be a work in progress for at least a few minor releases.

Previous logbook entries

The Author

Writer. Translator. Mac consultant. Enthusiast photographer. • If you like what I write, please consider supporting my writing by purchasing my short stories, Minigrooves or by making a donation. Thank you!