01 / HINSEHEN
Dieselben Informationen. Ein anderer Eindruck.
Stell dir vor, du öffnest eine Projektübersicht: Du möchtest das richtige Projekt finden, seinen Stand erfassen und es öffnen. Beide Karten enthalten dieselben Angaben und bieten dieselbe Aktion.
Schau dir zunächst beide Varianten an. Wo landet dein Blick zuerst? Was gehört erkennbar zusammen? Und woran erkennst du, wie du das Projekt öffnest?
Fiktive Übungsdaten. Beide Schaltflächen öffnen dieselbe lokale Projektvorschau.
Projektübersicht
Website Relaunch
PROJEKT
Website Relaunch
3 von 8 Aufgaben offen
Meine Einordnung ansehen
Gruppierung: Nähe vermittelt Beziehungen
In A beanspruchen mehrere Zeilen und Trennungen Aufmerksamkeit. B fasst Projektname, Status und Fälligkeit zusammen; Fortschritt und offene Aufgaben bilden eine zweite Gruppe. Der größere Abstand zwischen den Gruppen trennt sie, die kleineren Abstände innerhalb verbinden sie.
Diese Gestaltung nutzt das Näheprinzip: Nahe beieinanderliegende Elemente werden eher als zusammengehörig wahrgenommen. Das ist ein Gestaltungsprinzip, kein Beleg dafür, dass unsere Variante in einem Nutzertest besser abschneidet. Mehr zum Näheprinzip bei Nielsen Norman Group.
Hierarchie: Der Projektname ist der Einstieg
In A konkurriert „Projektübersicht“ mit dem eigentlichen Projektnamen. In B tritt die allgemeine Bezeichnung zurück. Größe, Gewicht und Position lenken den Blick auf „Website Relaunch“. Ob diese Priorität passt, hängt von der Aufgabe ab: In einer Liste kritischer Projekte könnte ein überfälliger Termin wichtiger sein.
Reduktion: Weniger Konkurrenz, gleiche Informationen
B verbindet „8 Aufgaben“ und „3 offen“ zu einer lesbaren Aussage. Weniger visuelle Trennungen schaffen Ruhe. Informationen einfach zu streichen wäre eine andere Entscheidung: Für diese Übung bleiben Status, Termin, Fortschritt und Aufgaben erhalten.
Interaktion: Ruhe darf nicht unsichtbar machen
Eine dezente Aktion kann stimmiger wirken und trotzdem leichter übersehen werden. In B bleibt „Projekt öffnen“ deshalb unterstrichen, mit einer ausreichend großen Schaltfläche und sichtbarem Tastaturfokus. Farbe allein wäre als Hinweis auf die Interaktion zu wenig. WCAG: Farbe nicht als einziges Unterscheidungsmerkmal.
02 / AUSPROBIEREN · CA. 8 MINUTEN
Gestalte eine dritte Projektkarte.
Nutze Figma, Papier oder HTML/CSS. Entwirf deine eigene Variante C und halte die Informationen konstant: Website Relaunch, aktiv, fällig am 24. Oktober, 68 % Fortschritt, 3 von 8 Aufgaben offen und die Aktion „Projekt öffnen“.
- Projektname zuerst: Gestalte ihn so, dass er beim kurzen Hinsehen auffällt. Zwei Sekunden sind dein Übungsziel, kein allgemeiner Qualitätsstandard.
- Beziehungen zeigen: Gruppiere zusammengehörige Angaben. Status, Fälligkeit, Fortschritt und offene Aufgaben bleiben verständlich.
- Dekoration begründen: Verwende Linien, Flächen und Hervorhebungen dort, wo sie bei der Orientierung helfen.
- Aktion erkennbar machen: „Projekt öffnen“ muss als bedienbares Element auffallen. Prüfe beim HTML/CSS-Entwurf auch den Tastaturfokus.
- Schmale Ansicht prüfen: Teste deine Karte bei 320 px Breite. Texte und Aktion dürfen sich nicht überlagern oder abgeschnitten werden.
Zusatzchallenge: Ein kleines Spacing-System
Arbeite zum Beispiel mit 4, 8, 12, 16 und 24 px. Wähle kleine Abstände für zusammengehörige Elemente und größere zwischen Gruppen. Die Werte sind eine Übungsvorgabe, keine universelle Regel.
03 / REFLEKTIEREN
Kannst du deine Entscheidungen erklären?
Prüfe deine Variante mit diesen Fragen. Es geht um eine nachvollziehbare Begründung, nicht um eine perfekte Musterlösung.
- Ist der Projektname der gewünschte erste Blickfang?
- Kannst du für jede Informationsgruppe erklären, warum ihre Elemente zusammengehören?
- Sind deine Abstände konsistent und bei 320 px weiterhin sinnvoll?
- Ist die Aktion erkennbar, ohne allein auf ihre Farbe angewiesen zu sein?
- Bleiben alle Projektdaten verständlich? Bei einem HTML/CSS-Entwurf: Sind Textkontraste und Tastaturbedienung geprüft?
Zwei Fragen zum Weiterdenken
- Welche Information würdest du zurücknehmen, wenn die Karte kompakter werden müsste? Begründe das anhand der Nutzeraufgabe.
- Wie würdest du prüfen, ob dein Entwurf hilft? Formuliere eine konkrete Aufgabe, statt nur zu fragen: „Welche Karte ist schöner?“
Beispiel für eine kleine Überprüfung
Zeige einer Person einen Entwurf und frage: „Wie viele Aufgaben sind beim Website Relaunch noch offen? Öffne anschließend das Projekt.“ Beobachte, ob sie die Angabe versteht und die Aktion findet. Frage danach, was sie erwartet hat.
Wenn du Varianten vergleichst, nutze dieselbe Aufgabe und ändere die Reihenfolge zwischen Personen. Vorwissen aus der ersten Variante kann die zweite erleichtern. Eine kleine Übung liefert Hinweise; sie beweist noch keine allgemeine Überlegenheit eines Designs.
DEIN MERKSATZ
Gutes UI entsteht nicht durch mehr Weißraum, sondern durch bewusst eingesetzten Weißraum.
Abstände zeigen Beziehungen. Entscheidend ist, welche Informationen sie verbinden und welche sie voneinander trennen.