Google Material Design und SAP Fiori Design

Categories Benutzeroberflächen0 Comments

Also availabe in/Auch verfügbar auf: English (Englisch)

Ich habe einiges Wissen über Fiori gesammelt. I habe mit Fiori angefangen, weil ich viele Jahren als UI/UX designer gearbeitet habe. Als ich mit Webeintwicklung anfing, wurden die Layouts einer Webseite mithilfe von Tabellen erstellt. Das bedeutet, dass ein Layout eine Tabellenstruktur besaß und in den einzelnen Zellen wurden die Seitenelemente eingebettet. Unten sieht man eine einfache Darstellung:

Layout Element Layout Element Layout Element
Layout Element Layout Element Layout Element
Layout Element Layout Element Layout Element

Ein Tabellenlayout zu erstellen war schon recht umständlich und so ein Layout zu bearbeiten, nach Fertigstellung, war ein richtiges Drama. Oft befanden sich in eine Tabellenzelle weitere Tabellen und in den Zellen der eingebetteten Tabellen gab es dann noch weitere Codesnipsel. Somit konnte man Ewigleiten damit verbringen, nach den Elementen zu suchen, die angepasst oder entfernt werden sollten. Eines Tages entdeckte ich ein Artikel von Ethan Marcotte über das Konzept Webseiten für kleine Bildschirme zu optimieren. Dieser Artikel ist schon recht alt, nach Internetstandards, aber es ist immer noch gültig und anwendbar. Hier der Link zum Artikel (EN).

Und nachdem ich diesen Artikel gelesen hatte, wusste ich dass Dies die Zukunft ist. Meine Umgebung war nicht so richtig überzeugt und die Antwort auf meinem Enthusiasmus war „Glaubst du wirklich, dass die Menschen eine Webseite auf ihrem Telefon besuchen möchten?“ Aber ich war absolut überzeugt und fing an Sachen auszuprobieren, obwohl XHTML und CSS noch nicht richtig geeignet waren um solche Seiten zu erstellen.

Langsam aber sicher fingen die Menschen damit an Smartphones zu benutzen. Das erste echte Smartphone wurde durch Apple, wer sonst, auf dem Markt gebracht. Das Apple iPhone 3G war das Allerneuste und eine richtige Sensation. Und dann fing das W3C (World Wide Web Consortium) damit an neue Versionen von HTML4 und CSS2 zu entwickeln und die neuentwicklungen sind jetzt HTML5 und CSS3. HTML ermöglichte, durch neue Tags, eine bessere Semantik und CSS3 ermöglichte es das Layout für mehrere Bidschirmgrössen zu optimieren.

Jedoch dauerte es noch eine ganze Weile, bis Beide vollständig entwickelt waren und veröffentlicht wurden. Und während dieser Zei, stand auch die Entwicklung von Browser nicht still und es erschienen neue Browser und, sehr wichtig, neue Bildschirmauflösungen. Diese neue Browser brachten auch neue Probleme, denn davor gab es nur zwei die berücksictigt werden müssten:

  • Der Internet Explorer
  • Der Netscape Navigator

Jeder Browser interpretierte eine Webseite anders (das kann man mit Fernseher im Elektromarkt vergleichen. Dort wird auf jedem Bildschirm das gleiche Programm ausgestrahlt und es sieht bei jedem Gerät unterschiedlich aus) und somit mussten oft für jeden Browser individuelle und umfangreiche Anpassungen vorgenommen werden. Gott sei Dank hat sich dieses Problem heutzutage geändert. Außer den Internet Explorer, denn der stellt moderne Webseiten immer noch inkorrekt dar, wenn man keine spezielle Anpassungen vornimmt.

Und endlich wurde dann der Weg zum mobilen Web und Responsive Webseiten geebnet und der Siegeszug der mobile Webseiten war unaufhaltbar. Google ist der große Einflussnehmer wenn es um neue Eigenschaften von Webseiten geht und ist recht präzise und durchgreifend diesbezüglich. Webseiten, die nicht responsive sind, werden bestraft mit eine schlechtere Platzierung in den Suchergebnissen. Google ist auch verantwortlich für die neue designregeln und wir folgen Alle diese Regeln.

Die neueste Entwicklung ist das Konzept „Material Design“. In einem weiteren Post erläutere ich worüber es sich bei diesem Konzept handelt (folgt später).

Eine der Hauiptmerkmale sind die ,soim Englischen genannte, Cards (Karten).

Eine Karte ist ein Blatt im Material Design, das als Zugangpunkt zu ausführlicheren Informationen dient.

Karten können ein Foto, Text und eine Link zu einem einzelnen Thema enthalten. Sie können Inhalte zeigen,  Unterschiedlich große Elemente wie Fotos mit unterschiedlich lange Bildunterschriften. Eine Kartensammlung ist ein Lay-Out von Karten dargestellt auf einer Oberfläche (Bei UI auch Floorplan genannt) (Quelle (Englisch): https://material.io/guidelines/components/cards.html)

Ein paar Beispiele:

(Quelle: https://material.io/guidelines/components/cards.html)

Solche Kartenlayouts sind auch auf Laptop Bildschirme beliebt:

Webseiten, die solche Karten als Layoutelemente verwenden, sind einfach und komfortabel zu nutzen. 

Auch SAP hat die Zeichen der Zeit erkannt durch die Tatsache, dass User immer öfter und imer mehr mit dem Smartphone erledigen. Man bucht Fahrkarten, man kauft Mode, mn Bucht den Urlaub oder man sucht nach Informationen wie das Wetter oder wo der nächste Stau anfängt. Und da wir Allen im Privatleben sehr viel mit dem Smartphone erledigen, ist es ein logischer Schritt, diese Affinität mit mobile Endgeräte auch im Berufsleben zu übernehmen.

Die klassische Benutzeroberfläche wa,r und ist noch immer, ziemlich verwirrend. Benutzer hatten so ihre liebe Mühe damit zu lernen welche Elemente der Benutzeroberfläche, wie zum Beispiel Eingabefelder, für die spezifische Aufgaben vorgesehen sind. Um ein angenehmeres und komfortableres Arbeitserlebnis zu erzielen hat SAP eine neue Benutzeroberfläche entwickelt, die nachfolgende Designprinzipien folgt:

Quelle: https://blogs.sap.com/

Dieses Konzept umfasst das Nutzen von Apps. Diese Apps sind browserbasiert. Die Apps sind im Fiori Launchpad, ahnlich wie das Startmenü von Windows 10, auffindbar. Apps sind reguläre Transaktionen (es gibt aber  auch andere Anwendungen) und beim Anklicken/Tabben eine der Fliesen wird der/die MitarbeiterIn zum nächsten Oberfläche weitergeleitet wo er oder sie seine/ihre Aufgaben durchführen kann.

Selbstredend passt der Launchpad sich jedem Bildschirm an.

 

Eine der spannendste SAPUI5 Apps sind Overview Pages (Übersichtsseiten). Der Name ist Programm, denn beim Anklicken/Tab mit dem Finger wird man zu einer Ansicht mit Karten weitergeleitet. Diese Karten zeigen Informationen über ein bestimmtes Thema in unterschiedliche Darstellungsformen. Es ist selbstredend auch möglich aus verschiedene Quellen Informationen anzuzeigen auf eine OVP.

One of the great SAPUI5 apps are  Overview Pages. The name says it all. by clicking a tile in the OVP, the user is forwarded to a view with cards. Those cards contain different informations about one subject or several subjects. Here is an example of an OVP with procurement informations:

Und diese OVPs wurden genau nach dem Designkonzept von Googles Material Design entwickelt. Durch das hin und her bewegen des Schiebers auf dem Bild kann man den Vergleich genauer betrachten:

Und das führ zur Schlussfolgerung dass das neue SAP design auf das Google Design basiert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

WordPress spam blockiert CleanTalk.