Design System für die Barrierefreiheit
Ein barrierefreies Design System als Standard für die konsistente Nutzererfahrung
Das ITZBund hat mit DESYBRI ein barrierefreies Design System entwickelt. Mit dem Baukasten für Bedienoberflächen können Entscheidungsträgerinnen und -träger sowie Entwicklungsteams effizient nutzerfreundliche und barrierefreie digitale Lösungen anbieten.
Leistung Barrierefrei by Design
Das Design System DESYBRI vereint eine Design Library, eine Development Library, Qualitätskriterien und den hybriden Design- und Entwicklungsprozess. Das Besondere im Vergleich zu herkömmlichen Design Systemen: Die Barrierefreiheit ist von Beginn an ein zentraler Faktor bei der Gestaltung, indem Anforderungen an die Barrierefreiheit frühzeitig identifiziert und berücksichtigt werden. Angestrebt ist mit AAA die höchste Konformitätsstufe der Barrierefreiheit der WCAG (Web Content Accessibility Guidelines).
Die konsistente Usability wurde für komplexe Fachverfahren optimiert. Sie eignet sich ebenso für einfache Anwendungen. Alle Prozessabläufe sind mit Nutzenden getestet und gewährleisten so eine hohe Nutzerfreundlichkeit und -akzeptanz. Die verlässliche Nutzerführung sorgt für Vertrauen in die digitalen Dienste.
Atomic Design als Basis
Das Design System DESYBRI beruht auf dem Atomic Design Ansatz – eine Methode für eine konsistente und modulare Gestaltung von Oberflächen. Es besteht aus wiederverwendbaren, aufeinander aufbauenden Bausteinen, die auf verschiedene Weisen kombiniert werden können. Diese Bausteine werden in fünf Kategorien unterteilt:
- Protonen (z. B. Farben, Typografie, Icons)
- Atome (z. B. Buttons, Eingabefelder)
- Moleküle (z. B. Suchleiste aus Buttons und Eingabefeldern)
- Organismen (z. B. Seitenleiste aus Molekülen und Atomen) und
- Templates (Seitenlayout aus Molekülen und Organismen)
Die „Protonen“ basieren zumeist auf einem vorgegebenen Styleguide. Werden Farben, Formen und Typografie auf Ebene der Protonen ausgetauscht, verändern sich ebenso die anderen Bausteine und die Oberfläche erhält ein neues Look and Feel. So können mit einem Design System mehrere Themes abgebildet werden. Durch die Modularität lassen sich bei Entwicklung und Design konsistente, skalierbare und benutzerfreundliche Oberflächen schnell und einfach erstellen.
DESYBRI setzt auf KoliBri
KoliBri ist die Open Source Komponentenbibliothek des ITZBund, welche auf barrierefreie Webkomponenten setzt. Diese Webkomponenten wurden in der Development Library von DESYBRI verwendet, auf das DESYBRI Design angepasst und durch weitere Funktionalitäten erweitert. Durch den von Beginn an engen Austausch der beiden Teams konnte sowohl KoliBri als auch DESYBRI weiter wachsen. Mittlerweile ist DESYBRI das Standard-Theme der Komponentenbibliothek KoliBri.
DESYBRI als Standard für digitale Dienste
Das Design System DESYBRI wurde mit der Vision entwickelt, projektübergreifend einen nutzerzentrierten Standard zu definieren, um eine barrierefreie und konsistente Nutzerführung über unterschiedliche digitale Dienste hinweg zu gewährleisten. Projektverantwortliche und Umsetzende können mit DESYBRI nutzerfreundliche barrierefreie Oberflächen bereitstellen und dabei die Best Practices aus dem Baukasten nutzen.
DESYBRI wurde im Rahmen der Modernisierung komplexer Fachverfahren entwickelt. DESYBRI wird mit mehreren Entwicklungsteams für vielfältige Anwendungsfälle kontinuierlich erweitert und verbessert. Das Design System ermöglicht es den Teams, effizient Oberflächen zu entwickeln und zu testen.
Leistungsangebot Das ist im Design System DESYBRI enthalten
DESYBRI ist ein Baukasten bestehend aus einer Design Library, einer Development Library, Qualitätskriterien und dem hybriden Design- und Entwicklungsprozess.
-
Design Library
Gestaltungsvorgaben, Vorlagen, Zustandsvarianten, Beispiele und Best Practices reduzieren den Aufwand -
Development Library
Fertig entwickelte barrierefreie Komponenten ermöglichen eine schnelle Softwarenentwicklung -
Qualitätskriterien
Checklisten für Barrierefreiheit, UX-Writing und Usability sichern einen hohen und verlässlichen Qualitätsstandard -
Hybrider Design- und Entwicklungsprozess
Ein Vorgehensmodell, das nutzerzentriertes Design mit der agilen Entwicklung verbindet und so eine enge Zusammenarbeit sicherstellt, die wiederum hohe Qualität gewährleistet
Vorteile auf einen Blick
Ein Standard für alle
- UX-Richtlinien und nachnutzbare UI-Elemente für Konsistenz
- Hohe Qualitätskriterien und enge Zusammenarbeit der Umsetzenden
- Zeit- und Kosteneinsparung durch getestete Komponenten
- Bereitstellung von Best Practices verhindern doppelte Aufwände
- Vollumfängliche Design Library
Nutzende im Fokus
- Hohe Nutzerfreundlichkeit durch frühe und kontinuierliche Tests
- Einfaches Prototyping mittels standardisierter Bauteile
- Barrierefrei by Design
- Barrierefreiheitskonformitätsstufe AAA als Ziel
Open Source & moderne Technologie
- Transparenz durch Einblick in Design und Code
- Dezentrale Weiterentwicklung und Nutzung
- Organisationsübergreifende Zusammenarbeit durch Community
- Verwendung von robusten Webkomponenten und Figma als UI-Tool
Ausblick DESYBRI als Standard für die deutsche Verwaltung
Das Design System soll kontinuierlich verbessert und durch den Einsatz in unterschiedlichen digitalen Lösungen zum Standard für die deutsche Verwaltung weiterentwickelt werden. Um eine positive und konsistente User Experience über die unterschiedlichen Fachverfahren und digitalen Dienste sicherzustellen, werden immer wieder Neuerungen eingeführt und das System angepasst. Als effizienter Baukasten kann das Design System so zum Digitalisierungstreiber in Deutschland werden und die digitalen Angebote der öffentlichen Verwaltung nutzbar machen.
Kontakt
Sie möchten das Design System DESYBRI nutzen?
Wir freuen uns über Ihre Anfrage zu gemeinsamen Projekten und Kooperationen zur Weiterentwicklung von DESYBRI.
