Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

An experiment in UI density created with Svelte

cybernetic.dev

Post reply on HN
Print view View original

81–90 of 267 posts

Re: An experiment in UI density created with Svelte

#81

Post by wruza »

Spivak wrote: post #69
Bluestein wrote: post #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 ...)

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 spaci…

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

Re: An experiment in UI density created with Svelte

#82

Post by ChrisMarshallNY »

mhh__ wrote: post #80

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…

I suspect Bloomberg terminals fit that bill.

Re: An experiment in UI density created with Svelte

#83

Post by ChrisMarshallNY »

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

Re: An experiment in UI density created with Svelte

#86

Post by solardev »

gala8y wrote: post #58
solardev wrote: post #52

Earlier quoted context omitted.

It's an interesting question (how much density is "right" for productivity apps). On one hand, I still hate the MS Office "ribbon" UI to this day and much prefer the denser and more compact Google Docs or even Open Office layout. On the other hand, Sketchup was hugely popular and very easy to use compared to its peers when it was released, and quickly became the de facto tool for simple free basic 3d modeling, in no…

> It's an interesting question (how much density is "right" for productivity apps). Between extremes of GUI presenting all functions at once and accessing all functions through memorized keyboard shortcuts, there must lay large lands of possible, experimental GUIs which unfortunately never get tested in popular software (which defaults to sub-menus + some keyboard access). I mean zoomable UIs, radial menus, 3d concep…

> I was leaving this temp gig I showed this solution to some guy in accounting, whose life was basically opening these dropdowns all day long.

Lol, that is such a tragic story that must happen millions of times across the world today. At a previous job, one department was spending 3-4 hours a day manually copying & pasting customer contacts from emails into their CRM. This was in an org with tens of developers, but nothing was done about it for years until my manager happened to catch wind of it and asked me to take a look in my spare time. I wrote an integration in a few hours and those ~40 lines of code have probably saved thousands of hours and dollars by now.

As programmers, we're allergic to manual repetition, but so much of the world runs on that...

> As per PS, have you ever tried to really personalize PS UI to your liking?

When I was young, I used to spend hours doing that, iterating on PS UI configurations, testing them, rearranging and retesting... these days I'm just too old and curmudgeonly to do anything about it except whine, lol. But you're right, I should probably just bite the bullet and do that once and sync it to my account.

Re: An experiment in UI density created with Svelte

#87

Post by dr_dshiv »

SloopJon wrote: post #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. showi…

Conditional formatting to indicate magnitude via color?

Re: An experiment in UI density created with Svelte

#88

Post by moritzwarhier »

jonahx wrote: post #11
daemonologist wrote: post #8

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 o…

> 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…

The browser can take very long to layout and draw a page with a huge number of DOM elements.

Hardware starts to mask a lot of these issues, but even a table with 1000 to 10,000 rows will already cause issues. And table layout is very optimized (for this reason, there are plenty of CSS gotchas around tables). So a 10,000 row plain HTML table still is rendered relatively fast, but not practical for an interactive UI.

But for "snappy" UI and more involved CSS + many nested DOM elements, you'll need to start to consider viewport virtualization a lot earlier.

This is independent of JS UI frameworks though.

HTML+CSS rendering is an expensive, blocking operation. CSS even requires multiple passes for rendering nowadays AFAIK. Of course this is optimized to hell by browsers too.

But you still need "viewport virtualization" in markup+CSS, or switch to canvas rendering, which does away with the markup and CSS entirely.

Re: An experiment in UI density created with Svelte

#89

Post by andrewstuart »

mhh__ wrote: post #80

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…

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

Re: An experiment in UI density created with Svelte

#90

Post by electroly »

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.

Post reply on HN