Modernes Interface Design

Modernes Interface Design

0:00 Jetzt wird die Struktur aus dem letzten Modul sichtbar. Es geht um Layout, Schrift, Farbe, Bewegung — also um das, was die meisten Menschen meinen, wenn sie Design sagen. Aber achten Sie auf etwas: Mindestens vier Entscheidungen in diesem Modul sind gleichzeitig Entscheidungen über Barrierefreiheit. Die Schriftgröße in der falschen Einheit macht die Vergrößerung wirkungslos. Farbe ohne zweite Codierung verliert Information.

0:25 Das gehört ausgesprochen, weil es sonst untergeht — hier entscheidet niemand über Geschmack, hier entscheidet jemand über Zugänglichkeit. Und der Leitsatz vorweg: Nähe gruppiert stärker als jeder Rahmen, und Farbe allein trägt keine Bedeutung.

Modernes Interface Design

0:39 Neun Kapitel, die von der Fläche zur Situation führen. Erst Hierarchie und Layout, dann Typografie und Farbe — das sind die klassischen Gestaltungsmittel. Danach wird es technischer: responsive Gestaltung, Eingabearten, Systemeinstellungen für Farbschema, Kontrast und Bewegung. Zum Schluss die Frage, wie sich Nutzung zwischen Telefon und Schreibtisch unterscheidet.

1:01 In der Übung entwerfen Sie dann eine Ergebniskarte für drei Breiten — und werden feststellen, dass das Weglassen die eigentliche Entwurfsarbeit ist.

Visuelle Hierarchie, Layout, Abstände und Gruppierung

1:10 Beginnen wir mit dem, was vor dem Lesen passiert. Bevor jemand ein Wort erfasst hat, hat sein Auge schon entschieden, was hier wichtig ist. Diese Entscheidung treffen Sie — über Größe, Abstand und Fläche. Es gibt einen sehr einfachen Test dafür: Kneifen Sie die Augen zusammen, bis nur noch Flächen und Grautöne übrig sind.

1:30 Was dann noch hervorsticht, ist Ihre Hierarchie — alles andere ist Wunschdenken. Der zweite Grundsatz ist noch wichtiger und wird ständig übersehen: Nähe gruppiert stärker als jeder Rahmen. Unser Wahrnehmungsapparat verbindet, was beieinandersteht, ganz automatisch und schneller, als jede Linie wirken kann. Bei der Fahrtwind-Ergebniskarte heißt das konkret: Preis, Abfahrtszeit und Umstiege dominieren, alles andere ordnet sich unter.

1:56 Und zwar durch Größe und Abstand — nicht durch Kästen um alles herum. Vier Diagnosezeichen, die Sie an jedem Entwurf sofort prüfen können. Erstens: Alles ist gleich groß, gleich dunkel und gleich weit voneinander entfernt — das ist die demokratische Oberfläche, in der nichts führt. Zweitens: Rahmen und Linien müssen leisten, was Abstände nicht leisten. Wenn ein Entwurf viele Trennlinien braucht, fehlt meist der Weißraum.

2:22 Drittens ein sehr aussagekräftiges Zeichen: Die Karte wird gelesen statt erfasst — der Blick läuft Zeile für Zeile, statt zu springen. Und viertens ein Zukunftsproblem: Neue Information findet keinen Platz, ohne alte zu verdrängen. Eine Hierarchie hat Ebenen, in die man einsortieren kann. Eine flache Fläche hat nur Plätze.

2:43 Der erste Stolperstein ist der häufigste im ganzen Kapitel: Zusammengehöriges mit demselben Abstand zu Fremdem setzen. Dann muss der Leser die Zusammengehörigkeit erschließen, statt sie zu sehen — und das kostet bei jedem einzelnen Blick Zeit. Der zweite: Hierarchie über Farbe herstellen, wo Größe und Abstand nötig wären.

3:02 Farbe ist ein schwaches Hierarchiemittel, und bei eingeschränktem Farbsehen oder im Graustufendruck ist sie gar keines. Und der dritte ist ein Mengenproblem: mehr als drei Ebenen. Ab der vierten kann niemand mehr unterscheiden, ob etwas Ebene drei oder vier ist — die Ebenen existieren dann nur noch im Entwurfsdokument.

Typografie, Lesbarkeit und Informationsdichte

3:21 Weiter zur Schrift. Und gleich vorweg eine Entwarnung für alle, die stundenlang Schriftarten vergleichen: Die Schriftwahl ist nicht der wichtigste Hebel. Zeilenlänge und Zeilenabstand schlagen sie deutlich. Über Lesbarkeit entscheiden drei Größen, und keine davon heißt Schriftart: Schriftgröße, Zeilenlänge und Zeilenabstand.

3:41 Als Richtwert haben sich sechzig bis achtzig Zeichen pro Zeile eingebürgert — darüber verliert das Auge beim Zeilensprung den Anschluss, darunter wird es hakelig. Der praktisch wichtigste Punkt ist aber die Basisschriftgröße: Sie sollte nie unter dem Browserstandard liegen. Diese Einstellung haben Menschen bewusst gesetzt, oft weil sie sonst schlecht lesen können. Sie ist eine Nutzeraussage, keine Gestaltungsfläche.

4:05 Und noch ein Wort zur Dichte: Sie ist kein Fehler an sich. Eine Fahrplantabelle darf dicht sein, ein Erklärtext nicht. Hier sehen Sie einen der wirkungsvollsten Zweizeiler des ganzen Seminars. Oben eine feste Pixelangabe für die Grundschrift. Das sieht harmlos aus und hat eine unangenehme Folge: Wer im Browser eine größere Standardschrift eingestellt hat, bekommt sie nicht — Sie haben seine Einstellung überschrieben.

4:30 Unten dieselbe Angabe in einer relativen Einheit, die sich auf die Wurzelgröße bezieht, also genau auf das, was die Person eingestellt hat. Dazu ein größerer Zeilenabstand und eine Begrenzung der Textbreite in Zeichen statt in Pixeln. Der Aufwand ist null, der Unterschied für viele Menschen erheblich. Das ist typisch für dieses Thema: Es kostet meist kein Geld, nur Aufmerksamkeit.

4:53 Der erste Stolperstein ist der eben gezeigte: Basisschriftgrößen in Pixeln festnageln und damit die Vergrößerung wirkungslos machen. Für Menschen, die auf eine größere Schrift angewiesen sind, ist das eine echte Barriere — und sie ist unsichtbar, weil auf Ihrem Rechner alles gut aussieht. Der zweite: die Zeilenlänge über die volle Bildschirmbreite laufen lassen.

5:14 Auf einem breiten Monitor ergibt das Zeilen mit hundertfünfzig Zeichen, bei denen jeder Zeilensprung ein kleines Suchspiel ist. Und der dritte ist ein Missverständnis in die andere Richtung: Dichte pauschal als Fehler behandeln. Fahrpläne, Tabellen und Vergleichsansichten leben von Dichte. Luft ist kein Selbstzweck.

Farbkonzepte und die Bedeutung von Farbe

5:32 Jetzt zur Farbe — und das ist die erste Stelle in diesem Seminar, an der ein Prüfkriterium der Barrierefreiheit direkt in die Gestaltung greift. In Modul dreizehn kommt es mit konkreten Werten zurück. Farbe trägt Bedeutung, das ist ihre große Stärke. Aber sie darf sie nie allein tragen. Nehmen Sie den belegten Sitzplatz bei Fahrtwind: Ein Grauton statt Blau reicht nicht — es braucht zusätzlich ein Symbol oder eine Beschriftung.

5:58 Denn etwa jeder zwölfte Mann hat eine Farbsehschwäche, und dazu kommen alle, die gerade in der Sonne stehen, einen billigen Monitor haben oder die Seite ausdrucken. Ein gutes Farbkonzept legt deshalb nicht nur Werte fest. Es legt für jede Bedeutung fest, welche zweite Codierung sie begleitet. Diese Liste ist der eigentliche Wert des Konzepts, nicht die Palette.

6:19 Diese Tabelle ist im Grunde eine Vorlage, die Sie direkt in Ihr Projekt übernehmen können. Für jede Bedeutung eine Zeile, links die Farbe, rechts die zweite Codierung. Belegter Sitzplatz: Kreuzsymbol und Beschriftung. Verspätung: das Wort und die Minutenzahl, nicht nur eine rote Zeile. Fehlendes Pflichtfeld: ein Fehlertext beim Feld, nicht nur ein roter Rahmen — dazu kommen wir in Modul elf ausführlich.

6:45 Aktiver Filter: ein schließbares Kärtchen, was gleichzeitig das Zurücknehmen aus Modul vier löst. Sie sehen: Die zweite Codierung ist fast nie nur ein Zugeständnis. Sie macht die Oberfläche für alle klarer. Der erste Stolperstein hat einen sehr einfachen Test: Zustände nur über Farbe unterscheiden. Drucken Sie die Seite in Graustufen aus — was jetzt nicht mehr unterscheidbar ist, war nie robust codiert.

7:11 Der zweite betrifft die beliebtesten Farben überhaupt: Ampelfarben verwenden, ohne Rot und Grün zusätzlich zu benennen. Ausgerechnet Rot und Grün ist die häufigste Farbsehschwäche. Und der dritte ist ein Prozessfehler: die Palette festlegen, ohne die Kontrastwerte der Paare zu prüfen. Nicht die Einzelfarbe zählt, sondern die Kombination — Text auf Fläche, Symbol auf Hintergrund. Prüfen Sie die Paare, bevor die Palette in das Design System wandert.

Responsive und adaptive Gestaltung

7:38 Weiter zur Frage, wie sich eine Oberfläche an verschiedene Breiten anpasst. Technisch ist das gelöst. Inhaltlich passiert dabei regelmäßig etwas, das niemandem auffällt — und genau darum geht es hier. Zwei Ansätze, beide legitim: Responsive Layouts fließen stufenlos mit, adaptive springen zwischen definierten Varianten. Welchen Sie wählen, ist eine technische und gestalterische Entscheidung.

8:03 Entscheidend ist etwas anderes, und das gilt für beide: Keine Funktion und kein Inhalt darf bei einer Breite verschwinden. Der häufigste Fehler im Netz ist die mobile Fassung, in der ein Filter, ein Hinweis oder eine Zusatzinformation stillschweigend fehlt. Stillschweigend ist dabei das Schlüsselwort — es ist niemandem aufgefallen, weil niemand nachgesehen hat. Fragen Sie das nachher ruhig im eigenen Produkt nach.

8:27 Die Trefferquote ist erschreckend hoch. Fünf Schritte, die aus dem Weglassen eine bewusste Entscheidung machen. Sie listen zuerst auf, was die Ansicht bei voller Breite trägt — schriftlich, das ist der Trick. Dann entscheiden Sie je Inhalt: sichtbar bleiben, gestaffelt anzeigen oder entfallen. Zu jedem Entfallen notieren Sie einen Grund und einen Ersatzweg, und den Ersatzweg prüfen Sie auf Tastaturerreichbarkeit — sonst haben Sie eine Barriere eingebaut, wo Sie ein Problem lösen wollten.

8:55 Der fünfte Schritt ist der, der den ganzen Aufwand rechtfertigt: die schmale Fassung gegen die Liste aus Schritt eins abgleichen. Ohne diese Liste fällt das stillschweigend Verlorene niemandem auf. Der erste Stolperstein kennen Sie schon aus Modul vier: Inhalte per Anzeigeregel ausblenden und sie im Baum fokussierbar lassen.

9:15 Der Tastaturfokus wandert dann in unsichtbare Bereiche. Der zweite ist ein Wartungsproblem mit Ansage: zwei getrennte Fassungen pflegen, von denen eine stets hinterherhinkt. Sie können raten, welche — die mobile, obwohl sie oft die meistgenutzte ist. Und der dritte ist ein Prüffehler: nur die Breakpoints prüfen und die Bereiche dazwischen auslassen.

9:35 Ziehen Sie das Fenster einmal langsam von schmal nach breit. Die kaputten Zustände liegen fast immer zwischen den Sprungpunkten, nicht auf ihnen.

Touch, Tastatur, Sprache und alternative Eingaben

9:44 Jetzt zu einem Kapitel, das viele überrascht. Eine Oberfläche wird nicht nur mit der Maus bedient — und die Anforderungen der anderen Eingabearten sind unterschiedlich genug, dass sie einzeln bedacht werden müssen. Jede Eingabeart stellt ihre eigene Bedingung. Touch braucht große Ziele und verzeiht keine Interaktion, die nur bei Mauszeiger-Kontakt erscheint — ein Finger schwebt nicht.

10:07 Die Tastatur braucht eine sinnvolle Reihenfolge; dazu kommt Modul zehn ausführlich. Der überraschendste Fall ist die Sprachsteuerung. Wer „Klick Buchen" sagt, dessen Software sucht nach einem Bedienelement mit genau diesem Namen. Wenn die sichtbare Beschriftung „Buchen" heißt, der hinterlegte zugängliche Name aber „Weiter zur Zahlung", greift der Befehl ins Leere — obwohl die Schaltfläche sichtbar davorsteht.

10:31 Sichtbarer Text und zugänglicher Name müssen zusammenpassen. Achten Sie auf die zweite Zeile von oben: Bei der Maus steht in der Bruchspalte „kaum etwas — der Normalfall". Das ist die Diagnose des ganzen Kapitels. Wir entwerfen und testen mit der Maus, deshalb funktioniert sie, und deshalb fallen die anderen drei durchs Raster. Touch bricht, wenn Hover der einzige Auslöser ist.

10:54 Tastatur bricht bei Eigenbau-Widgets ohne Tastenmuster — dazu kommen wir in Modul zwölf. Und Sprache bricht bei Icon-Schaltflächen ohne sichtbaren Text, weil es dann schlicht nichts zu sagen gibt. Nehmen Sie die rechte Spalte als Prüfliste mit: vier Fragen, die Ihr Mausrundgang niemals stellt. Der erste Stolperstein ist der Hover-Reflex: Wichtige Information nur beim Überfahren mit der Maus zeigen.

11:19 Auf dem Telefon existiert sie damit nicht — und mobile Nutzung ist bei den meisten Anwendungen inzwischen die Mehrheit. Der zweite ist der Sprachsteuerungsfall von eben, in Code gegossen: ein zugänglicher Name, der von der sichtbaren Beschriftung abweicht. Gut gemeint, ausführlicher formuliert, und trotzdem eine Barriere. Und der dritte ist ein Maßstabsfehler: Zielgrößen am Mauszeiger bemessen statt am Finger.

11:44 Ein Mauszeiger ist ein Pixel genau, eine Fingerkuppe ist etwa einen Zentimeter breit. Konkrete Mindestwerte dazu bringt Modul dreizehn.

Dark Mode, High Contrast und Benutzerpräferenzen

11:53 Kommen wir zu den Systemeinstellungen. Moderne Betriebssysteme geben Ihren Nutzern die Möglichkeit, ihre Bedürfnisse einmal zentral zu hinterlegen. Sie können das auslesen — und sollten es als Aussage behandeln, nicht als Vorschlag. Das ist eine der schönsten Entwicklungen der letzten Jahre: Menschen stellen ihre Bedürfnisse einmal im System ein, und jede Anwendung kann sie berücksichtigen.

12:16 Niemand muss in Ihren Einstellungen nach einem Schalter suchen. Sie können Farbschema, Kontrastwunsch und Bewegungswunsch abfragen und darauf reagieren. Der Preis dafür ist Sorgfalt an einer Stelle, die gern vergessen wird: Die Kontrastwerte müssen in jedem Modus einzeln geprüft werden. Sie übertragen sich nicht. Ein Grauton, der auf Weiß bequem lesbar ist, kann auf Dunkelblau durchfallen. Ein dunkler Modus ohne eigene Prüfung ist deshalb erfahrungsgemäß der schlechtere von beiden.

12:45 Was Sie hier sehen, ist das Grundmuster: eine Palette in Variablen, und darunter zwei Abfragen, die einzelne Werte überschreiben. Das Entscheidende ist die Bauweise — nicht das ganze Stylesheet verdoppeln, sondern nur die Farbwerte austauschen. Damit bleibt Ihre gesamte Gestaltung gültig, und Sie pflegen an einer Stelle. Sie sehen zwei Abfragen: eine für das Farbschema, eine für einen erhöhten Kontrastwunsch.

13:09 Die dritte, für reduzierte Bewegung, kommt im nächsten Kapitel. Und die Fußzeile wiederholt den wichtigsten Satz: Jeder dieser Modi braucht eine eigene Kontrastprüfung. Die Werte aus dem hellen Modus gelten im dunklen einfach nicht. Der erste Stolperstein ist die Abkürzung, die alle einmal probieren: den dunklen Modus durch Invertieren erzeugen.

13:30 Das Ergebnis sieht immer falsch aus — Fotos werden zu Negativen, Schatten zu Lichtern, und Weiß auf Schwarz blendet bei voller Sättigung erheblich. Der zweite: nur das Farbschema auswerten und Kontrast- und Bewegungswunsch ignorieren. Das sind drei getrennte Aussagen von drei verschiedenen Bedürfnissen. Und der dritte ist ein Kompetenzstreit: eine eigene Umschaltung anbieten, die die Systemeinstellung überstimmt.

13:55 Eine eigene Umschaltung ist völlig in Ordnung — sie sollte nur vom Systemwunsch ausgehen und ihn nicht ignorieren.

Bewegung und Animation bewusst einsetzen

14:02 Damit zur Bewegung. Sie kann viel leisten und sie kann Menschen körperlich unwohl machen. Das klingt dramatisch und ist es auch — vestibuläre Beschwerden sind kein Randphänomen, und die Abhilfe kostet fünf Zeilen. Animation hat einen echten Nutzen: Sie zeigt Zusammenhänge. Wohin sich ein Panel öffnet, woher ein Hinweis kommt, wohin ein gelöschtes Element verschwindet — das versteht man mit Bewegung schneller als ohne.

14:27 Die Kehrseite ist ernst zu nehmen. Größere Bewegungen, Parallaxeeffekte und automatisch laufende Karussells können bei Menschen mit vestibulären Störungen Schwindel und Übelkeit auslösen. Das ist keine Empfindlichkeit, das ist eine körperliche Reaktion. Die Regel lautet deshalb: kurz, zweckgebunden, und immer mit einer reduzierten Variante für alle, die im System weniger Bewegung eingestellt haben.

14:51 Diese Einstellung existiert, weil Menschen sie brauchen. Fünf Zeilen, mehr braucht es nicht — und trotzdem fehlen sie in den meisten Projekten. Oben eine Überführung, die immer läuft. Unten dieselbe Regel innerhalb einer Abfrage auf den Bewegungswunsch, die den Weg durch den Raum durch ein sanftes Ein- und Ausblenden ersetzt.

15:10 Achten Sie auf die Fußzeile, denn das ist der verbreitete Fehler in der Gegenrichtung: Schalten Sie nicht alles ab. Ein kurzes Ein- und Ausblenden löst keine Beschwerden aus und hilft weiterhin, den Zusammenhang zu verstehen. Wer bei reduzierter Bewegung alle Übergänge auf null setzt, nimmt genau die Orientierungshilfe weg, die eigentlich nützlich war.

15:31 Der erste Stolperstein: Parallaxe und große Bewegungen ohne reduzierte Variante ausliefern. Das ist der Fall, der Menschen tatsächlich körperlich trifft. Der zweite ist der eben genannte Überschuss — bei reduzierter Bewegung sämtliche Übergänge entfernen und dabei die Zusammenhänge verlieren. Reduziert heißt reduziert, nicht abgeschaltet. Und der dritte ist ein Ehrlichkeitsproblem: Animationen zur Kaschierung langer Ladezeiten einsetzen.

15:57 Eine hübsche Bewegung macht das Warten nicht kürzer, sie verhindert nur, dass jemand merkt, wie lange es dauert. Sagen Sie lieber, worauf gewartet wird — das ist die Antwort aus Modul vier auf denselben Fall.

Mobile, desktopbasierte und hybride Nutzung

16:10 Das letzte inhaltliche Kapitel schließt an Modul zwei an. Es geht nicht um Bildschirmgrößen, sondern um Situationen — denn dieselbe Aufgabe wird auf dem Telefon anders erledigt als am Schreibtisch. Bei Fahrtwind sehen wir ein sehr typisches Muster: Auf dem Desktop wird verglichen, auf dem Telefon wird umgebucht und das Ticket vorgezeigt.

16:30 Das sind zwei verschiedene Aufgaben mit zwei verschiedenen Dringlichkeiten. Wer das weiß, priorisiert je Gerät andere Funktionen — statt ein Layout nur zu verkleinern. Das ist der eigentliche Unterschied zwischen technischer und inhaltlicher Anpassung. Technisch ist die verkleinerte Fassung schnell gemacht. Inhaltlich richtig wäre es, auf dem Telefon die nächste Fahrt und das Ticket nach oben zu holen und die Vergleichsfunktionen zurückzustellen.

16:55 Das kostet nicht mehr Aufwand, nur eine Entscheidung. Die interessanteste Zeile ist die letzte. Auf dem Desktop geht schief, dass zu wenig Information gezeigt wird — dort ist Platz, und Menschen wollen vergleichen. Auf dem Telefon geht schief, dass das Ticket erst nach einer Anmeldung erscheint. Stellen Sie sich die Situation vor: jemand steht am Bahnsteig, der Bus fährt gleich, und die Anwendung fragt nach dem Passwort.

17:20 Das ist kein Detailproblem, das ist der Moment, in dem eine Anwendung ihre wichtigste Aufgabe verfehlt. Denken Sie an den Nutzungskontext-Steckbrief aus Modul zwei — genau dafür ist er da. Der erste Stolperstein: die mobile Fassung als verkleinerten Desktop entwerfen. Dann stimmen die Größen und die Prioritäten nicht. Der zweite ist ein Denkfehler, den ich für den wichtigsten des Kapitels halte: Gerät mit Nutzungssituation gleichsetzen.

17:46 Auch am Schreibtisch wird gehetzt, auch auf dem Sofa wird in Ruhe verglichen. Das Gerät ist ein Hinweis auf die Situation, kein Beweis. Und der dritte ist der eben besprochene Ernstfall: die häufigste mobile Aufgabe hinter eine Anmeldung legen. Wenn Ihre Nutzer unterwegs vor allem ihr Ticket brauchen, muss das Ticket ohne Anmeldung erreichbar sein — natürlich abgesichert, aber erreichbar.

Übung — eine Ergebniskarte auf drei Breiten entwerfen

18:10 In der Übung entwerfen Sie dieselbe Karte dreimal. Der Lerneffekt liegt dabei nicht im Entwerfen, sondern im Weglassen — und in dem Abgleich am Ende, der zeigt, was Sie unbemerkt verloren haben. Sie entwerfen die Fahrtwind-Ergebniskarte für drei Breiten. Geübt wird das Priorisieren nach Breite und vor allem das Begründen jedes Weglassens — ohne dass Information verloren geht.

18:32 Erfolgreich sind Sie, wenn drei Entwürfe vorliegen, zu jedem Weglassen ein Grund und ein Ersatzweg notiert ist und der Abgleich am Ende keine verlorene Information zeigt. Ein Hinweis aus der Erfahrung: Gruppen streichen fast immer die Umstiegsangabe zuerst, weil sie unscheinbar aussieht. Beim Abgleich merken sie dann, dass genau diese Angabe die Kaufentscheidung trägt.

18:52 Wer früh fertig ist, prüft die schmale Fassung zusätzlich im dunklen Modus und bei reduzierter Bewegung. Der Ablauf beginnt mit der Liste — alle Inhalte der Karte, geordnet nach Entscheidungsrelevanz. Diese Ordnung ist bereits die halbe Arbeit, denn sie zwingt Sie zu sagen, was jemand zum Entscheiden braucht. Dann entwerfen Sie die breite Fassung, ausdrücklich mit klarer Hierarchie statt mit Rahmen.

19:16 Danach leiten Sie die mittlere und die schmale Fassung ab, jeweils mit Begründung und Ersatzweg. Und dann kommt der Abgleich gegen die Liste. Die Fußzeile enthält die Regel, an der Sie sich festhalten können: Kein Weglassen ohne Ersatzweg. Wer nichts ersetzen kann, hat etwas Tragendes gestrichen. Der erste Stolperstein ist eine Reihenfolgefrage mit Folgen: mit der breiten Fassung beginnen und die schmale daraus zusammenschieben.

19:42 Dann entsteht die schmale Fassung durch Druck statt durch Entscheidung. Der zweite ist der ehrlichste Satz des Kapitels: Inhalte streichen, weil sie nicht passen, statt weil sie entbehrlich sind. Das ist ein enormer Unterschied und er entscheidet über die Qualität der mobilen Fassung. Und der dritte ist der, der die Übung wertlos macht: den Abgleich weglassen.

20:02 Er ist der einzige Schritt, der Verluste findet — alle anderen produzieren nur Entwürfe, und die sehen immer plausibel aus. Vier Punkte. Nähe gruppiert stärker als Rahmen — Hierarchie entsteht aus Größe und Abstand, nicht aus Linien. Basisgrößen in relativen Einheiten statt in Pixeln, sonst wirkt die Nutzereinstellung nicht und Sie haben eine unsichtbare Barriere gebaut.

20:24 Jede über Farbe getragene Bedeutung braucht eine zweite Codierung — Symbol, Text oder Beschriftung. Und Systemeinstellungen für Farbschema, Kontrast und Bewegung sind Aussagen über Bedürfnisse, keine Vorschläge. Wie Sie im Titel gehört haben: Vier Entscheidungen dieses Moduls sind zugleich Entscheidungen über Barrierefreiheit. Die konkreten Prüfwerte dazu bringt Modul dreizehn.

20:46 Als Nächstes geht es darum, wie man solche Entscheidungen einmal trifft und überall wiederverwendet.