In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
(2. FS) Grundlagen Interfacedesign: ANALYSE - Informationsarchitektur, Bedienprozess und Visualisierung - Menschen & Mobilität
Im Sommersemester 2018 wurden zwei Aufgaben zum Thema “Mensch(en) & Mobilität” bearbeitet. Hierbei lag der Fokus auf der Analyse von bestehenden Zeichensystemen, Designmethoden, Darstellungstechniken und darauf basierend schließlich auf das Generieren eigener Datenvisualisierungen.
„Nach wie vor spielt der visuelle Sinn eine zentrale Rolle im Interfacedesign. Denn trotz vielfacher Innovation im Bereich multimodaler Interaktion ist die zentrale Schnittstelle zwischen Mensch und Computer nach wie vor der Screen - in allen Größen und Ausprägungen. Für die Konzeption und Gestaltung von Interfaces, Services oder auch physischen Artefakten ist jedoch die Analyse des Kontextes ausschlaggebend, da sich darauf basierende Rahmenbedingungen für den Entwurf ableiten lassen können. In diesem Kurs liegt der Fokus auf Designmethoden und Darstellungstechniken zur Analyse des Kontextes; das Thema an dem gearbeitet wird ist “Mensch(en) & Mobilität”. Theoretischer Input und Diskurs wird es zu folgenden Themen geben: - die menschliche Wahrnehmung mit Fokus auf den visuellen Sinn; - die Analyse von bestehenden Zeichensystemen; - die Visualisierung von Daten, Zusammenhängen und Prozessen sowie - Ordnungs- und Strukturierungsmethoden. Ziel des Kurses ist es, dass die Teilnehmer*innen die Möglichkeiten der visuellen Darstellung und grundlegende Methoden für die Entwurfsarbeit kennenlernen und ihre Anwendung üben, präsentieren und ihre gestalterischen Prozesse und Entscheidungen nachvollziehbar aufzeigen und begründen können.“
Die Aufgabe war es, in einem Zeitraum von ca. einem Monat eigene Daten aus dem Alltag zu sammeln, welche in einem Zusammenhang mit Mobilität stehen. Mobilität konnte hierbei auch im erweiterten Sinne verstanden werden. Anschließend sollte die gesammelten Daten dann ausgewertet und zuletzt als A1 Plakat anschaulich und verständlich visualisiert werden.
Ich habe mich sehr für die Art der Bewegung meiner Zahlungsströme interessiert, in der zu erkennen sein sollte, in welchem Verhältnis meine Käufe (bar, mit Karte oder online) beglichen werden, wieviel wohinfloss, auf welchen Internetseiten ich mich bewegte und wo ich mich bei einem Kauf/Zahlung befand. Da mein Partner und ich zu der Zeit ohnehin viel in der Wohnung verändern mussten und wir die meiste Freizeit dafür investierten, bot sich eine vielfältige Datenanalyse hierfür an.
Da ich wusste, dass es sich bei meinen Käufen um viele verschiedene Dinge handeln wird, musste ich mir überlegen, wie man diese übersichtlich und nachvollziehbar darstellt. Mir fiel in meinen ersten Skizzen (Abbildung 1-3) auf, dass wenn ich jeden einzelnen Kauf darstellen wollte, wäre das Plakat am Ende einfach zu unübersichtlich und es wäre kein Platz mehr für weitere Informationen gewesen, wie z.B der Zahlungs-Ort oder besuchte Websites. Daher musste ich von Quantität auf Qualität umschwenken und mir ein Kategorisches System überlegen (Abbildung 4-5). Die Verwendung von Symbolen je Kategorie empfand ich als eine äußerst sinnvolle Orientierung für den Leser. An dieser Idee wollte ich auch bis Zuletzt festhalten, merkte bei der finalen Skizze (6) dann aber, dass ich ohnehin nicht darüber hinwegkäme die Symbole zusätzlich zu benennen, was der Platz wiederum nicht hergab. Die letzte Skizze zeigt nun eine Mischung aus Skizze Nr. 2, 3 und 5.
Mit Hilfe einer Exeltabelle, Dokumentierte ich was ich wann, wie, wo, zu welchem Preis gekauft und bezahlt habe. Oft war es schwierig bestimmte Käufe ihren Kategorien zuzuordnen, denn obwohl „Späti Bier“ ebenso ein Lebensmittel ist, ordnete ich dieses in „Snacks & Drinks“ ein, da dies eine Ausgabe darstellt, die eher einem Freizeitvergnügen und Luxus nachkam, als einer Notwendigkeit. Gleiches gilt für „Uni Mensa“. Diese Unterteilung machte ich, da ich es als spannend empfand, wie oft und wieviel ich eigentlich für das Essen im Uni-Alltag ausgebe. Ebenso trennte ich Onlinezahlungen zusätzlich in „Lastschrift“ und „Online-Banking“, da Ersteres passiv und Zweiteres aktiv stattfindet. In „URL“ hielt ich die Standorte per Googlemaps fest, an denen ich meine Käufe tätigte, um diese später dann in der Berlin Karte auf dem Plakat aufzuzeigen.
Die Auswertung der Daten erwies sich als komplizierter als gedacht. Denn ich hatte zwar nun all meine Daten dokumentiert, allerdings musste die Rückschlüsse, die ich daraus zog, noch einmal gesondert aufschreiben, da ich bei der Erstellung der finalen Grafik ansonsten durcheinander gekommen wäre und die Exel-Tabelle ständig hätte neu sortieren und abzählen müssen. (siehe Abbildung unten)
Mit den geordneten Daten habe ich dann Diagramme und Tabellen erstellt, um mir prozentuale Werte und Größenverhältnisse ausgeben zu lassen.
Die Diagramme habe ich nun in Adobe Illustrator hineinkopiert und daraus eigene Grafiken mit anderen Farbkombinationen erstellt (folgende Abbildung 1). Mit dem Zeichenstift-Werkzeug (P) (Abbildung 2) umzugehen fiel mir bis dato sehr schwer, was man durchaus auch in der Linienführung der Ströme erkennen kann (Abbildung 1 & 3). In Abbildung 3 sieht man wie ich gerade versuche die Reihenfolge der Kategorien (Farblegende & Farbsequenzen im Kreisdiagram) zu ändern. Das untere Kreisdiagramm ist die alte Version. Zuvor habe ich jede einzelne Farbsequenz im Diagram per Drehen-Werkzeug (R) zur vorgesehenden Stelle bewegt, daher sind dort die Farben noch recht durcheinander. Das obere Kreisdiagram zeigt dann die damals aktuelle Version mit geordneten Farben. Der nächste Schritt war dann die Linienströme neu zuzeichnen. Ob ich es mir beim Kreis hätte einfacher machen können? Mit Sicherheit, aber ich wollte unbedingt lernen, wie man mit dem Zeichenstriftwerkzeug umgeht, was mich später bei der Überarbeitung der Kategorie-Reihenfolge nach dem Zwischenergebnis zwar noch viele Nerven gekostet hat, aber naja, Übung macht ja bekanntlich den Meister. War schon in Ordnung ;) Am Ende war ja alles schick, hehe.
Bei der Besprechung des Zwischenergebnisses gab es leider noch viele Baustellen, die ich an dem Plakat ausbessern musste. Bis heute bin ich aber für diese Kritik an meinem Plakat sehr dankbar, denn dadurch weiß ich in Zukunft um so mehr auf welche Details ich achten muss. In der folgenden Abbildung 2 sieht man noch einmal, was ich alles falsch gemacht habe.
Inspirationsquellen
Abbildung 1: https://www.flickr.com/photos/rajkamalaich/3811689794/sizes/l/in/pool-730230@N24/
Abbildung 2: http://signal-noise.co.uk/thinking/over-in-less-than-a-second
Abbildung 3: https://projektzukunft.berlin.de/fileadmin/user_upload/pdf/studien/VR_Zusammenfassung_final.pdf
Prozess und Probleme
Nachdem ich alle kleinen Fehler wie „AllCaps“-Schrift, Abstände, Map zeichnen usw. ausgebessert hatte, kam ich nun wie eben schon erwähnt, an die Überarbeitung der Kategorie-Reihenfolge. Hierbei lag die Schwierigkeit darin die Reihenfolge an der rechts stehenden Legende logisch nachvollziehbar aufzubauen und gleichzeitig das Kreisdiagramm mit seinen Linienströmen gut aussehen zu lassen. Eine Änderung des Kreisdiagrammes war leider nicht „mal eben schnell gemacht“, da es nicht aus numerischen Daten generiert wurde, sondern jede Sequenz per Hand mit dem Zeichenstiftwerkzeug.
Abbildung 1: Kreis Version vom Zwischenergebnis Abbildung 2: Kreis mit dunklem Hintergrund; neue Anordnung; unschöne Verteilung der Linien Abbildung 3: Kreis mit hellem Hintergrund; schrecklicher Kontrast; habs mit Schatten unter den Linien versucht – nicht funktioniert; Ich probiere dort gerade wieder alles umzustellen. Letztlich habe ich es dann aber bei der Version der 2. Abbildung belassen und nur den inneren Kreis umgedreht. Dann habe ich die Linienströme wieder neu gezeichnet und voilá, es hat funktioniert. Und ich muss sagen, die Linienführung mit dem Zeichenstift-Werkzeug (R) ist mir beim Ergebnis doch sehr viel besser gelungen.
©Stefanie-Jane Apitz
Die zweite Aufgabe sollten wir nach den selben Darstellungsprinzipien bearbeiten wie die Erste, nur dass wir diesmal bereits bestehende Daten zu einem selbst gewählten Thema im Kontext der Mobilität recherchieren mussten. Ich wollte mich mit folgendem Thema beschäftigen: „Wie wird Fahrradfahren in der Zukunft aussehen?“
Im Bezug auf meine Fragestellung untersuchte ich folgendes: -Fahrradwege -Features (Elektro, GPS, Diebstahlprävention etc) -Apps -Neue Designs
Mein Ziel war es neben allen anderen Neuheiten ebenso herauszufinden, welche Wege von Fahrradfahrern in Berlin im Alltag bevorzugt werden. Denn oft fährt man auf dem Weg zur Arbeit über laute, vielbefahrene Straßen, hügelige Fahrradwege oder Pflastersteine. Dabei sind eventuell auch gut beschaffene Schleichwege in der Nähe, ohne dass man es weiß. Eine Visualisierung davon wäre bestimmt für viele interessant, dacht ich mir. Hierfür habe ich mir einige beliebte Apps, wie „Bikemap“, „Komoot“, „Strava“, „MapMyRide“, „Viewranger“, „Bike Citizens“ und „bbybike“ auf mein Handy heruntergeladen und diese getestet. Bis auf „bbybike“ sind eigentlich alle ziemlich identisch aufgebaut, abgesehen von mal besserem und mal schlechterem Design. Zu Beginn muss man sich registrieren und einen Account erstellen. Dies dient dazu, um einer „Bike-Community“ seine Routen zu teilen (sofern man denn auf einen Premium-Account upgradet, ansonsten werden nur eigene Routen gespeichert). Mittels eines Start-Buttons und gebunden an GPS kann man dann einfach seine Strecke abfahren und am Ende dann wieder auf Stop drücken, um die Route zu beenden und zu speichern. Entgegen meiner Erwartungen konnte man leider in keiner der genannten Apps eine gesammelte Fahrradstreckenübersicht aller Fahrer in Berlin finden, wodurch sich nicht herausfinden ließ, welche Strecken oft oder wenig befahren werden bzw. beliebt sind. Die Apps zeigten lediglich einzelne Routen, beispielsweise von Grunewald nach Müggelsee. Sie alle gaben lediglich freizeitliche, für einen Arbeitsweg ineffiziente Fahrradrouten und Daten über die eigene Fitness preis. Ich ließ daher tiefere Recherchen hierzu gutsein, da ich nicht gewillt war für jede App ca. 4,99€ im Monat zu zahlen. „bbybike“ ist entgegen aller anderen Apps noch sehr hilfreich für den Alltag. In ihr kann man ein Start und Ziel eingeben und sie berechnet dann nach eigenen Vorlieben, wie „grüne Wege bevorzugen“, „Hauptstraßen meiden“ usw. die effektivste Strecke. Zwar ist sie noch nicht optimal und im Grunde kann man auch einfach Googlemaps nutzen, aber von der Idee her schonmal ein guter Anfang.
©Stefanie-Jane Apitz
Auf der Suche im Internet nach beliebten Fahrradwegen oder ihrer Beschaffenheit stieß ich neben schlecht zu lesenden Maps (folgende Abbildung 1) nach langem Suchen auch auf diese hier (Abbildung 2). Das ist eine wunderbare interaktive Berlin Map, die anhand von Standbildaufnahmen zeigt, wie die Beschaffenheit von Fahrradwegen an bestimmten Orten ist. „Eeeendlich etwas gefunden“ und „Eeeendlich hat sich da mal jemand Gedanken darüber gemacht“, dacht ich mir. Diese Karte konnte ich super als Vorlage für meine spätere Visualisierung nutzen.
Abbildung 1: https://www.berlin.de/senuvk/verkehr/mobil/fahrrad/radrouten/download/faltplakat_fahrradwege_radrouten.pdf
Abbildung 2: https://interaktiv.morgenpost.de/radwege-in-berlin/
Außerdem stieß ich auf zahlreiche Artikel und Filme, die über den Unmut vieler Fahrradfahrer in Berlin berichteten. Sie kritisierten unter Anderem, dass die Stadtverwaltung zu wenig für die Fahrradinfrastruktur täte, dass es kaum geeignete Fahrradwege gäbe geschweigedenn ein gescheites Fahrradnetz. Es gab viele Proteste, woraufhin der Senat nun mit Planungen von Fahrradschnellverbindungen in Berlin begonnen hat.
Alle für mich wichtigen Informationen sowie Quellen hielt ich mir in einem Dokument fest (jaa ich weiß haha, keine richtige Kapitälchenschrift. Ich machs nie wieder, versprochen^^)
Besprechnung
Nachdem ich nun einen Haufen recherchiert und viele gute Daten zusammengesammelt hatte, wusste ich nicht wie ich all das, was ich für wichtig erachtete, auf das Plakat umsetzen sollte. Ich war schlichtweg überfordert mit dem, was ich mir vorgenommen hatte. Die gute Prof. Constanze Langer wusste mir aber sofort zu helfen, indem sie mir aufzeigte, dass im Grunde eine Karte von Berlin-Potsdam und ihren Fahrradwegen/Fahrradstraßen im „Ist“- und „Soll“-Zustand völlig ausreiche. Mit diesem Tipp fiel mir ein großer Stein vom Herzen und mein Kopf war fortan nun etwas aufgeräumter.
Zunächst suchte ich mir im Internet eine Karte von Berlin-Potsdam und ihren Bezirken. Ich zeichnete die Umrisse mit einem Grafiktablet nach (folgende Abbildung 1-2). Danach zog ich mir einen Screenshot der interaktiven Karte von der Berliner Morgenpost hinein (Abbildung 3). Durch sie wollte ich auf einen Blick zeigen in welchem Verhältnis es tatsächliche Fahrradwege in Berlin gibt. Busspuren und markierte Fahrradstreifen auf Straßen zählte ich nicht dazu, da ich sie insbesondere für Kinder als ungeeignet erachte. Daher began ich die grünen Wege auch in grün nachzufahren und alle hellgrünen, gelben und roten malte ich in rosa (Abbildung 4). Grün wählte ich, da die Farbe in den meisten Kontexten als die Farbe für Korrektheit verstanden wird. Rosa wählte ich als leichte Abweichung zu Rot, um die Farbkombi etwas interessanter zu machen.
Das Nachzeichnen mit dem Zeichenstift-Werkzeug (P) war aber so kompliziert und kniffelig, da sich andauernd die Farbe änderte, wenn ich von einer grünen Straße eine rosa Abzweigung malen wollte. Selbst wenn ich erstmals nur die grünen Straßen gemalt hätte, so wäre spätestens bei der Anbindung mit einer rosa Straße die Linie wieder grün. Nach gut einer Stunde und kaum ein paar Straßen weiter, entschied ich mich dann schließlich die Straßen einfach mit dem Grafiktablet und Stift nachzufahren, da ich dachte dies würde mehr Zeit sparen (oben Abbildung 4). Zu allererst fühlte es sich auch sehr effizient an. Die Straßen waren nach 1-2 Stunden abgemalt. Allerdings merkte ich, nachdem ich die Linienkonturen kleiner machte und filigraner aussehen lassen wollte, dass so ziemlich alle Linien schrecklich aussahen und absolut ungenau waren (Abbildung 5-6). Wäre ich doch bei der ersten Methode geblieben, denn da war die Linienstärke zumindest konstant und von Anfang an alles genau nachgemalt, ohne dass ich hätte nachbessern müssen. Letztlich musste ich dann doch nochmal jede einzelne Straße bearbeiten und die Anker und deren Griffe an die richtige Position ziehen, was nicht so einfach war, da es sich teilwese um solch kleine Abstände handelte, dass man lediglich mit der Maus und nicht mit dem Steuerkreuz die Linien rücken konnte. Damit war ich dann erstmal ein paar Tage bedient (Abbildung 7-8).
Außerdem gab es das Problem, dass ich den Straßenverlauf durch den Text der Bezirke auf dem Screenshot teilweise nur schwer nachvollziehen konnte. Daher suchte ich mir im Internet eine Berlin-Map als SVG, die das Hauptstraßenverkehrsnetz beinhaltete (folgende Abbildung 1). Dieses legte ich dann über den Berliner Morgenpost-Screenshot und passte es genau an den Straßen an (Abbildung 2-4). Dabei bemerkte ich, dass die SVG-Datei leider nicht alle Straßen wie auf den Screenshot verzeichnete. Naja, dennoch hat sie mir bei meinem Problem sehr geholfen.
Als nächstes waren die Berliner Fahrradstraßen dran. Hierzu habe ich eine Liste gefunden, wo lediglich die Straßennamen vermerkt wurden (folgende Abbildung 1). Ich wusste mir aber mit GoogleMaps zu helfen. Dort suchte ich die Straßen und machte aus jeder von ihnen eine Route (Abbildung 2-5). Schließlich machte ich von den einzelnen Abschnitten Screenshots, passte sie an die Straßen in Illustrator an und zeichnete die Routen mit der Farbe gelb nach (Abbildung 6-8). Ich wählte gelb, da es sich in dem ganzen Straßengewusel gut zu erkennen war und auch im Gesamtbild harmonisch wirkte. Ebenso fiel mir dann auf, wie wenige Fahrradstraßen es eigentlich in Berlin gibt, was ich sehr schade finde.
Abbildung 1: https://www.das-radhaus.de/magazin/verzeichnis/eintrag/fahrradstrasse-in-berlin
Zu guter Letzt musste ich noch die vom Senat geplanten Radschnellverbindungen festhalten. Hierzu nahm ich wie schon bekannt einen Screenshot, der den letzten Stand vom März 2018 zeigt (folgende Abbildung 1). Es gab unendlich viele Grafiken und Stände zu diesem Thema. Die vom letzten Stand habe ich tatsächlich nur per Zufall noch gefunden, obwohl ich schon längst den Stand vom September 2017 verzeichnete. Damals kam noch die Potsdamer Stammbahn als Schnellverbindung in Frage, die mit dem jetzigen Stand nun wegfällt, da ab 2030 eine Wiederinbetriebnahme des Bahnverkehrs ins Auge gefasst wird. Ich habe lediglich die grünen Korridore nachgezeichnet, da die Orangen und der Blaue noch in Prüfung sind (Abbildung 2). Die Beschriftung der Radschnellverbindungen entsprechen in der Abbildung 3 noch dem Stand vom September 2017. Die aktuellen Bezeichnungen vom Stand 2018 übernahm ich nach der Besprechnung des Zwischenstandes, in der zu Recht kritisiert wurde, dass man die Bezeichnungen nur schlecht ihren Radverbindungen zuordnen konnte. Dies löste ich, indem ich wie in dem Screenshot die Radverbindungen nummerierte, obwohl ich lange überlegte wie ich es auch hätte anders machen können (Abbildung 4). Aber gut man kann ja auch nicht immer das Rad mal eben neu erfinden, hehe :P dies ist nunmal eine alt bewährte, gut verständliche Methode. Für Potsdam habe ich leider keine Daten oder nennenswerte Talks zu ihren Fahrradwegen gefunden. Daher konnte ich dazu leider nichts visualisieren und durfte es auch schließlich weglassen.
Abbildung 1: https://www.berlin.de/senuvk/verkehr/politik_planung/rad/schnellverbindungen/index.shtml (Stand 2018)
Letztlich habe ich noch alle relevanten Quellen am Rand des Bildes angegeben, die Legende mit einem Hintergrund versehen, damit die Stadt- und Bezirksgrenzen zu erkennen sind und aus allen Artikeln aufgeschnappte Aussagen, die auf Statistiken, Untersuchungen der Berliner Polizei und Aussagen des Senates beruhen, einen Text geschrieben.
©Stefanie-Jane Apitz
Ich fand den Kurs großartig. Hier lernt man direkt am eigenen Beispiel wie wichtig kleine Details sind, damit das große Ganze verständlich ist und harmonisch wirkt. Die Präsentationen, Material und Tipps von Prof. Constanze Langer gaben mir unglaublich viel Input und weitläufige Möglichkeiten in Sachen Darstellungstechnik und Designmethoden. Besonders Spaß hat mir das Recherchieren in der 2. Aufgabe gemacht, da mich das Thema Fahrradfahren in Berlin ohnehin sehr interessiert. Das eigenständige Sammeln von Daten und Auswerten in Aufgabe 1 hat mir dahingegen nicht so viel Spaß gemacht, da man bei der Menge der Daten sehr schnell durcheinanderkommt und man extrem darauf achten muss, alle Daten immer genaustens zu übertragen und zu berechnen. Bei kleinsten Fehlern dauert die Suche nach ihnen dann ewig. Ich bin dennoch sehr dankbar über diese Erfahrung, da ich nun umso mehr weiß was ich will. Ich lege diesen Kurs nur jedem Interfacedesign-Interessenten ans Herz.
©Stefanie-Jane Apitz
Ein Projekt von
Stefanie-Jane Apitz
Fachgruppe
InterfacedesignArt des Projekts
Studienarbeit im ersten Studienabschnitt
Betreuung
Prof. Constanze Langer
Zugehöriger Workspace
Grundlagen Interfacedesign: ANALYSE - Informationsarchitektur, Bedienprozess und VisualisierungEntstehungszeitraum
Sommersemester 2018