Das Fach Visual Interfacedesign stellt grafische und semiotische sowie zeit- und interaktionsbasierte Fragen im Bereich interaktiver visueller Systeme formal-ästhetisch in den Mittelpunkt. Ziel des Kurses ist es, dass die Teilnehmer_innen die Möglichkeiten der visuellen Darstellung und grundlegende Methoden für Interfaceentwürfe kennenlernen und ihre Anwendung üben, präsentieren und ihre gestalterischen Prozesse und Entscheidungen nachvollziehbar aufzeigen und begründen können.

Ich nutze die VBB(http://www.vbb.de/de/index.html „VBB - Alles ist erreichbar.“)-App als Navigations-Tool. Sie gibt mir Zugang zu wichtigen Informationen über Fahrzeiten und -wege des lokalen öffentlichen Verkehrssystems. Die App erleichtert mir den Zugang zum Verkehrsmittel und suggeriert eine gewisse Transparenz. Zu wissen, wann die Bahn kommt, gibt mir Sicherheit.

Natürlich ist die VBB-App nicht die einzige, die solche Informationen bereitstellt. Apps wie Öffi(https://oeffi.schildbach.de/index_de.html „Öffi - Startseite“), Citymapper(https://citymapper.com/berlin „Citymapper - The Ultimate Transport App“), oder die App der BVG(http://www.bvg.de/de/ „Willkommen - BVG.de“) bieten ähnliche Services an. Ich war aber schon etwas länger mit der VBB-App vertraut und war neugierig, was sich hinter der im Vordergrund stehenden Fahrplan- und Haltestellenauskunft befand.

Auf den zweiten Blick merkte ich, dass diese Informationsausgabe nur einen Bruchteil der Funktionen der App ausmachte, bzw. dass Funktionen um auf ihr aufbauten. Neben Karten- und Netzplan-Ansichten gab es Alarm-Optionen und umfangreiches ein Ticket-Angebot.

Ausgehend von der Sidebar, die hierarchisch gesehen die höchste Ebene (bzw. am weitesten „links“ - nach der westlichen Leserichtung) ist, bin ich dann die einzelnen Kategorien bis zum letzten Screen durchgegangen. Dabei erforschte ich jeden Screen nach verborgenen Buttons und stieß auf Shortcuts zu den anderen Kategorien. Relevant waren dabei nur weiterführende Links und „Endstationen“, die eine bestimmte Funktion erfüllten.

Nimmt die separaten Kategorien, gibt es mehr als nur die Sidebar an Überschneidungspunkten. Das ganze entpuppte sich zunächst mir gegenüber als Netz mit diversen Verknüpfungen. Um diese Vielfalt des Netzes also entsprechend darstellen zu können, musste der Inhalt der einzelnen Kategorien reduziert werden. So rückten die Verknüpfungen in den Vordergrund.

In diesem netzartigen System sah ich die visuelle Metapher, bzw. den Vergleich mit dem Netzplan etwa des Berliner U- und S-Bahn-Netzes. Von den Kategorien ließen sich die einzelnen „Linien“ ableiten und wann immer ein Screen, bzw. eine Funktion in mehreren Kategorien auftauchte, dann gab es dort „Stationen“, an denen man „umsteigen“ konnte.

Diese Variante war schön anzusehen, aber schnell stellte sich heraus, dass es zwischen dieser Informationsarchitektur und der eigentlichen App keinerlei Verbindungen gab. Mal abgesehen davon, dass es kaum Informationen über Funktionen oder Buttons gibt, vermittelt die Darstellung als Netzplan, dass man an jeder Station zu einer anderen Kategorie umsteigen kann. Es gab kaum noch Bezug zur VBB-App. Ich hatte mich in einer Metapher verloren.

Aufgrund ihrer Hierarchie (s. Analyse) gibt es in der App nur zwei Richtungen: vor und zurück.

Um den Bezug zur App nicht zu verlieren hielt ich mich an die Darstellung mittels Screens und setzte an einer älteren Konstellation an, die ich ursprünglich nur zu meiner eigenen Übersicht gemacht hatte.

Zudem wirkte es so aufgeräumter und gab mir die Chance auf komplexere Details einzugehen. Ich übernahm die stammbaumartige Hierarchie in meine Darstellung. Einige Teile des Stammbaums mussten jedoch reduziert werden, bzw. waren überflüssig. Das Ticketing etwa stellte sich als größter Teil des Stammbaums heraus, zumal es in der App sehr irreführend aufgebaut war. Hier musste ich stark reduzieren, um den Überblick zu behalten.

Insgesamt versuchte ich, mich bei der Visualisierung der Informationsarchitektur so nah wie möglichen an der Struktur der App zu bewegen. Mein Ziel war, dass man aus dem Plakat herauslesen können sollte, wie man die App nutzt und welche anderen Anwendungen sie in ihrer Komplexität anbietet.

Bei den Screen-to-Screen Verbindungen unterschied ich zwischen kategorischen, subkategorischen und Shortcut-Verbindungen. Eine kategorische Verbindung besteht, wenn sich in einer Kategorie (Untermenü) nach Drücken eines Buttons ein völlig neuer Screen auftut. Subkategorische Verbindungen sind Verknüpfungen zu Pop-Ups und Untermenüs, die sich öffnen und schließen lassen, ohne dass sich ein völlig neuer Screen auftut. Shortcuts sind Links, die aus einer Kategorie heraus direkt in eine andere hinzu einer bestimmten Funktion führen.

Die Legende gibt die Farben dieser Verbindungen an. Zudem werden dort zum besseren Verständnis die verschiedenen Icons benannt.

Die Farben habe ich von der App übernommen. Die Icons habe ich auf Grundlage meiner Screenshots von der App nachgebaut. Ein Überbleibsel der Netzplan-Ästhetik des früheren Versuches findet sich in den 45-Grad-Diagonalen Verbindungslinien wieder. Das gesamte Plakat soll mit der roten Kopfleiste den Screen-Aufbau innerhalb der App spiegeln und die Leserichtung vorgeben.

Die Intention hinter der Gestaltung der Informationsarchitektur sollte ursprünglich - so wurde es im Kurs zumindest überlegt - auf ein Redesign des ausgewählten hinreichend komplexen Systems (in meinem Fall der VBB-App) hinauslaufen. Ich hielt dies von Anfang an für verlockend.

Ich kann es jedoch nicht mehr als einen Ansatz nennen, da ich nur stellenweise Verbesserungsvorschläge habe. Ein allumfassendes Redesign würde über die Informationsstruktur hinausgehen und bei formlosen Funktionen, Anwendungen und Bedürfnissen der Nutzer ansetzen.

Mein Ansatz richtet sich hauptsächlich an die Struktur, deren Mängel mir während der Gestaltung des Plakates bewusst wurden, und an unvollständige Teilbereiche, die an in ihrem Feld weit verbreitete Standards angepasst werden sollten.

Wie bereits erwähnt, ist der Ticket-Teil der VBB-App recht irreführend aufgebaut - vor allem im Angesicht der Informationsarchitektur. Um dieses Feld aufzuräumen, suchte ich nach Wegen, Dinge zusammenzufassen und zu vereinfachen und recherchierte, wie andere Ticket-Services und -Apps aussahen.

Ticket-Suche

Copyright

©Robin Müller

Flixbus App, Eurowings App, EasyJet App und Bahn Navigator App

https://www.teltarif.de/airline-apps-fluggesellschaften/news/64443.html?page=6 http://www.mondodonne.com/biglietti-aereo-app-easyjet-android-provata-per-te/ http://www.areamobile.de/b/3403-oeffi-db-navigator-und-co-die-5-besten-fahrplan-apps-fuers-smartphone

Ein gemeinsames Thema dieser Ticket-Apps ist der Aufbau als Suchmaschine. Der Nutzer kann so in einem Mal alle benötigten Angaben eingeben und hat die Übersicht, um Dinge zu ergänzen oder zu ändern. Diese Variante hat den Anschein, schneller zu sein, da alles in einem Screen passiert. Zudem ist die Suche ein Service-Indiz. Die Auswahl der Tickets wird so mithilfe der eigenen Angaben von der App getroffen und dem Nutzer wird ein Angebot unterbreitet.

Die erste Variante ist stärker an die oben stehenden Ticket-Services angelehnt. Die zu treffenden Angaben habe ich aus den Einzelschritten der existierenden Version der VBB-App abgeleitet. Ich habe die Ticketwahl noch dabei gelassen, da ich nicht genau weiß wie sie im Verhältnis zu einander stehen oder wonach sich der Preis richtet. Das begrenzte Angebot der Pauschal-Tickets beschränkt die Entscheidungsfreiheit und Kontrolle des Nutzers über die zu kaufenden Tickets.

An dieser Stelle wurde es zudem schwierig zu sagen, ob und in wie weit ich das Angebot akkurat in den Suchergebnissen repräsentieren würde.

Die zweite Variante ist näher an der existierenden Ticketing-Variante der VBB-App dran. Ich habe hier schlicht und einfach die Einzelschritte in Untermenüs verpackt, sodass man alles auf einmal auswählen konnte, ohne dass ich mich mit der Bedeutung von Tickets auseinandersetzen musste.

Routenplanung

Die Fahrplan-Funktion der App ist effektiv eine Art Routenplanung, nur ohne Karte. In einem anderen Kontext hatte ich die Idee, Routenplanung auf einen großen Netzplan zu beziehen, den Netzplan mittels eines großen Touchscreens interaktiv zu machen und so über wenige einfache Schritte eine Visualisierung der Fahrroute zu bekommen. Ein Freund hat mich darauf hingewiesen, dass diese Art Routenplanung bereits auf Smartphones in Form von Karten-Dienstleistern ([Google Maps](https://www.google.de/maps/@51.1758057,10.4541194,6z?hl=de „Google Maps“), [HERE WeGo](https://wego.here.com/?map=52.48518,13.34571,12,normal&x=ep „HERE WeGo“), etc.) existiert und man die Routenplanung auch in Netzplänen implementieren könnte.

So habe ich mir diese bestehenden Karten-Dienstleister angeschaut. Und es gibt grundsätzlich drei Schritte, bevor eine Route vorgeschlagen wird: Zuerst initiiert man die Routenplanung (man drückt auf Route planen o. ä.). Dann wählt man seinen Startpunkt aus. Und dann das Ziel der Route. Die vorgeschlagenen Routen werden dann entweder auf der Karte oder in Form von einer Reihe von Schritten, die einen ans Ziel führt - mit welchem Fahrzeug man auch immer unterwegs ist.

Copyright

©Robin Müller

Google Maps, HERE WeGo Maps & Apple Maps http://www.pocketnavigation.de/2016/07/aus-here-maps-wego/ http://www.tech-recipes.com/rx/58127/set-multiple-destinations-google-maps-mobile/ http://download.cnet.com/blog/download-blog/apple-maps-vs-google-maps/

Copyright

©Robin Müller

nicht-interaktiver Netzplan Berlin http://mapa-metro.com/en/Germany/Berlin/Berlin-U-Bahn-map.htm

Man plant seine Route auf Basis eines interaktiven Netzplans (eine Form einer Karte) mit der Auswahl von eingetragenen Stationen. Das Ergebnis wird auf dem Netzplan angezeigt. Alternativ gibt es einen Shortcut zur etablierten Fahrplanansicht der Route.

Der Netzplan wird so schon herkömmlicher Weise zur Orientierung und Navigation verwendet. Routenplanung auf dem Netzplan ist etwas, was die meisten im Kopf schon machen.

_Rückblickend war es schwer, nachdem ich die Informationsarchitektur erstellt hatte, mit den Augen eines Nutzers auf die App zu schauen. Nach der intensiven Auseinandersetzung mit allen Aspekten der App, sehe ich, wenn ich sie benutze immer etwas mehr als abgebildet ist. Das ist für die persönliche Nutzung natürlich ein Vorteil, jedoch war es ein Problem, sich im Angesicht des Redesigns in den ahnungslosen Neu-Nutzer hineinzuversetzen. Für ein Redesign hätte ich daher noch etwas mehr Zeit mit der Analyse verbracht, um die App neu aufstellen zu können. So war ich noch zu sehr mit äußerlichen Dingen beschäftigt, deren Herleitung mir noch nicht ganz klar ist.

In jedem Fall fand ich das Projekt lehrreich, zumal ich mich vorher noch nicht so sehr mit Apps und Screen-Design auseinandergesetzt hatte. Es gab mir eine Chance, [Adobe Xd](http://www.adobe.com/de/products/experience-design/features.html „Adobe Experience Design (Beta)“) mal auszuprobieren.

Bei der Informationsarchitektur habe ich mich viel mit subtilen Feinheiten herumgeschlagen und versucht, so viele Informationen wie möglich abzubilden. Es war eine Art Aufgabe, in der man sich einfach verliert. Und es hat mir Spaß gemacht. Es ist eine gute Übung in Sachen Informationsvisualisierungen._

http://www.vbb.de/de/article/ueber-uns/media-service/logos/2660.html