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.)
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?
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.
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
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?
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 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…