Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

NYCCabs // The Data Interface

Wie sind wir zu der vermehrt standardisierten Interface-Gestaltung gekommen, die sich heutzutage so häufig, egal ob auf Websites oder Apps, wiederfinden lässt? Ist es möglich, sich von ihr zu lösen und vielleicht sogar Visualisierungen ganz ohne Interface-Elemente zu entwickeln? Im Kurs The Data Interface wurde diese Frage unter dem Aspekt der Datenvisualisierung diskutiert und untersucht. Vor dem Hintergrund einer intensiven Auseinandersetzung mit den Daten und alternativen Ansätzen der Gestaltung wurde sich aus unterschiedlichen Richtungen vor allem der Frage nach innovativen Interaktionslösungen genähert und komplexe Datensätze in vielfältigen Visualisierungen erarbeitet.

NYCCabs

Die zunehmende Globalisierung der letzten Jahre brachte dem öffentlichen Verkehr stetigen Aufschwung. Das lässt sich gerade in Großstädten wie New York beobachten, welche Massen an Touristen anziehen. Vor allem die ikonischen Taxis, die Yellow Cabs, in NYC bergen eine große Menge unentdeckter Daten - vielseitige, faszinierende und außergewöhnliche Geschichten, die NYCCabs zum Vorschein bringt.  Steig ein und entdecke das Universum der mehr als 325.000 Taxifahrten, die hier jeden Tag stattfinden!

Datenstruktur

Die Taxi and Limousine Commission in New York, welche den Taxiverkehr koordiniert, stellt jedes Jahr die erhobenen Daten zur freien Verfügung. Dazu zählen neben den klassischen Yellow Cabs auch die Green Cabs, welche den Verkehr in der Innenstadt entlasten sollen und nur nördlich der W 110 St/E 96th St in Manhattan und den restlichen vier Boroughs fahren dürfen. Auch die Daten der FHV (For-Hire-Vehicles), zu denen zum Beispiel Limousinen zählen, wurden erhoben, für unsere Datenvisualisierung aufgrund der Konzentration auf die Dynamik zwischen Green und Yellow Cabs aber nicht weiter beachtet.

Taxi-Lokationen werden von der TLC nicht in genauen geographischen Koordinaten aufgezeichnet, stattdessen besteht ganz New York aus Feldern, sogenannten Zonen. Davon gibt es 263, mit Zone 264 & 265 für Fahrten außerhalb des Stadtgebietes. Neben dieser Pick-Up und Drop-Off Location sind die Zeiten im Datensatz enthalten, die Passagieranzahl, Mautgebühren, Trinkgelder, Bar oder Kartenzahlung, die Gesamtgebühr sowie die Distanz.

Zones-01.jpgZones-01.jpg

Um die Menge der Fahrten besser greifen zu können, konzentrierten wir uns auf den Datensatz eines zufällig ausgewählten Tages. An einem Tag gibt es etwa 260.000 Fahrten mit den Yellow Cabs und 21.000 Fahrten der Green Cabs. Bei dem Ausarbeiten des Datensatzes half uns vor allem die vorgestellte Herangehensweise aus dem Workshop von Jonas Parnov zum Data Wrangling.

Bildschirmfoto 2019-07-30 um 11.34.05.pngBildschirmfoto 2019-07-30 um 11.34.05.png
Bildschirmfoto 2019-07-30 um 11.33.51.pngBildschirmfoto 2019-07-30 um 11.33.51.png

Prozess – Konzept

Durch die Menge an Daten gab es von Anfang an viele unterschiedliche Richtungen, die wir mit unserer Datenvisualisierung austesten wollten – sollte es ein Tool zur Unterstützung der Verkehrsplanung werden, um Staus und Überlastung zu vermeiden, eine Informationsquelle für die TLC um Taxi-Standorte umzusiedeln und den Service zu verbessern oder doch den Taxifahrern selbst helfen, ihre Route zu planen und die für sich profitabelste Arbeitsweise herauszufiltern?

3.jpg
3.jpg3.jpg
1.jpg1.jpg

Nach vielen Interaktions-Runden stellte sich heraus, dass wir in jedem Fall eine Grundlage zur Erfassung der Daten des Betrachters brauchten, eine Verortung der Fahrten durch Lokation und Zeit. Durch Anraten von Boris konzentrierten wir uns nun vorerst auf die Auseinandersetzung mit den realen Daten, nicht den Parametern, wie sie in unserer Vorstellung existierten. Was steckte an Hintergrund in den Daten, was sollte einem beispielsweise der Parameter des Trinkgeldes vermitteln?

e.jpg
e.jpge.jpg

Überraschenderweise stoßen wir auf viele unerwartete Einzelfahrten, Maxima und Minima in den Daten, welche Geschichten erzählten. Wir entscheiden uns dafür, diese Geschichten vorrangig in den Vordergrund zu rücken, die bei einer einfachen Betrachtung der Daten nicht ans Licht gekommen wären. NYCCabs ist somit ein Explorationstool, welches dem User Geschichten aus der Taxi-Welt New Yorks erzählt und dabei einige Eigenheiten der Stadt aufdeckt.

Prozess – Gestaltung

Mithilfe des Design-Sketching Workshops von Eva-Lotta Lamm wurden wir von Beginn an darauf sensibilisiert, bevor wir uns auf einzelne Interface-Elemente oder Funktionen versteiften, viel auszuprobieren und vor allem in alternative Richtungen in der Gestaltung zu denken. Über den Verlauf der Konzeptfindung sammelten sich immens viele Skizzenbögen an, bei denen es uns dann jedoch letztlich schwer viel, einzelne Ideen zusammenzubringen. Was einen starken Einfluss auf die schlussendliche Gestaltung hatte, war die Methode des Sketchings jeder einzelnen Interaktionen, hier wurde uns wiederholt verdeutlicht wie schnell man im Gestaltungsprozess auf Platzhalter oder standardisierte Elemente zurückgreift, ohne es überhaupt zu hinterfragen. Aus dieser Sicht hat es unsere Arbeitsweise deutlich verändert und zu einer Vielzahl an unterschiedlichen Ideen geführt, bei denen es uns dafür aber auch schwer viel, uns festzulegen und eine konkret auszuformulieren.

4-01.jpg
4-01.jpg4-01.jpg

NYC Kopie.jpg
NYC Kopie.jpgNYC Kopie.jpg

Die Entscheidung, uns von einer geographisch korrekten Darstellung zu lösen und anhand der Zonen zu einer übersichtlichen Struktur mit geographischem Bezug zu finden, bei der zu jeder Zeit noch deutlich wird, wo sich welcher Ort befindet, brachte uns der schlussendlichen Gestaltung einen großen Schritt näher. Mithilfe von Binning der Datengrößen gelang es uns, der Größe der Zone stets einen Wert zuzuschreiben – sei es die Fahrtenanzahl oder die Fahrtkosten. So lassen sich bereits durch die sich verändernde visuelle Darstellung datenbasierte Informationen vermitteln. Diese Methode ist zum Kernpunkt unserer Datenvisualisierung geworden.

5 Group Inner, Outer@2x.png
5 Group Inner, Outer@2x.png5 Group Inner, Outer@2x.png
d.jpgd.jpg
PU_Neu.jpgPU_Neu.jpg

Interface

E1 – EINFÜHRUNG

Der User wird durch eine zeitbasierte Visualisierung der einzelnen Taxifahrten am Tag in New York in das Interface eingeführt. Hier wird ein Gesamteindruck der Situation geschaffen und für die nachfolgenden Daten sensibilisiert. Schnell wird einem klar, welche Unmengen an Einzelfahrten pro Tag stattfinden und wie schwierig es ist, diese Menge zu erfassen.
Der Zeitablauf stellt dabei in stündlichen Abständen die Fahrten innerhalb dieser Stunde dar. Es ist die Möglichkeit gegeben, die Animation anzuhalten und den zeitlichen Ablauf selber zu kontrollieren, um einzelne Zeitfenster im Detail zu betrachten.

Die Infotexte, welche nacheinander eingeblendet werden, geben einen allgemeinen Einblick in die Situation der Taxis in New York. Dank Ihnen fällt es unwissenden Betrachtern leichter, die Daten nicht nur zu sehen, sondern auch zu verarbeiten.

Die Ansicht erlaubt es dem Betrachter, den Taxiverlauf innerhalb eines Tages, einer Stunde oder mit Fixierung auf die Flughäfen zu verfolgen. Die Ansicht kann dabei variabel zwischen dreidimensionaler Ansicht und einem Draufblick angepasst werden.

Desktop2.jpg
Desktop2.jpgDesktop2.jpg
Desktop1.jpgDesktop1.jpg
Desktop3.jpgDesktop3.jpg
Desktop4.jpgDesktop4.jpg

Bar_1.pngBar_1.png

Bar_2.pngBar_2.png

Timeline_1h.pngTimeline_1h.png

Timeline_24h.pngTimeline_24h.png

Drops.pngDrops.png

E2 – CLUSTERING & DATENSTRUKTURIERUNG

Über die Navigationsleiste kann man tiefer in die Visualisierung und somit die Datenstruktur eintauchen. Da wir unseren Fokus auf ein exploratives Tool gelegt haben, ist es hier möglich, unterschiedliche Parameter selbst zu untersuchen und zwischen Zeiträumen und Taxiart zu vergleichen. Dabei werden die Fahrten einzelner Zonen geclustert. Die Größe des Zonenpunktes spiegelt somit entweder die Anzahl der Fahrten (Aktivität), der Passagieranzahl oder der Kosten wider. Unterteilt werden die Parameter zur besseren Übersicht nochmals in Pick-Ups (begonnene Fahrten), Drop-Offs (der Endpunkt), Standard-Taxi und Großraumtaxi, sowie Fahrtkosten und Trinkgelder. Auch hier lässt sich das Interface über die Zeitslots selbstbestimmt steuern. Die Legende weist auf die Unterscheidung zwischen Green und Yellow Cabs und das Größenverhältnis der Zonen hin. Eine weitere Möglichkeit ist es, bei großem Eigeninteresse eine einzelne Zone auszuwählen und von diesem Punkt aus die Fahrten nachzuverfolgen.

1_2.jpg
1_2.jpg1_2.jpg
1.jpg1.jpg
1_3.jpg1_3.jpg

Zur besseren Orientierung im Interface bleiben die ursprünglichen Zonenkerne erhalten. Durch Hovern lassen sich konkrete Informationen zu der Zone und den Fahrtinformationen erfassen.

2.jpg
2.jpg2.jpg
2_2.jpg2_2.jpg
2_3.jpg2_3.jpg
2_4.jpg2_4.jpg

Das Prinzip des Weiterklingen von Slides zieht sich durch das gesamte Interface. Auch hier lassen sich so Informationen zu den Daten entdecken und erläutern, die nicht auf den ersten Blick ersichtlich sind.

3_1.jpg
3_1.jpg3_1.jpg
3.jpg3.jpg
3_2.jpg3_2.jpg
3_3.jpg3_3.jpg
3_4.jpg3_4.jpg
3_5.jpg3_5.jpg

E3 – DATA STORIES

Durch die dritte Ebene wird es dem Betrachter möglich, tief in das Taxiuniversum einzutauchen und in der Unmenge an Daten versteckte Data Stories zu entdecken. Unter verschiedenen Aspekten werden dabei Hintergrundinformationen beleuchtet, die ein klares Bild der Stadt New York in Bezug auf Taxis abzeichnen. Wir haben uns auf sechs Stories konzentriert, die Lost Places (unbefahrene Zonen), Early Birds (Frühaufsteher), Party People (Nachtfahrer), Lazy or Not (die kürzesten Strecken), Tourist Trap (touristische Ziele ausgehend von den Flughäfen) und der Golden Ride (unter der Prämisse, das jeden Tag eine besonders verrückte/ungewöhnliche/interessante Fahrt stattfindet).

4.jpg
4.jpg4.jpg
4_2.jpg4_2.jpg
4_1.jpg4_1.jpg
4_3.jpg4_3.jpg
4_4.jpg4_4.jpg
4_6.jpg4_6.jpg
4_5.jpg4_5.jpg

Durch Anwendung des Slideprinzips lassen sich spezifizierte Informationen einblenden. Auf diese Data Stories lässt sich einerseits über die Navigationsleiste zurückgreifen, andererseits lassen sie sich über Erzählsternchen im Interface verteilt an relevanten geographischen Positionen wiederfinden, die dazu einladen, versteckte Geschichten zu entdecken.

5.jpg
5.jpg5.jpg
5_1.jpg5_1.jpg
5_3.jpg5_3.jpg
5_4.jpg5_4.jpg
5_7.jpg5_7.jpg
5_5.jpg5_5.jpg
5_6.jpg5_6.jpg
5_8.jpg5_8.jpg
5_9.jpg5_9.jpg
5_10.jpg5_10.jpg

Prototyp

Der Prototyp kombiniert die verschiedenen Tools. Die Gesamtansicht ist mit der 3D Software Houdini prozedural generiert und animiert worden, während das Clustering in Processing programmiert wurde. Die zusätzlichen Interfaceelemente wurden mithilfe von Figma gestaltet und anschließend mit Principle animiert. Abschließend wurden die einzelnen Elemente in After Effects zu einem Videoprototypen zusammengebracht.

Ausblick

Welche Menge an Daten alleine in den Taxifahrten eines einzigen Tages stecken, ist schwer vorstellbar. Durch die Vielschichtigkeit der Informationen und der unterschiedlichen Interpretationsmöglichkeiten fiel es uns schwer, ein Grundfundament und einen Fokuspunkt zu finden. Den Ansatz zu verfolgen, mithilfe der Taxidaten Geschichten der Stadt New York herauszufiltern, hat es uns ermöglicht, völlig neue Daten erheben zu können und sie auf eine persönliche Art und Weise dem Betrachter zu vermitteln. Ohne die diversen Techniken und Denkweisen, die wir im Verlaufe des Kurses erlernten, wären wir sicherlich schnell wieder an einem konventionelleren Punkt der Datenvisualisierung gewesen, der lediglich die Masse behandelt hätte. Der Kurs hat uns dabei unterstützt, unsere Denk- und Arbeitsweisen in Bezug auf Interfaces zu hinterfragen und sich beispielsweise durch Sketching-Techniken neue Wege zu eröffnen. Konkrete Interaktionen könnten noch ausgefeilter sein und auch die vereinzelte Anwendung von Fotos zur Unterstützung der Vorstellung des Ortes ist abdingbar, jedoch funktioniert die Visualisierung als Explorationstool sehr gut und lädt dazu ein, in die Welt der New Yorker Taxis einzutauchen.

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Sommersemester 2019