Image by: Nuno Pinheiro Following posts on specific work being done on Oxygen, this post is going to try to go beyond the manifest work and look at the bigger picture driving it. The motivation for…
I also always find the minimalism vs. maximalism debate interesting for usability. Lots of minimal designs are so flat that you can’t tell a button from a label or icon.
At the same time, iOS’ new Frutiger theme regularly confuses me with its transparency, e.g. yesterday I saw that the silent-mode notification had a ➋ inside. It was centered and everything. Then the notification went away, but the ➋ stayed, because it was from an app icon behind.
I wish, we could throw out the bad eye candy, like transparency, while keeping the good parts, like 3D buttons and such. I feel like this kind of neo-brutalist UI design isn’t the worst direction to go in:
(This particular example isn’t perfect, like the buttons are flat, while there’s useless shadows around the boxes. But yeah, could just move those shadows to the buttons and it would still look fine.)
And yeah, that theme you linked is already pretty cool. Not terribly enamored with the retro aesthetic personally (especially with bad contrast like here), but if that can be done with KDE/Kvantum, then an actual neobrutalist them, or just one with the papercuts fixed, is likely just as possible…
Our monkey-brain has put millions of years of evolution into a vision system designed to pick up 3d cues from our environment so we can use our fine motor skills to manipulate small objects. It’s a fantastic piece of wetware that uses shading and colours to pick up 3d hints about the objects we deal with daily and - once you’re a few years old - it’s completely automatic and requires no effort to use.
And then we remove all the 3D cues and skeuomorphic hints from our computer systems so that now the previously subconscious “monkey-click-button” process is now a foreground task where cognitive energy is burned up to identify the correct UI element to manipulate.
I should be able to shift the mouse pointer and click a UI element out of the corner of my eye. I shouldn’t be required to look at and then parse a ‘flat’ UI to determine if this element is a button or just a panel with text. GUI elements should map to recognisable physical objects wherever possible, and where they are more abstract (eg wifi icons) they should be clearly distinguishable from others in the icon set. You’re burning up cognitive energy needlessly otherwise, and that’s why I dislike the monochromatic new age UI/icon sets.
Checkboxes that look like left/right toggle switches are the worst. And the only way to know whether left or right is on is colour?! Can you please get in the fucking sea?
I believe that, but… why should that be the case? It’s a convention without a reference or motivation. I remember when they were new and I really had nothing to refer to and just having no idea whether they were on or off. The fact that I’ve got used to them now isn’t really that forgivable. In contrast, checkboxes not only have convention behind them, but mimicked filling in paper forms which many people were and are familiar with anyway. The idea that “filled” is on and “empty” is off seems inherently more intuitive even if you’ve never filled in a form if you just know that the concept of forms that you fill in exists.
Thank you! I do not understand this. One way is blue and the other way is green… I have had to go into another panel where I know how I set something before, and look how the check boxes are there in order to discern the correct way to use them.
Real checkboxes can also take effect immediately, and have much better visual cues. The submit button was intended to save older computers the extra monitoring load of having to keep track of the state of every control all the time—it has nothing to do with control styling.
I mean, they can, and they can also be made to be mutually exclusive - but it’s better to use radio buttons in that case. If that pattern is used, there’s not really a good way that a checkbox will take effect immediately beforehand, or whether it will require submitting a form, except scanning the full page to look for such a button.
Eh? What do radio buttons have to do with anything?
The styling of a UI element - whether it’s a box that gets an X or tick in it, versus a little thingy that moves left and right - is wholly unrelated to any aspects of implementation, including whether the effect happens immediately or not.
I was trying to make the point that the way a control looks gives you some information on how it will behave, because software has generally been consistent with associating those looks with those behaviours.
So if you see multiple options with a circle in front of them, selecting one, then selecting another will usually deselect the first one.
On the other hand, if those options have squares in front of them, selecting one, then selecting another will usually result in both of them being selected.
And in both cases, usually they will be part of a form and will only take effect when you submit that form using a button.
On the other hand, something that looks like a toggle usually takes effect immediately on toggling.
Of course it is technically always possible to have each of those behave like any of the others, but you will be breaking conventions if you do so. Styling is an affordance to inform the user about the behaviour.
Taking effect instantly is not really indicated by the control shape; it’s indicated by whether or not the form has a button equivalent to “apply”. Settings pages with checkboxes that applied immediately have been common for years; this distinction is not nearly as clear cut as you make out. I suspect what is going on is that both toggle switches and the removal of a separate apply step has gone on gradually at the same time.
But a good thing to think about is all the other controls: drop downs, text entry boxes, date pickers - these have no second version which might apply instantly or not! So it’s a mistake to think that information is conveyed by the look of the control.
Well, I’d encourage you to keep an eye out; I think you’ll find that the majority of controls on the web behave as I described. And I think that’s a good thing, too: it’s far quicker and easier to be able to deduce behaviour from the control you’re handling at the moment, than having to scan the complete context. And especially if e.g. you’re visually impaired, the latter can be a major hassle.
(And indeed, the other controls you mention almost never apply instantly, so their behaviour is still predictable. When they do, they’ll often still have some other affordances to indicate that they do apply instantly.)
Well, this kind of design language is actually referred to as “neobrutalism”, so you might find a theme under this name. But from what I’ve seen so far, it’s mostly a thing in web design at this point…
I also always find the minimalism vs. maximalism debate interesting for usability. Lots of minimal designs are so flat that you can’t tell a button from a label or icon.
At the same time, iOS’ new Frutiger theme regularly confuses me with its transparency, e.g. yesterday I saw that the silent-mode notification had a ➋ inside. It was centered and everything. Then the notification went away, but the ➋ stayed, because it was from an app icon behind.
I wish, we could throw out the bad eye candy, like transparency, while keeping the good parts, like 3D buttons and such. I feel like this kind of neo-brutalist UI design isn’t the worst direction to go in:
(This particular example isn’t perfect, like the buttons are flat, while there’s useless shadows around the boxes. But yeah, could just move those shadows to the buttons and it would still look fine.)
Is that a mock up you made or something that exists?
Check this one out: https://store.kde.org/p/1985239
It’s a mockup I found on image search (from searching “neobrutalism GUI” or the like): https://www.magnific.com/premium-vector/hand-drawn-neo-brutalism-ui-elements-collection_186004756.htm
And yeah, that theme you linked is already pretty cool. Not terribly enamored with the retro aesthetic personally (especially with bad contrast like here), but if that can be done with KDE/Kvantum, then an actual neobrutalist them, or just one with the papercuts fixed, is likely just as possible…
Our monkey-brain has put millions of years of evolution into a vision system designed to pick up 3d cues from our environment so we can use our fine motor skills to manipulate small objects. It’s a fantastic piece of wetware that uses shading and colours to pick up 3d hints about the objects we deal with daily and - once you’re a few years old - it’s completely automatic and requires no effort to use.
And then we remove all the 3D cues and skeuomorphic hints from our computer systems so that now the previously subconscious “monkey-click-button” process is now a foreground task where cognitive energy is burned up to identify the correct UI element to manipulate.
I should be able to shift the mouse pointer and click a UI element out of the corner of my eye. I shouldn’t be required to look at and then parse a ‘flat’ UI to determine if this element is a button or just a panel with text. GUI elements should map to recognisable physical objects wherever possible, and where they are more abstract (eg wifi icons) they should be clearly distinguishable from others in the icon set. You’re burning up cognitive energy needlessly otherwise, and that’s why I dislike the monochromatic new age UI/icon sets.
Checkboxes that look like left/right toggle switches are the worst. And the only way to know whether left or right is on is colour?! Can you please get in the fucking sea?
Isn’t left=off and right=on?
I believe that, but… why should that be the case? It’s a convention without a reference or motivation. I remember when they were new and I really had nothing to refer to and just having no idea whether they were on or off. The fact that I’ve got used to them now isn’t really that forgivable. In contrast, checkboxes not only have convention behind them, but mimicked filling in paper forms which many people were and are familiar with anyway. The idea that “filled” is on and “empty” is off seems inherently more intuitive even if you’ve never filled in a form if you just know that the concept of forms that you fill in exists.
Of course, a checkbox is better.
Thank you! I do not understand this. One way is blue and the other way is green… I have had to go into another panel where I know how I set something before, and look how the check boxes are there in order to discern the correct way to use them.
It’s nice to be able to know that they take effect immediately though, instead of needing to click a submit button.
Real checkboxes can also take effect immediately, and have much better visual cues. The submit button was intended to save older computers the extra monitoring load of having to keep track of the state of every control all the time—it has nothing to do with control styling.
I mean, they can, and they can also be made to be mutually exclusive - but it’s better to use radio buttons in that case. If that pattern is used, there’s not really a good way that a checkbox will take effect immediately beforehand, or whether it will require submitting a form, except scanning the full page to look for such a button.
Eh? What do radio buttons have to do with anything?
The styling of a UI element - whether it’s a box that gets an X or tick in it, versus a little thingy that moves left and right - is wholly unrelated to any aspects of implementation, including whether the effect happens immediately or not.
I was trying to make the point that the way a control looks gives you some information on how it will behave, because software has generally been consistent with associating those looks with those behaviours.
So if you see multiple options with a circle in front of them, selecting one, then selecting another will usually deselect the first one.
On the other hand, if those options have squares in front of them, selecting one, then selecting another will usually result in both of them being selected.
And in both cases, usually they will be part of a form and will only take effect when you submit that form using a button.
On the other hand, something that looks like a toggle usually takes effect immediately on toggling.
Of course it is technically always possible to have each of those behave like any of the others, but you will be breaking conventions if you do so. Styling is an affordance to inform the user about the behaviour.
Taking effect instantly is not really indicated by the control shape; it’s indicated by whether or not the form has a button equivalent to “apply”. Settings pages with checkboxes that applied immediately have been common for years; this distinction is not nearly as clear cut as you make out. I suspect what is going on is that both toggle switches and the removal of a separate apply step has gone on gradually at the same time.
But a good thing to think about is all the other controls: drop downs, text entry boxes, date pickers - these have no second version which might apply instantly or not! So it’s a mistake to think that information is conveyed by the look of the control.
Well, I’d encourage you to keep an eye out; I think you’ll find that the majority of controls on the web behave as I described. And I think that’s a good thing, too: it’s far quicker and easier to be able to deduce behaviour from the control you’re handling at the moment, than having to scan the complete context. And especially if e.g. you’re visually impaired, the latter can be a major hassle.
(And indeed, the other controls you mention almost never apply instantly, so their behaviour is still predictable. When they do, they’ll often still have some other affordances to indicate that they do apply instantly.)
I actually love that design, it’s minimal without being corpo-slick. Is it just a mockup or is there some way to make all my computers look that way?
Well, this kind of design language is actually referred to as “neobrutalism”, so you might find a theme under this name. But from what I’ve seen so far, it’s mostly a thing in web design at this point…