Der hybride Design- und Entwicklungsprozess

So bringen wir nutzerzentrierte Softwarelösungen für die Verwaltung auf die Straße

Digitale Produkte überzeugen nicht allein durch sauber programmierte Quellcodes. Im Nutzungsalltag entscheidet eine simple Frage über Erfolg und Misserfolg: Erfüllt das Produkt die Anforderungen und Bedürfnisse von echten Nutzer*innen?

Damit diese Frage Zustimmung findet, müssen Endnutzer*innen bereits bei der Produktentwicklung einbezogen und eine enge Zusammenarbeit von Entwickler*innen und UX/UI-Designer*innen ermöglicht werden. In der Praxis gelingt dies durch einen nutzerzentrierten Design- und Entwicklungsprozess, der Design Thinking und SCRUM wirkungsvoll aufeinander abstimmt.

Was beinhaltet der nutzerzentrierte Design- und Entwicklungsprozess?

Nutzerzentriertes Design verfolgt das Ziel, potenzielle Anwender*innen in die Gestaltung und Konzeption einer neuen Software aktiv einzubeziehen und stellt das Nutzungserlebnis — im Englischen ›UX‹, user experience — in den Vordergrund. Eine bekannte Methodik hierfür ist Design Thinking, dessen 6 Phasen die Basis des hybriden Design- und Entwicklungsprozesses bilden: Verstehen, Beobachten und Sichtweise definieren werden in der Praxis über UX-Research abgebildet, während Ideen finden und Prototypen entwickeln in der Interface-Konzeption zusammenlaufen. Das Testen wird als eigene Phase gesehen. Im UX-Research (deutsch ›Nutzerforschung‹) beleuchtet der Prozess die Probleme der Anwender*innen, konsolidiert unterschiedliche Perspektiven und vereint diese mit den heterogenen Bedürfnissen verschiedenster weiterer Akteure wie Entwickler*innen, Product Ownern und Designer*innen.

Basierend auf den daraus resultierenden Erkenntnissen werden in der UI-Konzeption anschließend User Interfaces (›UI‹, deutsch: Benutzeroberfläche) gestaltet und in interaktive Prototypen transformiert, um sie daraufhin mit Anwender*innen zu testen.

Anhand des daraus gewonnenen Feedbacks werden einzelne Prozessschritte so lange iteriert, bis ein akzeptables Ergebnis erzielt wird. Das Ergebnis kann als ›getestetes UI-Konzept‹ definiert und als Artefakt an die Softwareentwicklung übergeben werden.

Ziel ist es, bereits vor der finalen Entwicklung Feedback von potentiellen Anwender*innen zu erhalten, um Fehlentwicklungen zu vermeiden und dadurch Zeit und Kosten einzusparen.

Designsystem und UI-Library als Spickzettel für Konzeption und Entwicklung

Ein Designsystem beinhaltet grundlegende Informationen über Farben, Typografie, Abstände, Schatten, und vieles mehr. Darüber hinaus finden sich dort zusätzlich Gestaltungsvorgaben für alle UI-Elemente, die in einer Anwendung verwendet werden. So werden dort beispielsweise Buttons, Badges, Checkboxen oder Textfelder spezifiziert. Für die einzelnen UI-Elemente werden verschiedene Varianten erstellt, um unterschiedliche Zustände wie beispielsweise normal, deaktiviert, gedrückt, fokussiert, usw. darzustellen.

Neben der Definition der UI-Elemente finden sich in einem Designsystem auch Informationen über die einzelnen Standardansichten (auch UI-Templates genannt) wieder. So werden nach dem Atomic Design-Prinzip die unterschiedlichen UI-Elemente dort zu UI-Templates zusammengefasst.

Die Navigation zwischen den verschiedenen UI-Templates, wie beispielsweise zwischen einer Listen-, Detail- oder Bearbeitungsansicht, sind ein weiterer Bestandteil des Designsystems und definieren, wie sich Anwender*innen in der Software ›bewegen‹.

Ein Plus für die Barrierefreiheit

Insbesondere in der öffentlichen Verwaltung müssen digitale Produkte eine barrierefreie Nutzung ermöglichen. Die gesetzlichen Grundlagen dafür können im Bundesgleichstellungsgesetz, der Verordnung für barrierefreie Informationstechnik (BITV 2.0), der EU-Norm für digitale Barrierefreiheit (en 301 549) sowie den Web Content Accessibility Guidelines (WCAG 2.1) gefunden werden. Durch die im Prozess verankerten Interviews und Nutzungstests werden Menschen mit verschiedenen Bedürfnissen und Einschränkungen eingebunden, sodass auch Engpässe und Anforderungen der Barrierefreiheit frühzeitig identifiziert und berücksichtigt werden können.

Damit sich nicht für jedes neue Softwareprodukt erneut Gedanken zur Barrierefreiheit gemacht werden müssen, empfiehlt sich die Standardisierung mittels eines Designsystems und einer UI-Library.

Warum der ganze Aufwand? Neben dem bereits erwähnten Vorteil für die Barrierefreiheit, gibt es weitere Gründe für ein Designsystem: Die Konsistenz der Benutzeroberflächengestaltung wird einerseits in der Konzeption, andererseits auch in der Entwicklung gewährleistet. Das Designsystem dient somit als eine Art ›Nachschlagewerk‹ für die Entwicklung. Die Standardisierung der UI im Designsystem führt letztendlich zu einer Geschwindigkeitssteigerung in der Bereitstellung von Softwareartefakten.

Was das Designsystem für die Designer*innen ist, ist die UI-Library für die Frontend-Entwickler*innen. Es ist das Gegenstück zum Designsystem und kann als ›Werkzeugkasten‹ für die Programmierung gesehen werden. Die UI-Elemente des Designsystems finden sich als programmierte Artefakte in der UI-Library wieder, sodass auch die Entwicklung der Produktinkremente von der Effizienz des Designsystems profitiert.

Vom Konzept zum Produktinkrement durch UX/UI-Patenschaften

Wer nutzerzentrierte Software ausliefern möchte, sollte nicht darauf vertrauen, dass die Konzepte ›über den Zaun geworfen‹ und genau so entwickelt werden. Die Erfahrung hat gezeigt, dass gute Software nur Hand in Hand entstehen kann. In Form sogenannter UX/UI-Patenschaften, wird die Softwareentwicklung daher auch während der SCRUM-Sprints eng von UX/UI-Designer*innen begleitet. So können gemeinsame Lösungen für Ad-hoc-Probleme entstehen oder Entscheidungen über weitere Iterationen bei weitreichenden Änderungen gemeinsam mit dem Product Owner getroffen werden.

Zusammenfassend ist die nutzerzentrierte Entwicklung die Ergänzung zum nutzerzentrierten Design. Die Anliegen der Anwender*innen können über die Konzeption von Software mit in die Entwicklung getragen werden und spiegeln sich schließlich in der Software wider.

———

Simon Hesse ist Lead UX/UI-Designer für digitale Transformation beim Informationstechnikzentrum Bund (ITZBund). Dort leitet er die AG UX/UI zur Modernisierung der Haushaltsverfahren des Bundes.