Für den Kurs Urbane Ebenen habe ich mir die Aufgabe gestellt ein Konzept für die Lösung des „Ist die nächste Bahn leer?“-Problems zu entwickeln.

Wer kennt das nicht - man steht morgens an einem der Berliner S-, oder U-Bahnhöfe und starrt ungläubig in einen völlig überfüllten Zug. Jetzt gilt es abzuwägen: „Quetsche ich mich da jetzt noch rein, oder ist die nächste Bahn vielleicht leer?“

Eine kleine, smarte und sympathische App soll das Problem lösen. Die App soll: - eine Sache sehr gut visualisieren. - sehr leicht zu bedienen sein. - kaum Interaktion benötigen. - durch eine freundliche Gestaltung auffallen.

Ein wichtiger Bestandteil des Projektes, ist die Art wie die Informationen über die Füllstände der Bahnen gewonnen werden sollen. Ich gehe in meinem Konzept davon aus, dass ein großes Interesse an meiner App besteht und die Nutzer dazu bereit sind, im Gegenzug zu der kostenlosen Benutzung der App, die eigene GPS-Position anonym an einen Server zu schicken. Natürlich müsste gut kommuniziert werden, dass die Daten tatsächlich völlig anonym und keine Rückschlüsse auf den User möglich sind. Außerdem benötige ich GPS-Karten des Berliner Nahverkehrsnetzes und live Informationen über die Position der Züge.

Copyright

©Denny Koch

Benutzer schicken Positionsdaten an einen Server.

Copyright

©Denny Koch

Die Positionen der User werden über das Liniennetz der BVG gelegt.

Copyright

©Denny Koch

Kombiniert man die Benutzerpositionen mit den live Positionen der Bahnen, können die Benutzer bestimmten Zügen zugewiesen werden.

Aus diesen Informationen könnte man dann eine Aussage über den Füllstand eines Zuges machen.

Sind, zum Beispiel, in der letzten Minute 10.000 Positionen eingegangen und davon können den meisten Zügen ungefähr 100, der S-Bahn vom Westkreuz nach Potsdam Hbf aber 300 Benutzer zugewiesen werden, können wir annehmen das dieser Zug überdurchschnittlich voll ist.

Natürlich sind dies nur ungefähre Daten, aber das reicht vielleicht schon um eine Entscheidung treffen zu können.

Man könnte zusätzlich noch versuchen statistische Daten der BVG mit in die Berechnung einfließen zu lassen um noch genauer zu werden.

Durch das Anzeigen des Inhalts von Unknown akzeptieren Sie die Datenschutzbestimmungen des Anbieters.

Unknown vertrauen und Inhalt immer anzeigen

Anzeigen

©Denny Koch

Unknown

Als ersten Prototyp habe ich mich für ein Stop-Motion-Video entschieden, da ich der Meinung war dass ich das Konzept und die prinzipielle Interaktion damit am besten zeigen kann. Es stellte sich allerdings heraus dass die Aussagekraft des Videos leider nicht dessen Produktionsaufwand rechtfertigte.

Prinzipiell soll die App nicht viel Interaktion benötigen und sich möglichst intelligent verhalten, wenn es darum geht die Intention des Nutzer zu unterstützen. Möchte man eine Auskunft über die nächsten Züge an einem Bahnhof bekommen, muss die App wissen an welchem Bahnhof man steht. Da die App für ihre Funktion eine GPS-Karte der Berliner Nahverkehrsstrecken und damit auch der Bahnhöfe hat, kann ich mir vorstellen auch die Position des Nutzer auf einem Bahnsteig automatisch zu erkennen und so zu wissen für welche Bahnen er sich interessiert. Das heißt nach dem starten der App, bräuchte man keine Auswahl der Linien, sondern die App stellt automatisch die, in Frage kommenden, Linien dar.

Mein Video-Prototyp zeigt eine Lösung, in der die Daten via Augmented-Reality dargestellt werden. Spätere Entwürfe verzichten auf diese Komponente, da sich die Art der Darstellung eher als Hinderlich zeigte.

Die grundsätzliche Interaktion sieht vor das der User per Swipe durch die einzelnen, kommenden Züge navigieren kann, um sich deren Visualisierung anzuschauen. Außerdem sah der erste Entwurf noch eine vertikale Swipe-Geste vor, die eine Map zugänglich macht. Da ich alle Informationen der Map später in die Hauptvisualisierung integrierte, taucht in späteren Entwürfen nicht mehr auf.

Meine Hauptaufgabe war die Visualisierung der Daten. Dabei mussten einige Faktoren bedacht werden. Ich hatte mich schon früh dafür entschieden, dass die App eine freundliche Stimmung haben sollte, da ich der Meinung bin, dass bei einem so ärgerlichen Thema wie einer volle S-Bahn, eine sympathische, illustrative Darstellung besser passt als eine zu technokratisch, sachliche Datenvisualisierung. Daraus ergaben sich einige interessante und herausfordernde Gestaltungsprobleme.

Mein erster Visualisierungsansatz zeigt deutlich die drei Probleme mit denen ich mich gestalterisch auseinandersetzten musste.

1. Ich versuchte hier über den Füllstand der Farbe, den Füllstand der Bahn zu visualisieren. Das Problem ist, dass die gefüllte Variante, die ja eigentlich einen, für den User, negativen Zustand zeigt, freundlicher als das Graustufenbild aussieht.
2. Die detaillierte Darstellung der Bahn enthält die originale Farbgebung der Bahn, die auch einen Rotton beinhaltet. Dieser wird natürlich vom User ebenfalls als negativ gelesen und sorgt für noch mehr Verwirrung beim deuten der Grafik.
3. Der User könnte bei einer unklaren Visualisierung, die Intention der Grafik falsch verstehen und anfangen die Anzahl der Wagons und andere Details ebenfalls interpretieren. Diese dienen aber nur der Stimmung, der Grafik.

Durch zahlreiche Iterationen, versuchte ich die verschiedenen Probleme in den Griff zu bekommen.

Im finalen Entwurf, benutze ich weiterhin die detaillierte Darstellung der Bahn, da der illustrative Charme nicht verloren gehen sollte. Ich habe aber die roten Zierleisten an der Bahn entfernt und konnte so das Rot der Bahn, neben dem Füllstand, als zusätzliche Informationsebene nutzen.

Als nächstes musste die, über der Bahn befindliche Zeitleiste, ausgestaltet werden.

Am schwierigsten war hier eine korrekte Darstellung des Füllstanden, mit den anderen Informationen die die Zeitleiste zeigt, zu kombinieren.

Copyright

©Denny Koch

Die Zahl in den Kreisen zeigt die Minuten bis der, durch den Kreis repräsentierte Zug, kommt. Die Abstände zwischen den Kreisen stellen eine doppelte Kodierung dieser Information dar. Die Farbe entsprich der Farbe der Dargestellten S-Bahn Linie im Netzplan der BVG.

Nachdem Till den wichtigen Hinweis lieferte, dass die Kreise auch gleichzeitig eine Vorschau auf die Füllung der kommenden Züge geben könnten, versuchte ich eine Sinnvolle Umgestaltung der Zeitleiste.

Copyright

©Denny Koch

Dadurch das die Minutenzahlen in den Kreisen stehen, wird deren Größe, fälschlicher Weise, mit der Zeit und nicht mit dem Füllstand, in Verbindung gebracht.

Außerdem braucht der User eine 100%-Angabe. Also einen Hinweis darauf wie sich die Größe des Kreises zu der Füllmenge verhält.

Copyright

©Denny Koch

Farbkodierung der S-Bahn Linien; Minutenangabe außerhalb der Kreise; 100%-Angabe; Aber visuell nicht stark genug im Kontrast zu der Darstellung der Bahn.

Copyright

©Denny Koch

Versuche mit Balken statt Kreisen; Balken sind grafisch leichter in den Griff zu bekommen, machen die Gestaltung aber sehr streng und heben, durch ihre vertikale Orientierung, das Gefühl einer fortlaufenden Zeitleiste auf.

Copyright

©Denny Koch

Die Aussagekraft stieg nicht signifikant, mit der Verwendung von Balken.

Copyright

©Denny Koch

Der finale Entwurf des Zeitstrahles. Die Füllmenge ist gut lesbar, die Farbkodierung der S-Bahn Linie ist beibehalten und die Zeitangabe weiterhin möglich. Die farbliche Markierung zeigt an, welche S-Bahn man gerade betrachtet.

Nachdem alle gestalterischen Fragen geklärt waren, konnte ich mich an die Erstellung des finalen Prototypens machen. Er ist in HTML und JavaScript programmiert und nutzt moderne HTML-Features um Touchgesten auf mobilen Endgeräten zu ermöglichen.

Tipp: Wenn man die Seite in einem iOS-Gerät öffnet und dann auf „Zum Homescreen hinzufügen“ tapped, wird die Seite zu einer Fullscreen Web-App.

http://dennykoch.de/s-bahn/

Erste Tests mit dem Prototypen haben schnell gezeigt, dass die meisten User, wieder Erwarten, versuchen auf die Zeitleiste zu tapped, anstatt zu Swipen. Um dem User zu zeigen das eine Swipe-Geste möglich ist, bediene ich mich eines Feedforwards dass zeigt wie die Bahnen aufgereiht sind.

Mehr zum Thema Transitions im Interfacedesign gibt es auf: http://ui-transitions.com (Bachelorarbeit von Johannes Tonollo an der FHP)

Ich habe, auf der Werkschau der FHP 2012, für meinen Prototypen sehr positives Feedback bekommen. Die meisten User haben die Darstellung schnell verstanden, waren begeistert von der Idee und konnten sich schnell ein Szenario vorstellen in dem sie die App gerne benutzen würden.

Eine Frage die sich immer wieder stellte war, ob und wie man genug Benutzer gewinnen könnte damit das Konzept funktioniert. Ein Ansatz wäre, die App als „Plugin“ für andere Anwendungen, die gerne unterwegs benutzt werden, zu planen. Ein Beispiel könnte die Page-App sein. Mit einem Tap auf den „Bahn leer?“ Button bekomme ich die gewünschte Information ohne meine App verlassen zu müssen. Dafür sendet die Page-App während ich lese weiter GPS-Koordinaten an den Server.

Das Projekt hat mir sehr viel Spaß gemacht. Es war toll sich einmal auf eine Gestaltungs- und Konzeptaufgabe konzentrieren zu können. Till hat immer wieder wertvolles Feedback geliefert und mich für wichtige Fragen, bei der Informationsvisualisierung sensibel gemacht. Im Kurs gab er zusätzlich sehr interessante Einblicke in bestehende Visualisierungsprojekte, deren Vorgehensweise und Lösungsansätze.

Ich möchte gerne an dem Projekt weiter arbeiten, da ich der Meinung bin dass es tatsächlich realisierbar ist.