Live data from Hacker News

An experiment in UI density created with Svelte

cybernetic.dev

61–70 of 267 posts

Re: An experiment in UI density created with Svelte

#63
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.

Re: An experiment in UI density created with Svelte

#65
Adding a tiny bit of Y-padding made this a lot more readable for me. I wish more information display interfaces offered these kinds of controls. A thought that occurs to me: does densely-packed data get more readable the more experience you have with the data in question?

Re: An experiment in UI density created with Svelte

#66
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.

Re: An experiment in UI density created with Svelte

#67
I'd like to think projects like these are somehow signaling a return to well designed but information dense, space saving interfaces ...

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

Re: An experiment in UI density created with Svelte

#69

I'd like to think projects like these are somehow signaling a return to well designed but information dense , space saving interfaces ... 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 ...)

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.

Re: An experiment in UI density created with Svelte

#70
post #68

An infinite scroll would have more UI density. Or a rich text editor containing 200 pages of text.

More information, yes, not density. Same for pagination. Information density = amount of information you can gather at once within a space, before any interaction.
Post reply on HN