Ein Design-Ingenieur von Vercel hat seine Projektkarten enger gepackt, den Rechtsklick zum Menü gemacht und die Kacheln anpassbar gestaltet. Seine öffentlichen Notizen lesen sich wie eine Anleitung für alle, die Dashboards und Admin-Oberflächen bauen. Der eigentliche Wert steckt nicht in der Optik, sondern in drei übertragbaren Prinzipien.
drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen
Beim Interface-Design entscheidet oft ein einzelner weggelassener Datenpunkt über die Lesbarkeit. Der Vercel-Designer Rauno Freiberg hat auf seinen Projektkarten den Branch-Namen entfernt, der ohnehin fast immer „main“ lautet, und damit eine zusätzliche Zeile im Raster gewonnen.[1] Aus dieser kleinen Beobachtung wird eine Frage, die jedes SaaS-Team betrifft: Wie viel Dichte verträgt eine gute Oberfläche?
Das Wichtigste in Kürze
- Rauno Freiberg, Staff Design Engineer bei Vercel, dokumentiert in seinen „Field Notes“ den Umbau der Projekt-Dashboards.
- Drei Hebel stehen im Zentrum: höhere Rasterdichte, ein Kontextmenü per Rechtsklick und nutzerdefinierte Widgets.
- Das Muster stammt aus Profi-Werkzeugen wie Linear und dem Arc-Browser und fordert den Weißraum-Minimalismus heraus.
- Für DACH-Teams zählt vor allem die Barrierefreiheit, denn versteckte Aktionen brauchen einen sichtbaren zweiten Weg.
Warum machen weniger Zeilen die Karte lesbarer?
Freiberg hat auf den Projektkarten das vertikale Padding reduziert und Informationen zusammengelegt, die vorher jeweils eine eigene Zeile belegten. Weniger Zeilen pro Karte senken den Aufwand beim Überfliegen, und im selben Fenster passt dadurch eine zusätzliche Rasterzeile auf den Schirm.
Der Kniff liegt im Mut zum Weglassen. Redundante Angaben wie der immer gleiche Branch-Name sind aus der Karte geflogen, weil sie keine Entscheidung stützen. Genau hier verläuft die Grenze zwischen Dichte und Gedränge, denn verdichtet wird die Information, nicht die Fläche.
Rechtsklick im Browser: Holt das Web das Desktop-Menü zurück?
Statt auf jeder Karte einen Drei-Punkte-Button zu wiederholen, hat Freiberg das Kontextmenü per Rechtsklick getestet, das sich von jeder Stelle der Karte öffnet. Der Rechtsklick spart Fläche und nimmt einen Bedienschritt heraus, den Nutzer aus Werkzeugen wie Linear längst kennen. Der Trend zu solchen Profi-Oberflächen zeigt sich auch dort, wo Teams ihr Frontend bewusst verschlanken.
Der Haken ist die Auffindbarkeit. Ein Rechtsklick verrät sich nicht von selbst, und auf dem Touchscreen gibt es ihn gar nicht.[2] Freiberg spiegelt die Aktionen deshalb zusätzlich in ein sichtbares Aufklappmenü, damit niemand eine Funktion hinter einer unbekannten Geste verliert. Wie viel Feinschliff in solchen Übergängen steckt, zeigt auch die Layout-Animation im Interface.
Rasterdichte
Kontextmenü
Anpassbare Widgets
Gute Dichte entsteht nicht durch Sparen, sondern durch die Frage, welche Information wirklich eine Entscheidung stützt. Alles andere ist nur enger gestelltes Gedränge.
— Markus Seyfferth, Chefredakteur Dr. Web
Was heißt das für Dashboards im deutschsprachigen Raum?
Die Projekte tragen weit mehr Daten, als eine Karte zeigt, vom Firewall-Status bis zur Sicherheitsüberwachung. Freiberg schlägt deshalb anpassbare Widgets vor, mit denen jedes Team die für sich wichtigste Kennzahl auf die Kachel holt. Dahinter steht dieselbe Frage der Informationsarchitektur, an der auch KI-Assistenten scheitern: Welche Rolle braucht welche Kennzahl?
Für Agenturen und Inhouse-Teams im DACH-Raum steht dabei die Barrierefreiheit an erster Stelle. Ein Kontextmenü braucht einen sichtbaren zweiten Weg, dichte Karten dürfen die Tap-Ziele nicht unter das barrierefreie Mindestmaß drücken, und jede versteckte Aktion gehört zusätzlich in ein bedienbares Menü.
Der Weg zu dichteren Oberflächen führt über echte Datenmengen, nicht über die aufgeräumte Design-Vorschau. Testen Sie jedes Layout mit vollen Projektlisten, bevor Sie den Weißraum zurückschrauben, und behalten Sie für jede Geste einen sichtbaren Anker. Passende Werkzeuge für den Webdesign-Alltag nehmen Ihnen dabei die Routine ab.
Was bedeutet Informationsdichte im Interface-Design?
Informationsdichte beschreibt, wie viel entscheidungsrelevante Information auf einer bestimmten Fläche sichtbar wird, ohne die Lesbarkeit zu verlieren. Hohe Dichte bedeutet nicht, alles enger zu stellen, sondern Überflüssiges wegzulassen und Zusammengehöriges zu bündeln.
Sind Rechtsklick-Menüs im Web barrierefrei?
Nur mit einem sichtbaren zweiten Weg. Ein Rechtsklick verrät sich nicht von selbst und existiert auf Touchgeräten nicht. Jede so ausgelöste Aktion gehört zusätzlich in ein bedienbares, sichtbares Menü, damit niemand eine Funktion hinter einer unbekannten Geste verliert.
Worin unterscheiden sich Kontextmenü und Command-Menü?
Ein Kontextmenü öffnet sich per Rechtsklick am Objekt, ein Command-Menü per Tastenkürzel als globale Suche nach Befehlen. Beide bedienen Power-User; das Command-Menü hat Rauno Freiberg mit der Bibliothek cmdk populär gemacht.
Wann ist ein dichtes Dashboard sinnvoll?
Immer dann, wenn Nutzer viele Objekte vergleichen und schnell scannen müssen, etwa in Admin-Tools, Monitoring oder SaaS-Konsolen. Bei seltener, geführter Nutzung hilft mehr Weißraum; bei täglicher Profi-Arbeit gewinnt die Dichte.
Welche Werkzeuge helfen beim Bau dichter Oberflächen?
Ein sauberes Design-System, Command- und Kontextmenü-Bibliotheken sowie ehrliche Tests mit echten Datenmengen. Entscheidend ist, jedes Layout mit vollen Listen zu prüfen statt mit der aufgeräumten Design-Vorschau.
Quellen
[1] Rauno Freiberg: „Field Notes #2“ ↩
[2] Nielsen Norman Group: „Contextual Menus: Delivering Relevant Tools for Tasks“ ↩
Mehr Newshunger?
- Layout-Animation: Wie FLIP und View Transitions Sprünge im Interface glätten
- CSS-Typografie: Wie der Browser endlich wie eine Druckseite setzt
- Informationsarchitektur: das Fundament, an dem KI-Assistenten scheitern
- Jelly UI: Soft-Body-Physik für HTML-Formularelemente
- Webdesign-Tools: 25 Helfer für den Alltag in 2026
- CSS-Bildeffekte: Fotos wie aus Photoshop
