Previous slide
Next slide
Toggle fullscreen
Open presenter view
S/4HANA Architektur
SAP UI5, Fiori, Fiori Elements und Fiori UX Guidelines
Überblick, Historie, Vorteile und Grundprinzipien
Historische Einordnung
SAP UI5 als JavaScript-Framework seit 2010 etabliert
SAP Fiori 2013 eingeführt für rollenbasierte, benutzerfreundliche Oberflächen
Fiori Elements ab 2016 für automatische UI-Generierung basierend auf Metadaten
Fiori UX Guidelines seit Beginn zur Vereinheitlichung und Verbesserung der Nutzererfahrung
Quellen:
SAP UI5 Überblick
SAP Fiori Einführung
SAP UI5 – Technologisches Framework
Umfangreiche JavaScript-Bibliothek für Enterprise-Apps
Unterstützung für MVC-Architektur, Datenbindung, Internationalisierung
Plattformunabhängig, responsive Designs für Desktop und mobile Geräte
OpenUI5 als Open-Source-Variante verfügbar
Quellen:
SAP UI5 Developer Guide
OpenUI5 Open Source
SAP Fiori – Designphilosophie
Rollenbasierte Apps für spezifische Aufgaben
Klare, einfache und ansprechende Benutzeroberflächen
Nutzung moderner UI-Technologien (SAP UI5)
Fokus auf Adaptive und kontextsensitive Nutzererlebnisse
Quellen:
SAP Fiori Übersicht
SAP Fiori Design Prinzipien
Fiori Elements – Effiziente UI-Erstellung
UI-Templates basierend auf Metadaten und Annotations
Schnelle Entwicklung von standardisierten Apps (z.B. Listen, Objektseiten)
Sicherstellung von Konsistenz und Wartbarkeit
Nutzung smarter Controls mit definierter Logik
Quellen:
Fiori Elements Documentation
Fiori UX Guidelines – Grundprinzipien (Core Principles)
Konsistenz (COHERENT):
Einheitliches Design, Sprache und Verhalten über alle Apps für bessere Bedienbarkeit.
Rollenbasiert (ROLE-BASED):
Anwendungen sind ausgelegt auf die Aufgabe und Rolle.
Einfachheit (SIMPLE):
Relevanzfokussierung mit klar strukturierten und verständlichen Interfaces.
Anpassungsfähigkeit (ADAPTIVE):
Responsive Gestaltung für alle Geräte und Nutzungsszenarien.
Freude (DELIGHTFUL):
Positive und inspirierende Nutzererlebnisse schaffen.
Zugänglichkeit (Accessibility):
Barrierefreiheit nach Web Content Accessibility Guidelines (WCAG).
Effizienz (Efficiency):
Schnelle und einfache Erledigung der Aufgaben bei minimalem Aufwand.
Fachbegriffe im UX-Kontext (English Terms)
Role-Based:
Anwendungen und Inhalte auf Nutzerrollen zugeschnitten
Responsive Design:
Anpassung der UI an verschiedene Bildschirmgrößen
Semantic Consistency:
Einheitliche Bedeutung und Funktionen in der UI
Smart Controls:
Wiederverwendbare UI-Komponenten mit vordefinierter Funktionalität
Floorplans:
Standardisierte UI-Layouts wie List-Report, Object-Page
Annotations:
Metadaten zur Steuerung von UI-Verhalten
Guided Interaction:
Geführte Nutzerprozesse zur Fehlervermeidung
User Personalization:
Nutzerindividuelle Anpassungen und Einstellungen
Accessibility/WCAG:
Richtlinien zur Sicherstellung von Barrierefreiheit
Quellen:
SAP Fiori UX Guidelines
SAP Fiori Design Principles (Englisch)
UI Text Guidelines for SAP Fiori
Vorteile von SAP UI5 und Fiori
Einheitliche und moderne UX in SAP-Systemen
Hohe Flexibilität und einfache Erweiterbarkeit
Steigerung der Produktivität und Nutzerzufriedenheit
Zukunftsfähige Basis für Cloud und On-Premise Lösungen
Praxisbeispiele
Standard Fiori Apps in S/4HANA für Einkauf, Vertrieb, Finanzen
Kundenspezifische Erweiterungen mit SAP UI5
Schnellbau von UI mit Fiori Elements Templates
Zusammenfassung
SAP UI5 bildet die technologische Basis für Fiori
Fiori definiert Design und Nutzungskonzept der Apps
Fiori Elements unterstützen effiziente UI-Erstellung
UX Guidelines sichern ein konsistentes, nutzerfreundliches Ergebnis
Weiterführende Links
SAP UI5 Developer Tutorials
SAP Fiori Design Web
SAP Community Fiori Funktionen