When macOS Big Sur was released it was praised as having a fresh look. I only thought that even more important information had been hidden.
Now and then I get feedback that Mail Archiver has an old fashioned interface. In todays article I'm going to look at new fashioned interface examples from Apple and why Mail Archiver is not going to imitate such interfaces.
I have an advanced degree in theoretical physics. As developer I'm entirely self-taught. Of course, I read the timeless classics like "Don't make me think" by Steve Krug. Every time Samuel and Yohann from User Onboarding do a new teardown it's always fun to watch and I've learned a lot from them.
I still use High Sierra because the interface is much better than Monterey's and I don't have the silly multitudes of "do you really want to" dialog boxes. Somewhere along the way the interface became fresh and bad at the same time. Yes, Big Sur looks different than Catalina and older versions. Hiding important information is not a good idea, though.
Interface elements have a purpose. A button looks like a button because we have learned that we can click on a button. The same is true for scrollbars, checkboxes, radio buttons and many more elements. Shadows show which element is in the foreground and which is in the background. Changing the meaning of an element always means that the user has to relearn.
We don't want our computer to look like a cockpit of an airplane. But we also don't want to use the Terminal all day. There is a very fine line between too much and not enough information.
Let me look at some examples.
Hide and Seek
The Finder in Monterey looks like this:
I can't see which icon is a button. The icon in front of Desktop (called proxy icon) is hidden. I have to dig into the Accessibility settings to make the Finder look normal:
The second screenshot shows things I can click. With the proxy icon I can navigate. The first presentation removes essential information.
Hide and seek 2
Why are some elements only available if I mouse over them?
The dropdown menus in the mailbox list of Mail are not always visible.
Hidden Password Fields
When logging into any Apple website I get the following dialog:
After entering my Apple ID the password field becomes visible:
Making the password field visible at an additional click does nothing to improve the security.
"Historically grown"
Everywhere you look at macOS you can see inconsistencies. Look at the 2 screenshots from the System Preferences below:
- Language & Region has a nice description what the selected part of System Preferences does. Security & Privacy doesn't have such a description.
- The listbox on the left side of Language & Region has a border while the one in Security & Privacy/Privacy doesn't have a border.
- The entries of the listbox at Security & Privacy/Privacy are not sorted. The apps on the right side are not sorted either. It's no fun to hunt for apps when the listbox has more entries.
- The listbox on the right side of Security & Privacy/Privacy has an extra darker border. Which is doesn't really need because there are only the label and the listbox on the right side. The margin between the darker border and the content is about twice at the top and the bottom compared to the right and the left sides.
- A splitter is missing between the left and the right side of Security & Privacy/Privacy. In the System Preferences this might be okay-ish. But in the Preferences of Mail for accounts I can't differentiate between my accounts because there is not enough space to read the account names.
I looked at other System Preferences panes and found even more different listboxes. With focus ring or without. With border or without. With space around the listbox or without. One pane even has a window splitter.
The issues I described aren't bad - except the sort order of the applications in Security & Privacy/Privacy. But they shouldn't be there. Interfaces should look consistent everywhere.
What does this button do?
New fashioned interfaces also mean guessing. Do you know what the 2 buttons inside the red circle do?
The buttons should either have a label or at least a tooltip. Instead there is nothing. The first button has at least some sort of specific icon. But the second icon couldn't be more generic.
No Internet - no Interface
For giggles try to disable WiFi and load Family Sharing:
With my not very fast internet connection it takes a while to load the interface:
Normally, when designing interfaces I place elements at a specific location. iOS has a more dynamic approach. But it still has labels. What you see above is loading interfaces from the Internet like a browser. This makes super odd interfaces as result.
I could understand why Apple would want to load the big image from home. But why is everything loaded dynamically?
Button mush
Some buttons are so small in Mail that I have to squint to see them on my MacBook Air. The draw/sketch buttons in the upper left area are so small that I can't see which button is active because the difference between blue and black is so small:
The small buttons wouldn't be so bad if they had some color. But in black-and-white (dark-grey on lighter-grey to be more precise because contrast is bad) every button looks the same. Making graphics is a lot of work. There are buttons for non-retina and retina resolution. Then I need to make buttons for light and dark mode. One single pdf version for a button is much easier to handle. But this doesn't help me as user if the buttons look so similar that I can't differentiate between them.
Direct manipulation
30 years ago THE single giant improvement of Apple was to have a graphical interface. Instead of learning cryptic commands with lots of parameters it was suddenly possible to do things directly. Files were in a folder on the desktop. There was no need anymore to learn those cryptic commands. Now we are moving backwards again. Because the less clutter the better or some such drivel.
In the High Sierra version of Mail I don't need to remember how to change the sort order:
Starting with Big Sur the drop-down isn't there anymore:
I now have to hunt in the menu to change the sort order. Less visual clutter - more confusion.
Visual effects for nothing
Apple says in their Developer docs:
macOS apps use translucency and blurring to evoke a sense of depth, by enabling views and controls to hint at content residing in the background. They also use vibrancy, a subtle effect that dynamically blends the foreground and background colors using a careful balance of lightening and darkening techniques. This combination helps make foreground content stand out against any background.
As I said above each interface element should have a purpose. A "sense of depth" and making "foreground content stand out against any background" is not what vibrancy and translucency do. Instead it is distracting and makes odd flickers.
Verdict
Designing interfaces is hard and a lot of work. However:
- Interfaces should be consistent (the listboxes in System Preferences).
- Interfaces should show me which elements I can click and which not (Finder).
- Interfaces shouldn't hide important information (the sort menu in Mail, the dropdown menu in Mail, Finder again).
- Interface elements should have a purpose (the stupid vibrancy, the password fields).
These are the reasons why Mail Archiver will not have a modern interface. And I haven't even looked at the clusterfuck that is called Music (for macOS and not iOS) where the complete app is as useless as possible.