Webseiten mit einheitlichem Aussehen gestalten, die alle leicht bedienen können

## Die wichtigste Botschaft und den nächsten Schritt zuerst sichtbar machen Nutzen Sie visuelles Gewicht, um Wichtigkeit erkennbar zu machen, bevor Sie die Gestaltung verfeinern. Eine Seite sollte Menschen innerhalb weniger Sekunden helfen, ihren Zweck zu erkennen, den zentralen Nutzen zu verstehen und die nächste Aktion zu identifizieren. - Geben Sie jedem Bildschirm oder Abschnitt eine primäre Botschaft. - Beschränken Sie die Kernhierarchie auf Seitentitel, Abschnittsüberschriften und Fließtext; fügen Sie tiefere Ebenen nur bei Bedarf hinzu. - Heben Sie wichtigere Inhalte durch Größe, Kontrast, Position und umgebenden Freiraum stärker hervor. - Stellen Sie die Schlussfolgerung vor die unterstützenden Details, wenn schnelles Erfassen wichtig ist. - Reservieren Sie die stärkste Hervorhebung für die primäre Aktion oder Entscheidung. - Vermeiden Sie, jedes Element groß, fett, farbig oder kontrastreich zu gestalten. - Führen Sie einen Fünf-Sekunden-Test durch: Kann eine Person, die die Seite zum ersten Mal sieht, sie und den vorgesehenen nächsten Schritt erklären? ## Elemente mit gemeinsamem Raster und einheitlichen Abständen anordnen Abstände vermitteln Beziehungen. Verwenden Sie eine gemeinsame Skala und ein gemeinsames Raster, damit zusammengehörige Elemente verbunden wirken, getrennte Gruppen unterscheidbar bleiben und sich Layouts ändern können, ohne ihren Rhythmus zu verlieren. - Beginnen Sie mit einer Abstandsskala von 8 Pixeln; erlauben Sie eine Unterteilung in 4 Pixel, wenn eine feinere Steuerung erforderlich ist. - Verwenden Sie ein einfaches responsives Raster, etwa eine Spalte auf Smartphones, zwei auf Tablets und bis zu zwölf auf breiten Bildschirmen. - Halten Sie den Abstand innerhalb einer Gruppe kleiner als den Abstand zwischen Gruppen. - Richten Sie wiederkehrende Komponenten an gemeinsamen Spalten, Kanten und Grundlinien aus. - Legen Sie als Ausgangspunkt für Fließtext eine Zeilenhöhe nahe 1,6 und Absatzabstände von etwa 1,5 bis 2 Zeilenhöhen fest. - Verwenden Sie Tokens für Abstandswerte, statt nahezu identische Maße neu zu erfinden. - Prüfen Sie den vertikalen Rhythmus über Abschnitte und Komponenten hinweg bei jeder unterstützten Breite. ## Die Lesereihenfolge vom Handy bis zum großen Bildschirm klar halten Ordnen Sie Inhalte in der Reihenfolge an, in der Menschen sie benötigen, und lassen Sie das visuelle Layout diese Abfolge verstärken. Responsives Design muss die Bedeutung erhalten und darf Inhalte nicht lediglich an kleinere Bildschirme anpassen. - Entwerfen Sie zuerst die Inhaltsreihenfolge für Mobilgeräte und erweitern Sie danach das Layout für breitere Bildschirme. - Halten Sie japanische Fließtextzeilen möglichst bei 35 bis 45 Zeichen und lateinischen Text bei 45 bis 75 Zeichen. - Trennen Sie Absätze im Web durch Abstand, statt sich auf einen Einzug der ersten Zeile zu verlassen. - Stellen Sie in jedem Abschnitt den Kernpunkt vor die Belege und die zugehörige Aktion hinter die Belege. - Sorgen Sie dafür, dass die Überschriftenfolge auch ohne Fließtext verständlich ist. - Bewahren Sie die logische Quellreihenfolge, wenn Spalten zusammenfallen oder Elemente verschoben werden. - Testen Sie Zoom, Textvergrößerung, schmale Breiten, lange Beschriftungen, Datumsangaben, Preise und gemischte Schriftsysteme. ## Gut lesbare Schriftgrößen und Zeilenabstände festlegen Typografie schafft Hierarchie, Lesbarkeit und Vertrauen. Verwenden Sie eine begrenzte Schriftgrößenskala und ausreichende Zeilenhöhe, damit Text auf kleinen Bildschirmen angenehm lesbar und bei unterschiedlichen Inhalten stabil bleibt. - Beginnen Sie bei H1 mit etwa 28 bis 36 Pixeln, bei H2 mit 22 bis 28, bei H3 mit 18 bis 20 und bei Fließtext mit 16 bis 18 Pixeln. - Verwenden Sie für Fließtext eine Zeilenhöhe nahe 1,6 und für Überschriften etwa 1,25 bis 1,4. - Verlassen Sie sich auf Mobilgeräten nicht auf Fließtext mit 13 bis 14 Pixeln oder weniger. - Begrenzen Sie Schriftfamilien und Schriftschnitte; schaffen Sie Unterschiede zunächst durch Hierarchie, bevor Sie weitere Schriftarten hinzufügen. - Behalten Sie für Japanisch den normalen Zeichenabstand bei und verwenden Sie eine dezente Laufweite für lateinischen Anzeigetext nur bei Bedarf. - Beschränken Sie Fetthervorhebung auf die wenigen Formulierungen, die das schnelle Erfassen tatsächlich unterstützen. - Testen Sie Ziffern, Symbole, mehrsprachige Zeichenfolgen, nutzergenerierten Text und fehlende Glyphen. ## Wenige Farben nutzen und genug Kontrast für Text sichern Farbe sollte Priorität, Zustand und Identität vermitteln, ohne zum einzigen Bedeutungsträger zu werden. Eine zurückhaltende Palette erleichtert es, die primäre Aktion und wichtige Zustandsänderungen zu erkennen. - Verwenden Sie einen dominierenden Hintergrund, eine unterstützende Abstufung für Text oder Flächen und einen kleinen Akzentanteil. - Beginnen Sie mit etwa drei Funktionsfarben sowie neutralen Farben und einer primären Akzentfarbe. - Weisen Sie Erfolg, Warnung, Gefahr und Information konsequent feste Farben zu. - Streben Sie für normalen Text mindestens 4,5:1 Kontrast und für großen Text 3:1 an. - Geben Sie der primären Aktion eine eindeutige Kombination aus Farbe, Form, Beschriftung und Platzierung. - Ergänzen Sie farbcodierte Zustände durch Text, Symbole, Muster oder andere nicht farbliche Hinweise. - Prüfen Sie jedes Vordergrund-Hintergrund-Paar, einschließlich deaktivierter Zustände sowie der Hover-, Fokus- und Bildüberlagerungszustände. ## Wiederkehrende Buttons und Bausteine zu gemeinsamen Komponenten machen Konsistenz senkt den Lernaufwand für Nutzende und den Wartungsaufwand für Teams. Überführen Sie wiederkehrende visuelle Entscheidungen in gemeinsame Tokens und Komponenten, statt einzelne Seiten nachträglich zu korrigieren. - Definieren Sie Tokens für Farbe, Abstand, Typografie, Radius, Rahmen, Schatten und Bewegung. - Erstellen Sie wiederverwendbare Schaltflächen, Karten, Navigationselemente, Formulare, Dialoge, Kennzeichnungen und Rückmeldungselemente. - Definieren Sie, wo zutreffend, Standard-, Hover-, Aktiv-, Deaktiviert-, Lade-, Fehler- und Fokuszustände. - Benennen Sie Varianten nach Zweck oder Rolle statt nach ihrem vorübergehenden Erscheinungsbild. - Halten Sie dieselbe Rolle im gesamten Produkt visuell und funktional konsistent. - Dokumentieren Sie zulässige Varianten, Inhaltsregeln, Anforderungen an die Barrierefreiheit und responsives Verhalten. - Ändern Sie die gemeinsame Komponente, wenn sich das Muster ändert; vermeiden Sie seitenspezifische Abweichungen. ## Bilder und Icons zum Erklären statt nur zur Deko einsetzen Bilder, Symbole und Diagramme sollten erklären, Orientierung geben oder Vertrauen unterstützen. Eine standardisierte Behandlung visueller Medien verbessert die wahrgenommene Qualität und verhindert zugleich, dass Dekoration die Botschaft verdeckt. - Weisen Sie wiederkehrenden Medienrollen wie Titelbildern und Karten einheitliche Seitenverhältnisse zu. - Skalieren Sie Bilder auf ihre angezeigten Abmessungen und bevorzugen Sie effiziente moderne Formate. - Stellen Sie responsive Quellen bereit und laden Sie Bilder außerhalb des sichtbaren Bereichs verzögert, sofern dadurch keine kritischen Inhalte verborgen werden. - Schreiben Sie Alternativtexte, die den Zweck des Bildes vermitteln und nicht lediglich sein Aussehen beschreiben. - Halten Sie Strichstärke, Ecken, Füllung und optische Größe von Symbolen innerhalb eines Satzes konsistent. - Strukturieren Sie Diagramme als Erklärung, visuelles Modell und knappe Kernaussage mit einer klaren Legende. - Prüfen Sie den Textkontrast über Bildern und sorgen Sie bei Bedarf für eine stabile Hintergrundbehandlung. ## Beim Klicken oder Tippen schnell und dezent reagieren Interaktionsgestaltung sollte zeigen, was bedienbar ist, Eingaben bestätigen, Fortschritt anzeigen und Ergebnisse rückmelden. Bewegung muss Zustandsänderungen verdeutlichen, ohne die Arbeit zu verzögern oder Unbehagen zu verursachen. - Geben Sie auf eine primäre Eingabe nach Möglichkeit innerhalb von etwa 100 Millisekunden eine sichtbare Rückmeldung. - Verwenden Sie kurze Hover- und Übergangsdauern, häufig etwa 120 bis 200 Millisekunden. - Definieren Sie für relevante Bedienelemente Rückmeldungen für Gedrückt-, Lade-, Erfolgs-, Fehler-, Deaktiviert- und Fokuszustände. - Verwenden Sie Fortschrittsanzeigen oder Skelettansichten, wenn der Abschluss nicht unmittelbar erfolgt. - Nutzen Sie Richtung und Beschleunigungsverlauf, um räumliche oder Ebenenänderungen zu erklären, statt sie nur zu dekorieren. - Vermeiden Sie Animationen, die mit Inhalten konkurrieren, Aufmerksamkeit festhalten oder Eingaben blockieren. - Respektieren Sie Einstellungen für reduzierte Bewegung und spielen Sie ablenkende Hintergrundmedien nicht automatisch ab. ## Aufgaben auch mit Tastatur und Screenreader abschließbar machen Barrierefreiheit ist eine grundlegende Interaktionsanforderung und keine abschließende visuelle Prüfung. Menschen müssen Zustände wahrnehmen, Bedienelemente verstehen, navigieren, Fehler beheben und den primären Ablauf mit unterschiedlichen Ein- und Ausgabemethoden abschließen können. - Bewahren Sie eine sichtbare Fokusanzeige und eine logische Tastaturreihenfolge. - Gestalten Sie interaktive Ziele nach Möglichkeit mindestens 44 mal 44 Pixel groß. - Versehen Sie Bilder mit aussagekräftigen Alternativen, Bedienelemente mit zugänglichen Namen und Formularfelder mit eindeutigen Beschriftungen. - Sorgen Sie dafür, dass Fehlermeldungen das Feld benennen, das Problem erklären und die Korrektur angeben. - Stellen Sie Untertitel oder Transkripte für bedeutsame Audio- und Videoinhalte bereit. - Prüfen Sie den gesamten kritischen Ablauf ausschließlich mit der Tastatur und mit der Ausgabe eines Bildschirmleseprogramms. - Testen Sie Kontrast, Zoom, Textgrößenänderung, reduzierte Bewegung und häufige Unterschiede des Farbsehens. ## Vor dem Start Ladezeit und Grundlagen für Suchmaschinen prüfen Leistung, Auffindbarkeit und Wartbarkeit sind Bestandteile des gestalteten Erlebnisses. Definieren Sie messbare Freigabeprüfungen und bewahren Sie Entscheidungen, damit Verbesserungen routinemäßige Änderungen an Inhalten und Komponenten überstehen. - Verwenden Sie responsive, komprimierte Bilder und laden Sie nicht kritische Ressourcen nur bei Bedarf. - Reduzieren Sie Schriftarten auf benötigte Zeichen, erlauben Sie Ersatzdarstellung, minimieren Sie blockierende Stile und laden Sie nicht wesentliche Skripte verzögert. - Geben Sie jeder Seite genau eine aussagekräftige H1 sowie einen eindeutigen Titel, eine Beschreibung und eine Vorschau für soziale Medien. - Verwenden Sie als Ausgangsziele LCP unter 2,5 Sekunden und CLS unter 0,1 und wenden Sie anschließend die aktuellen Leistungsstandards an. - Testen Sie Geschwindigkeit und Abbruchrate im wichtigsten Registrierungs-, Kauf- oder Anfrageablauf. - Prüfen Sie vor der Freigabe Hierarchie, Abstände, Typografie, Farbe, Zustände, Medien, Barrierefreiheit und Leistung. - Halten Sie Gestaltungsentscheidungen fest und setzen Sie Änderungen über gemeinsame Komponenten und Tokens um. - Überwachen Sie Ergebnisse realer Nutzender und passen Sie Schwellenwerte an, wenn Belege einen besseren Standard zeigen.