19 ms·

An experiment in UI density created with Svelte

882 points by 11001100 2y ago

deleted 2y ago
[deleted]
zongitsrinzler 2y ago
Reminds me of the Tron Legacy boardroom scene UI!
Olesya000 2y ago
[dead]
karaterobot 2y ago
That helix chart is very sexy. I'm not really sure I could use it, but danged if it isn't cool looking. If this is an experiment, what were your conclusions?
- arendtio 2y ago
  It doesn't seem to work in Firefox, or is it just me?
  - karaterobot 2y ago
    I'm on FF, and it works for me. :shrug:
encodedrose 2y ago
Would an accurate comparison be something like perspective? (https://perspective.finos.org/ https://perspective.finos.org/) Is the focus on density around performance, visualization, or something else?
- sbarre 2y ago
  When I first loaded this, I assumed it was built with Perspective.. It definitely feels very influenced by it.
- localfirst 2y ago
  It loaded a lot slower than OP's website which btw the helix tab is just mind blowing.
woodsie 2y ago
I'm guessing it's an experiment on whether it's possible to make a human nauseous with a UI.
- wiseowise 2y ago
  Not enough useless whitespace for your taste?
daemonologist 2y ago
Some very cool looking UI elements here, but I'm also wondering what the experiment was and what conclusions you drew from it. On sheer number of interactive elements, my experience (Svelte 4) is that the rendering usually starts to cause problems before the interactivity, i.e. you run into performance problems at the same number of elements regardless of whether they're interactive. As you implemented for the some of these pages, the solution is to go to a canvas.
- jonahx 2y ago
  > you run into performance problems at the same number of elements regardless of whether they're interactive. As you implemented for the some of these pages, the solution is to go to a canvas. That's surprising. I thought Svelte's whole selling point was ultra-targeted and efficient DOM updates as a result of the compilation step and not having vdom. Are simple large tables still a problem within that paradigm? Which of the elements here, eg, could have been rendered via DOM but needs canvas purely for perf?
  - Mathnerd314 2y ago
    > Svelte's whole selling point was ultra-targeted and efficient DOM updates as a result of the compilation step and not having vdom Going by performance (https://krausest.github.io/js-framework-benchmark/ https://krausest.github.io/js-framework-benchmark/), Svelte 4 is essentially vdom, Svelte 5 is ultra-efficient based on the direct-DOM approach pioneered by Solid. Svelte 5 is currently a release candidate, API stable but also not necessarily production ready. https://svelte.dev/blog/svelte-5-release-candidate https://svelte.dev/blog/svelte-5-release-candidate Disclaimer: I haven't actually looked at Svelte 4 to see why it is so much slower than Svelte 5
    - jonahx 2y ago
      > Svelte 4 is essentially vdom I can't speak to perf differences between 4 and 5 specifcally, but I'm pretty sure Svelte's mission has been "no vdom" from the start. Here's a 2018 article, eg: https://svelte.dev/blog/virtual-dom-is-pure-overhead https://svelte.dev/blog/virtual-dom-is-pure-overhead
thr0waway001 2y ago
cool.
- revskill 2y ago
  No explanation of "cool" is discouraged in this boring forum.
  - yazzku 2y ago
    It should have been prefixed with "AI".
    - ThinnerHydra 2y ago
      Or suffixed with "in Rust"
sbr464 2y ago
This is great work.
jeffbee 2y ago
This obviously does not fit "as much data on a screen as possible". My laptop has a 7.7 megapixel display and each pixel has 1 billion possible states. This page is putting maybe 10000 bits of information on the screen, not even scratching the surface of machine's capacity.
- razodactyl 2y ago
  I hate that this can be taken seriously even though it's obviously a joke. It's a joke right?
  - razodactyl 2y ago
    Seriously though. I'm finding it increasingly frustrating how small the screen is on my iPhone 13. Makes me wonder how the hell I managed on the 4. Perhaps I'm just getting old.
    - solardev 2y ago
      Heh, I have the opposite problem as Mr. Tiny Hands. I wish I could get a smaller phone with good cameras. Apple had the smaller iPhone, SE maybe, for a while (maybe they still do?). But all the Pixels are humongous and I miss being able to operate it with one hand. Seems like there's way more huge phones (especially folding ones) than small ones these days.
  - lucianbr 2y ago
    If it was about a data structure and how much information can be stored in a number of bytes, would a similar comment have to be a joke? Seems rather reasonable for HN. If you hate this kind of thing maybe you're on the wrong site. I am more incredulous about the comments saying "I am happy Apple takes my freedom away in exchange for security and convenience". Of which there are plenty on certain threads. And clearly not joking.
    - sbr464 2y ago
      Between the redditors and the autistic people, I can’t tell who’s joking any more.
sbr464 2y ago
I appreciate that you are using this idea, but keeping padding and other design in tact, unlike most linux/unix devs that like dense ui.
jonahx 2y ago
I love this -- dense but still easy to read. Also beautiful and polished as a piece of design, apart from the dataviz.
jbs789 2y ago
I’m curious about what the objective and conclusion is. Admittedly I’m in the “less technical” audience, so less focused on the “sexiness” (as I’ve heard others refer to it).
- stonethrowaway 2y ago
  I would assume the objective is to find an approach, or a repeatable formula that gives a good trade off between readability(visual navigability?) and visual density. More than likely it’s a search for constraints, and then determining the boundaries of those constraints.
breck 2y ago
I love information density! 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/ 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 https://pldb.io/blog/leetSheets.html)
- mattlondon 2y ago
  > 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.
  - breck 2y ago
    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.
  - wiseowise 2y ago
    > 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?
btbuildem 2y ago
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?
- 11001100 2y ago
  To clarify: I'm not the creator of this beautiful project.
- localfirst 2y ago
  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.
PhilipRoman 2y ago
Love the cube view! Tangentially related - anyone know a linux tool which takes a bunch of points/lines/labels as input and generates a nice interactive 3d view of it? I've considered using .obj file viewers, but it doesn't quite hit the mark. Gnuplot is nicer but doesn't have interactive features as far as I can tell.
- kristjansson 2y ago
  If you’re comfortable in R, rgl was pretty straightforward when I used it moons ago: https://cran.r-project.org/web/packages/rgl/index.html https://cran.r-project.org/web/packages/rgl/index.html
- ladberg 2y ago
  I love plotly for all my graphics needs (mainly 2D but supports 3D too)! Can export to a standalone interactive html file, can be used as a pandas plotting backend, can be easily extended with some client-side JS if you want to add more interactivity to the final result
  - rdedev 2y ago
    I had initially used plotly to build my dashboard but switched over to bokeh mostly because it's really hard to make plotly express api work with the graph objects api. Bokeh is pretty new though so ymmv but I have been liking the apk so far
solardev 2y ago
This a flashback to the DOS era for me, or CLI utils like 'top'. I can't quite express why, but I find it a bit ugly and vaguely annoying. Probably reminds me too much of unstyled spreadsheets, or maybe I've just been brainwashed by modern trends... Regardless, I guess my primary gripe with it is the cognitive overload. A bunch of numbers (stocks? not sure) and names that all look the same, sometimes with different color end digits (why is the zero gray sometimes), in a vast sea of information but no context. What is the most important item at any given time? What do I need to pay attention to? I mostly just glaze over and tune it out because there's way too much going on. I get that it's an experiment (and ultimately a preference). Just not my thing, I guess.
- TehShrike 2y ago
  I wonder if it would feel less annoying if the majority of the text was a bit higher contrast
  - solardev 2y ago
    You can fiddle with the interface and tweak some layout parameters in the sidebar somewhat. By the time I got it to something I liked, it severely violated the spirit of the experiment, lol (was too big and sparse, with lots of padding between items – the opposite of what it was trying to show): https://share.cleanshot.com/0xD9bPcWD1CL5wDvlVhB https://share.cleanshot.com/0xD9bPcWD1CL5wDvlVhB And I still don't know how these numbers are used. I wouldn't be able to keep track of even 3-4 numbers at once, much less the dozens here.
- klaussilveira 2y ago
  You are thinking about this from a end-user perspective, not a power user. It's the difference between eToro and Active Trader Pro. Or Fidelity's own app and their Active Trader Pro. There's is no right and wrong, they just target different audiences with different priorities. That's why we like btop and htop, but a normal PC user wouldn't understand anything.
  - gala8y 2y ago
klaussilveira 2y ago
I love this, specially the minimap idea on the table. Have you considered a different way of adding/removing/moving columns with too many columns (100+)?
ctippett 2y ago
On mobile, if I zoom out to 85% everything gets smaller and more things fit on the screen (great!). Zooming out further to 75% makes everything larger... 50% and things get larger still (more so than they were at their default size at 100%). The layout works remarkably well on mobile regardless, but I wasn't expecting such unintuitive zoom behaviour.
- hollerith 2y ago
  >I wasn't expecting such unintuitive zoom behaviour. Huh. I expect user-interface surprises on web pages. Interacting with the other user interfaces in my life is much less surprising.
  - hombre_fatal 2y ago
    You usually can’t viewport zoom non-web UI.
    - hollerith 2y ago
      I beg to differ. The most useful kind of zoom zooms the entire UI and this is straightforward to do on Windows and ChromeOS in increments of 25%. It is possible in Gnome, too, (again in increements of 25%, at Settings > Displays > Scale), but it is not straightforward because before you can do it, you have to say, `gsettings set org.gnome.mutter experimental-features "['scale-monitor-framebuffer']"` once per install of the OS. None of them exhibit the wonky behavior of zooming a web page described above.
- yazzku 2y ago
  I've seen this behaviour on other web pages too, and it also occurs on desktop. A mystery of life.
- saagarjha 2y ago
  Are you on iOS perhaps?
  - 2y ago
fitsumbelay 2y ago
the helical visualization is a new one for me and very nice, tho I agree with previous commenter about its usability, mainly bc of having to zoom in and out. really nice interaction tho
kibwen 2y ago
Reminiscent of the Bloomberg Terminal: https://en.wikipedia.org/wiki/Bloomberg_Terminal https://en.wikipedia.org/wiki/Bloomberg_Terminal
- jnordwick 2y ago
  came here to see if anybody else compared to blbg terminal. loved that thing
deleted 2y ago
[deleted]
perching_aix 2y ago
the experiment fails pretty hard on my phone where i have js turned off by default :p
- Nathanael_M 2y ago
  I suspect it would also fail if you tried it on Internet Explorer 6.
  - perching_aix 2y ago
    probably, although i feel keeping js turned off by default when browsing random sites is infinitely better motivated than using internet explorer 6
severak_cz 2y ago
DAWs and video editing programs can be very information dense.
createwith 2y ago
meta: I would have upvoted this post 2x if you did the backend in Rust.
arpowers 2y ago
[flagged]
Waterluvian 2y ago
Having to support mobile throws a big wrench in all design. You suddenly have to worry about a very different viewport and now you’re significantly limited or designing two UIs.
- 01HNNWZ0MV43FF 2y ago
  just make a responsive design that allows you to either drink from a fire hose or a coffee stirrer
  - Waterluvian 2y ago
    “Responsive design” is basically couched language that hides that you’re either designing it twice or are making compromises to one or both aspects/sizes. There isn’t really any other choice. It’s reality. But it’s just sometimes quite frustrating.
- solardev 2y ago
  It's half the fun! I'm biased, but as a frontend dev and sometimes-UI guy, responsive design is one of my favorite parts of the job. It forces me to think creatively (and scientifically, whenever we can actually afford to do testing) on how to present information and create controls for everything from a small iPhone to a giant ultrawide monitor. I mean, even in the Windows days (as in when most apps were still desktop Windows apps), basic responsiveness was already a thing, since even then you had no guarantee your app was going to be running in fullscreen at 1024*768 only. How your main windows, toolbars, etc. scale to different screen widths & orientations is a fun challenge to solve. Even in gaming, it's fun to see how desktop games (like Terraria) scale their controls down to a phone. Anyway, for me it usually ends up being about 1.5x the work compared to a single viewport, since most components can still be reused in slightly different arrangements. Menu navigation and information architecture can be tricky though, switching from "broad but shallow" organization to "narrow but deep" hierarchies.
xyst 2y ago
I see you took a page out of the Bloomberg Terminal.
terribleperson 2y ago
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?
ecjhdnc2025 2y ago
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.
- Dalewyn 2y ago
  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.
  - mrtobo 2y ago
    Yes.
wiseowise 2y ago
That is just amazing!
SloopJon 2y ago
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.
- jgalt212 2y ago
  DataTables is great. Been using it for 10+ on a single product. We keep looking for a newer and better replacement, but have yet to find it.
  - reaperman 2y ago
    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.
    - LoganDark 2y ago
      Honestly this doesn't even sound like a particularly bad thing. Sort of like how Houdini has literally no competition whatsoever. Like it's actually hilarious how nothing even comes close. It just works so well that nobody can really hope to ever do better, and there is nearly 0 enshittification happening, so its existing users have no reason to ever switch.
Bluestein 2y ago
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 ...)
- Spivak 2y ago
  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.
  - Bluestein 2y ago
    I see and understand your well placed and valid examination.- 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.-
    - Spivak 2y ago
      I think the best we're going to get is some law or other that requires services not block 3rd party clients so that folks that want hacker-ui-theme, like me, have the ability.
  - wruza 2y ago
    >1. 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.
amelius 2y ago
An infinite scroll would have more UI density. Or a rich text editor containing 200 pages of text.
- ricardobeat 2y ago
  More information, yes, not density. Same for pagination. Information density = amount of information you can gather at once within a space, before any interaction.
  - amelius 2y ago
    It depends on definition (a page is still a page, even if not everything is visible). The point is that Svelte may have trouble processing many off-screen elements, and those would be good tests.
    - ricardobeat 2y ago
      Information density is a well-established concept in UI design, this experiment is not (just) about performance. This is a great intro to the topic: https://matthewstrom.com/writing/ui-density/ https://matthewstrom.com/writing/ui-density/
      - amelius 2y ago
        Yes but if your definition of density mattered here, then why did they have to put Svelte in the title? And the Helix tab contains a listbox that doesn't fit on the screen. This is more about performance than about the user.
        deleted 2y ago
        [deleted]
mhh__ 2y ago
I work have built some dense UI for certain types of fixed income (bonds and swaps) trading, looking to move it all to svelte because react cannot handle the quantities of data (and if even if it could the code is unbelievably ugly). Something I've been banging on about for a while is the following: Programmers and designers keep trying to rebuild instagram in every domain, pretty UIs, regular UIs, "simple" UIs. This is great when every interaction might be an onboarding, but can be really limiting and stupid in an environment where people are actually paying attention. A proxy I like to use for the above distinction is whether the users are paid more than the programmers
- ChrisMarshallNY 2y ago
  I suspect Bloomberg terminals fit that bill.
  - mhh__ 2y ago
    avg salary of a bloomberg user is lower than some people might think because there are a lot of support staff who have bloomberg. As for the UI: I wish more things were like bloomberg, but bloomberg itself can be slightly hobbled by wanting to lay everything out as a table all the time when a custom chart designed by a creative domain-expert would be almost as useful.
    - defrost 2y ago
      There's two clear points to be made: * Why change to something that's "almost as useful" .. that's a downgrade. * Pretty is often the enemy of Consistent. On that second point, it doesn't have to be .. but it can take a great deal more effort to have data presentation that's both creative and consistent and dense. The domain goals here are rapid navigation of dense infomation across tens of thousands of companies, timespans, portfolios, groupings, comparisons, etc. With a good interface the user quickly finds the desired scope and view and automatically eye tracks to the wanted figures. It's not an interface for pretty board room presentations (although in an organisation that promotes based on merit in the ditches most senior staff would be familiar with a Bloomberg Board) - it's a daily driver for engine room. I'm not defending this specific interface, just highlighting what is common to many similar domain tools.
ChrisMarshallNY 2y ago
I'm in the final release phase of an app that I have developed over the last month, but it builds on a test app that I wrote, a couple of months ago, and that had multiple screens, showing tabular data, in various forms (and ways to sort and filter said data). Fairly similar process to this, but on a more humble scale. I tested for a while, settled on one form, and made an app for that. It's not the most exciting variant, but it seems to work very well, and the reception in the public beta has been quite positive (one problem is that it's not an app that I would use, personally, so I had to rely a lot on the feedback of others).
- ChrisMarshallNY 2y ago
  Just to expand, I have found that the best UI, is the UI that no one notices, appreciates, or compliments. Bit humbling, but there you have it. Case in point: I have a fancy “prize wheel spinner” for UIKit, that I wrote, a few years ago[0]. I started working on a SwiftUI version of it, but stopped. The reason was, because I kept not using it, in my shipping projects. It’s too “in your face.” Some of the UI approaches that I tried, in my test app, were “sexy,” but I didn’t use any of them. The one I ended up using, was a bit pedestrian. [0] https://github.com/RiftValleySoftware/RVS_Spinner https://github.com/RiftValleySoftware/RVS_Spinner
MOARDONGZPLZ 2y ago
This is slick. Does anyone have recommendations for high density real world maps with tracks like FlightRadar or similar do?
FpUser 2y ago
Love it
electroly 2y ago
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.
- mystified5016 2y ago
  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.
squarefoot 2y ago
Well done. Tables are very dense, still easy to read. Proof that information hidden behind empty screens with tons of blank space has never been the way to go.
chrisstanchak 2y ago
Love this. Amazing work.
tengbretson 2y ago
The mini-map/scrub view in the table seems to suspend the drag motion if you target outside that vertical element with the mouse. Intuitively I would assume it would just let you drag until mouse release.
felipefar 2y ago
Low UI density is the new emperor's clothes in modern UI design. It's being actively promoted by companies in order to cut design costs, but the truth is that it's only reasonable on touch interfaces or casual apps. Mouse interfaces are fundamentally different, because you have much more pointing precision, so it pays off to show more data on the screen. You don't have to cram your interface with with spaces to make it scan-friendly, you just use heterogeneous elements and colors. Look at Blender and you'll know it can be done. I'm designing a desktop reference manager (https://getcahier.com https://getcahier.com), and one of its aims is to provide a UI with high information density. The mobile version will be able to adjust the experience, replacing desktop-only interaction patterns with mobile ones, and the UI elements that are shared will be somewhat bigger, so that users are able to interact them with touch. Apart from that, it seems that the whole industry is confused regarding UI styles. UI frameworks are either favoring touch interfaces and degrading the experience on desktop, or vice-versa. Even Windows 10 released certain parts of the control panel with desktop look and feel and others with touch-friendly but desktop-antagonistic screens. It's time we realize that both platforms are different and we shouldn't degrade one in favor of the other.
- cageface 2y ago
  This is because mobile is where all the money is. All the vendors have neglected their desktop SDKs to such a degree that Flutter is now in many ways the best desktop UI stack. Even Apple has sorely neglected their desktop APIs. Play around with SwiftUI on the Mac for more than a few hours and this will become glaringly apparent.
- asoneth 2y ago
  > It's being actively promoted by companies in order to cut design costs I'm curious why you think it reduces design costs to put less information on the screen? My experience has been the reverse -- the companies that chase trends (including but not limited to low-information-density screens and using mobile-first designs for desktop applications) also tend to spend more money on UI design compared to other companies.
  - funcDropShadow 2y ago
hliyan 2y ago
One thing we may still haven't realised is that UI designs are subject to fashion cycles, just like clothing. Except enough time hasn't elapsed for us to observe a full cycle similar to peak-bell-bottoms or peak-low-riders or peak-sideburns. We may be in a low-contrast / low-density peak, but we won't know until we pass it. However, looking back, we did seem to have passed at least one peak-skeuomorphic cycle (remember all the toolbars, icons, drawers and Microsoft Bob?). We may see another high contrast monochrome text-heavy cycle yet.
tgtweak 2y ago
This is surprisingly fast. A really impressive showcase of the design philosophy of Svelte. Even loads and renders fast on mobile! DOM Loaded: 134ms FCP/FP: 163ms LCP: 218ms TTI: 1826ms
rkagerer 2y ago
It's a thing of beauty
bowsamic 2y ago
You could make it far far denser than this
pavlov 2y ago
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.
- skyyr 2y ago
  Have a particular work by Edward Tufte to recommend on the subject?
  - vismit2000 2y ago
    https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001Au https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=...
cranberryturkey 2y ago
svelte 4 is handsdown the best framework out there. I really am disappointed svelte5 is turning into react-ish framework. That was the main reason I used svelte was because it was NOT react.
- Thro4l31 2y ago
  > I really am disappointed svelte5 is turning into react-ish framework. This is very wrong. Read the announcement and the docs: https://svelte.dev/blog/svelte-5-release-candidate https://svelte.dev/blog/svelte-5-release-candidate https://svelte-5-preview.vercel.app/docs/introduction https://svelte-5-preview.vercel.app/docs/introduction Svelte 5 has change its reactivity model to signals. I anything, it's became similar to SolidJS. All other changes are minor but make Svelte even simpler to use.
jbrimble 2y ago
Is there a code repo for this site? I can't seem to see one, and I'm curious to see the svelte source.
gorgoiler 2y ago
I absolutely love it, very intelligently put together. The gold standard for this in the terminal is btop. Check it out if you’re into this sort of thing: Example: https://terminalroot.com.br/assets/img/cpp/btop.png https://terminalroot.com.br/assets/img/cpp/btop.png Repo: https://github.com/aristocratos/btop https://github.com/aristocratos/btop
- squigz 2y ago
  I prefer atop, personally. https://www.atoptool.nl/ https://www.atoptool.nl/
andrewstuart 2y ago
https://static.crowdwave.link/index.html https://static.crowdwave.link/index.html Above is the evidence that react can handle this sort of thing just fine. I hacked/converted the page in question to React to show something similar. Its randomly generating updates to the table and then resorting the table and repeating. You can grab the source here but I warn you it's hacked together in less than an hour: https://static.crowdwave.link/sveltetest.zip https://static.crowdwave.link/sveltetest.zip
- Thro4l31 2y ago
  Of course React can handle complex and large scenarios. And those scenarios aren't even large. It's good that you created that proof. Still, Svelte is much easier while more performant, even if that extra performance is most often not needed. Large amounts of data can be managed by react-virtualized in React. IME Svelte (and Vue) can handle more without virtualization, but for really large data sets you need it anyway. The downsides of React are not performance IMO, but DX.
- xsepsisx 2y ago
  What's so special about it? Golden rule - make granular components/updates, just it.
perdomon 2y ago
I've heard that the DX with Svelte is among the best out of all web libraries/frameworks. Curious how it went creating this UI.
PaulHoule 2y ago
That Helix reminded me of this old game https://en.wikipedia.org/wiki/Tempest_(video_game) https://en.wikipedia.org/wiki/Tempest_(video_game) except it really is a helix and not a cylinder like a Tempest level. Still would be fun to fight bugs in.
keinsinn 2y ago
There's a company in Iceland called "CCP" that did a similar interface. They call it "Eve Online"

882 points by 11001100 2y ago

deleted 2y ago

[deleted]

zongitsrinzler 2y ago

Reminds me of the Tron Legacy boardroom scene UI!

Olesya000 2y ago

[dead]

karaterobot 2y ago

That helix chart is very sexy. I'm not really sure I could use it, but danged if it isn't cool looking. If this is an experiment, what were your conclusions?

arendtio 2y ago
It doesn't seem to work in Firefox, or is it just me?
- karaterobot 2y ago
  I'm on FF, and it works for me. :shrug:

encodedrose 2y ago

Would an accurate comparison be something like perspective? (https://perspective.finos.org/ https://perspective.finos.org/) Is the focus on density around performance, visualization, or something else?

sbarre 2y ago
When I first loaded this, I assumed it was built with Perspective.. It definitely feels very influenced by it.
localfirst 2y ago
It loaded a lot slower than OP's website which btw the helix tab is just mind blowing.

woodsie 2y ago

I'm guessing it's an experiment on whether it's possible to make a human nauseous with a UI.

wiseowise 2y ago
Not enough useless whitespace for your taste?

daemonologist 2y ago

Some very cool looking UI elements here, but I'm also wondering what the experiment was and what conclusions you drew from it. On sheer number of interactive elements, my experience (Svelte 4) is that the rendering usually starts to cause problems before the interactivity, i.e. you run into performance problems at the same number of elements regardless of whether they're interactive. As you implemented for the some of these pages, the solution is to go to a canvas.

jonahx 2y ago
> you run into performance problems at the same number of elements regardless of whether they're interactive. As you implemented for the some of these pages, the solution is to go to a canvas. That's surprising. I thought Svelte's whole selling point was ultra-targeted and efficient DOM updates as a result of the compilation step and not having vdom. Are simple large tables still a problem within that paradigm? Which of the elements here, eg, could have been rendered via DOM but needs canvas purely for perf?
- Mathnerd314 2y ago
  > Svelte's whole selling point was ultra-targeted and efficient DOM updates as a result of the compilation step and not having vdom Going by performance (https://krausest.github.io/js-framework-benchmark/ https://krausest.github.io/js-framework-benchmark/), Svelte 4 is essentially vdom, Svelte 5 is ultra-efficient based on the direct-DOM approach pioneered by Solid. Svelte 5 is currently a release candidate, API stable but also not necessarily production ready. https://svelte.dev/blog/svelte-5-release-candidate https://svelte.dev/blog/svelte-5-release-candidate Disclaimer: I haven't actually looked at Svelte 4 to see why it is so much slower than Svelte 5
  - jonahx 2y ago
    > Svelte 4 is essentially vdom I can't speak to perf differences between 4 and 5 specifcally, but I'm pretty sure Svelte's mission has been "no vdom" from the start. Here's a 2018 article, eg: https://svelte.dev/blog/virtual-dom-is-pure-overhead https://svelte.dev/blog/virtual-dom-is-pure-overhead

thr0waway001 2y ago

cool.

revskill 2y ago
No explanation of "cool" is discouraged in this boring forum.
- yazzku 2y ago
  It should have been prefixed with "AI".
  - ThinnerHydra 2y ago
    Or suffixed with "in Rust"

sbr464 2y ago

This is great work.

jeffbee 2y ago

This obviously does not fit "as much data on a screen as possible". My laptop has a 7.7 megapixel display and each pixel has 1 billion possible states. This page is putting maybe 10000 bits of information on the screen, not even scratching the surface of machine's capacity.

razodactyl 2y ago
I hate that this can be taken seriously even though it's obviously a joke. It's a joke right?
- razodactyl 2y ago
  Seriously though. I'm finding it increasingly frustrating how small the screen is on my iPhone 13. Makes me wonder how the hell I managed on the 4. Perhaps I'm just getting old.
  - solardev 2y ago
    Heh, I have the opposite problem as Mr. Tiny Hands. I wish I could get a smaller phone with good cameras. Apple had the smaller iPhone, SE maybe, for a while (maybe they still do?). But all the Pixels are humongous and I miss being able to operate it with one hand. Seems like there's way more huge phones (especially folding ones) than small ones these days.
- lucianbr 2y ago
  If it was about a data structure and how much information can be stored in a number of bytes, would a similar comment have to be a joke? Seems rather reasonable for HN. If you hate this kind of thing maybe you're on the wrong site. I am more incredulous about the comments saying "I am happy Apple takes my freedom away in exchange for security and convenience". Of which there are plenty on certain threads. And clearly not joking.
  - sbr464 2y ago
    Between the redditors and the autistic people, I can’t tell who’s joking any more.

sbr464 2y ago

I appreciate that you are using this idea, but keeping padding and other design in tact, unlike most linux/unix devs that like dense ui.

jonahx 2y ago

I love this -- dense but still easy to read. Also beautiful and polished as a piece of design, apart from the dataviz.

jbs789 2y ago

I’m curious about what the objective and conclusion is. Admittedly I’m in the “less technical” audience, so less focused on the “sexiness” (as I’ve heard others refer to it).

stonethrowaway 2y ago
I would assume the objective is to find an approach, or a repeatable formula that gives a good trade off between readability(visual navigability?) and visual density. More than likely it’s a search for constraints, and then determining the boundaries of those constraints.

breck 2y ago

I love information density! 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/ 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 https://pldb.io/blog/leetSheets.html)

mattlondon 2y ago
> 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.
- breck 2y ago
  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.
- wiseowise 2y ago
  > 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?

btbuildem 2y ago

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?

11001100 2y ago
To clarify: I'm not the creator of this beautiful project.
localfirst 2y ago
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.

PhilipRoman 2y ago

Love the cube view! Tangentially related - anyone know a linux tool which takes a bunch of points/lines/labels as input and generates a nice interactive 3d view of it? I've considered using .obj file viewers, but it doesn't quite hit the mark. Gnuplot is nicer but doesn't have interactive features as far as I can tell.

kristjansson 2y ago
If you’re comfortable in R, rgl was pretty straightforward when I used it moons ago: https://cran.r-project.org/web/packages/rgl/index.html https://cran.r-project.org/web/packages/rgl/index.html
ladberg 2y ago
I love plotly for all my graphics needs (mainly 2D but supports 3D too)! Can export to a standalone interactive html file, can be used as a pandas plotting backend, can be easily extended with some client-side JS if you want to add more interactivity to the final result
- rdedev 2y ago
  I had initially used plotly to build my dashboard but switched over to bokeh mostly because it's really hard to make plotly express api work with the graph objects api. Bokeh is pretty new though so ymmv but I have been liking the apk so far

solardev 2y ago

This a flashback to the DOS era for me, or CLI utils like 'top'. I can't quite express why, but I find it a bit ugly and vaguely annoying. Probably reminds me too much of unstyled spreadsheets, or maybe I've just been brainwashed by modern trends... Regardless, I guess my primary gripe with it is the cognitive overload. A bunch of numbers (stocks? not sure) and names that all look the same, sometimes with different color end digits (why is the zero gray sometimes), in a vast sea of information but no context. What is the most important item at any given time? What do I need to pay attention to? I mostly just glaze over and tune it out because there's way too much going on. I get that it's an experiment (and ultimately a preference). Just not my thing, I guess.

TehShrike 2y ago
I wonder if it would feel less annoying if the majority of the text was a bit higher contrast
- solardev 2y ago
  You can fiddle with the interface and tweak some layout parameters in the sidebar somewhat. By the time I got it to something I liked, it severely violated the spirit of the experiment, lol (was too big and sparse, with lots of padding between items – the opposite of what it was trying to show): https://share.cleanshot.com/0xD9bPcWD1CL5wDvlVhB https://share.cleanshot.com/0xD9bPcWD1CL5wDvlVhB And I still don't know how these numbers are used. I wouldn't be able to keep track of even 3-4 numbers at once, much less the dozens here.
klaussilveira 2y ago
You are thinking about this from a end-user perspective, not a power user. It's the difference between eToro and Active Trader Pro. Or Fidelity's own app and their Active Trader Pro. There's is no right and wrong, they just target different audiences with different priorities. That's why we like btop and htop, but a normal PC user wouldn't understand anything.
- gala8y 2y ago

klaussilveira 2y ago

I love this, specially the minimap idea on the table. Have you considered a different way of adding/removing/moving columns with too many columns (100+)?

ctippett 2y ago

On mobile, if I zoom out to 85% everything gets smaller and more things fit on the screen (great!). Zooming out further to 75% makes everything larger... 50% and things get larger still (more so than they were at their default size at 100%). The layout works remarkably well on mobile regardless, but I wasn't expecting such unintuitive zoom behaviour.

hollerith 2y ago
>I wasn't expecting such unintuitive zoom behaviour. Huh. I expect user-interface surprises on web pages. Interacting with the other user interfaces in my life is much less surprising.
- hombre_fatal 2y ago
  You usually can’t viewport zoom non-web UI.
  - hollerith 2y ago
    I beg to differ. The most useful kind of zoom zooms the entire UI and this is straightforward to do on Windows and ChromeOS in increments of 25%. It is possible in Gnome, too, (again in increements of 25%, at Settings > Displays > Scale), but it is not straightforward because before you can do it, you have to say, `gsettings set org.gnome.mutter experimental-features "['scale-monitor-framebuffer']"` once per install of the OS. None of them exhibit the wonky behavior of zooming a web page described above.
yazzku 2y ago
I've seen this behaviour on other web pages too, and it also occurs on desktop. A mystery of life.
saagarjha 2y ago
Are you on iOS perhaps?
- 2y ago

fitsumbelay 2y ago

the helical visualization is a new one for me and very nice, tho I agree with previous commenter about its usability, mainly bc of having to zoom in and out. really nice interaction tho

kibwen 2y ago

Reminiscent of the Bloomberg Terminal: https://en.wikipedia.org/wiki/Bloomberg_Terminal https://en.wikipedia.org/wiki/Bloomberg_Terminal

jnordwick 2y ago
came here to see if anybody else compared to blbg terminal. loved that thing

deleted 2y ago

[deleted]

perching_aix 2y ago

the experiment fails pretty hard on my phone where i have js turned off by default :p

Nathanael_M 2y ago
I suspect it would also fail if you tried it on Internet Explorer 6.
- perching_aix 2y ago
  probably, although i feel keeping js turned off by default when browsing random sites is infinitely better motivated than using internet explorer 6

severak_cz 2y ago

DAWs and video editing programs can be very information dense.

createwith 2y ago

meta: I would have upvoted this post 2x if you did the backend in Rust.

arpowers 2y ago

[flagged]

Waterluvian 2y ago

Having to support mobile throws a big wrench in all design. You suddenly have to worry about a very different viewport and now you’re significantly limited or designing two UIs.

01HNNWZ0MV43FF 2y ago
just make a responsive design that allows you to either drink from a fire hose or a coffee stirrer
- Waterluvian 2y ago
  “Responsive design” is basically couched language that hides that you’re either designing it twice or are making compromises to one or both aspects/sizes. There isn’t really any other choice. It’s reality. But it’s just sometimes quite frustrating.
solardev 2y ago
It's half the fun! I'm biased, but as a frontend dev and sometimes-UI guy, responsive design is one of my favorite parts of the job. It forces me to think creatively (and scientifically, whenever we can actually afford to do testing) on how to present information and create controls for everything from a small iPhone to a giant ultrawide monitor. I mean, even in the Windows days (as in when most apps were still desktop Windows apps), basic responsiveness was already a thing, since even then you had no guarantee your app was going to be running in fullscreen at 1024*768 only. How your main windows, toolbars, etc. scale to different screen widths & orientations is a fun challenge to solve. Even in gaming, it's fun to see how desktop games (like Terraria) scale their controls down to a phone. Anyway, for me it usually ends up being about 1.5x the work compared to a single viewport, since most components can still be reused in slightly different arrangements. Menu navigation and information architecture can be tricky though, switching from "broad but shallow" organization to "narrow but deep" hierarchies.

xyst 2y ago

I see you took a page out of the Bloomberg Terminal.

terribleperson 2y ago

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?

ecjhdnc2025 2y ago

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.

Dalewyn 2y ago
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.
- mrtobo 2y ago
  Yes.

wiseowise 2y ago

That is just amazing!

SloopJon 2y ago

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.

jgalt212 2y ago
DataTables is great. Been using it for 10+ on a single product. We keep looking for a newer and better replacement, but have yet to find it.
- reaperman 2y ago
  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.
  - LoganDark 2y ago
    Honestly this doesn't even sound like a particularly bad thing. Sort of like how Houdini has literally no competition whatsoever. Like it's actually hilarious how nothing even comes close. It just works so well that nobody can really hope to ever do better, and there is nearly 0 enshittification happening, so its existing users have no reason to ever switch.

Bluestein 2y ago

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

Spivak 2y ago
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.
- Bluestein 2y ago
  I see and understand your well placed and valid examination.- 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.-
  - Spivak 2y ago
    I think the best we're going to get is some law or other that requires services not block 3rd party clients so that folks that want hacker-ui-theme, like me, have the ability.
- wruza 2y ago
  >1. 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.

amelius 2y ago

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

ricardobeat 2y ago
More information, yes, not density. Same for pagination. Information density = amount of information you can gather at once within a space, before any interaction.
- amelius 2y ago
  It depends on definition (a page is still a page, even if not everything is visible). The point is that Svelte may have trouble processing many off-screen elements, and those would be good tests.
  - ricardobeat 2y ago
    Information density is a well-established concept in UI design, this experiment is not (just) about performance. This is a great intro to the topic: https://matthewstrom.com/writing/ui-density/ https://matthewstrom.com/writing/ui-density/
    - amelius 2y ago
      Yes but if your definition of density mattered here, then why did they have to put Svelte in the title? And the Helix tab contains a listbox that doesn't fit on the screen. This is more about performance than about the user.
      - deleted 2y ago
        [deleted]

mhh__ 2y ago

I work have built some dense UI for certain types of fixed income (bonds and swaps) trading, looking to move it all to svelte because react cannot handle the quantities of data (and if even if it could the code is unbelievably ugly). Something I've been banging on about for a while is the following: Programmers and designers keep trying to rebuild instagram in every domain, pretty UIs, regular UIs, "simple" UIs. This is great when every interaction might be an onboarding, but can be really limiting and stupid in an environment where people are actually paying attention. A proxy I like to use for the above distinction is whether the users are paid more than the programmers

ChrisMarshallNY 2y ago
I suspect Bloomberg terminals fit that bill.
- mhh__ 2y ago
  avg salary of a bloomberg user is lower than some people might think because there are a lot of support staff who have bloomberg. As for the UI: I wish more things were like bloomberg, but bloomberg itself can be slightly hobbled by wanting to lay everything out as a table all the time when a custom chart designed by a creative domain-expert would be almost as useful.
  - defrost 2y ago
    There's two clear points to be made: * Why change to something that's "almost as useful" .. that's a downgrade. * Pretty is often the enemy of Consistent. On that second point, it doesn't have to be .. but it can take a great deal more effort to have data presentation that's both creative and consistent and dense. The domain goals here are rapid navigation of dense infomation across tens of thousands of companies, timespans, portfolios, groupings, comparisons, etc. With a good interface the user quickly finds the desired scope and view and automatically eye tracks to the wanted figures. It's not an interface for pretty board room presentations (although in an organisation that promotes based on merit in the ditches most senior staff would be familiar with a Bloomberg Board) - it's a daily driver for engine room. I'm not defending this specific interface, just highlighting what is common to many similar domain tools.

ChrisMarshallNY 2y ago

I'm in the final release phase of an app that I have developed over the last month, but it builds on a test app that I wrote, a couple of months ago, and that had multiple screens, showing tabular data, in various forms (and ways to sort and filter said data). Fairly similar process to this, but on a more humble scale. I tested for a while, settled on one form, and made an app for that. It's not the most exciting variant, but it seems to work very well, and the reception in the public beta has been quite positive (one problem is that it's not an app that I would use, personally, so I had to rely a lot on the feedback of others).

ChrisMarshallNY 2y ago
Just to expand, I have found that the best UI, is the UI that no one notices, appreciates, or compliments. Bit humbling, but there you have it. Case in point: I have a fancy “prize wheel spinner” for UIKit, that I wrote, a few years ago[0]. I started working on a SwiftUI version of it, but stopped. The reason was, because I kept not using it, in my shipping projects. It’s too “in your face.” Some of the UI approaches that I tried, in my test app, were “sexy,” but I didn’t use any of them. The one I ended up using, was a bit pedestrian. [0] https://github.com/RiftValleySoftware/RVS_Spinner https://github.com/RiftValleySoftware/RVS_Spinner

MOARDONGZPLZ 2y ago

This is slick. Does anyone have recommendations for high density real world maps with tracks like FlightRadar or similar do?

FpUser 2y ago

Love it

electroly 2y ago

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.

mystified5016 2y ago
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.

squarefoot 2y ago

Well done. Tables are very dense, still easy to read. Proof that information hidden behind empty screens with tons of blank space has never been the way to go.

chrisstanchak 2y ago

Love this. Amazing work.

tengbretson 2y ago

The mini-map/scrub view in the table seems to suspend the drag motion if you target outside that vertical element with the mouse. Intuitively I would assume it would just let you drag until mouse release.

felipefar 2y ago

Low UI density is the new emperor's clothes in modern UI design. It's being actively promoted by companies in order to cut design costs, but the truth is that it's only reasonable on touch interfaces or casual apps. Mouse interfaces are fundamentally different, because you have much more pointing precision, so it pays off to show more data on the screen. You don't have to cram your interface with with spaces to make it scan-friendly, you just use heterogeneous elements and colors. Look at Blender and you'll know it can be done. I'm designing a desktop reference manager (https://getcahier.com https://getcahier.com), and one of its aims is to provide a UI with high information density. The mobile version will be able to adjust the experience, replacing desktop-only interaction patterns with mobile ones, and the UI elements that are shared will be somewhat bigger, so that users are able to interact them with touch. Apart from that, it seems that the whole industry is confused regarding UI styles. UI frameworks are either favoring touch interfaces and degrading the experience on desktop, or vice-versa. Even Windows 10 released certain parts of the control panel with desktop look and feel and others with touch-friendly but desktop-antagonistic screens. It's time we realize that both platforms are different and we shouldn't degrade one in favor of the other.

cageface 2y ago
This is because mobile is where all the money is. All the vendors have neglected their desktop SDKs to such a degree that Flutter is now in many ways the best desktop UI stack. Even Apple has sorely neglected their desktop APIs. Play around with SwiftUI on the Mac for more than a few hours and this will become glaringly apparent.
asoneth 2y ago
> It's being actively promoted by companies in order to cut design costs I'm curious why you think it reduces design costs to put less information on the screen? My experience has been the reverse -- the companies that chase trends (including but not limited to low-information-density screens and using mobile-first designs for desktop applications) also tend to spend more money on UI design compared to other companies.
- funcDropShadow 2y ago

hliyan 2y ago

One thing we may still haven't realised is that UI designs are subject to fashion cycles, just like clothing. Except enough time hasn't elapsed for us to observe a full cycle similar to peak-bell-bottoms or peak-low-riders or peak-sideburns. We may be in a low-contrast / low-density peak, but we won't know until we pass it. However, looking back, we did seem to have passed at least one peak-skeuomorphic cycle (remember all the toolbars, icons, drawers and Microsoft Bob?). We may see another high contrast monochrome text-heavy cycle yet.

tgtweak 2y ago

This is surprisingly fast. A really impressive showcase of the design philosophy of Svelte. Even loads and renders fast on mobile! DOM Loaded: 134ms FCP/FP: 163ms LCP: 218ms TTI: 1826ms

rkagerer 2y ago

It's a thing of beauty

bowsamic 2y ago

You could make it far far denser than this

pavlov 2y ago

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.

skyyr 2y ago
Have a particular work by Edward Tufte to recommend on the subject?
- vismit2000 2y ago
  https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001Au https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=...

cranberryturkey 2y ago

svelte 4 is handsdown the best framework out there. I really am disappointed svelte5 is turning into react-ish framework. That was the main reason I used svelte was because it was NOT react.

Thro4l31 2y ago
> I really am disappointed svelte5 is turning into react-ish framework. This is very wrong. Read the announcement and the docs: https://svelte.dev/blog/svelte-5-release-candidate https://svelte.dev/blog/svelte-5-release-candidate https://svelte-5-preview.vercel.app/docs/introduction https://svelte-5-preview.vercel.app/docs/introduction Svelte 5 has change its reactivity model to signals. I anything, it's became similar to SolidJS. All other changes are minor but make Svelte even simpler to use.

jbrimble 2y ago

Is there a code repo for this site? I can't seem to see one, and I'm curious to see the svelte source.

gorgoiler 2y ago

I absolutely love it, very intelligently put together. The gold standard for this in the terminal is btop. Check it out if you’re into this sort of thing: Example: https://terminalroot.com.br/assets/img/cpp/btop.png https://terminalroot.com.br/assets/img/cpp/btop.png Repo: https://github.com/aristocratos/btop https://github.com/aristocratos/btop

squigz 2y ago
I prefer atop, personally. https://www.atoptool.nl/ https://www.atoptool.nl/

andrewstuart 2y ago

https://static.crowdwave.link/index.html https://static.crowdwave.link/index.html Above is the evidence that react can handle this sort of thing just fine. I hacked/converted the page in question to React to show something similar. Its randomly generating updates to the table and then resorting the table and repeating. You can grab the source here but I warn you it's hacked together in less than an hour: https://static.crowdwave.link/sveltetest.zip https://static.crowdwave.link/sveltetest.zip

Thro4l31 2y ago
Of course React can handle complex and large scenarios. And those scenarios aren't even large. It's good that you created that proof. Still, Svelte is much easier while more performant, even if that extra performance is most often not needed. Large amounts of data can be managed by react-virtualized in React. IME Svelte (and Vue) can handle more without virtualization, but for really large data sets you need it anyway. The downsides of React are not performance IMO, but DX.
xsepsisx 2y ago
What's so special about it? Golden rule - make granular components/updates, just it.

perdomon 2y ago

I've heard that the DX with Svelte is among the best out of all web libraries/frameworks. Curious how it went creating this UI.

PaulHoule 2y ago

That Helix reminded me of this old game https://en.wikipedia.org/wiki/Tempest_(video_game) https://en.wikipedia.org/wiki/Tempest_(video_game) except it really is a helix and not a cylinder like a Tempest level. Still would be fun to fight bugs in.

keinsinn 2y ago

There's a company in Iceland called "CCP" that did a similar interface. They call it "Eve Online"