Benutzeroberfläche zur Verwaltung von intermodalen Transporten

Zusammenfassung

Mit dem Shipment Planner erhält Bertschi eine moderne Benutzeroberfläche mit einer neuartigen Visualisierung, welche den komplexen Prozess des intermodalen Transports abbilden kann. Die Nutzer können dank aufgeräumtem Interface und der visuellen Übersicht effizienter arbeiten.

Schlüsselbegriffe

UX, Informationsvisualisierung, React, SemanticUI, SASS, d3.js, Firebase, Figma

Ausgangslage

Die Firma Bertschi AG ist markführend im weltweiten Verkehr von flüssigen Chemieprodukten in Tankcontainer. Für die optimale Planung der Transporte nutzt Bertschi die Applikation "Workflow". Workflow ist technisch veraltet und vor allem neuen Operatoren bereitet die Benutzeroberfläche Schwierigkeiten. Mit diesem Projekt wird der Grundbaustein für die Entwicklung einer Planungs-Applikation gesetzt, die Workflow ersetzen wird.

Abb. 1 Ansicht Containererstellung der aktuellen Lösung "Workflow"

Zielsetzung

In einer ersten Recherchephasen sollen folgende Themen analysiert werden:

1. Wie sieht eine intuitive Benutzeroberfläche zum Planen von intermodalen Transporten mit mehreren Containern aus?
2. Können die Planungsdaten visualisiert werden und welche Visualisierung bietet sich dafür an?
3. Wie können Fehler und Konflikte während der Planung erkennt und dargestellt werden?
4. Was muss beachtet werden, damit diese Benutzeroberfläche auch von Nutzern anderer Kulturen und Sprachen intuitiv bedient werden kann?
5. Welche Programmiersprache, welche Frameworks oder Libraries eignen sich für diese Art von Benutzeroberfläche?

Anhand der Ergebnisse einer intensiven Recherche und naher Zusammenarbeit mit der Firma Bertschi und deren Nutzern während mehreren Design- und Entwicklungsphasen soll ein durchgängiger Prototyp mit vertikaler Abbildung des wichtigsten Use-Case entstehen, der als Grundlage für die Weiterentwicklung genutzt werden kann.

Ergebnisse

Nebst eines visuellen Prototypen haben wir eine Web-Applikation entwickelt, die den wichtigsten Use-Case abbildet. Die Web-Applikation setzt sich aus vier Hauptkomponenten zusammen.

• Headbar mit Applikationsnamen und Informationen zum aktuellen Auftrag
• Sidebar mit Navigation und Progressliste
• Detailansichten mit den Planungsdaten
• Visualisierung mit vertikaler Darstellung des Auftrag

Die Headbar beinhaltet das Applikationslogo, den Applikationsnamen, sowie die Auftragsnummer des aktuellen Auftrags. Zudem beinhaltet sie die Navigation zur Übersicht der Aufträge, sowie einen Applikationswitcher um auf die weiteren Applikationen von Bertschi wechseln zu können.

Die Sidebar unterteilt sich in eine standardmässige Navigation und eine Fortschirttsleiste. Mittels der Navigation kann über die verschiedenen Detailansichten navigiert werden. Die Fortschittsleiste dient dem Benutzer als Hilfestellung der zu erledigenden Aufgaben und deren Fortschritt. Die angezeigten Angaben sind an die jeweilige Detailansicht gebunden.

In den Detailansichten werden die Planungsdaten eines Auftrages abgespeichert. Für jeden Navigationspunkt existiert eine zugehörige Detailansicht.

Die Visualisierung beinhaltet eine vertikale visuelle Darstellung der gespeicherten Daten der Detailansichten. Sie besteht aus einer abstrakten Mischform einer Timeline und eines Networks um sowohl eine zeitliche als auch eine geographische Ebene darstellen zu können. Sie ermöglicht somit alle wichtigen Informationen eines Auftrages einzusehen, ohne durch die Detailansichten klicken zu müssen.

Die Wep-Applikation kann für die sofortige Weiterentwicklung genutzt werden. Anhand der Analyse der möglichen Technologien haben wir uns für folgende Implementation entschieden:

• Programmiert mit React, SemanticUI, SASS
• Visualisierung umgesetzt mit d3.js
• Datenbank-Anbindung mit Firebase

Mit dem Shipment Planner kann der Nutzer die Transportwege der Container anhand Dateneingabe planen. In der Timeline werden die zeitlichen und geografischen Wege der Container visualisiert. Als zusätzliche Hilfestellung wird dem Nutzer eine auf den Planungsprozess abgestimmte Checkliste angezeigt.

Abb. 2 Ansicht Containererstellung unserer Applikation "Shipment Planner"

Projektdaten

Projektdauer: 6 Monate (19.02.2018 - 17.08.2018)
Aufwand in Personenstunden: 720h
Teamgrösse: 2 Personen
Projektart: Bachelor Thesis

Auftraggeber

Bertschi AG
Technopark Brugg
Badenerstrasse 13
CH-5200 Brugg AG
www.bertschi.com

Projekt-Verantwortliche:
Markus Berner
Thomas Baumann
Ramon Schöb

Projektteam

Dominic Bär
Jessica Odermatt

Kontakt

Doris Agotai: doris.agotai@fhnw.ch
Fabian Affolter: fabian.affolter@fhnw.ch

<< zurück