I deal with a lot of data in tabular form, and I like to have as much of it in front of me at once as I can. The biggest influence on my report design has been, believe it or not, iTunes: no more padding than necessary, zebra striping, fast and easy sorting, and something like a column browser if possible. I've been using DataTables happily for years.
One thing I've been experimenting with lately is sorting vs. showing. If I'm pulling data from Jira, and an issue is blocked, do I need a separate boolean column to sort or filter, or is it enough to style another column (say, age)? In a table with a hundred or more rows, will an orange, red, or bold red value in a single cell stand out enough for me to recognize something I need to address now?
Looking at the table view of this experiment, the things I like are:
* live updating
* stable sorting for multiple columns
* row highlight on hover
* dimming the trailing zeros
* colors aren't overdone; basically just three pairs of colors
* graph in the 24H Low/High column, kind of like a sparkline
The things that don't land as well with me:
* horizontal scroll bar is almost invisible
* the wide vertical scroll bar with the graph
* how does 24H Low/High actually sort?
* no filtering (although it may not be essential for this data source)
The other thing I notice, comparing this to some of my own reports, is that there isn't much variance in the width of the values. It's harder to manage column widths with text than a bunch of numbers.
I remember delaying my upgrade to Catalina because I worried that iTunes.app would disappear. It was completely underrated. I was so happy to find out that Music.app is pretty much the same app and the migration was easy.
Same, absolutely "stuck" with DataTables. It seems to work well even with comprehensive UI frameworks on top of it like SB Admin Pro. Just super easy to integrate DataTables and has 90% of the features I ever want.
I've also been experimenting with mac app development for interfacing with Jira and other work that's ongoing but async. Less so on the data viewing side, and moreso on having agency over what I'm alerted to and when, but your comment and this UI has inspired me to try other ideas, since I kind of got stuck on a main data view
I quite like how you extended the table scrollbar to carry extra information -- akin to a minimap in code editors. At a glance it helps orient the data on screen in context of the larger dataset.
The helix I find hard to read and not useful. These types of graphs are better suited for periodic data where the period is much shorter than the span of the dataset.
The cube made me curious, but I couldn't quite see the advantage. Usually using a 3D viz is not as effective as using three 2D equivalent graphs (here would be 3 scatter plots) -- simply because the projection from 3D to 2D distorts things and messes with our innate ability to compare locations (and a bit less so, areas). What was the effect you were after here?
i actually just came here to comment on helix tab and how fcking amazing this is. For example, I can use this view to chart out volatility of stocks and other instruments especially derivatives I'd imagine.
Having a super natural way to peer into the past as much as possible while the more recent data are larger is pure fcking genius. I can't believe why I never thought of this.
1. Mobile needs to have somewhat spacious UIs to deal with touch targets needing to be finger sized.
2. Companies don't want to design two very different UIs and by-in-large users prefer their skills transfer across platforms.
3. Accessibility is easier if the design leaves room for bigger font sizes and doesn't require fine motor control. Watching my dad start to noticeably age I'm realizing that even spacious spacious apps don't go far enough in this regard.
I'm not sure how we get to information dense design without something changing the forces that pushed us that way in the first place.
This is not true. Mobile platforms do help with tapping on small elements. E.g. HN isn't mobile friendly "as is", but I have no issues with tapping any of the links. I've also used Exante mobile trading terminal for some time and had no issues with it either.
I agree that accessibility still is the concern, but watching my grandma struggle with her tablet, it's mostly the fact that buttons aren't buttons and everything jumps around like clowns in circus and cannot stop, instead of being a proper user interface. I bet she'd have similar issues with appliances if their design was just random flat symbols on white surfaces that randomly disappear.
I think it started with Apple when switching from OS 9 to OS X, I couldn’t explain it at the time and still feel disappointed with so much waste of expensive screen estate.
It's a weird turn of event that OS X stayed a much more classic os than what Windows 8 was becoming. I remember that for a long time OS X was wasting less screen estate than Windows 8 and all that mix that was Windows 10.
But since Big Sure it means that it got even worse than what It was with the first version of OS X.
I remember how crazy it was it setup a mac emulator, set it's resolution to my mac's resolution, full screen mode, and see how much space you could have with classic Mac OS, it's just crazy and everything remains legible.
Suddenly the windows desktop metaphor makes more sense because you can actually have many windows next to each other.
OS X has almost always tried to diverge from than, that lead to great things like exposé, spaces and then mission control but it looks like they never considered to reduce elements size.
In my opinion this experiment is missing a key element of designing for UI density: typography.
These screens use a fixed-width font at a single size. It’s a retro 1980 text-mode UI look, and it’s fine if that was the design constraint they wanted.
But you can squeeze a lot more information on screen if you can have a proper hierarchy of typefaces and sizes.
(As a basic example, the “About” box now consumes almost a quarter of the screen on a phone. A change to a smaller proportional font could fit this information in half the space and still remain readable on a phone.)
If you look at the works of an accomplished information designer like Edward Tufte, he often obsesses about getting the typography right. His books use many typographic elements and scales even for the body text, outside of the visualizations.
One thing I especially like about developing data-heavy financial apps in Windows Forms is the DataGridView control. High density and high performance with filtering, sorting, and drag-and-drop column reordering and resizing. No paging required; if you want to stick 10,000 rows in there, that's fine. Most of the UIs we write are screens full of DataGridView panes. Ugly? Yes. Fast? Also yes.
My attempts to write similar UIs in React have mostly been failures due to poor performance. I resorted to bypassing React entirely for data tables in order to get acceptable render performance. Even then, I have to minimize the number of DOM elements per row so that the browser rendering itself isn't unacceptably slow.
WinForms is still probably my favorite UI framework. It's absolutely a blunt tool but by god can you swing it around. Incredibly flexible, reasonably easy to use, pretty fast, and ugly as all hell.
Hell, you can even throw arbitrary Objects at it and it will just work. You can nest PropertyGrids within PropertyGrids, extend them to collections of objects, build arbitrarily deep nests of controls. All without touching or even caring about the underlying structure of the objects your UI connects to (within limits).
WinForms is my platonic ideal of a UI framework. It's exactly how I would design things.
I collect old newspapers and back then info density was way higher (for an _amazing_ coffee table book, google "nytimes complete front pages"). So much critical info above the fold.
I think high information density === high intelligence. Getting sort priorities right is very valuable and important.
The past few years the web seemed to be going the other way. Good to see people still rowing in the other direction.
Other examples:
I designed my blog to allow one to zoom in/zoom out to see ~20 years of posts at once (https://breckyunits.com/).
I've got some stuff coming out to promote (and make it easier to build) highly information dense cheat sheets (I'm trying to get the name "Leet Sheet" to catch on - https://pldb.io/blog/leetSheets.html)
> I think high information density === high intelligence.
Just packing loads of stuff on-screen at once, with tiny fonts and tiny margins and all the rest presents a lot of accessibility issues, even for intelligent people.
Google et al are adding padding and white space to make their UIs more accessible for more people. It's not just eye sight we're talking here, but also physical issues with clicking/tapping small targets accurately (e.g. someone with Parkinson's), and also neuro divergent issues where a page full of text or whatever can disorient just by sheer amount of stuff happening on-screen at once (e.g. epilepsy)
You can be very intelligent, but still benefit from well-designed and accessible UIs. Don't assume people who need it are less intelligent.
> Google et al are adding padding and white space to make their UIs more accessible for more people. It's not just eye sight we're talking here, but also physical issues with clicking/tapping small targets accurately (e.g. someone with Parkinson's), and also neuro divergent issues where a page full of text or whatever can disorient just by sheer amount of stuff happening on-screen at once (e.g. epilepsy)
We’re not in a physical world and FAANG is not bound by money (no, I don’t care about budget allocated to specific teams, I’m sure Android team has Pichai’s credit card), so why are we settling for lowest common denominator instead of creating best UIs for every user type?
All my stuff is 100% public domain and open source and can be piped through whatever people need to make the most custom experience.
The default is high information density. This is how they did it in the old days. It makes a lot more sense to default to high information density with 100% public domain open source content in clean code for perfect accessibility.
Anything with a (c) or license has bad accessibility.
Font too small? Just ctrl +. Raw data with huge padding is inaccessible to literally everyone who's trying to do work (the intelligence framing of the other user was stupid) and it's meant to look pretty, not be accessible. If you're genuinely concerned about accessibility, the computing world is a never ending world of inaccessibility, but this ain't it.
This is interesting because it proves something to me about my vision and visual comprehension.
The "Grid" view is absolutely fine for me. The "Table" view is unworkable.
I have a lot of trouble scanning across lines like this, where I will lose which line I am on (when my glance shifts). This, I have realised, is due to the tendency to shift eye dominance slightly across to the right. (My eyes are subtly misaligned so I have some prism correction; a recent change to my prism correction has improved this situation for me.)
This particular presentation has the indicator line in the low/high column placed so that it makes this accidental row shifting (which is always upwards) even worse.
For me, the line graph would be better off either as the background to the cell, or towards the bottom of the cell. And the rows would need zebra-striping, subtly.
The lesson from me, a fast and able reader who is not vision- or cognitively-impaired is: don't assume that you can put stuff across wide lines in tables like this. Provide affordances so people can hold onto the "row" as they scan across. The keyline separators are not enough, and the hover-over background change is not usable on a touch device.
As it is, when I encounter stuff like this, I often have to un-maximise the window and reduce the window height so I can scroll and use the bottom of the window or the title bar of another one to provide a consistent "edge" to see the data on. If I am using my iPad, I have been known to use a piece of paper or card.
I think your trouble with the table has far more to do with the design (specifically color) choices made by the author.
1. You mentioned this in passing, but I'll repeat for emphasis: The contrast between a hovered/highlighted table row and ones that are not is too low. I have decent eyes and I also have a hard time seeing it.
2. Table rows (and/or columns) should be striped between two or more high contrast colors for better legibility. White, black, white, black for example. This table is all black through and through.
3. The table borders' contrast is way too low, it's hardly even visible. This combined with the singular row/column color makes legibility even worse.
TL;DR: Table itself is actually fine, the colors are terrible.
Readit News
One thing I've been experimenting with lately is sorting vs. showing. If I'm pulling data from Jira, and an issue is blocked, do I need a separate boolean column to sort or filter, or is it enough to style another column (say, age)? In a table with a hundred or more rows, will an orange, red, or bold red value in a single cell stand out enough for me to recognize something I need to address now?
Looking at the table view of this experiment, the things I like are:
* live updating
* stable sorting for multiple columns
* row highlight on hover
* dimming the trailing zeros
* colors aren't overdone; basically just three pairs of colors
* graph in the 24H Low/High column, kind of like a sparkline
The things that don't land as well with me:
* horizontal scroll bar is almost invisible
* the wide vertical scroll bar with the graph
* how does 24H Low/High actually sort?
* no filtering (although it may not be essential for this data source)
The other thing I notice, comparing this to some of my own reports, is that there isn't much variance in the width of the values. It's harder to manage column widths with text than a bunch of numbers.
The helix I find hard to read and not useful. These types of graphs are better suited for periodic data where the period is much shorter than the span of the dataset.
The cube made me curious, but I couldn't quite see the advantage. Usually using a 3D viz is not as effective as using three 2D equivalent graphs (here would be 3 scatter plots) -- simply because the projection from 3D to 2D distorts things and messes with our innate ability to compare locations (and a bit less so, areas). What was the effect you were after here?
Having a super natural way to peer into the past as much as possible while the more recent data are larger is pure fcking genius. I can't believe why I never thought of this.
The amount of bloat, whitespace, extra spacing, "air" and other such waste - starting with (now Google-dead) "Material Design" has been egregious.-
(One can dream ...)
2. Companies don't want to design two very different UIs and by-in-large users prefer their skills transfer across platforms.
3. Accessibility is easier if the design leaves room for bigger font sizes and doesn't require fine motor control. Watching my dad start to noticeably age I'm realizing that even spacious spacious apps don't go far enough in this regard.
I'm not sure how we get to information dense design without something changing the forces that pushed us that way in the first place.
This is not true. Mobile platforms do help with tapping on small elements. E.g. HN isn't mobile friendly "as is", but I have no issues with tapping any of the links. I've also used Exante mobile trading terminal for some time and had no issues with it either.
I agree that accessibility still is the concern, but watching my grandma struggle with her tablet, it's mostly the fact that buttons aren't buttons and everything jumps around like clowns in circus and cannot stop, instead of being a proper user interface. I bet she'd have similar issues with appliances if their design was just random flat symbols on white surfaces that randomly disappear.
True. Mobile (and the path from "responsive" to "mobile native" - ergo, pre conditioned by everything you well mention ...)
... has led us to a what I think is today's sorry state of things.-
I thought it was still actively developed. Are you saying this has been killed by Google?
https://m3.material.io/
Though I haven't seen Material Design Website in a while.
[0]: https://github.com/material-components/material-web/discussi...
But since Big Sure it means that it got even worse than what It was with the first version of OS X. I remember how crazy it was it setup a mac emulator, set it's resolution to my mac's resolution, full screen mode, and see how much space you could have with classic Mac OS, it's just crazy and everything remains legible.
Suddenly the windows desktop metaphor makes more sense because you can actually have many windows next to each other. OS X has almost always tried to diverge from than, that lead to great things like exposé, spaces and then mission control but it looks like they never considered to reduce elements size.
These screens use a fixed-width font at a single size. It’s a retro 1980 text-mode UI look, and it’s fine if that was the design constraint they wanted.
But you can squeeze a lot more information on screen if you can have a proper hierarchy of typefaces and sizes.
(As a basic example, the “About” box now consumes almost a quarter of the screen on a phone. A change to a smaller proportional font could fit this information in half the space and still remain readable on a phone.)
If you look at the works of an accomplished information designer like Edward Tufte, he often obsesses about getting the typography right. His books use many typographic elements and scales even for the body text, outside of the visualizations.
Is the focus on density around performance, visualization, or something else?
It definitely feels very influenced by it.
My attempts to write similar UIs in React have mostly been failures due to poor performance. I resorted to bypassing React entirely for data tables in order to get acceptable render performance. Even then, I have to minimize the number of DOM elements per row so that the browser rendering itself isn't unacceptably slow.
Hell, you can even throw arbitrary Objects at it and it will just work. You can nest PropertyGrids within PropertyGrids, extend them to collections of objects, build arbitrarily deep nests of controls. All without touching or even caring about the underlying structure of the objects your UI connects to (within limits).
WinForms is my platonic ideal of a UI framework. It's exactly how I would design things.
I collect old newspapers and back then info density was way higher (for an _amazing_ coffee table book, google "nytimes complete front pages"). So much critical info above the fold.
I think high information density === high intelligence. Getting sort priorities right is very valuable and important.
The past few years the web seemed to be going the other way. Good to see people still rowing in the other direction.
Other examples:
I designed my blog to allow one to zoom in/zoom out to see ~20 years of posts at once (https://breckyunits.com/).
I've got some stuff coming out to promote (and make it easier to build) highly information dense cheat sheets (I'm trying to get the name "Leet Sheet" to catch on - https://pldb.io/blog/leetSheets.html)
Just packing loads of stuff on-screen at once, with tiny fonts and tiny margins and all the rest presents a lot of accessibility issues, even for intelligent people.
Google et al are adding padding and white space to make their UIs more accessible for more people. It's not just eye sight we're talking here, but also physical issues with clicking/tapping small targets accurately (e.g. someone with Parkinson's), and also neuro divergent issues where a page full of text or whatever can disorient just by sheer amount of stuff happening on-screen at once (e.g. epilepsy)
You can be very intelligent, but still benefit from well-designed and accessible UIs. Don't assume people who need it are less intelligent.
We’re not in a physical world and FAANG is not bound by money (no, I don’t care about budget allocated to specific teams, I’m sure Android team has Pichai’s credit card), so why are we settling for lowest common denominator instead of creating best UIs for every user type?
The default is high information density. This is how they did it in the old days. It makes a lot more sense to default to high information density with 100% public domain open source content in clean code for perfect accessibility.
Anything with a (c) or license has bad accessibility.
The "Grid" view is absolutely fine for me. The "Table" view is unworkable.
I have a lot of trouble scanning across lines like this, where I will lose which line I am on (when my glance shifts). This, I have realised, is due to the tendency to shift eye dominance slightly across to the right. (My eyes are subtly misaligned so I have some prism correction; a recent change to my prism correction has improved this situation for me.)
This particular presentation has the indicator line in the low/high column placed so that it makes this accidental row shifting (which is always upwards) even worse.
For me, the line graph would be better off either as the background to the cell, or towards the bottom of the cell. And the rows would need zebra-striping, subtly.
The lesson from me, a fast and able reader who is not vision- or cognitively-impaired is: don't assume that you can put stuff across wide lines in tables like this. Provide affordances so people can hold onto the "row" as they scan across. The keyline separators are not enough, and the hover-over background change is not usable on a touch device.
As it is, when I encounter stuff like this, I often have to un-maximise the window and reduce the window height so I can scroll and use the bottom of the window or the title bar of another one to provide a consistent "edge" to see the data on. If I am using my iPad, I have been known to use a piece of paper or card.
1. You mentioned this in passing, but I'll repeat for emphasis: The contrast between a hovered/highlighted table row and ones that are not is too low. I have decent eyes and I also have a hard time seeing it.
2. Table rows (and/or columns) should be striped between two or more high contrast colors for better legibility. White, black, white, black for example. This table is all black through and through.
3. The table borders' contrast is way too low, it's hardly even visible. This combined with the singular row/column color makes legibility even worse.
TL;DR: Table itself is actually fine, the colors are terrible.