Neugestaltung einer Bedienoberfläche für einen mobilen Fahrausweisautomaten.

Einleitung

Auf dieser Webseite dokumentieren wir den Entstehungprozess des Touchscreen-Interfaces der mobilen Fahrkartenautomaten der Verkehrsbetrieb Potsdam GmbH. Der Fokus in diesem Projekt lag darin, im nutzerzentrierten Gestaltungsprozess — durch die kontinuierliche Befragung und Miteinbeziehung des Nutzers — ein bedienerfreundliches und ansprechendes Konzept zum Lösen von Fahrscheinen zu entwickeln. Unsere dokumentierte Herangehensweise soll als Anregung für vergleichbare Projekte dienen, um ein nutzerfreundliches Produkt zu erzielen. Die Verkehrsbetrieb Potsdam GmbH beauftragten uns Interfacedesigner — Sabine Richter, Sebastian Schwinkendorf und Mandy Hoffmann — die grafische Benutzeroberfläche der mobilen Fahrkartenautomaten neu zu gestalten. Unsere Arbeit wurde beleitet durch die Professoren Prof. Dr. Frank Heidmann und Prof. Nils Krüger aus den Studiengängen Interfacedesign und Produktdesign der Fachhochschule Potsdam.

Neue Generation der Fahrausweisautomaten

Alt vs. neu

Dieser Fahrkartenautomat wurde von 1999 bis 2011 von der Verkehrsbetrieb Potsdam GmbH (ViP) eingesetzt. Die Fahrscheinauswahl erfolgt über die Tasten am linken und rechten Bildschirmrand. Fälschlicherweise vermuteten die Kunden einen Touchscreen. Ein weiteres Problem war, dass für den Fahrgast nicht ersichtlich war, dass ein Berlin ABC Fahrschein auch für Potsdam gilt.

Ab Oktober 2011 werden 131 neue Fahrkartenautomaten in allen Bussen und Straßenbahnen in Potsdam eingesetzt. Ein neues hochformatiges Touch-Display ermöglicht dem Kunden, ein umfangreicheres Fahrscheinangebot abzubilden (z.B. Zeitkarten für den gesamten Verkehrsverbund Berlin-Brandenburg). Die Zahlung mit EC-Karte und Geldscheinen ist nun ebenfalls möglich.

Experten-Evaluation

Beurteilung eines frühen Prototypen aus Nutzersicht.

Die Firma Krauth technology® GmbH lieferte einen klickbaren Simulator, mit dem wir die Struktur des aktuellen Ticketkaufprozesses nachvollziehen konnten. Dieser frühe Prototyp diente uns als Grundlage für eine Experten-Evaluation, in der wir Nutzungsprobleme (Navigation und Design) dokumentierten. Gravierende Probleme stellten wir bei der Kaufprozesslogik, der Gruppierung von Auswahlelementen, der Button-Bezeichnung (Wording), der Nutzerführung und der Konsistenz im Design fest.

Neugestaltung der Informationsarchitektur

Entwicklung einer logischen und leicht verständlichen Navigationsstruktur.

Auf Grundlage der ermittelten Probleme aus der Expertenevaluation überarbeiteten wir die Prozessstruktur des Fahrscheinkaufs. Mit Hilfe eines Organigramms strukturierten und optimierten wir die Navigation durch das Tarifsystem der Verkehrsbetrieb Potsdam GmbH.

Paper Prototyping / Wireframing

Versteht der Nutzer die Bedienabläufe des Kaufprozesses? Wo besteht Optimierungsbedarf?

Anhand von definierten Nutzungsszenarien haben wir ein Konzept des neuen Fahrscheinautomaten-Interface in Form von Papierskizzen und Wireframes erarbeitet. Diese testeten wir mit acht Nutzern in Hinblick auf Verständlichkeit von Begriffen, Nutzerführung und Orientierung. Die Methode des Paper-Prototyping war eine gute Wahl, um zeitnah und ohne großen Programmier- oder Gestaltungsaufwand einen Fahrscheinkauf zu simulieren. In den durchgeführten Nutzertests evaluierten wir den Fahrscheinkauf und konnten schnell Korrekturen vornehmen, um ein optimales Ergebnis zu erzielen.

Neues User Interface Design für einen Touchscreen

Was zeichnet das Screendesign der Fahrausweisautomaten aus?

Wir haben drei verschiedene Varianten des Designs erarbeitet, um zu ermitteln, welche Schriften und Farben für ein Fahrkartenautomaten-Interface geeignet sind. Das finale Design zeichnet sich durch folgende Merkmale aus:

  • Reduzierung auf die zwei Hauptfarben Dunkelgrün und Weiß.
  • Übersichtlichkeit durch optimal eingesetzte Typografie.
  • Klare, grafische Darstellung der Bedienelemente.
  • Hoher Kontrast und eine gute Lesbarkeit.
  • Zeitloses und angenehmes User Interface.

Designbeurteilung mittels AttrakDiff™

Wie gut sind Kontraste, Schriftgrößen und klickbare Flächen erkennbar?

Um Erkenntnisse zur Schriftgröße, den Farben und Kontrasten der neugestalteten Ansichten des Fahrkartenautomaten zu erhalten, ließen wir diese von 24 Probanden unterschiedlicher Altersgruppen beurteilen. Sie führten eine freie Exploration an dem Startbildschirm und dem Bezahlbildschirm durch. Wir dokumentierten alle Aussagen und Verbesserungsvorschläge der Probanden. Zusätzlich nutzten wir den AttrakDiff™ Fragebogen, um das Design anhand von bestimmen Adjektivpaaren bewerten zu können.

Eyetracking-Analyse am Touchscreen

Wohin schaut der Anwender und welche Informationen liegen im Fokus seiner Wahrnehmung?

Für die zweite Testphase nutzen wir das Eyetracking-System um die Blickbewegung der Probanden nachvollziehen zu können. Der SMI Eyetracker wurde mit einem Single-Touch-Monitor verbunden. So war es uns möglich, aufgabenbasierte Nutzertests mit Hilfe eines interaktiven HTML-Prototypen durchzuführen und die Bedienerfreundlichkeit mit vier Probanden über 60 Jahre zu testen. Die Erkenntnisse zu den fokussierten Bereichen und der Leserichtung aus der Eyetracking-Evaluation ließen wir in unseren weiteren Gestaltungsprozess mit einfließen.

Nutzertests & Kundenbefragung

Wie schätzt der Fahrgast das neue Bedienkonzept des Fahrkartenautomaten ein?

Abschließend führten wir einen Nutzertest und eine Befragung mit 30 Fahrgästen durch. Wir beobachteten sie beim realen Fahrscheinkauf am Automaten in der Tram und fragten nach dem persönlichen Eindruck und der Bedienung des neuen Fahrkartenautomaten. Die Kunden empfanden das Design als übersichtlich, schlicht und klar. Vor allem die ältere Fahrgäste lobten den hohen Kontrast der verwendeten Farben Weiß und Grün, welcher die Lesbarkeit unterstützt.

  • »Alles super. Die Bedienung war gut.«
  • »Es ist einfacher als vorher.«
  • »Ich hatte keine Probleme, alles fein.«
  • »Wenn man es einmal gemacht hat, weiß man wie es geht.«
  • »Der Bildschirm ist viel übersichtlicher als beim alten Automaten.«

User Interface Design Team

Wir sind User Interface & User Experience Designer und studierten an der FH Potsdam Interfacedesign (B.A.).

Auftraggeber

Presse & Auszeichnung

Das User Interface der Fahrausweisautomaten der Verkehrsbetrieb Potsdam GmbH
hat den 2. Platz in der Kategorie Interfacedesign bei der Preisverleihung des Designpreis Brandenburg 2013 gewonnen.