12. März 2025
Von der Idee zur fertigen SAP Fiori App (Teil 1: Konzeption)
So nutzen Sie das SAP S/4HANA Web UI Kit für Figma
In meinem aktuellen Projekt habe ich eine UI-Card für die Besucheranmeldung mit dem Prototyping-Tool Figma visualisiert. Dabei wurde das SAP Fiori Web UI-Kit in Figma verwendet, um eine Lösung zu entwickeln, die sowohl den Fiori Design Guidelines entspricht als auch spezifische Anpassungen ermöglicht.
In diesem Blog werden die Schritte von der Idee bis zum fertigen Design der UI-Card am Beispiel der Besucheranmeldung beschrieben und aufgezeigt, wie Figma und das SAP UI Kit die Arbeit erleichtern.
Die Besucheranmeldung ist ein wiederholt auftretender Prozess in Unternehmen. Häufig empfangen Mitarbeitende Besuch von Kunden, Lieferanten oder anderen Dienstleistern. Oftmals erfolgt der Anmeldeprozess beim Empfang manuell und unstrukturiert, z. B. per Email. Unser Ziel war es, diesen Use Case als Self Service für jeden Mitarbeitenden im Unternehmen zu ermöglichen - zu jeder Zeit, auch mal ad hoc, kurz vor dem Termin!
Unsere Idee: Eine einfache und benutzerfreundliche Digitalisierung dieses Prozesses – von der Datenerfassung bis hin zur Weitergabe aller relevanter Informationen an die jeweiligen Stellen im Unternehmen (Empfang, Kantine, IT, Controlling, ...). Natürlich wollen wir als SAP-Dienstleister und Beratungshaus diesen Prozess mit SAP-Technologien und SAP-Design-Pattern verwirklichen. Daher sind die Mittel unserer Wahl die SAP Business Technology Plattform (SAP BTP) und die Low-Code Entwicklungsumgebung SAP Build, sowie das von SAP bereitgestellte SAP Fiori Web UI-Kit für Figma.
In diesem Beispiel werde ich mich insbesondere auf die Konzeption der Oberflächen fokussieren. Was ist dabei zu beachten? Wie geht man das eigentlich an? Welche Tools gibt es und wie helfen mir diese Tools? Mehr dazu findet ihr in diesem Blog.
SAP Fiori Bibliothek als Grundlage
Bei der nutzerzentrierten Gestaltung interaktiver Systeme ist es stets das Ziel, eine optimale User Experience zu erreichen. Nur wenn die Bedürfnisse der Nutzer und der Nutzungskontext bekannt sind und bei der Entwicklung berücksichtigt werden, kann Interaktion intuitiv benutzbar und erfolgreich gestaltet werden.
Deshalb beginnen wir mit der Frage, wie das Endergebnis aus der Perspektive der Anwender*innen später aussehen soll. Hierzu nutzen wir Figma als UX-Tool. Figma ist eine kollaborative Anwendung, mit der digitale Produkte von einfachen Design-Entwürfen bis hin zu interaktiven Prototypen gestaltet werden können.
Innerhalb von Figma können Bibliotheken geladen werden, um Vorlagen wie spezifische Komponenten, Interaktionsmuster und Layouts zu nutzen. Die SAP bietet auch eine eigene Bibliothek mit einer großen Auswahl von UI-Komponenten.
Ein wichtiger Startpunkt für die Gestaltung von Benutzeroberflächen im SAP-Umfeld ist das Fiori UI-Kit. Dieses beinhaltet die zuvor angesprochene Figma Bibliothek mit ihren eigenen Vorlagen für Komponenten, Layouts und Interaktionsmuster. Ergänzend dazu umfasst das Kit die SAP-Standardschriftart „72“ sowie das SAP-Icon-Set im Horizon Theme.
Was ist die konzeptionelle Idee hinter der UI-Card für die Besucheranmeldung?
Den Prozess zur Besucheranmeldung auf der Card möchte ich gerne in mehrere Schritte unterteilen. Der mehrstufige Prozess in der Card sorgt für eine klare, fokussierte Nutzerführung und ermöglicht eine bessere Überprüfung der Eingaben und verhindert, dass die Card mit zu vielen Informationen überladen wirkt.
Die Card zeigt als Einstieg zunächst eine Übersicht aller zuletzt angemeldeten Besucher mit ihrem jeweiligen Status. Von hier aus kann auch der mehrstufige Prozess für die Besucheranmeldung gestartet werden.
Nach erfolgreichem Abschluss erscheint eine Bestätigung, dass die Anmeldung erfolgreich eingegangen ist, und der Nutzer kehrt zur Übersicht zurück.
Design: Übersicht der Besuchermeldungen
Als Grundlage für die UI-Card dient das „Card“-Element aus dem SAP UI-Kit. Über die Eigenschaften bzw. Properties der Card-Komponente kann das Erscheinungsbild dynamisch angepasst werden. Dabei ergänze ich einen passenden Titel und Untertitel.
Außerdem fügen wir weitere Elemente hinzu, wie z. B. eine "List"(Listenelement), einen Carousel Page Indicator (Navigationselement zum Durchblättern) sowie einen Button zum Starten des Anmeldungsprozesses hinzu.
Design: Erscheinungsbild anpassen
Das Design der hinzugefügten Elemente kann flexibel angepasst werden, einschließlich der Farben. Für die Besucheranmeldung-Card habe ich die Farbgestaltung individuell nach meinen Vorstellungen angepasst. Es ist aber natürlich auch möglich, es an das Corporate Design des Unternehmens anzupassen.
Dabei lassen sich nicht nur Farben, sondern auch Schriftstile, Konturen, Abstände und viele weitere Designaspekte anpassen. Farben und Schriften lassen sich als Variablen abspeichern, um diese wiederzuverwenden.
Für unsere VANTAiO Demosystemlandschaft haben wir eine eigene Bibliothek „Blueberry Theme“ entwickelt, das auf dem SAP UI-Kit basiert. So schaffen wir eine konsistente und ansprechende Nutzererfahrung, mit modernem Look & Feel.
An dieser Stelle integriere ich das „Blueberry Theme“ in die Datei, in der ich auch die Besucheranmeldung erstelle und bearbeite, und nutze es als Bibliothek für die weitere Gestaltung der Card.
Wenn Pflichtfelder noch nicht ausgefüllt sind, soll der Nutzer das Formular nicht fortsetzen können. Die Buttons „Zurück“ und „Abbrechen“ bleiben aktiv, während der Button „Weiter“ deaktiviert und ausgegraut dargestellt wird. Dies lässt sich mit dem UI-Kit einfach umsetzen. Das Button-Element aus unserer Bibliothek, das auf dem SAP UI-Kit basiert, bietet verschiedene Status. Für den deaktivierten Zustand wählen wir in diesem Fall „disabled“, um den Button optisch ausgegraut darzustellen.
Design: Schritt 2 – Service wählen
Die Besucheranmeldung soll als Self-Service im Unternehmen zur Verfügung stehen. Deshalb ist eine intuitive Bedienung essenziell.
Durch diese Eingabefelder wird der Prozess klar strukturiert und die Benutzerführung verbessert.
Design: Schritt 3 – Eingaben prüfen und Senden
Im letzten Schritt des mehrstufigen Formulars sollen die Eingaben zusammengefasst dargestellt werden, um den Nutzer nochmal die Möglichkeit der Überarbeitung zu geben. Wenn die Eingaben korrekt sind, können die Daten gesendet werden.
Design: Bestätigungsmeldung
Es ist wichtig, dass der Nutzer eine Rückmeldung bekommt, ob die Daten erfolgreich übermittelt werden konnten, damit Unsicherheiten und Mehrfacheingaben vermieden werden.
Von hier aus kann der Workflow zur Anmeldung weiterer Besucher fortgesetzt werden.
Mit dem Button „Zur Übersicht“ wird dem Nutzer ein Ausstiegspunktgeboten und er kann zur Übersicht zurückkehren.
Sie haben noch Fragen?
Kontaktieren Sie mich gerne.
Sie haben noch Fragen zu diesem Blogeintrag oder zur Arbeit mit dem SAP UI-Kit in Figma? Gerne stehe ich Ihnen persönlich für Ihr Anliegen oder Ihre Fragen zur Verfügung.
Susanna Nathan
UX & Design Consultant
T +49 6131 – 622280
