Blog
Visuelle Qualität entsteht durch wiederholtes Prüfen
Ein einzelnes Bildschirmbild verwechsle ich leicht mit einer fertigen Oberfläche. Visuelle Qualität zeigt sich erst über Größen und Zustände hinweg. Nach jeder Änderung sehe ich mir daher besonders die betroffene Stelle erneut an.
Aussagekräftige Ansichten wählen
Ich betrachte eine schmale und eine breite Ansicht sowie eine mittlere Breite, bei der Layouts oft unbequem werden. Dazu kommen echte Zustände: langer Text, Tastaturfokus, leere Inhalte und gegebenenfalls ein geöffnetes Bedienelement. Meine Faustregel: Ich wähle Ansichten, die einen Fehler aufdecken könnten, nicht nur das schönste Bild. Das kostet Aufmerksamkeit, liefert aber bessere Hinweise.
Die interessanten Breiten sind oft die unbequemen. Ein Layout, das an den Enden des Bereichs funktioniert, kann in der Mitte brechen, wo eine Seitenspalte und der Inhalt um dieselbe Zeile ringen. Ich notiere die Breite, bei der etwas zuerst falsch aussieht, statt sie wegzumitteln, denn ein Fehler in einem schmalen Bereich bleibt ein Fehler.
Auch Zustände gehören zur Ansicht. Lange Wörter, fehlende Daten, ein fokussiertes Bedienelement und ein geöffnetes Menü verändern die Geometrie, die ein ruhendes Bild festgehalten hat. Ich nehme mindestens einen Zustand auf, der das von mir geänderte Element belastet.
/* A long identifier must not force a horizontal scrollbar. */
.panel-title {
overflow-wrap: anywhere;
}Ein Problem nach dem anderen ändern
Wenn Schrift, Abstände und Navigation zugleich unruhig wirken, benenne ich vor dem Eingriff das wichtigste Problem. Eine gezielte Anpassung lässt sich besser beurteilen als eine komplette Neugestaltung. Visuelle Belege ergänzen die Prüfung von Semantik und Tastaturbedienung, ersetzen sie aber nicht. Ein hübsches Standbild zeigt weder verlorenen Fokus noch springende Inhalte bei Zustandswechseln.
Wirken mehrere Dinge falsch, ordne ich sie danach, wie stark sie die Aufgabe beeinträchtigen, und behebe zuerst das wichtigste. Eine Schriftänderung mit einer Abstandsänderung zu mischen, macht das Ergebnis schwer zuzuordnen: Bessert sich die Seite, weiß ich nicht, welche Anpassung wirkte; verschlechtert sie sich, habe ich zwei Verdächtige.
Visuelle Arbeit hat auch ein Budget. Jedes zusätzliche Bild und jeder zusätzliche Zustand kostet Aufmerksamkeit, die die übrige Prüfung braucht. Ich gebe sie dort aus, wo das Risiko liegt: die Ansicht nahe einem Umbruchpunkt, der Zustand, den echte Inhalte am ehesten auslösen, das Bedienelement, das Tastaturnutzende erreichen.
/* Keyboard focus stays visible in every theme. */
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}Den betroffenen Zustand erneut prüfen
Nach einer Anpassung kehre ich zur Ansicht und zum Zustand mit dem ursprünglichen Fehler zurück und kontrolliere benachbarte Größen auf Nebenwirkungen. Sind Werkzeuge für Bildschirmaufnahmen nicht verfügbar, sage ich das und behaupte keine visuelle Bestätigung. Eine allgemeingültige Qualitätszahl gibt es nicht; sinnvoller sind die betrachteten Ansichten, die behobene Schwäche und die verbleibenden Lücken.
Eine Nachkontrolle ist keine neue Prüfung. Sie ist der Vergleich mit der Beobachtung, die die Änderung ausgelöst hat: dieselbe Ansicht, derselbe Zustand, derselbe Inhalt, sodass nur meine Anpassung den Unterschied macht. Ich lasse die frühere Beobachtung sichtbar, während ich die neue ansehe, denn die Erinnerung ist ein schlechter Vergleich.
Ich halte außerdem kurz fest, was beobachtet wurde, nicht nur, was geändert wurde. Die Notiz nennt Ansicht, Zustand und den Fehler, der die Anpassung ausgelöst hat, damit eine spätere Prüfung den Vergleich wiederholen kann, statt meiner Zusammenfassung zu vertrauen. Fehlt das Werkzeug, benennt die Notiz diese Lücke ausdrücklich.
# Start the local preview, then capture one viewport at a time.
bun run preview --port 4321
# ready on http://localhost:4321
capture --url http://localhost:4321/ --width 360 --out narrow.png
capture --url http://localhost:4321/ --width 1280 --out wide.png