Öffi-Redesign: So könnte die Nahverkehrs-App im Material Design aussehen [Exklusiv]

Lukas Funk 13

Wer häufig mit öffentlichen Verkehrsmitteln unterwegs ist, wird sicherlich schon Bekanntschaft mit der Android-App Öffi gemacht haben. Diese vereint nicht nur Informationen und Verbindungsanfragen aller Verkehrsnetze Deutschlandweit (und darüber hinaus), sondern ist zudem völlig kostenlos. Unser Mockup zeigt, wie die App im modernen Material Design aussehen könnte.

Öffi-Redesign: So könnte die Nahverkehrs-App im Material Design aussehen [Exklusiv]

Da es sich bei Öffi um das Einpersonenprojekt des Entwicklers Andreas Schildbach handelt, verwundert es nicht, dass die optische Weiterentwicklung von Öffi keine Priorität besitzt – gilt es doch regelmäßig, Probleme mit den Verkehrsdaten der unzähligen lokalen und regionalen Verkehrsverbünde zu beheben, über die die App ihre Informationen bezieht und aufbereitet. Trotzdem stellt sich die Frage, wie die beliebte Anwendung im Kleid von Googles neuer visuellen Sprache Material Design aussähe. Um dies zu erproben, habe ich mir kurzerhand Stift, Papier und die Material Design-Guidelines zurechtgelegt und ein Designkonzept entworfen, das ich im Folgenden erklären möchte.

Farbe und Icons

Begonnen hat mein Redesign mit den Farben und dem Logo. Die Farben von Öffi wirken altbacken – was nicht zuletzt daran liegt, dass sie an das bekannte Haltestellenzeichen 224 von 1937 angelehnt wurden. Um der App einen modernen Anstrich zu verpassen, habe ich stattdessen Farben aus der Material Design-Farbtabelle gewählt, namentlich Teal 500 und Yellow 500. Diese finden sich auch im App-Icon wieder, das eine Vereinfachung des bisherigen darstellt. Der grüne Kreis entfällt, es bleibt lediglich ein H mit dicken Serifen auf gelbem Grund zurück, der typische Schattenwurf tut sein Übriges.

öffi-original
öffi-material

Außerdem wurde Öffi von dreien auf ein Icon im App-Drawer reduziert, die verschiedenen Funktionen – Fahrplanauskunft, nahegelegene Haltestellen und Netzpläne – finden sich in dieser Reihenfolge, die meiner subjektiven Nutzungspriorität entspricht, im Seitenmenü der App.

Bilderstrecke starten
6 Bilder
In 6 Schritten „Ok Google“ deaktivieren oder aktivieren.

Die Verbindungssuche

In der Hauptansicht zeigt Material-Öffi ähnliche Funktionen wie bisher: Oben die Felder für Suchanfragen mit Buttons für den Schnellzugriff auf favorisierte Haltestellen und die aktuelle Position, darunter Einstellungen zu Ort, Zeit und Abfahrt respektive Ankunft. Im unteren Teil dagegen findet sich eine Liste der letzten Abfragen. Diese lassen sich mit einer Wischbewegung nach rechts anpinnen, wodurch sie immer oben in der Liste auftauchen, ein Wisch nach links dagegen entfernt einen Eintrag aus der Liste. Ein Klick auf den großen gelben Floating Action Button (FAB) startet die Suche.

öffi-1
öffi-6
öffi-5

Oben in der App-Leiste finden sich 3 weitere Icons, mit denen (von links nach rechts) zusätzliche Haltestellen hinzugefügt, Start und Ziel vertauscht sowie die zu berücksichtigenden Verkehrsmittel ausgewählt werden können.

öffi-2
öffi-3
öffi-4-v2

Hat man eine Suche gestartet, erscheint wie bisher eine Übersicht möglicher Verbindungen in Form von Rechtecken in den Farben der jeweiligen Linie. Im Vergleich zur aktuellen Version wurden hier lediglich die Farben und Formen etwas angepasst. Die genaue Abfahrts- und Ankunftszeit wurde aus dieser Ansicht entfernt, da zur groben Orientierung die Relation zu den angegebenen Zeiten und dem Strahl, der die aktuelle Zeit darstellt, genügen sollte. Die zweireihige Beschriftung in der Kopfzeile entspricht nicht genau den Material Design-Vorgaben, hilft aber dabei, Platz zu sparen. Der Button rechts oben pinnt die Suche oben in der Verbindungsliste an, die Aktualisierung erfolgt durch einen Wisch von oben (Pull to Refresh).

öffi-8
öffi-9
öffi-10
öffi-11

Sobald der Nutzer eine bestimmte Verbindung auswählt, öffnet sich deren Detailansicht. Hier sind oben erneut Start und Ziel vermerkt, außerdem die Verkehrsgesellschaft und (wenn verfügbar) die fälligen Preise. Der untere Bereich beinhaltet eine detaillierte Darstellung der Fahrt, wobei sich Nutzer Fußwege auf einer Karte und Verkehrsmittel mit Zwischenstops darstellen lassen können. Ein Klick auf den FAB speichert die Verbindung im Kalender, der Teilen-Button erlaubt das Weiterleiten der Verbindung per Mail, SMS, etc.

Haltestellen in der Nähe und Netzpläne

Die Ansicht für nahegelegene Haltestellen ist nicht mehr als eigenständige App vorhanden, sondern über das Seitenmenü erreichbar. Einzelne Haltestellen werden hier in Form von Karten dargestellt – da eine Karte einer in sich geschlossenen Informationseinheit entspricht, liegt diese Darstellungsweise nahe. Zwar sind so weniger Haltestellen als bisher auf einen Blick sichtbar, doch sollten Karten die Übersichtlichkeit steigern – außerdem sind selten mehr als die nächsten 3 Haltestellen relevant. In den Einstellungen könnte sich dennoch ein Schalter finden, der die bekannte Listenansicht wiederherstellt.

öffi-12-v2
öffi-13-v2
öffi-14-v2

Die maximal drei nächsten Verbindungen werden pro Karte in der Standardansicht gezeigt, darunter die relative Richtung und Entfernung zum Nutzer. Der Herz-Button fügt eine Haltestelle zu den Favoriten hinzu, die in der Verbindungssuche wie oben erklärt über das Herz-Symbol schnell ausgewählt werden können.

Klickt man eine Karte an, vergrößert sich diese, um alle bevorstehenden Fahrten anzuzeigen. Außerdem erscheint die Option, die Haltestelle auf einer Karte darzustellen. Über das Overflow-Menü (die drei vertikal angeordneten Punkte) dagegen kann direkt eine Verbindung von oder zu der jeweiligen Haltestelle gesucht oder die Haltestelle als Icon auf dem Homescreen platziert werden. Einzelne Karten können per Wischbewegung vorübergehend entfernt werden, durch das Neu-Laden per Pull to Refresh erscheinen aber alle verfügbaren Karten wieder – inklusive aktualisierter Abfahrtszeiten.

öffi-15-v2
öffi-16-v2
öffi-17-v2

Nicht zuletzt habe ich auch die Ansicht für Netzpläne überarbeitet, die ebenfalls nur noch über das linke Seitenmenü erreichbar ist. Hier sollen größere Vorschaubilder bei der Auswahl der gesuchten Karte helfen. Die Farbakzente unterhalb der Thumbnails erhalten ihre Farbe jeweils aus der Karte selbst, die Auswahl wird dank Google Palette-Library automatisch getroffen. Hat man die gewünschte Karte gefunden, reicht ein Klick darauf, um sie zu öffnen – ein Klick auf das Wolken-Symbol lädt die Karte nur herunter und speichert sie dauerhaft.

Schlusswort

Dieses Mockup ist eine subjektiv gefärbte Überlegung, wie Öffi mit Material Design aussehen könnte. Nicht alle der vielen Funktionen und Ansichten der App konnten hier behandelt werden, doch ich denke, dass ich das Prinzip und die wichtigsten Bedienmuster verdeutlicht habe. Dennoch gibt es sicherlich Details, mit denen andere Nutzer der App nicht einverstanden sind – sei es nun die Farbgebung oder die Umsetzung einer Funktion.

Das Mockup wurde aus eigenem Antrieb erstellt, da Öffi eine meiner meistgenutzten Apps ist. Dennoch hoffe ich, dass ich mit der Konzeption nicht zu weit von der Idee des Entwicklers abgewichen bin. Wer Andreas Schildbach unterstützen möchte, findet weitere Informationen sowie ein Spendenkonto auf der Website von Öffi, der Download der werbefreien App über den Play Store und den Amazon App Shop ist aber komplett kostenlos.

Öffi - Fahrplanauskunft
Entwickler:
Preis: Kostenlos

Zu den Kommentaren

Kommentare zu dieser News

* Werbung