cbrock84/interface-craft

Interface-Handwerk

Die meisten Benutzeroberflächen scheitern nicht an den Ideen. Sie scheitern an der Umsetzung – an Abständen, die fast konsistent sind, an einer Hierarchie, die fast klar ist, an einer Schrift, die fast richtig ist.

Diagnose vor dem Neugestalten

Frage, wofür der Bildschirm da ist. Eine primäre Aktion, höchstens eine sekundäre. Wenn du die primäre Aktion nicht benennen kannst, ist das Layout-Problem ein Produktproblem, und keine noch so große Gestaltung behebt es.

Die Dinge, die tatsächlich als Qualität wahrgenommen werden

Hierarchie. Der Betrachter sollte wissen, wohin er schauen muss, bevor er etwas liest. Erreiche dies mit Größe, Gewicht und Abstand – in dieser Reihenfolge. Farbe ist das schwächste Hierarchie-Werkzeug und das am meisten überstrapazierte.

Abstands-Rhythmus. Zusammengehörige Dinge sitzen näher beieinander als nicht zusammengehörige, und die Abstände stammen aus einer einzigen Skala. Inkonsistente Abstände sind der Makel, den Menschen fühlen, aber nicht benennen können. Wenn der räumliche Bezug stimmt, liest sich ein schlichtes Layout als gestaltet.

Typografie. Eine Schriftfamilie für die Oberfläche, höchstens zwei auf der Seite. Lege eine echte Skala fest und verwende ihre Schritte, anstatt Größen zu erfinden. Fließtext möchte eine komfortable Breite – etwa 60–75 Zeichen – und eine Zeilenhöhe, die mit der Breite wächst.

Zurückhaltung bei Oberflächen. Rahmen, Schatten und Füllungen trennen alles voneinander. Wähle eines pro Grenze. Alle drei zu stapeln ist der Grund, warum Oberflächen bei normaler Dichte überladen wirken.

Ausrichtung. Alles fluchtet mit etwas. Ein Element, das an nichts ausgerichtet ist, wirkt selbst dann wie ein Fehler, wenn es beabsichtigt ist.

Dichte ist eine Entscheidung

Ein informationsdichtes Werkzeug und eine Marketing-Seite wollen gegensätzliche Behandlungen. Entscheide, um welches es sich handelt, und bleibe dabei – die unangenehme Mitte, in der eine Datentabelle das Padding einer Landingpage hat, dient keiner Seite.

Zustände fertigstellen

Laden, leer, Fehler und Überlauf sind die Momente, in denen sich Produkte unfertig anfühlen. Ein leerer Zustand ist eine Gestaltungsmöglichkeit; ein Spinner ohne Kontext ist ein Eingeständnis. Lange Zeichenketten, lange Listen und kleine Bildschirme müssen behandelt, nicht erhofft werden.

Dark Mode ist eine Palette, keine Invertierung

Die Invertierung eines hellen Designs erzeugt den charakteristischen schlechten Dark Mode: reines Schwarz als Hintergrund, reines Weiß als Text und Schatten, die nichts bewirken.

• Verwende ein sehr dunkles Grau anstelle von reinem Schwarz und ein leicht abgedunkeltes Weiß anstelle von reinem Weiß. Maximaler Kontrast zwischen beiden verursacht Halos und ist tatsächlich ermüdend zu lesen.
• Die Erhebung kehrt sich um: In hellen Themen werfen erhöhte Flächen Schlagschatten, in dunklen Themen werden sie heller. Schatten allein vermittelt auf einem dunklen Untergrund nichts.
• Gesättigte Farben, die auf Weiß funktionierten, vibrieren auf Dunkel. Entsättige und helle Akzentfarben für die dunkle Palette auf, anstatt sie wiederzuverwenden.
• Definiere beide Paletten gemeinsam, auf Token-Ebene, von Anfang an. Ein nachträgliches Einführen bedeutet, jede Oberfläche zu prüfen.

Grundlegende Barrierefreiheit

Dies sind keine Kosmetik-Items – unterhalb dieser Grenze können manche Menschen die Oberfläche überhaupt nicht nutzen.

• Textkontrast, der das Standardverhältnis gegenüber seinem tatsächlichen Hintergrund einhält, einschließlich Text über Bildern und in farbigen Schaltflächen.
• Niemals Bedeutung allein durch Farbe transportieren. Ein roter Rand, der auf einen Fehler hinweist, benötigt ebenfalls Text oder ein Symbol.
• Jedes interaktive Element ist per Tastatur erreichbar, in einer sinnvollen Reihenfolge, mit einem sichtbaren Fokus-Zustand.
• Berührungsziele groß genug, um zuverlässig getroffen zu werden, mit Abstand zwischen benachbarten Zielen.
• Die Einstellung „reduced-motion“ respektieren: Animation, die nicht deaktiviert werden kann, verursacht bei manchen Nutzern echte Symptome.
• Echte semantische Elemente – Schaltflächen, die Schaltflächen sind, Überschriften in der richtigen Reihenfolge. Ein gestylter div ist für assistierende Technologien unsichtbar.

Niemals

• Visuelles Gewicht hinzufügen, um ein Hierarchie-Problem zu beheben, das durch zu viele gleichwertige Elemente verursacht wird. Lieber entfernen.
• Fließtext zentrieren.
• Einen Hover-Zustand ausliefern ohne den passenden Fokus-Zustand.