Benutzerschnittstellen zur Optimierung und Digitalisierung von Geschäftsprozessen entwickeln
https://bildung.social/@oerinformatik/
https://oer-informatik.de/geschaeftsprozess-gui
Benutzerschnittstellen, Geschäftsprozesse, Digitalisierung, Prozessoptimierung, Ist-Analyse, Prozessanalyse, UML-Aktivitätsdiagramm, UML-Zustandsdiagramm, Usability, Barrierefreiheit, Wireframes, Mockups
tl/dr; (ca. 8 min Lesezeit): Einfache Geschäftsprozesse mal eben zu digitalisieren ist in Zeiten von Low-Code-Plattformen fast schon ein Nobrainer. Um komplexere Prozesse fachgerecht zu verbessern, hilft ein systematisches Vorgehen: vom Erfassen und Bewerten der bestehenden Abläufe über den Entwurf der digitalisierten Prozesse bis zu Navigation, Usability und Mockups der Benutzeroberfläche. Diese Seite gibt einen Überblick über die sechs Artikel der Reihe und die Übungsaufgaben, die meisten Schritte werden an einem Tool zur Organisation eines Kongresses gezeigt; eine gemeinsame Kann-Liste und Leitfragen helfen bei der Orientierung [AI-Assisted]. (Zuletzt geändert am 29.10.2026)
Diese Seite ist der Einstieg in die Artikelreihe über Benutzerschnittstellen für Geschäftsprozesse: Ist-Analyse und Prozessanalyse: Geschäftsprozesse erfassen, bewerten und verbessern / Geschäftsprozesse digitalisieren und optimieren / Digitalisierte Geschäftsprozesse mit dem UML-Aktivitätsdiagramm entwerfen / Navigation in Benutzerschnittstellen mit UML-Zustandsdiagrammen planen / Usability, User Experience und Barrierefreiheit: Software, die alle gern nutzen / GUI-Seiten mit Wireframes und Mockups entwerfen
Schon fit in diesem Thema? Nutze die Kann-Liste und die Leitfragen unter dem Artikel als Checkliste, ob Du die relevanten Kompetenzen bereits hast.
Diese Kann-Liste fasst die Reihe zusammen; die ausführlichen Kann-Listen stehen in den einzelnen Artikeln.
Als Grundlagen für Benutzerschnittstellen zu Geschäftsprozessen kann ich nach Durcharbeiten der Artikelreihe…
… bestehende Geschäftsprozesse in einer Ist-Analyse erfassen (z. B. als BPMN), Schwachstellen finden und ihre Ursachen mit Methoden wie Ishikawa-Diagramm, SWOT-Analyse oder FMEA bewerten.
… erklären, was die Digitalisierung eines Geschäftsprozesses bedeutet, Medienbrüche und andere Schwachstellen benennen und einen digital unterstützten Soll-Prozess mit Automatisierung beschreiben.
… Grenzen der Digitalisierung beurteilen, den Erfolg mit Kennzahlen überprüfen und Green IT in einem Projekt berücksichtigen.
… begründen, welche Geschäftsprozesse im Detail modelliert werden sollten, eine passende Modellierungstechnik wählen und einen Ablauf als UML-Aktivitätsdiagramm mit Partitionen entwerfen.
… die Masken einer Anwendung als Zustände auffassen und die Navigation mit einem UML-Zustandsdiagramm planen.
… Usability, User Experience und Barrierefreiheit unterscheiden, eine Oberfläche mit den Interaktionsprinzipien der DIN EN ISO 9241-110 und den WCAG beurteilen und Verbesserungen vorschlagen.
… den Aufbau einer Seite als Wireframe oder Mockup skizzieren, passende Bedienelemente wählen und den Entwurf mit den Anforderungen abgleichen.
Die Artikel bauen in sechs Schritten aufeinander auf, zu vier Schritten gibt es eigene Übungsaufgaben:
1. Ist-Analyse und Prozessanalyse
Bevor etwas verbessert wird, muss klar sein, wie ein Prozess heute abläuft, wer beteiligt ist und wo es hakt. Der Artikel Ist-Analyse und Prozessanalyse: Geschäftsprozesse erfassen, bewerten und verbessern zeigt, wie bestehende Abläufe erfasst und z. B. als BPMN modelliert werden. Anschließend werden Schwachstellen mit Ishikawa-Diagramm, SWOT-Analyse und FMEA untersucht und Verbesserungen im PDCA-Zyklus umgesetzt.
2. Geschäftsprozesse digitalisieren und optimieren
Digitalisieren heißt mehr als Papier einzuscannen: Daten werden einmal an der Quelle erfasst und ohne erneute Eingabe weiterverarbeitet. Der Artikel Geschäftsprozesse digitalisieren und optimieren behandelt Medienbrüche, Automatisierung, E-Service, Sensoren und RPA, den digitalen Reifegrad, Grenzen der Digitalisierung, die Erfolgsmessung mit Kennzahlen und Green IT.
3. Digitalisierte Geschäftsprozesse mit dem UML-Aktivitätsdiagramm entwerfen
Aus den Anforderungen und Anwendungsfällen entstehen die neuen Geschäftsprozesse. Der Artikel Digitalisierte Geschäftsprozesse mit dem UML-Aktivitätsdiagramm entwerfen zeigt am Beispiel der Kongress-App, welche Prozesse im Detail modelliert werden, wie die Modellierungstechnik gewählt wird und warum die Abläufe dabei oft neu geschnitten werden müssen.
4. Navigation mit UML-Zustandsdiagrammen planen
Jede Maske einer Anwendung ist ein Zustand, jeder Klick, der zu einer anderen Maske führt, eine Transition. Der Artikel Navigation in Benutzerschnittstellen mit UML-Zustandsdiagrammen planen zeigt, wie die Navigation mit Triggern, Guards, zusammengesetzten Zuständen und Historie übersichtlich bleibt, auch bei mehreren Rollen.
5. Usability, User Experience und Barrierefreiheit
Eine Oberfläche soll nicht nur funktionieren, sondern effektiv, effizient und zufriedenstellend nutzbar sein, und zwar für alle. Der Artikel Usability, User Experience und Barrierefreiheit: Software, die alle gern nutzen erklärt die Begriffe, die Interaktionsprinzipien der DIN EN ISO 9241-110, den rechtlichen Rahmen der Barrierefreiheit mit den WCAG und Methoden wie den Usability-Test.
6. GUI-Seiten mit Wireframes und Mockups entwerfen
Steht fest, welche Masken es gibt und welche Anforderungen sie erfüllen müssen, wird ihr Aufbau skizziert. Der Artikel GUI-Seiten mit Wireframes und Mockups entwerfen zeigt, wie ein Mockup Schritt für Schritt entsteht, welche Bedienelemente und Darstellungsformen passen und welche Werkzeuge es dafür gibt.
Übungsaufgaben zur Reihe
Zu vier Schritten gibt es Übungsseiten mit Aufgaben in drei Kompetenzstufen und ausgeblendeten Beispiellösungen: Übungsaufgaben zur Prozessanalyse, Übungsaufgaben zur Digitalisierung von Geschäftsprozessen, Übungsaufgaben zu Usability, User Experience und Barrierefreiheit und Übungsaufgaben zu Mockups, Bedienelementen und Darstellungsformen.
Leitfragen
- In welcher Reihenfolge gehst Du vor, wenn Du eine Benutzerschnittstelle für einen Geschäftsprozess entwickelst?
Zuerst erfasst und bewertest Du den bestehenden Prozess (Ist-Analyse und Prozessanalyse), dann legst Du fest, was digitalisiert und verbessert wird, und entwirfst die neuen Abläufe, z. B. als UML-Aktivitätsdiagramm. Daraus leitest Du die Masken und ihre Navigation als UML-Zustandsdiagramm ab, berücksichtigst Usability und Barrierefreiheit und skizzierst schließlich die Seiten als Wireframes und Mockups. Siehe die Abschnitte 1. Ist-Analyse und Prozessanalyse bis 6. GUI-Seiten mit Wireframes und Mockups entwerfen
- Wie findest Du die Schwachstellen eines bestehenden Prozesses und ihre Ursachen?
Du beschreibst oder modellierst den Ist-Ablauf (z. B. als BPMN) und suchst nach Medienbrüchen, Doppelerfassungen, Liegezeiten und fehlender Transparenz. Ursachen ordnest Du z. B. in einem Ishikawa-Diagramm, Risiken bewertest Du mit einer FMEA. Mehr dazu im Artikel Ist-Analyse und Prozessanalyse
- Was unterscheidet die Digitalisierung eines Geschäftsprozesses vom bloßen Einscannen von Papier?
Beim Einscannen bleibt der Ablauf gleich. Bei der Digitalisierung eines Geschäftsprozesses werden Daten einmal digital an der Quelle erfasst und ohne erneute Eingabe weiterverarbeitet; Schritte entfallen, werden automatisiert oder durch Software unterstützt. Mehr dazu im Artikel Geschäftsprozesse digitalisieren und optimieren
- Woran erkennst Du, ob sich eine Digitalisierung gelohnt hat?
Am Vergleich einer vorab festgelegten Kennzahl, z. B. der Durchlaufzeit je Vorgang, vor und nach der Umstellung mit denselben Messregeln. Mehr dazu im Artikel Geschäftsprozesse digitalisieren und optimieren
- Welche neuen Geschäftsprozesse solltest Du im Detail modellieren, und womit?
Vor allem Prozesse mit mehreren Akteuren, Systemen oder vielen Entscheidungen. Je näher die technische Lösung rückt, desto eher passt das UML-Aktivitätsdiagramm mit Partitionen je System; ist das Prozessverständnis noch gering oder die Fachabteilung beteiligt, kann BPMN besser sein. Mehr dazu im Artikel Digitalisierte Geschäftsprozesse mit dem UML-Aktivitätsdiagramm entwerfen
- Wie hängen Masken einer Anwendung und ein UML-Zustandsdiagramm zusammen?
Jede Maske ist ein Zustand der Benutzeroberfläche, die Wechsel zwischen den Masken sind Transitionen mit Trigger, Guard und Effekt. Zusammengesetzte Zustände und Historie halten das Diagramm bei vielen Masken übersichtlich. Mehr dazu im Artikel Navigation in Benutzerschnittstellen mit UML-Zustandsdiagrammen planen
- Was unterscheidet Usability, User Experience und Barrierefreiheit?
Usability beschreibt, wie effektiv, effizient und zufriedenstellend bestimmte Nutzende ihre Ziele erreichen; User Experience umfasst das gesamte Erleben vor, während und nach der Nutzung; Barrierefreiheit sorgt dafür, dass auch Menschen mit Behinderungen die Software ohne besondere Erschwernis und ohne fremde Hilfe nutzen können. Mehr dazu im Artikel Usability, User Experience und Barrierefreiheit
- Wozu dienen Wireframes und Mockups, bevor programmiert wird?
Sie zeigen früh und günstig, wie eine Seite aufgebaut ist und welche Bedienelemente sie braucht. Fehler und Missverständnisse fallen in der Skizze auf, wo sie leicht zu korrigieren sind, und der Entwurf lässt sich mit den Anforderungen und mit den Nutzenden abgleichen. Mehr dazu im Artikel GUI-Seiten mit Wireframes und Mockups entwerfen
Links und weitere Informationen
zum Üben: Übungsaufgaben zur Prozessanalyse, Übungsaufgaben zur Digitalisierung von Geschäftsprozessen, Übungsaufgaben zu Usability, User Experience und Barrierefreiheit und Übungsaufgaben zu Mockups, Bedienelementen und Darstellungsformen
zum Nachschlagen: UML-Aktivitätsdiagramm, UML-Zustandsdiagramm und Geschäftsprozesse mit BPMN modellieren
Hinweis zur Nachnutzung als Open Educational Resource (OER)
Dieser Artikel und seine Texte, Bilder, Grafiken, Code und sonstiger Inhalt sind - sofern nicht anders angegeben - lizenziert unter CC BY 4.0. Nennung gemäß TULLU-Regel bitte wie folgt: “Benutzerschnittstellen zur Optimierung und Digitalisierung von Geschäftsprozessen entwickeln” von oer-informatik.de (H. Stein), Lizenz: CC BY 4.0. Der Artikel wurde unter https://oer-informatik.de/geschaeftsprozess-gui veröffentlicht, die Quelltexte sind in weiterverarbeitbarer Form verfügbar im Repository unter https://gitlab.com/oer-informatik/software-entwurf/gui-entwurf. Erstellt mit KI-Assistenz; von mir umfassend redaktionell überarbeitet, geprüft und freigegeben. Stand: 29.10.2026.
[Kommentare zum Artikel lesen, schreiben] / [Artikel teilen] / [gitlab-Issue zum Artikel schreiben]
