![]() |
|
![]() |
| Yep, sorry, that is indeed what I meant; I had originally said Houdini FX but I couldn't tell if that was the true product name or not since there are non-FX versions. Bleh. |
![]() |
| 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. |
![]() |
| > I bet she'd have similar issues with appliances if their design was just random flat symbols on white surfaces that randomly disappear.
That sounds like the control panel for my fridge :) |
![]() |
| 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. |
![]() |
| VS Code Editor which is based on Electron, is really fast, even with large codebase & many open tabs. Their monaco engine (https://microsoft.github.io/monaco-editor/) uses custom, virtual code processor that is optimized for surgically updating underlying DOM. It also uses WebGL + canvas rendering to show minimap of the file.
Similar approach (custom virtual processor) is leveraged by Google docs/sheets. Canvas rendering may be the last resort when nothing worked. |
![]() |
| 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? |
![]() |
| 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. |
![]() |
| 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). |
![]() |
| >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. |
![]() |
| 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 |
![]() |
| 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/). 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) |
![]() |
| 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. |
![]() |
| 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 |
![]() |
| 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), 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. |
![]() |
| A bigger audience isn't a better audience.
A violin solo in a football stadium with the usual football audience is not an improvement over one in a recital room with the usual audience. |
![]() |
| Is Cahier built on top of Zotero? It looks very similar.
Good notetaking support is something Zotero lacks, so I see the appeal for an alternative that focuses more on it. |
![]() |
| Cahier is built from scratch with native tech. Besides more comprehensive notetaking support, I also want to provide support for synchronization with existing cloud providers (Dropbox, iCloud, etc.). |
![]() |
| 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. |
![]() |
| I don't know what GitHub projects uses but we have ~200 tickets in it and it absolutely chugs. Even typing text into new entries will regularly hang for multiple seconds every few words. |
![]() |
| (Not that you're asking for advice, but hope you don't mind me sharing some anecdotal experience...)
When we had to do similar things, we found that it was much much much faster to take all that sort of stuff out of the DOM and put it into Canvas. You can still wrap React around it for the UI and controls and data passing and all that, but the actual rendering need not involve the VDOM or even the real DOM at all. With ChartJS we were able to get it to show tens of thousands of individual data points in a time-series scatterplot, each datapoint interactive and real-time, with no noticeable lag. And it was super easy to integrate into our React app. https://www.chartjs.org/ If it's not just charts, here's another canvas-based drawing lib: https://konvajs.org/docs/sandbox/20000_Nodes.html (and its React tie-in: https://konvajs.org/docs/react/Intro.html) Not trying to discourage you from exploring Svelte if you want to, but it might be less work to just use an existing optimized drawing lib. Regardless of the JS framework used, the DOM is going to be much slower than a Canvas. |
![]() |
| > Not that you're asking for advice,
The cunningham's-law-optimal way is to not ask, surely. Either that or the some programmers equivalent of the "death drive". > canvas Indeed, the canvas is basically inevitable, but it's a bespoke chart that has both temporal and non-temporal data in it (not sure what the terminology should be, but imagine plotting market expectations of interest rates in future and what expectations were historically displayed relative to current levels - but repeated ~200 times), so the existing chart libraries aren't particularly helpful and can get in the way of being able to click on stuff. Anecdotally I find that programmers are very good at writing charts for the kinds of data they understand (time series, time series of their stock options, etc), but even the "generic" (e.g. grammar of graphics) libraries can still struggle with simple combinations of those domains. Obviously you can just treat the charting library as a black-box for which you derive coordinate transformations and make things appear in the right place but not a great bus-factor for that kind of code. I use https://github.com/leeoniya/uPlot for sparklines and so on, very fast. |
![]() |
| It's always worth thinking about who the audience / userbase of your UI is, and whether they'd benefit from an expert user interface [1] or not.
Sometimes, they would (e.g. the "users paid more than the programmers" rule of thumb, but also: various technical disciplines, most anything used for professional-grade work). Sometimes, they wouldn't - or perhaps some would and some wouldn't (so perhaps you're looking for a simple base UI with some accelerators [2]). IMHO the issue is that many products fall into this last camp - where a well-designed simple UI is called for, but also accelerators could greatly help a small but important subset of power users - but we treat the power users as though they don't exist. [1] https://www.nngroup.com/articles/testing-expert-users/ [2] https://www.nngroup.com/articles/ui-accelerators/ |
![]() |
| I'd never heard of those until your post, and had to look up a Youtube about what they were: https://www.youtube.com/watch?v=2ee-x6IXWK8
That's super fascinating. There's an entire industry that runs off these things, on their totally custom UI, showing everything from stock tickers to news headlines to maps? That must be a fun project to work on (except probably the finance users don't like random UI changes, lol). |
![]() |
| lol this is probably most famous financial tool on the market. No wonder we have so many new software tools being created daily since some people don’t do basic market research. |
![]() |
|
Much less than people think. It costs about 25K USD per year per terminal. There might be one shared terminal in a whole middle or back office. |
![]() |
| >> react literally cannot handle the quantities of data
Presented at fact but I’m not sure this is universally correct. I don’t see why the application that is linked here couldn’t be done in react. |
![]() |
| 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. |
![]() |
| More information, yes, not density. Same for pagination. Information density = amount of information you can gather at once within a space, before any interaction. |
![]() |
| 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. |
![]() |
| 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 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. |
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.