Responsive & barrierefreie UI
Oberflächen, die sich an Bildschirm, Geräteeinstellungen und die nutzende Person anpassen
Eine responsive Oberfläche passt ihr Layout an den Bildschirm an. Eine adaptive Oberfläche berücksichtigt zusätzlich die Geräteeinstellungen der Nutzer – etwa Textgröße, Dark Mode, Kontrast und reduzierte Bewegung – und zeigt jeder Rolle die Werkzeuge, die sie braucht. Wir bauen für beides und testen gegen WCAG 2.2 AA.
Layouts, die in jeder Größe funktionieren
Wir gestalten Layouts für die gesamte Bandbreite an Bildschirmen, die Ihre Zielgruppe tatsächlich nutzt – vom kleinen Smartphone bis zum Wanddisplay. Mit Container Queries passt sich eine Komponente an den Platz an, den sie erhält, nicht nur an die Fensterbreite. So bleibt eine Karte lesbar, ob sie in einer Seitenleiste sitzt oder die ganze Seite füllt. Layouts werden auf echten Geräten bei den Zwischenbreiten getestet, an denen meist etwas bricht.
Die Geräteeinstellungen der Nutzer respektieren
Viele Nutzer haben ihrem Gerät bereits gesagt, wie sie lesen möchten. Diese Einstellungen respektieren wir:
Textgröße
Schrift wird in relativen Einheiten gesetzt und skaliert mit der Textgrößeneinstellung des Betriebssystems. Layouts brechen um, statt abzuschneiden.
Farbschema
prefers-color-scheme wechselt zwischen hellem und dunklem Theme, beide aus denselben Tokens gebaut.
Kontrast
prefers-contrast und der Windows-Modus forced-colors erhalten eigene Styles.
Bewegung
prefers-reduced-motion schaltet Parallax-Effekte und große Übergänge ab.
Transparenz
prefers-reduced-transparency ersetzt Unschärfe- und Glaseffekte durch massive Flächen.
Industrie- und Hochrisiko-Oberflächen
Bediener in der Fabrikhalle, Lagerpersonal und Pflegekräfte am Stationsterminal nutzen Software anders als Büroangestellte. Für diese Umgebungen gestalten wir:
- Touch-Ziele deutlich über dem WCAG-Minimum, auch mit Handschuhen bedienbar.
- Kontrastreiche Farbpaletten, lesbar bei Blendung und aus der Entfernung.
- Statusanzeigen, die nicht allein auf Farbe setzen.
- Bestätigungsschritte, die den tatsächlichen Kosten eines Fehlers entsprechen.
- Kiosk-Modus ohne Browser-Oberfläche und mit automatischer Wiederherstellung nach einem Absturz.
Layout, Zugriffsebenen und Customer Journey
Unterschiedliche Rollen brauchen unterschiedliche Screens. Wir bilden die Customer Journey jeder Rolle ab und bauen Layouts, die die häufigsten Aufgaben jeder Person nach vorn stellen. Berechtigungen spiegeln sich in der UI wider, sodass niemand auf Buttons stößt, die er nicht nutzen kann. Ladezustände verwenden Skeletons in der Form des kommenden Inhalts – das reduziert Layoutverschiebungen und lässt Wartezeiten kürzer wirken.
FAQ
Häufig gestellte Fragen
01Nach welchem Barrierefreiheitsstandard bauen Sie?
Standardmäßig nach WCAG 2.2 Stufe AA, geprüft mit automatisierten Tests in der CI und manuellen Tests mit Screenreadern und reiner Tastaturbedienung.
02Macht die Berücksichtigung der Systemtextgröße unser Design kaputt?
Nicht, wenn das Layout dafür gebaut ist. Wir testen jeden Screen schon während der Entwicklung mit großer Schrift, nicht erst nach dem Launch.
Nächster Schritt
Beginnen Sie mit einem Review des Bestehenden
Senden Sie uns Ihr Repository oder einen Staging-Link. Wir melden uns mit den drei Änderungen, die den größten Unterschied für Ihre Release-Geschwindigkeit, Performance und Zuverlässigkeit machen würden.