UI-Dichte-Experiment mit Svelte

• Grid ist ein Experiment, bei dem Nutzer die UI-Dichte anpassen können; derzeit wird eine neue Version entwickelt
• Matrix als Nachfolgeprojekt zielt auf eine noch höhere UI-Dichte und zeigt eine Korrelationsmatrix für den S&P 500 und den NASDAQ-100
• Wenn S&P-500-Bestandteile ausgewählt werden, werden Korrelationen über mehr als 250.000 Zellen und mehr als 30 Millionen Datenpunkte verarbeitet
• Einige Funktionen fehlen in der Vorschau unten; zur Beurteilung muss die Vollbild-UI von Matrix geöffnet werden
• Die Materialien auf der Website dienen Informationszwecken und sind nicht als Anlageberatung oder Empfehlung zum Kauf oder Verkauf von Wertpapieren zu verstehen

---

UI-Dichte-Experiment von Grid zu Matrix

• Grid war ein Projekt zum Experimentieren mit anpassbarer UI-Dichte; eine neue Version befindet sich in Entwicklung
• Matrix ist ein Experiment, das die UI-Dichte noch weiter ausreizt, und bietet eine groß angelegte Korrelationsmatrix für den S&P 500 und den NASDAQ-100
• In der Vorschau unten ist ein Teil von Matrix zu sehen, einige Funktionen sind jedoch nur in der Vollbild-UI von Matrix verfügbar

Umfang der von Matrix verarbeiteten Daten

• Wenn die Bestandteile des S&P 500 als Datensatz ausgewählt werden, umfasst dies mehr als 250.000 Zellen
  • Es werden Korrelationen über mehr als 30.000.000 Datenpunkte berechnet
  • Weitere Informationen finden sich auf der About-Seite des Matrix-Experiments
• Die home-Seite bietet einen Überblick über alle derzeit verfügbaren Datenvisualisierungs-Experimente

In der Vorschau verfügbare Bedienelemente

• Zur Auswahl bei Dataset stehen S&P500 und NASDAQ100
• Bei Horizon können 1M und 1Y gewählt werden
• Als Option zur Datenvorverarbeitung gibt es das Kontrollkästchen Detrend Data
• Die Sortieroptionen sind wie folgt
  • Sort By: Cluster, AvgCorr, MedCorr, Name
  • Cluster Method: Avg, Complete, Ward
  • Sort Direction: Asc, Desc
• Die Vorschau-UI enthält Minimap, Search, Rolling Correlation Chart sowie Hinweise zu Zellen bei Hover und Klick
• Im angezeigten Zustand werden Symbols 101, Correlations 5,050 und Cells 10,201 angezeigt

Hinweise zur Nutzung

• Die Materialien auf der Website dienen Informationszwecken und stellen weder Anlageberatung noch eine Empfehlung zum Kauf oder Verkauf von Wertpapieren dar

[GN⁺]

Hacker-News-Kommentare

• Da ich viel mit tabellarischen Daten arbeite, bevorzuge ich, dass auf einem Bildschirm so viel wie möglich sichtbar ist. Den größten Einfluss auf mein Reporting-Design hatte überraschenderweise iTunes: genau so viel Leerraum wie nötig, Zebra-Zeilen, schnelles und einfaches Sortieren und wenn möglich eine Struktur wie ein Spaltenbrowser. Ich nutze DataTables seit Jahren sehr zufrieden
  Derzeit experimentiere ich mit Sortierung und Darstellung. Wenn aus Jira importierte Issues blockiert sind, frage ich mich, ob ich dafür eine separate boolesche Spalte zum Sortieren/Filtern brauche oder ob es reicht, eine andere Spalte zu stylen, zum Beispiel die verstrichene Zeit. Ich prüfe gerade, ob man in einer Tabelle mit mehr als 100 Zeilen allein anhand orangefarbener, roter und fett roter Werte in einer Zelle erkennen kann, welche Einträge jetzt bearbeitet werden müssen
  Was mir an der Tabellenansicht dieses Experiments gefällt, sind die Live-Aktualisierung, stabile Sortierung über mehrere Spalten, Zeilenhervorhebung bei Mouseover, ausgegraute nachgestellte Nullen, unaufdringliche Farben (im Grunde etwa drei Paare) und sparklineartige Grafiken in den Spalten 24H Low/High. Weniger gut finde ich die fast unsichtbare horizontale Scrollbar, die breite vertikale Scrollbar mit angehefteten Grafiken, dass unklar ist, wie 24H Low/High tatsächlich sortiert wird, und das fehlende Filtern. Im Vergleich zu meinen Reports fällt außerdem auf, dass die Schwankung der Wertbreiten nicht besonders groß ist. Sobald statt überwiegend Zahlen auch Text gemischt vorkommt, wird das Management der Spaltenbreiten schwieriger
  • Ich erinnere mich, dass ich das Upgrade auf Catalina hinausgezögert habe, weil ich Angst hatte, iTunes.app könnte verschwinden. Es war eine völlig unterschätzte App, und ich war sehr froh, dass Music.app fast dieselbe App ist und die Migration leicht war
  • DataTables ist großartig. Ich verwende es seit über 10 Jahren in einem Produkt. Ich suche ständig nach neueren und besseren Alternativen, habe aber noch keine gefunden
  • Ich experimentiere auch mit der Entwicklung von Mac-Apps, die sich in Jira oder andere asynchron laufende Arbeit integrieren. Mich interessierte bisher eher die Kontrolle darüber, worüber man wann benachrichtigt wird, als die Datenansicht selbst, aber dieser Kommentar und diese UI bringen mich dazu, andere Ideen auszuprobieren, bei denen ich auf dem Hauptdatenbildschirm festhing
  • Meinst du bedingte Formatierung, bei der Größe durch Farbe dargestellt wird?
• Mir gefällt ziemlich gut, wie die Scrollbar der Tabelle ähnlich wie die Minimap eines Code-Editors erweitert wurde und zusätzliche Informationen enthält. Auf einen Blick hilft das dabei zu erkennen, wo sich die auf dem Bildschirm sichtbaren Daten im größeren Datensatz befinden
  Helix wirkt auf mich schwer lesbar und wenig nützlich. Solche Grafiken passen besser zu periodischen Daten, deren Zyklus deutlich kürzer ist als der gesamte Datenbereich
  Der Würfel hat meine Neugier geweckt, aber ich sehe seinen Vorteil nicht wirklich. 3D-Visualisierungen sind normalerweise weniger effektiv als drei 2D-Grafiken mit demselben Inhalt, hier also drei Streudiagramme. Das liegt an Verzerrungen bei der Projektion von 3D auf 2D und daran, dass auch unser grundlegendes Gefühl für Positionsvergleiche dadurch unschärfer wird. Ich frage mich, welcher Effekt hier beabsichtigt war
  • Nur zur Klarstellung: Ich bin nicht der Ersteller dieses schönen Projekts
  • Eigentlich bin ich hergekommen, um darüber zu sprechen, dass der Helix-Tab unglaublich ist. Man könnte ihn zum Beispiel nutzen, um Volatilität bei Aktien und anderen Gütern, besonders bei Derivaten, darzustellen
    Die Art, wie man in die Vergangenheit möglichst natürlich hineinsehen kann und zugleich neuere Daten größer erscheinen, ist wirklich genial. Kaum zu glauben, dass ich selbst nicht auf diese Idee gekommen bin
• Ich hoffe, solche Projekte sind ein Zeichen dafür, dass wir zu Interfaces zurückkehren, die gut gestaltet sind und zugleich eine hohe Informationsdichte sowie sparsamen Platzverbrauch bieten
  Seit „Material Design“, das Google faktisch begraben hat, gibt es viel zu viel Aufblähung, weiße Fläche, übermäßige Abstände und Verschwendung in Form von „Luftigkeit“
  Träumen darf man ja
  • Auf Mobilgeräten müssen Touch-Ziele fingerbreit sein, daher ist bis zu einem gewissen Grad eine großzügigere UI nötig
    Unternehmen möchten nicht zwei sehr unterschiedliche UIs für verschiedene Plattformen entwerfen, und im Allgemeinen möchten Nutzer, dass sich die auf einer Plattform erlernte Bedienung auf andere Plattformen übertragen lässt
    Auch Barrierefreiheit ist einfacher, wenn ein Design Raum für große Schrift bietet und keine präzise motorische Kontrolle verlangt. Während ich sehe, wie mein Vater sichtbar altert, merke ich, dass selbst Apps, die mir großzügig wirken, aus dieser Perspektive noch nicht großzügig genug sind
    Solange sich die Kräfte nicht ändern, die uns von Anfang an in diese Richtung gedrängt haben, sehe ich nicht wirklich, wie wir zu informationsdichten Designs zurückkehren können

  • starting with (now Google-dead) "Material Design"
    Ich dachte, das würde noch aktiv weiterentwickelt. Bedeutet das, Google hat es eingestellt?
    https://m3.material.io/

  • Es scheint bei Apple mit dem Übergang von OS 9 zu OS X begonnen zu haben. Damals konnte ich es nicht erklären, aber bis heute bedauere ich, wie viel wertvoller Bildschirmplatz verschwendet wurde
• Ich finde, in diesem Experiment fehlt Typografie, ein Kernelement beim Entwurf von UI-Dichte
  Diese Bildschirme verwenden eine einheitliche Größe in einer Monospace-Schrift. Das hat einen Retro-Charakter wie Textmodus-UIs aus den 1980ern, und wenn das eine beabsichtigte Einschränkung war, ist das in Ordnung
  Aber wenn man bei Schriftart und Größe eine saubere Hierarchie einführen könnte, ließen sich viel mehr Informationen auf dem Bildschirm unterbringen
  Als einfaches Beispiel: Die „About“-Box nimmt derzeit fast ein Viertel eines Smartphone-Bildschirms ein. Mit einer kleineren Proportionalschrift könnte man dieselben Informationen auf halb so viel Platz unterbringen und sie trotzdem auf dem Handy lesbar halten
  Wenn man die Arbeiten hervorragender Informationsdesigner wie Edward Tufte betrachtet, sieht man oft, wie sehr sie darauf fixiert sind, die Typografie richtig hinzubekommen. Seine Bücher verwenden auch im Fließtext außerhalb von Visualisierungen mehrere typografische Elemente und Größenstufen
  • Gibt es zu diesem Thema ein bestimmtes Werk von Edward Tufte, das du empfehlen würdest?
• Wäre Perspective ein passender genauer Vergleich? (https://perspective.finos.org/)
  Ich frage mich, ob sich die Dichte hier auf Performance, Visualisierung oder etwas anderes bezieht
  • Es lud deutlich langsamer als die Seite des Originalposts. Zur Einordnung: Der Helix-Tab im Originalpost ist wirklich erstaunlich
  • Als ich es zum ersten Mal geöffnet habe, dachte ich, es sei mit Perspective erstellt worden
    Der Einfluss ist auf jeden Fall deutlich spürbar
• Als ich in Windows Forms Finanzanwendungen mit vielen Daten erstellt habe, mochte ich den DataGridView-Control besonders gern. Er bietet Filtern, Sortieren sowie Drag-and-drop zum Umordnen und Ändern der Spaltengröße und ist gleichzeitig dicht und performant. Paginierung braucht man auch nicht. Wenn man 10.000 Zeilen hineinwerfen will, macht man das einfach. Die meisten UIs, die wir bauen, sind Bildschirme voller DataGridView-Panels. Ist das hässlich? Ja. Ist es schnell? Ebenfalls ja.

Der Versuch, mit React eine ähnliche UI zu bauen, ist leistungstechnisch nicht gut gelaufen und im Großen und Ganzen gescheitert. Um eine akzeptable Rendering-Performance zu erreichen, wurde React für die Datentabelle komplett umgangen. Trotzdem muss man die Anzahl der DOM-Elemente pro Zeile minimieren, damit schon das Browser-Rendering selbst nicht unerträglich langsam wird

• WinForms ist wahrscheinlich immer noch mein Lieblings-UI-Framework. Es ist definitiv ein grobschlächtiges Werkzeug, aber man kann es nach Belieben schwingen. Es ist enorm flexibel, ziemlich leicht zu benutzen, ziemlich schnell und brutal hässlich
  Man kann einfach beliebige Objekte hineinwerfen, und es funktioniert. Man kann ein PropertyGrid in einem PropertyGrid verschachteln, es auf Objekt-Sammlungen erweitern und Controls beliebig tief verschachteln. Man muss die innere Struktur der Objekte, an die die UI gebunden ist, weder anfassen noch sich darum kümmern (mit gewissen Grenzen)
  WinForms ist für mich das platonische Ideal eines UI-Frameworks. Wenn ich es selbst entwerfen würde, sähe es vermutlich genau so aus

• Ich mag Informationsdichte wirklich sehr
  Ich sammle alte Zeitungen, und damals war die Informationsdichte viel höher. Wenn ihr ein großartiges Coffee-Table-Book sucht, sucht nach "nytimes complete front pages". Im oberen Bereich der gefalteten Seite steckte wirklich sehr viel Kerninformation
  Ich halte hohe Informationsdichte für gleichbedeutend mit hoher Intelligenz. Die Sortierprioritäten richtig zu setzen, ist sehr wertvoll und wichtig
  In den letzten Jahren schien sich das Web in die entgegengesetzte Richtung zu bewegen, deshalb ist es schön zu sehen, dass es immer noch Leute gibt, die in die andere Richtung rudern
  Als weiteres Beispiel ist mein Blog so gestaltet, dass man per Zoom ungefähr 20 Jahre an Beiträgen auf einmal sehen kann (https://breckyunits.com/)
  Außerdem werde ich bald etwas veröffentlichen, das Cheatsheets mit hoher Informationsdichte bewirbt und leichter erstellbar macht. Ich denke, der Name Leet Sheet steht fest (https://pldb.io/blog/leetSheets.html)

  • I think high information density === high intelligence.
    Wenn man mit kleiner Schrift, kleinen Abständen usw. möglichst viel auf einmal auf den Bildschirm quetscht, entstehen selbst für intelligente Menschen viele Barrierefreiheitsprobleme
    Firmen wie Google vergrößern Leerraum und Padding, um UIs für mehr Menschen zugänglich zu machen. Es geht nicht nur um Sehkraft, sondern auch um körperliche Probleme wie Parkinson, bei denen kleine Ziele schwer präzise anzuklicken oder anzutippen sind, und um neurodiverse Themen, bei denen allein die Menge an Text oder Elementen auf dem Bildschirm zur Desorientierung führen kann (z. B. Epilepsie)
    Auch sehr intelligente Menschen profitieren von gut gestalteten und barrierefreien UIs. Man sollte nicht annehmen, dass Menschen, die solche Hilfe brauchen, weniger intelligent sind

• Das ist interessant, weil es mir etwas über mein Sehvermögen und mein visuelles Verständnis zeigt
  Die Ansicht "Grid" ist völlig okay. Die Ansicht "Table" ist unbenutzbar
  Ich habe oft das Problem, bei langen Zeilen wie diesen den Überblick zu verlieren, in welcher Zeile ich mich gerade befinde. Mir ist klar geworden, dass das daran liegt, dass meine Blickdominanz beim Bewegen der Augen leicht nach rechts wandert. Meine Augen sind minimal fehljustiert, sodass ich Prismenkorrekturen bekomme, und eine kürzliche Änderung dieser Prismenkorrektur hat die Situation verbessert
  In dieser Darstellung verschlimmert die Position der Markierungslinien in den Spalten low/high das versehentliche Verrutschen um eine Zeile (es passiert immer nach oben) noch weiter
  Für mich wäre es besser, wenn das Liniendiagramm entweder der Hintergrund der Zelle wäre oder unterhalb der Zelle läge. Die Zeilen brauchen außerdem ein dezentes Streifenmuster
  Die Lehre für mich als schnellen und geübten Leser ohne Seh- oder kognitive Beeinträchtigung ist, dass man bei solchen Tabellen nicht einfach annehmen sollte, es sei okay, Informationen über breite Zeilen hinweg zu verteilen. Man muss Nutzerinnen und Nutzern Hinweise zum Festhalten der Zeile geben, während sie horizontal scannen. Dünne Trennlinien allein reichen nicht aus, und ein geänderter Hintergrund bei Mouseover funktioniert auf Touch-Geräten nicht
  Im jetzigen Zustand mache ich es so, dass ich bei solchen Dingen das Fenster aus dem maximierten Zustand hole und die Fensterhöhe reduziere, dann scrolle ich und benutze die Unterkante des Fensters oder die Titelleiste eines anderen Fensters als konstante "Kante", um die Daten zu verfolgen. Auf dem iPad habe ich dafür auch schon Papier oder eine Karte benutzt

  • Die Schwierigkeiten, die ich mit der Tabelle habe, scheinen viel stärker mit dem Design des Autors zusammenzuhängen, insbesondere mit der Farbwahl
    Erstens ist, wie schon erwähnt, der Kontrast zwischen einer Zeile mit Mouseover bzw. Hervorhebung und einer normalen Zeile viel zu gering. Selbst für mich mit guter Sehkraft ist das schwer zu erkennen
    Zweitens sollten Tabellenzeilen oder -spalten für bessere Lesbarkeit mit mindestens zwei kontrastreichen Farben gestreift sein. Zum Beispiel weiß, schwarz, weiß, schwarz. Diese Tabelle ist von Anfang bis Ende komplett schwarz
    Drittens ist der Kontrast der Tabellenränder so niedrig, dass sie fast unsichtbar sind. In Kombination mit der einheitlichen Farbgebung von Zeilen/Spalten verschlechtert das die Lesbarkeit weiter
    Kurz gesagt: Die Tabelle selbst ist okay, die Farben sind furchtbar

• Die UI-Elemente hier sehen sehr cool aus, aber ich frage mich auch, worin das Experiment bestand und zu welchen Schlussfolgerungen es gekommen ist
  Wenn man nur die Zahl rein interaktiver Elemente betrachtet, ist in meiner Erfahrung (Svelte 4) oft eher das Rendering als die Interaktivität das erste Problem. Das heißt, Performance-Probleme treten bei derselben Anzahl von Elementen auf, unabhängig davon, ob sie interaktiv sind. Wie du es auf einigen dieser Seiten umgesetzt hast, ist die Lösung dann, auf Canvas zu gehen

  • Svelte kann mit Components ohne Rendering verwendet werden. https://imfeld.dev/writing/svelte_domless_components
    Svelte kann auch auf Canvas zeichnen. Es gibt auch Threlte: https://threlte.xyz/
    Was die interne Performance von Svelte angeht, glaube ich nicht, dass man so etwas wie Jotai in demselben Maß braucht wie bei React, um unnötige Re-Renders zu verhindern

  • 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.
    Überraschend. Ich dachte, die Stärke von Svelte sei, dass es dank des Compile-Schritts und ohne virtuelles DOM sehr präzise und effiziente DOM-Updates macht. Ist in so einem Paradigma selbst eine einfache große Tabelle noch ein Problem? Gab es hier unter diesen Elementen zum Beispiel welche, die eigentlich als DOM hätten gerendert werden können, bei denen aber rein aus Performance-Gründen Canvas nötig war?

• Wenn man Svelte mit einem hervorragenden WebGL-Framework wie Phaser kombiniert, ist sehr schnelles Grafik-Rendering möglich: https://phaser.io/news/2024/03/official-phaser-3-and-svelte-...

• Dieses Helix-Diagramm ist wirklich faszinierend. Ob es sich tatsächlich praktisch einsetzen lässt, weiß ich nicht, aber es sieht unglaublich cool aus.
  Wenn das ein Experiment war, was war dann das Fazit?

  • Bei Firefox scheint es nicht zu funktionieren — geht das nur mir so?