DVZ Datenverarbeitungszentrum
Mecklenburg-Vorpommern GmbH
Lübecker Straße 283
19059 Schwerin

Collage von Covern des DVZ.info-Magazins

Schere, Papier, Laptop

Mittels Prototyping den Bauplan für die Softwareprogrammierung erstellen

Die Programmierung einer neuen Anwendung oder Website steht in den Startlöchern. Schon sprudeln die Ideen, Vorstellungen und Anforderungen. Um ein für die Endanwender*innen optimales Nutzererlebnis zu schaffen, ist der Einsatz von Prototyping wertvoll. Denn durch die Erstellung eines Prototypen können Ideen ausprobiert, getestet und weiterentwickelt werden, bevor die aufwendige und kostenintensive Programmierungsarbeit beginnt. Doch was verbirgt sich hinter Prototyping genau?

Collage vom Prototyping-Prozess bestehend aus Bild von einer Leinwand aus einem Prototyping-Workshop und Screenshot eines Wireframes des Geo-Portals

Die User im Mittelpunkt

Prototyping ist ein wichtiger Schritt im Design Thinking – eine agile Arbeitsmethode, die komplexe Aufgaben löst und zur schnellen Entwicklung neuer Ideen führt. Die Nutzer*innen stehen dabei stets im Mittelpunkt. Dieses Vorgehen wird gerne bei der nutzerzentrierten Gestaltung von Leistungen gewählt – so auch im DVZ. Design Thinker beobachten, identifizieren und verstehen zuerst die Bedürfnisse der Zielgruppe, bevor Ideen generiert werden. Um diese dann umzusetzen, zu erproben und weiterzuentwickeln, kommt das Prototyping ins Spiel. Hierbei wird sich an die zukünftige Anwendung oder Website schrittweise angenähert. Im Fokus steht ein Dreiklang aus Barrierefreiheit, Gebrauchstauglichkeit und User Experience (UX) – also das Nutzererlebnis – und damit das Ziel, die Anwendung oder Website möglichst intuitiv und gut bedienbar zu gestalten.

UX-Designer wie ein Architekt

Dahinter verbirgt sich beispielsweise, die Struktur, Funktionen und Inhalte so zu entwickeln, dass diese nutzerfreundlich und barrierefrei sind. Aber auch das User Interface (UI), also das „Look and Feel“, kann beim Prototyping berücksichtigt werden. Die Anwendung soll nicht nur optisch schön, sondern auch effektiv und intuitiv gestaltet sein. Die Aufgabe eines UX-Designers ist demnach mit der Rolle des Architekten
beim Hausbau vergleichbar: Er erstellt den Bauplan, auf dessen Basis die umsetzenden Gewerke Hand in Hand und effektiv ihre jeweiligen Aufgaben verrichten können.

Screenshot von einem Wireframe des Geo-Portals

Verschiedene Prototyp-Arten

Doch Prototyp ist nicht gleich Prototyp: Für einen leicht umsetzbaren sogenannten Low-Fidelity-Prototyp werden Papier, Schere und Stift gezückt, um die Gedanken zu illustrieren. Aber auch sogenannte Wireframes, die sehr technisch und reduziert die Anordnung von Elementen und Inhalten einer Anwendung oder Website darstellen, gehören dazu. Eine High-Fidelity-Variante hingegen ist eine deutlich zeitaufwendigere Prototyp-Erstellung, die meist digital abläuft. Mittels einer Software wird eine Anwendung konzipiert, die Teile der finalen Version simuliert und auch Interaktionen zulässt – ein Klick-Dummy. „Die Kundinnen und Kunden bekommen ein Gefühl davon, wie die zukünftige Anwendung oder Website funktioniert und in manchen Fällen auch aussieht“, erklärt Thomas Luft, einer der UX-Designer im DVZ.

Prototyping für das Geo-Portal

Betrachten wir das Prototyping konkret an einem umgesetzten DVZ-Projekt für das Landesamt für innere Verwaltung M-V (LAiV), nämlich der Entwicklung von GeoLab.MV – einem Geo-Portal für Schüler*innen und Lehrende zum spielerischen Umgang mit Geodaten. Am Anfang des Projekts wurde im Rahmen eines Workshops die Design-Thinking-Methode angewendet. Teilnehmende waren der Auftraggeber, einige Endanwender*innen wie Lehrende und Schüler*innen sowie ein DVZ-Team bestehend aus Projektleitung, Entwickler*innen sowie einem UX-Designer. Sie analysierten gemeinsam die künftigen Nutzer*innen von GeoLab.MV und deren Bedürfnisse, definierten Herausforderungen und entwickelten Ideen zur Anwendung. Am Ende entstanden in mehreren Teams erste Vorstellungen zu den Funktionen und der Bedienung des Web-Portals, die mittels Papier-Prototypen visualisiert und gleich getestet wurden. Nach der Entscheidung für einen Vorschlag ging der UX-Designer ans Werk und entwickelte aus dem analogen einen digitalen Prototypen. „Mittels eines Klick-Dummys visualisierte ich den Aufbau, die Navigation und erste Funktionen in der Webanwendung – so auch den Look des Portals“, beschreibt Thomas Luft.

Klick-Dummy liefert Bauplan für Programmierung

„Der digitale Prototyp wurde vom LAiV direkt abgenickt“, erinnert er sich gerne zurück. Ein guter Zeitpunkt, die Nutzer*innen erneut einzubeziehen: Wertvolles Feedback zur ersten Version des fertig entwickelten Web-Portals erhielt das DVZ-Team durch Tests anhand realer Aufgaben mit Schüler*innen in verschiedenen Altersklassen sowie bei Fortbildungen mit Lehrkräften. Alle Beteiligten ergänzten den Prototypen in weiteren Design-Thinking-Schleifen nach und nach um weitere Inhalte, was durch das kontinuierlich schrittweise Testen zu einer möglichst finalen Anwendung führte. Sobald der Prototyp den Erwartungen aller gerecht wurde, legten die Entwickler*innen los und programmierten die finale Webanwendung. „Der Klick-Dummy mit seinen Funktionen und seiner Gestaltung diente dann als Bauplan für die Programmierung“, erläutert der UX-Designer. „Das LAiV war sehr zufrieden mit dem fertigen Web-Portal“, schildert Thomas Luft.

Win-Win für alle

Ob bei der Entwicklung von Apps für die Mobiltelefone der Landespolizei, der Webanwendung zur Elterngeld-Beantragung, beim Online-Meldeportal des Nationalen Waffenregisters oder beim MV-Serviceportal – die Methode des Prototypings im Rahmen des Design Thinkings kam schon vielfältig im DVZ zum Einsatz. Denn der enorme Nutzen liegt auf der Hand: Fehler und Probleme werden frühzeitig vor der technischen Umsetzung sichtbar und damit vermeidbar. Ein Klick-Dummy ermöglicht es, Usertests schnell umzusetzen, sodass die Anwendung nutzerzentriert – sprich effektiv, effizient und zufriedenstellend – programmiert wird. „Prototyping ergibt immer Sinn, da alle Beteiligten profitieren: Der Kunde ist stets involviert und gibt kontinuierlich Feedback. Unsere Entwickler*innen erhalten einen konkreten Bauplan für ihre Programmierung und die zukünftigen User erhalten eine auf ihre Bedürfnisse zugeschnittene Anwendung“, fasst Thomas Luft zusammen. Dank Prototyping lassen sich also Kosten, Energie und Zeit sparen, da das Produkt Schritt für Schritt konstruiert wird. „Am Ende sind sich alle Projektteilnehmenden immer einig, dass das Prototyping für den Erfolg der Anwendungsentwicklung extrem geholfen hat“, betont Thomas Luft.

Thomas Luft | UX-Designer

Da beim Prototyping alle an der Entwicklung des Ergebnisses beteiligt sind, gibt es keine Diskrepanzen zwischen den Erwartungen und dem Resultat. So profitiert jeder – vor allem die User.