I wonder how much material design is influenced by Hypercard. I know the web was partially inspired but it looks like with material design the language is sort of extended. Or maybe it was all integrated into the design language for the web.
What I find amazing is that early B&W GUIs were more usable than modern material design. Most takes on Material that I’ve seen take poor use of screen real-estate, poor conveyance, and distracting/hard-to-read color choices to an art form.
You could simply plot recommended sizes for clickable items over time.
Windows 9x used 125% text height of 10pt as clickable item height, that's around 0.441mm.
Android 4.0 recommends a clickable item height of 48dp, "roughly one centimeter".
Android 5.0 uses 56dp (1.17cm), and on Phablets and Tablets even 64dp (1.33cm).
For items in lists, a second effect was seen, as it became recommend to show more info earlier, the number of list items visible at the same time was reduced. A multi line list item has a minimum height of 72dp (1.5cm), average is more around 96dp (2cm).
A similar effect can be seen on Windows, in UWP, the average item height also went to almost exactly 1cm in lists or menus.
This all fits well, as the smalest reliably clickable element in a UI is ~1cm on its smallest dimension.
This is also a common issue with HN, where voting buttons are 0.3 by 0.3cm, even on mobile, and as result I misclick ~2/3rds of the time, but no one seems willing to fix this.
It’s honestly not much effort – I was compiling a new version of my app when I wrote it, and the last change I had done was the size of a button, because people complained about it. So I happened to have all the documents open by luck :)
I'm not aware of any systematic analysis. However, my expectations are that we would see relatively constant information density until about a decade ago. The simultaneous increase in available pixels and increase in prevalence of touchscreens has made it possible and in some cases desirable to drastically reduce information density without rendering interfaces immediately unusable. The problem is that touchscreen-oriented design is infecting non-touchscreen software.
I've been very interested lately in the idea of monochromatic interfaces.
Aside from being easier on the eyes (especially an amber or red interface), they force UI designers to make careful choices, and potentially result in a cleaner, more useable interface.
It's not a project for me yet, just a series of notes and concepts, but I'd like to turn it into a proof of concept at the very least.
I totally agree with this. I've spent hours and hours selecting colour palettes that give high contrast (I work on 16 colour terminals because more than 16 colours makes it really difficult to guarantee good contrast in all situations).
Having said that, it's hard to beat black on white for contrast ;-) However, I think one of the reasons people like the monochromatic themes (especially white on black) is the same -- they want high contrast with low brightness. By having the background black, they guarantee a low brightness. And when white is too bright, they go for amber.
I find that by doing the reverse (black on white) and setting my brightness very low (I often go as low at 7%, but more normally 11% back light) I have a very comfortable display with a lot more options. It's really funny, though, because when I have to run software that doesn't follow my colour themes, the computer almost looks like it's turned off. If I'm playing a game, I have to crank up the brightness to 70% or 80% in the same lighting conditions.
The problem of the low contrast issue is that otherwise content becomes unusuable on calibrated screens.
On a modern screen, a value of 100% is 1000 nits, 0% is far below 1 nits.
On an average shitty monitor, it's more a range 10 times more limited.
Your suggestion of making my monitor emulate your shitty monitor in hardware settings would also make it impossible to use it for use cases that do need this high contrast.
Reading text, on the other hand, gets very painful with that much contrast.
Real text, on a real newspaper, in normal room light, is #454545 text on #f0f0f0 background, in sRGB color space. Not #000 on #fff in sRGB, and definitely not 0 on max on ten times more contrast.
The real issue is that we have no color and contrast management at all for websites. I can't say that a color is meant to mean a certain brightness in nits, so it renders as #777 on my screen, and #000 on yours.
Gosh, I didn't realize my new MBP had such a bad screen.
Low-contrast UIs can work well in a typical office environment on bright screens.
Take your ideally calibrated monitor, and use it as a second screen while watching a movie in your darkened home theater. Now take it and use it outside on a sunny day.
I prefer to adjust the brightness. YMMV.
Your description of sRGB is incorrect. sRGB was specified for CRT screens in 1996, used in an ideal viewing environment that is very dimly lit ("The current proposal assumes an encoding ambient luminance level of 64 lux which is more representative of a dim room in viewing computer generated imagery... While we believe that the typical office or home viewing environment actually has an ambient luminance level around 200 lux, we found it impractical to attempt to account for the resulting large levels of flare that resulted" https://www.w3.org/Graphics/Color/sRGB.html)
That doesn't match my viewing environments, which include the range above.
MBP? That's surprising to hear then, they've got great (not $1600 Dell HDR monitor perfect, but great) monitors.
One of the core issues is constantly fiddling with the brightness, especially with multiple monitors.
That's where ideally you'd want to have the brightness of the panel fixed, and change it with a lookup map, e.g. what f.lux does for color mapping at night.
That's where you'd get ideal results, would be able to enjoy media in high quality without having trouble with too high contrast or too low contrast websites, and you could choose separate profiles for text and media.
Not everything supports this yet, but with the move to HDR10 and DolbyVision, support is getting better, because now people do have content in the same window that's mastered with completely different contrast ratios (the min for HDR10 is "moonless night", the max is "as bright as sunlight on a cloudless day", while for text the ideal min/max is newspaper text)
You'd have to adjust both brightness and white balance based on the environment (just like a camera. How well do professionals trust the camera's automatic choices?) and probably the environment behind the screen (the rest of the user's field of view).
And then you'd probably need to throw in an adjustment for the individual user's light sensitivity needs and preferences, and possibly the user's current eye dilation (did I just go from bright light into a dark room? Or did I just wake up in the dark room?)
You can design for an ideal environment, but realize that users will not always (ever?) be in that ideal.
Correct, but software then needs to be explicitly mapped with a brightness range.
Otherwise you can't have on the same screen a game simulating a dark night with low contrast, and a guide for that game which uses the full contrast spectrum.
Your suggestions all break if I want to be able to have at the same time extremely low contrast content and text on the same screen, next to another, and want both to look fine.
> With that scenario, you're dealing with physiological limitations, because if you have a bright region next to a dark night region, your eyes cannot perceive detail in the dark region.
Correct, that's why you meed a software solution that detects this issue and dynamically adapts.
This isn't complicated either, every modern video game has the issue of UI, text, and HDR content in one frame, and has well-working tonemap curves and dynamic exposure adaption algorithms.
Microsoft is also integrating solutions for this into Windows.
Any OS that plans to ever mix HDR and SDR content on one screen needs this anyway, and if you do that, you can also easily add minor changes to allow text content to be annotated so its contrast can also be dynamically adjusted.
Something I found interesting related to monochromatic interfaces was an article posted several weeks back to HN about people using grayscale to help focus. Most systems, especially, support a grayscale view for accessibility reasons (on recent versions of Windows 10 it's the default for the Win+Ctrl+C keyboard shortcut which is also why it is going around as one of the annoy a coworker pranks). I've started toying with grayscale periods on my work machine as a focus tool.
I have done material design somewhat badly. I would mean a design directly from Google not someone’s reinterpretation of it. You can use it to justify your sloppyness but you could do the same thing in HyperCard.
I'd say Google is widely recognized for "taking poor use of screen real-estate to an art form" with their designs; though Material design is probably just a symptom here, the cause being the ongoing desire to dumb down applications and remove functionality.
Maybe. Still, I go to material.io and I don't see anything there that would make those things better.
I wish there was a UI philosophy that would take Tufte's ideas as a set of core principles: maximizing data-ink ratio, minimizing junk, increasing data density.
Color abuse isn't really the most serious problem; the loss of information density is. E-ink isn't going to help here. Some alternative business models that would not incentivize companies into making their application glorified interactive movie posters would be welcome.
It was very much influenced by HyperCard, obviously. They didn't try to hide it, to the contrary, so much so that they hacked the UI-controls to make them more "Macintoshis" I guess.
Except it came in colors. The multimedia aspect of the Amiga, remember?
