Redesign User Interface BUBE-Online. Konzept, Wireframes & Screendesign 13. August 2013 Mandy Hoffmann, Sabine Richter & Sebastian Schwinkendorf Prof. Dr. Frank Heidmann Fachhochschule Potsdam Interface Design heidmann@fh-potsdam.de
11.BV er tung Betrieb A ätigkeiten Haupttätigkeit erechnende Tätigkeiten t zu Berechnende Tätigkeiten PRTR Dashboard - Betrieb A - Jahr 2012 > BUBE Stammdaten Online ist hierarchisch PRTR Bericht aufgebaut PRTR Bericht an Prüfen Betrieb A Formulare Freisetzung Luft > Zu jeder Tabelle Verbringung mit AbfallDatensätzen gibt es Haupttätigkeit Freisetzung Wasser Verbringung Abwasser weitere Tätigkeiten Freisetzung Boden im oberen Bereich der Seite eine Stammdatenübersicht Übersicht Verbringung Abwasser Schadstoffliste Schadstoffliste > Die Hierarchieebenen werden als Pfad Details zum Schadstoff Details zum Schadstoff abgebildet. Dieser dient als Navigations- Übersicht Verbringung von Abfall Schadstoffe für Freisetzung Luft können berechnet werden oder und Orientierungshilfe manuell angelegt werden Details zur Haupttätigkeit Details zur Tätigkeit Gefährliche Abfälle bereitstellen Behörde übermitteln Übersicht Freisetzung Luft (= Wasser, = Boden) Details zum > Die unterste Hierarchieebene gefährlichen wird in Abfall A einem Popup Nicht gefährliche Abfälle geöffnet und abgebildet Details zur Tätigkeit 11. BV Dashboard - Betrieb A - 2012 Stammdaten Betrieb Anlage "Kohlekraftwerk" Stammdaten Anlage Kohlekraftwerk Übersicht aller Betriebseinrichtung Betrieb Betrieb B A Übersicht Anlagen Prüfen Anlage B Kohlekraftwerk... Übersicht Quellen Übersicht Gehandhabte Stoffe Quelle 1 Stoff A Quelle "Kamin" Stoff B...... Export Details zum Stoff A Details zum Stoff B Bericht übermitteln Übersicht Anlagenteile Anlagenteil B Anlagenteil A Details zum nicht gefährlichen Abfall A Quelle "Kamin" Stammdaten Quelle "Kamin" Übersicht Emissionsverurs. Vorgänge Emis. Vorgang 1 Verbrennen Steinkohle... Anlagenteil A Stammdaten Anlagenteil A Übersicht Quellen Übersicht Gehandhabte Stoffe Emissionsverursachender Vorgang "Verbrennen von Steinkohle" Stammdaten Emissionsverursachende r Vorgang "Verbrennen von Steinkohle" Übersicht Emissionsstoffe Stoff A Stoff B... Details zum Stoff A Details zum Stoff B 2
Aufbau einer Seite > Die Seite Anlage Kohlekraftwerk ist wie folgt aufgebaut: > Stammdaten zur Anlage Kohlekraftwerk > Tabelle A mit Datensätzen (Übersicht der Quellen) > Tabelle B mit Datensätzen (Übersicht Stoffe) > Tabelle C (Übersicht der Anlagenteile) 3
4
Dashboard / Zentrale von BUBE Online > BUBE-Online Portal erhält eine Startseite (Zentrale/Dashboard) von der aus Nutzer einen schnellen Zugang zu ihren jeweiligen Berichten des aktuellen Berichtsjahres erhalten > Zusätzlich relevante Informationen zum Sachbearbeiter und Links zu Hilfedokumenten > Zusammenfassung der relevanten Stammdaten > Zugang zu den Berichten > Statusinformationen zum jeweiligen Bericht: Berichtspflichtig bis oder Bericht befindet sich in der Prüfung > Wechsel des Berichtsjahres: durch Klick auf die Jahreszahl 5
Statusangaben und Feedback für den Nutzer > In der Zentrale werden dem Nutzer Statusinformationen zu seinen Berichten mitgeteilt > z.b. PRTR Berichtspflicht bis zu einem definierten Datum > z.b. 13. BImSCHV wurde erfolgreich übermittelt und befindet sich in der Prüfung 6
Dashboard / Zentrale von BUBE Online > BUBE-Online Portal erhält eine Startseite (Zentrale/Dashboard) von der aus Nutzer einen schnellen Zugang zu ihren jeweiligen Berichten des aktuellen Berichtsjahres erhalten. > Zusätzlich relevante Informationen zum SachbearbeiterIn und Links zu Hilfedokumenten. > Zusammenfassung der relevanten Stammdaten. > Zugang zu den Berichten. > Statusinformationen zum jeweiligen Bericht: Berichtspflichtig bis oder Bericht befindet sich in der Prüfung. > Wechsel des Berichtsjahres: durch Klick auf die Jahreszahl. 7
Dashboard / Zentrale eines Berichts > Im Fokus der BUBE-Anwendung steht das Erstellen von Berichten. > Sobald der Nutzer sich für die Erstellung eines Berichts entscheidet, gelangt er auf die Übersichtsseite des jeweiligen Berichtspflicht. Alle relevanten Informationsblöcke werden entsprechend der chronologischen Vorgehensweise untereinander darstellt. (1) Stammdaten (lesen und bestätigen) (2) zu berichtende Informationen eintragen (3) Eingaben prüfen (4) Bericht bereitstellen (Drucken, Export etc.) (5) Bericht der Behörde übermitteln 8
Bestätigen der Stammdaten > Der Nutzer erhält die Möglichkeit seine Stammdaten zu ändern. Dabei wird dem Nutzer durch eine Meldung mitgeteilt, dass die Änderung erst übernommen wird, sobald die zuständige Genehmigungsbehörde diese Daten autorisiert hat. Aufrufen der Formulare > Nach dem Bestätigen der Stammdaten werden dem Nutzer 3 Optionen zur Verfügung gestellt, um in die Formularansicht zu gelangen. (1) Daten aus Vorjahr übernehmen (2) Importieren einer XML Datei (3) Direkt zu den leeren Formularen 9
Darstellung von Datensätzen > Das BUBE-Online Portal bietet zwei Darstellungsformen der Datensätze. Sie werden je nach Menge der Dateneinträge angezeigt und können jederzeit vom Nutzer gewechselt werden. > Bei einer geringen Anzahl von Datensätzen (weniger als 5) werden z.b. Stoffe oder Anlagen mit einer Grafik nebeneinander abgebildet. > Große Datenmengen werden in Tabellen abgebildet und können sortiert und gefiltert werden. 10
Tabellen > In Tabellen können über ein Suchfeld Datensätze gesucht bzw. gefiltert werden. Die Darstellung der Ergebnisse erfolgt in Echtzeit. > Über Einträge bearbeiten erscheinen Checkboxen zum Auswählen mehrerer Datensätze um sie beispielsweise zu löschen. > Bei Mouseover über den Titel im Tabellenkopf wird die Spalte hervorgehoben und bei Klick entsprechend eine Neusortierung aufoder absteigend der Werte möglich. > Bei Mouseover einer Zeile wird diese farblich hervorgehoben. 11
Navigation > Anstelle eines Navigationsbaum am linken Rand erhält der Nutzer in der neuen BUBE- Online Version im oberen Bereich einen Pfad / Breadcrumb, der für eine bessere Orientierung sorgt und die Hierarchien deutlicher macht. Außerdem werden lange Einträge besser lesbar. > Der Nutzer kann zu jedem Zeitpunkt auf die zentrale Seite (Dashboard) seines Berichtes springen. 12
Pfad > Auf der Startseite eines ausgewählten Berichts ( z. B. 11. BImSchV) wird die Berichtsart in der Navigation ausgeschrieben. > Gelangt man in eine tiefere Ebene, entsteht im oberen Bereich ein Pfad, der die Hierarchie deutlich anzeigt. > Dadurch hat der Nutzer die Möglichkeit, schnell auf den Ausgangsbildschirm seines Berichts zu gelangen. 13
Editierbare Daten im Popup Fenster > Datensätze wie z.b. Stoffe die zu Bearbeiten sind, werden in einem Popup dargestellt und können unmittelbar editiert und gespeichert werden. 14
Einblenden von Formularfeldern > Bestimmte Formularbereiche werden erst nach einer Auswahl eingeblendet. > Dies sorgt für eine übersichtliche Formulardarstellung und erleichtert das Bearbeiten der Formulare. Der Nutzer wird besser geführt. 15
Statusmeldung > Der Nutzer erkennt, in welchem Status sich sein Bericht befindet. > In dieser Ansicht wird der Bericht noch von der Behörde bearbeitet. Datenänderungen können nicht vorgenommen werden. 16
Tooltipps > Toolstipps unterstützen den Nutzer, indem sie detailliertere Erklärungen beispielsweise zu Schaltflächen liefern. 17
Intelligente Suche > Die Suche nach Stoffen befindet sich direkt auf der Formularseite des Neueintrages. > Eine Live-Suche zeigt unmittelbar Suchergebnisse in einem Dropdownfeld an. Die Stoffnummer wird anschließend übernommen. 18
Nachvollziehbare Übernahme von berechneten Daten > Legt der Nutzer eine neue Tätigkeit an und berechnet dazu beispielsweise Schadstoffe, für die Freisetzung in Luft, werden diese in den Abschnitt Freisetzung Luft übernommen. > Das Modul Luft klappt sich auf und wird für den Nutzer sichtbar. 19
Visualisierung > In einer zusätzlichen Modulbox werden dem Nutzer von BUBE Online Grafiken angezeigt, die beispielsweise die Freisetzungen in Luft zum vorherigen Berichtsjahr miteinander vergleichend darstellen. 20
Screendesign. Dashboard Zentrale BUBE Stammdaten bestätigen 21
Screendesign. Berichten Berichten Infolayer 22
Screendesign. Berichten Freisetzungen Luft Emissionsgrafik 23
Screendesign. Berichten Schadstoff Methan Berichten Detail Schadstoff Methan 24
Screendesign. Styleguide 25