Redesign DVB mobil

In diesem Kurs widmeten wir uns insbesondere der Gestaltung von iOS-Apps und deren Details. Wir untersuchten anhand verschiedener Beispiele nach iOS GUI gestaltete Apps und wendeten unser Wissen an Aufgaben praktisch an. Unser angeeignetes Wissen sollten wir anhand einer neu gestalteten App als Abschlussaufgabe einsetzen. Ich entschied mich für die „DVB mobil“ App, weil ich sie nutze, wenn ich Familie/Freunde in der Heimat besuche. Schon beim Ersten Mal Nutzen dieser App hatte ich Schwierigkeiten, weil sie optisch sowie in der Handhabung aussieht wie eine Webseite als eine App.

DVB mobil

DVB mobil ist die offizielle App der Dresdener Verkehrsbetriebe AG.

Nutzer*innen können sich mit Hilfe dieser App Verbindungen im öffentlichen Nahverkehr suchen um durch die Stadt Dresden und Umgebung von einem zum anderen Ort zu kommen. Die App selbst ist nicht nach iOS GUI gestaltet, und in ihrer Darstellung an vielen Stellen unübersichtlich oder beinhaltet zu viele Features. Auch optisch ist die App leider nicht schön gestaltet.

Header + Tabbar

Im ersten Schritt habe ich mir den Header und die Tabbar genauer angeschaut. Beides ist im Original mit vielen Icons versehen, welche zu klein und zu eng aneinander dargestellt sind.

Header

Im Header wurde das Hamburger Menü entfernt, weil es nicht den iOS GUI entspricht. Auch das Logo der DVB wurde aus dem Original entfernt, durch die gelbe Farbe im Header wird dem/der Nutzer*in kenntlich gemacht, in welcher App er/sie sich befindet. Die Icons, welche sich unten in der Tabbar teilweise wiederholt und deswegen für Verwirrung gesorgt haben, wurden ebenfalls entfernt. Auch die Abstände zwischen den Icons waren nicht groß genug.

Tabbar

In der Tabbar wurden ebenfalls unnötige Icons entfernt, auch die Benennung der Icons war zu klein, da die Schriftgröße auf dem Handy nicht zu erkennen und zu lesen war. Hinzukommt, dass nicht ersichtlich war, wo man sich gerade in der app befindet, weil es weder im Header noch in der Tabbar angezeigt wurde.

Im Redesign er Tabbar habe ich mich auf zwei Aktionen, welche bei der Nutzung der App von Bedeutung sind, beschränkt. Nämlich der Verbindungssuche und den Tickets. Die Typo habe ich entsprechend der iOS GUI angepasst. Dies soll für weniger Verwirrung sorgen und den Nutzer*innen klar kommunizieren wo sie sich befinden.

Verbindungen

Original

Nach Eingabe von Startpunkt und Zielpunkt war nicht zu erkennen, welcher Button für die Suche zuständig ist. Da die Typo zur Beschreibung der Icons ebenfalls sehr klein ist, wird nicht ersichtlich, dass die Lupe ebenfalls der Button für die Suche der Verbindungen darstellen soll.

Auch die Änderung des Zeitpunktes der Abfahrt oder Ankunft ist irreführend, da nicht klar ist, dass sich hierbei um ein drop down menü handelt.

Redesign

Nutzer*innen wird durch eine Überschrift kommuniziert was sie auf dieser Page tun können und zu sehen ist. Der Suche Button ändert seine Farbe und macht den Nutzer*innen deutlich, dass nach Eingabe der Abfahrt und Ankunftspunkte die Suche gestartet werden kann. Auch die Zeitangabe ist klar erkennbar.

Zusätzlich habe ich die Störungsmeldungen in den Suche Screen eingebaut sodass Nutzer*innen sofort erkennen können, welche Linien verfügbar sind und welche nicht. Die Farben der Linien habe ich an das Originallinienetz von Dresden angepasst.

Verbindungsanzeige

Original

'Zurück'Button ist in der Tabbar unten
Beschreibung der Page ist zu unauffällig
Suchangaben sind kaum erkennbar sowie Datum
Anzeige für benutzbare Verkehrsmittel zu dominant
frühere Verbindungen nicht erkennbar

Redesign

'Zurück' Button ist im Header
Beschreibung der Page sichtbarer durch größere Schrift
Suchangaben unter die Beschreibung der Page platziert -> ersichtlicher
Datumsanzeige vergrößert
Anzeige für Benutzbare Verkehrsmittel rausgenommen
frühere Verbindungen durch scrollen nach oben angedeutet, spätere Verbindungen durch Scrollen nach unten
Icons der Verkehrsmittel angepasst, Farbe aus Liniennetzwerk, Beschriftung um welches Verkehrsmittel es sich handelt eingefügt, Zeiten für Abfahrt, Ankunft und Fahrtdauer hervorgehoben
unwichtige Informationen entfernt