flying sparks ein Weblog von Tobias Jordans zu den Themen software designstudium web2.0 webdesign informationsdesign oekologie werbung usability tj video interfacedesign marketing // alle Themen...

Alle Funken für das Thema User Interface:

Redesign des DB-Fahrkartenautomaten mit Continuity (FH-Projekt 2006)

Es ist jetzt 4 Jahre her, dass ich mit Niklas und Kristina in Oliver Wredes Seminar Continuity ein alternatives Interface für den Fernfahrkarten-Automaten der Deutschen Bahn erstellt habe. Seit dem ärgere ich mich alle Jahre wieder aufs Neue, dass ich mir nicht die Zeit genommen habe oder nehme, unsere Semesterarbeit endlich mal online zu stellen.

Vielleicht liegt das an diesem Phänomen, dass man, wenn man ein Semester lang an einem Thema arbeitet und schlussendlich eine sehr gute, einfache Lösung findet, diese als so offensichtlich und banal empfindet, dass mein Sendungsbedürfnis nicht geweckt wurde. Hinzu kommt sicher auch, dass wir es damals nicht geschafft haben, unserem Anspruch gerecht zu werden, nicht nur ein gutes Interface zu entwickeln und das dann auch noch bei der DB in Frankfurt zu präsentieren, sondern darüber hinaus noch das komplexe Thema Continuity in ein paar aussagekräftigen Seiten zusammen fassen wollten. Perfektionsmus als Handbremse =(.

4 Jahre später bin ich klüger und werfe euch einfach unsere und meine gesamte Arbeit auf den Bildschirm — mit alle seinen guten Ideen und Ansätzen, seinen unfertigen Kapiteln (man beachte unser Fazit — es ist leer :)) und den nicht Korrektur gelesenen Texten. Man möge es mir und uns nachsehen :-).

Bevor ich euch unser — wie ich finde — damals wie heute revolutionäres ;) DB-Interface zeige, noch ein paar Worte vorweg: Das Redesign des Automaten war der Praxisteil für das Seminar Continuity, in dem wir uns erstmal mit Flow, Experience Design, Emotionalität im Interface und solchen Dingen befasst haben (Seminarbeschreibung). Versucht bitte, euch 4 Jahre in der Zeit zurück zu versetzten: Damals gab es noch kein innovatives iPhone- oder iPod-touch-Interface mit all seinen Animationen und Bewegungen und dem großen iPhone-Ökosystem (wohl natürlich den iPod Classic mit seiner links/rechts-Metapher, dessen Einfluss ihr im UI auch sehen werdet), die Anzahl an jQuery- oder gar HTML5-gepimpte Webseiten mit vielen auf/zu-, vor/zurück-Animationen und Übergängen die kleine Continuity-Erlebnisse schaffen war auch noch spürbar geringer… und damals haben sich auch Firmen noch nicht User Experience auf die Startseite geschrieben.

Das Endergebnis:

Was haben wir also gemacht? — Lasst es uns von hinten nach vorn betrachten und mit dem Endergebnis starten:

Einen guten Einstieg bietet die Präsentation, die wir nach unserem Semester bei der DB in Frankfurt gehalten haben.

Interessant wird es nach der Einleitung ab Folie 7. Hier zeigen wir die Demo unseres Interfaces. Zum Glück habe ich damals meine Präsentationsnotizen abfotografiert: Wir sind eingestiegen mit einer interaktiven Demo, in der ich das Szenario eines Kunden durchgespielt habe.

Klickstrecke: Expresskauf → Zurück → Expresskauf → Düren → Aachen → Aachen HBF (Angabe wird in Demo nicht gespeichert) → Regionalverkehr → Regionalverkehr oder zurück → Verbindungen suchen. Weiter geht es leider nicht. Den Kauf abbrechen-Button kann man in der Ziel-Ortsauswahl testen.

Diese Aspekte haben wir in der Präsentation hervorgehoben:

Zu den Dokumenten:

  1. Zur Präsentation auf Slideshare
  2. Zur Demo/Clickdummy
  3. Das PDF zu den Screens, die in der Demo animiert sind. Der essentielle vor-zurück-Effekt kommt dort natürlich überhaupt nicht rüber…

Das war also unser Endergebnis. Aber es gibt noch eine Reihe weiterer Artefakte, die einen Blick wert sind:

Erster Entwurf:

Mein erster Redesign-Entwurf für den Automaten hat sich noch stärker an dem bestehenden Automaten orientiert. Es ging mir erstmal darum, das UI zu verstehen, aufzuräumen und zu schauen, wie viel man schon durch Verbesserung der einzelnen Screen (Anordnung, Funktionen) erreichen kann.

Was sieht man hier:

Mein zentraler Fehler bei dieser Vorgehensweise: Ich habe in Einzelscreens in InDesign gedacht und nicht in einer (animierten) Abfolge von Screens. Hier war das Tool schon das Problem, weil es hat mich in Einzelbild-Sequenzen gefangen hat. Inhaltlich finde ich die Screens viel besser als das alte UI. Meine ersten Animations-Experimente haben aber gezeigt, dass ich kein logisches Animationsmuster finden werde, das dieses Interface unterstützt (weiter nach Rechts, zurück nach oben, Button öffnen einen überlagernden Screen… — alles unlogisch).

Paper Prototyping als Heilsbringer:

Nachdem der zweite Entwurf in seiner Animationsphase gescheitert ist, habe ich eine andere Herangehensweise probiert: Statt im Detail an UI-Verbesserungen zu arbeiten, musste erstmal eine tragfähiges Basis-System gefunden werden. Für diesen Schritt war das Arbeiten mit Papier genau das richtige: Man achtet weniger auf Details, kann schnell experimentieren und läuft nicht Gefahr, sich von seinem Authoring-Programm oder dem Rahmen, den man glaubt vom System vorgegeben zu bekommen, einschränken zu lassen.
Auf diesem Weg wurde dann auch klar, dass unser UI ein hochformatiges Display braucht. Schließlich geht es beim ganzen Kaufprozess ständig um Listen-Ansichten…

Die Prototypen wurden jew. in den Seminar-Terminen vorgeführt und besprochen.

Paper-Prototype Entwurf 1:

Der Erste Entwurf ist noch sehr roh…

Dazwischen gibt es eine Reihe an Skizzen, in denen ich mit Details wie dem Zurück-Button (Design und Position) experimentiere.

Paper-Prototype Entwurf 2:

Der zweite Entwurf ist dann schon nah an dem dran, was ich dann erneut in InDesign gestaltet habe.

Zum Schluss noch zwei weiterführende Links:

Seminar-Dokumentation:

Unsere (unfertige) Seminardokumentation versucht, wie zu Beginn gesagt, das ganze Thema Continuity einzuordnen und unser Seminar mit allen Teilaufgaben und Entwürfen zusammen zu fassen.

Fotos vom alten Automaten:

Da die Bahn zur Zeit ja ihren Automaten neu gestaltet, erhalten diese Fotos bald Museumsqualität :-) Ich habe fast jeden Screen im alten Automaten fotografiert.

Danke und das neue DB-Inteface

4 Jahre nach unserem Entwurf hat nun auch die Bahn ihr Fahrkartenautomaten-Inteface erneuert. Links dazu sammel ich übrigens in einem Google Buzz-Post. Ich habe selbst noch nicht genug mit dem neuen Interface experimentieren können, um es wirklich beurteilen zu können. Es scheint zumindest keine Verschlechterung zu sein :-) und einige der Probleme, die wir gesehen und gelöst haben, wurden zum Glück angegangen und zum Teil ähnlich gelöst.

Vor allem muss ich der Bahn aber für das neue Interface danken, weil es mir noch einmal gezeigt, das unsere Arbeit damals sehr interessante Ansätze hatte über die gebloggt werden muss.
Der wirkliche Dank gilt aber Oliver für das gute Seminar und Kristina und Niklas für die gute Projektarbeit!

Was haltet ihr von unserem Interface-Ansatz?

Autodesk wechselt zum Ribbon mit Hilfe von PaperPrototyping und Statistik

Mit Office 2007 wurde das Ribbon eingeführt und mit ihm hat die User Experience und das User Centered Design bei Microsoft Office und viele anderen, ähnlich komplexen Programmen, Einzug gehalten.

Endlich hat man verstanden, dass es nicht darum geht, 10 Features mehr zu veröffentlichen, sondern die bestehenden besser zugänglich und leichter bedienbar zu machen.

Als Office 2007 eingeführt wurde, hat Jensen Harris über viele der Entscheidungen gebloggt (und ich wiederum über ihn). Die frühen Folger wie MindManager , die kurze Zeit später das Ribbon ebenfalls eingeführt haben, waren leider nicht so offen.

Autodesk dagegen teilt mit uns einige ihrer Erfahrungen! Zwar berichten auch sie erst nach dem fertigen Release von ihrem Prozess — dafür legen sie jetzt richtig los: Es gibt schon zwei Blogs (1, 2) die sich mit User Experience für Autodesk befassen und Artikel wie „The Foundation of a Great User Experience" , die zeigen, dass Autodesk sich die volle UX-Spritze gesetzt hat :).

Video 1: Der Prozess zum neuen Interface mit Magneten, Papier und Statistik.

Was hat Autodesk also gemacht? — Sie haben alle Menüeinträge/Befehle auf Magneten geschrieben und auf einem Whiteboard arrangiert und kommentiert.
Das ganze fand irgendwo statt, wo alle Kollegen immer auf den Stand der Dinge schauen konnten um Kommentare abzugeben und mitzumachen. — Ein wichtiges Detail, wie ich finde, schon allein um die Akzeptanz einer solch großen Änderung im Unternehmen zu steigern.

Auf diese Weise konnten sie verschiedene neue Gruppierungen für das zukünftige Ribbon austesten. Die Zwischenschritte wurden über Fotos dokumentiert.

rubbon autodesk commands
Schritt 1: Die Informationsarchitektur schaffen.

Anschließend wurden Prototypen des neuen Ribbon erstellt und getestet. Zuerst waren es Papierprototypen, dann inaktive Webseiten und später erste Softwareprototypen. Alle wurden mit Kunden getestet.

Viele Tests wurden dabei remote durchgeführt um Zeit zu sparen. Zudem gab es „validation tests" — wahrscheinlich sind damit Langzeittests unter realen Bedingungen gemeint.

autodesk ribbon paper prototype
Schritt 2: Testing auf allen Wegen (Papier, Web, Software)
Mehr über die Testmethode und den Auswahlprozess.

Die Rückmeldung von Kunden war, dass sie sich über die vielen neuen Funktionen in der Software freuen würden. Damit hat Autodesk die gleiche Erfahrung gemacht wie zuvor Jensen Harris in Office 2007: Eine sinnvolle Neuanordnung von Funktionen in Aufgabenbezogenen Gruppen, schafft eine Transparenz, die es den Kunden erlaubt, mehr Funktionen zu sehen und zu verwenden. — Denn bei beiden Applikationen wurden kaum neuen Feature eingeführt; sie wurden nur besser präsentiert.

Die Entscheidungen, welche Funktionen in welcher Größe im Ribbon dargestellt werden, wurde auch bei Autodesk auf Basis von Kundendaten getroffen. Im Video sieht man in Minute 2:35 verschiedene Diagramme, die die Nutzungshäufigkeit von Funktionen widerspiegeln. Auf Basis dieser Informationen konnte man entscheiden, welche Funktionen/Button wie groß dargestellt werden sollen.

autodesk ribbon data
Schritt 3: Finetunig auf Basis von statistischen Daten

Video 2: Das neue Interface in Aktion mit neuen Funktionen für Einsteiger und Experten.

Mit diesem Video bekommt man einen guten Eindruck von der Funktionsweise der neuen Ribbon-Oberfläche.

Zwei Dinge sind mir besonders aufgefallen:

Zu Einen wurde neuen Nutzern der Softwareeinstieg sehr viel leichter gemacht. Zum Beispiel sind die neue SuperTooltipps (mehr) ein tolles Hilfsmittel, um eine Funktion schnell zu verstehen und zu erlernen. Ebenso das Paradigma von Office2007, Effekte und Funktionen mit möglich hohem visuellen Feedback anzubieten. In diesem Fall betrifft das den Wechsel von reinen Text-Listen zu Vorschau+Text-Listen.

autodesk super tooltipp
SuperTooltipps erklären über Text und Bild (Quelle)

Auf der anderen Seite fallen kleine Details auf, die das Autodesk-Interface von dem Office 2007-Interface unterscheiden. Zum Beispiel die Möglichkeit, das Ribbon in zwei Stufen zu verkleinern. Ein kluger Schritt, wie ich finde, da Autodesk im Vergleich zu den Officeprodukten eine größere Experten-Nutzerschaft hat, die mit solche Detailfunktionen gut klarkommen werden.

In RobiNZ CAD Weblog erfährt man von weiteren solcher Expertenfunktionen. So soll zum Beispiel möglich sein, die „Menüs" zu personalisieren. Diese Funktion wurde in Office2007 bewusst deaktiviert — für die Akzeptanz von AutoCAD durch seine Expertencommunity, kann sie jedoch durchaus von entscheidender Bedeutung sein. Auch, wenn dadurch die Software komplexer wird.

Fazit:

Aza Raskin fasst Interfaceregeln im Interview zusammen

Aza Raskin (mehr über ihn in meinem Artikel) war kürzlich in Berlin und ich habe leider zu spät davon erfahren. Zum Glück war aber Golem zugegen und hat ihn interviewt.

Zu sehen im Video und nachzulesen im Golem-Artikel, sind diese Themen:

Video: Aza Raskin – Humanes Interface-Design (deutsch) (10:42)

[THX@Lars][tags]Aza Raskin, Jef Raskin, GOMS, Interfacedesign, HCI, User Interface, User Experience, Interface[/tags]