[Karunamon]

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.

[dman]

In case some UX / HCI experts read this thread, are there any credible studies of information density in user interfaces plotted over time?

[kuschku]

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.

[dman]

Thanks for taking the time to write such a detailed comment!

[kuschku]

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 :)

[wtallis]

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.

[jaysonelliot]

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.

[kbutler]

Having made extensive use of amber and green and b&w monitors, I much prefer full color.

Though I dislike the recent low-contrast efforts. Keep high contrast, reduce brightness as desired for your environment.

[mikekchar]

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.

[gm-conspiracy]

I just thought you had a fondness for EGA.

[kuschku]

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.

[kbutler]

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.

[kuschku]

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)

[kbutler]

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.

[WorldMaker]

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.

[zitterbewegung]

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.

[TeMPOraL]

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.

[pjmlp]

Actually a typical rant on Android development forums is how Google doesn't follow their own Material designs.

[TeMPOraL]

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.

[aeorgnoieang]

> I wish there was a UI philosophy that would take Tufte's ideas as a set of core principles

Wouldn't that just be Tufte's ideas? What's missing for it to be a 'UI philosophy'?

[TeMPOraL]

A nice .io domain and endorsement by a hot tech company, I guess.

[scroot]

Once we get usable and affordable e-ink monitors designers will have to revisit this territory seriously.

[TeMPOraL]

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.