Gute Dashboards folgen einem Visualisierungskonzept

Gute und verständliche Dashboards mit einer klaren Botschaft und Vermeidung von überflüssigen Informationen sind kein Zufall , sondern folgen einem durchdachten Visualisierungskonzept.

Für die Umsetzung von verständlichen Dashboards bietet sich Nutzung von Standards und Richtlinien wie das International Business Communication Standard(IBCS) und SAP Fiori Designguidelines an. Die Grundlage für die technische Umsetzung dieser Standards und Richtlinien innerhalb des SAP BO Lumira Designers bilden HTML und CSS.

 

HTML & CSS

HTML steht für Hyper Text Markup Language und ist eine Auszeichnungssprache (Markup Language), die dazu dient eine Webseite zu strukturieren. HTML besteht aus einer Vielzahl von Blockelementen,  dargestellt durch sogenannte Tags, die um Teile des Webinhalts herum platziert werden, um beispielsweise ein Text oder ein Bild zu zentrieren.

Die Sprache Cascading Style Sheets (CSS) dient dazu Webseiten zu gestalten. Durch die Nutzung von CSS, ist HTML für die Struktur eines Dokumentes zuständig - CSS dagegen ist für das Aussehen (Design) verantwortlich. Bei CSS handelt es sich nicht um eine Programmier - oder Skriptsprache, sondern ist eine Stylesheet-Sprache, die es ermöglicht das Aussehen von Elementen in einer Webseite festzulegen. Innerhalb des SAP BO Lumira Designers wird CSS benötigt, um das Aussehen von Dashboards und Berichten nach eigenen Bedürfnissen, um beispielsweise ein Dashboard nach einem Corporate Design mit entsprechenden Farben, Logo und Formatierungen, zu gestalten.

SAP Fior Design Guidelines

Das Ziel der SAP Fiori Designrichtlinien ist eine hohe Nutzererfahrung mit der Vermeidung unnötiger Komplexität bei der Entwicklung von Applikationen zu schaffen. Die Userinterface (UI)-Elemente des SAP BO Lumira Designers basieren auf der SAPUI5 HTML5-Library, die sicherstellen, dass sich die UI-Elemente an der SAP Fiori Designrichtlinien anlehnen.

International Business Communication Standard (IBCS)

Ein durchdachtes Informationsdesign folgen praktischen Regeln für Gestaltung von Dashboard und Berichten und das darin enthaltene Layout und einzelne Komponenten wie Diagramme und Tabellen. Hauptfokus bei der Umsetzung dieser Regeln ist die visuelle Wahrnehmung, inhaltliche Konzeption und die Umsetzung einer semantischen Notation. Für die Umsetzung dieses Informationsdesign dient das IBCS. 

Die IBCS-Richtlinien folgen der SUCCESS-Formel:

  • AY  - Botschaft vermitteln
  • U NIFY  - Semantische Notation anwenden
  • C ONDENSE - Informationsdichte erhöhen
  • C HECK - Visuelle Integrität sicherstellen 
  • E XPRESS  - Geeignete Visualisierung wählen
  • S IMLPIFY  - Überflüssiges vermeiden 
  • S TRUCTURE - Inhalt gliedern

.

Inhalt der Informationdesignschulung:

HTML-Teil

  • Einführung in HTML
  • Allgemeine Regeln der HTML-Programmierung
  • Absatztypen und Textformatierung
  • Farben und Hintergrund
  • Grafiken einbinden und von Text umfließen lassen
  • Text oder Grafiken als hyperlinkrelative oder absolute Pfade zu Dateien oder Seiten
  • Aufbau von Tabellen und deren Einsatzmöglichkeiten
  • Einbinden von Multimedia-Objekten
  • Einfache Formulare erstellen und gestalten
  • Anlegen von Frames zur Navigation

CSS-Teil

  • Einführung und Einsatzmöglichkeiten von CSS
  • Vorteile und Grenzen
  • Browserkompatibilität
  • Plattformunabhängigkeit
  • Einsatz von CSS-Editoren
  • Implementieren von CSS-Vorlagen in HTML
  • Selektoren und Tags, Klassen
  • Stylesheets und Formate erstellen
  • Einfache Seitenlayouts mit CSS
  • Grundlagen des professionellen Designs
  • Layoutregeln
  • Formatierung
  • Syntax
  • Vererbung
  • Einsatz von Floating Layouts

Fiori -und IBCS-Teil

  • Grundlagen Fiori Designrichtlinien
  • Grundlagen IBCS Richtlinien und Standards
  • Entwicklung nach Fiori
  • Umbau Tabellen und Charts mittels CSS nach ICBS

 


Wir beraten Sie bei der Themenauswahl und gestalten das Training individuell auf Ihre Bedürfnisse.

Ihr Ansprechpartner

Ademir Ibrahimovic

SAP HANA BI Senior Consultant