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 continuity:

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?

Webkampagne mit Continuity

Eine der richtig wichtigen aber auch schwierigen Dinge im Internet ist, nur die gerade relevanten Informationen darzustellen.

Die Kampagne von compact.de www.spritfresserstoppen.de hat das meiner Meinung nach geschafft. Auf jeder Seite werden mir nur die gerade wichtigen Informationen angeboten. Diese dafür übersichtlich und präzise, so dass ich schnell und einfach zum nächsten Schritt und damit zu den nächsten Informationen und Aktionen geleitet werde.

Ein seltenes Beispiel, wie ich finde, bei dem die Initiatoren beispielsweise der Versuchung widerstanden haben, den „jetzt spenden" Link auf jeder Seite irgendwo auftauchen zu lassen, sondern statt dessen eine optimierte Spenden-Seite zu bauen.

Die folgende Galerie zeigt den Ablauf der Kampagne. Achtet bitte auch auf die Informationen der rechten Seitenspalte — auch die sind in ihrer Kommunikation optimiert.

[mygal=kampagne_spritschluckerstoppen]

So eine optimiert ist natürlich Arbeit. Aber gerade bei den kritschen Funktionen einer Website — hier die Unterschrift, an anderen Stellen vielleicht der Registrierungsprozess — ist die Arbeit sinnvoll investiert, um das Benutzererlebnis zu steigern. Siehe auch: Continuity

5 interessante Interfaceschnipsel aus dem neuen Backpack

37signals hat eine neue Version von Backpack veröffentlicht (Preview-Artikel 1, 2, 3) und es gibt fünf Dinge, die man aus Interface- und Konzept-Sicht einmal bewusst wahrgenommen haben sollte:

Der (neue) „Blank Slate"

Blank Slate nennt 37signals in ihrem Buch den Zustand einer Seite, in dem noch keine Informationen eingetragen wurden. In der Vergangenheit, haben sie häufig mit Demo-Content als Screenshot gearbeitet, jetzt wird — grafisch schön oder zumindest auffällig umgesetzt — auf die Neues-Element-Links hingewiesen.

backpack drop page
(aus dem Video MOV)

In dem älteren Hilfe-Video über Tags (MOV) sieht man, wie diese Funktion vorher gelöst war:

backpack new-links

Das verbesserte und erweiterte Drag & Drop

Man kann Seitenelemente jetzt per Drag & Drop auf der Seite aber auch zwischen Seiten und in neue Seiten verschieben. Das Interaktionsverhalten ist dabei sehr gut im Detail umgesetzt: Die Bewegung des markierten Elements, das Highlighting der Zielseite, der Hilfetext OnMouseOver, der Ladebalken beim Verschieben, …

Besser als der Screenshot, ist das Video (MOV):

backpack drag and drop

Die optimierte „Give this page a name"-Funktion (neue Seite)

Typisch für 37signals und ihr Bestreben, die Arbeit so einfach wie möglich zu machen, ist das Verhalten beim Erstellen einer neuen Seite: Der Title ist direkt im Edit-Modus, es gibt kein eigenes Label sonder der Inhalt dient als Beschreibung, ist aber direkt markiert, so dass man direkt seinen Titel eintippen kann und mit Enter die Erstellung abschließt.
Genau das meint Raskin, wenn er in seinem Buch von der Minimierung von Interaktionsschritten spricht (Stichwort KLM).

backpack page title
(auch aus dem Video)

Die richtig versteckten Funktionen Edit, Move, Delete und Rename

Nicht wirklich neu aber gut gemacht: Basecamp versteckt die Bearbeiten-Funktionen für seine Seiten-Elemente so lange, bis der Benutzer mit der Maus über ein Element fährt.

Sehr gut sieht man das in dem Demo-Video (MOV) über das Verschieben.

backpack move

Der große Vorteil: Die Backpack-Seiten sind im Standard-Zustand sehr übersichtlich, es kann auf eine eigene Admin-Umgebung verzichtet werden (getreu dem Motto „one interface") und der Benutzer muss nur eine Interaktionsmetapher lernen: Die bearbeiten-Funktionen im Content-Bereich stehen onmouseover links neben der Überschrift.

Einziger Schönheitsfehler: Die Funktionen sollten meine Meinung nach auch dann erscheinen, wenn man mit der Maus links von der Überschrift ist. Im Video sieht man, dass bei vielen Verschiebe-Aktionen, ständig die ungewohnte Umweg-Bewegung über die Überschrift gemacht werden musste.

Das Thema OpenID und Open Bar

Dem Thema sollte man eigentlich einen ganzen Post widmen, weil 37signals mit ihrer OpenBar eine gute und sehr schön anschaulich-praktische Integration von openID umgesetzt haben. Kurz gesagt: Sie nutzen openID als (externe) single-sign-on-Lösung für ihre Produkte und beginnen ihre bis dahin mäßig vernetzen Einzelprodukte über die OpenBar zu verknüpfen.

[tags]37signals, raskin, openid, interaktion, drag-and-drop, webapplikation, interfacedesign, continuity,klm, blank-slate [/tags]

Führung durch den Otto-Vista-Store

Schon vor einer Weile hat Otto zusammen mit SinnerSchrader und auf Basis der neuen Vista-3D-Engine den Otto-Vista-Store veröffentlicht (ein gutes Post dazu).

Letztes Wochenende bin ich dort einmal shoppen gegangen und habe zur Dokumentation die Bildschirmkamera eingeschaltet :-)


Link: sevenload.com

Eine Führung durch den Otto-3D-Store für Vista. Leider hat Camtasia versehentlich den Hintergrundton aufgenommen. Wer gut zuhört erkennt die n24-Übertragung des LiveEarth-Konzertes am 7.7.2007 ;-).

Leider dauert es zu Beginn etwas, bis der Store lädt. Ich wollte aber auch diesen Teil der UserExperience festhalten ;-)

Ihr solltet euch auch das Otto-Eigene Werbevideo anschauen das ich am Ende kurz einblende http://www.otto.de/vista/

[tags]video, continuity, vista, wpf, otto, userexperience, web3d, screencast[/tags]

Continuity-Artikel „Interfaces That Flow"

uxmatters.com

Jonathan Follett hat in dem UXmatters-Artikel „Interfaces That Flow: Transitions as Design Elements" sehr schön zusammengefasst, worüber wir mit Prof. Oliver Wrede im Continuity-Seminar gesprochen haben:

Wie kann man den Wechsel zwischen Interfacestadien gestalten, so dass er sich für den Benuzter natürlicher, verständlicher und angenehmer „anfühlt"?

Interessant ist, dass, obwohl das Thema im Applikationsdesign schon an vielen Stellen Einzug hält, es immernoch kaum Artikel dazu gibt…
Vielleicht gibt es hier oder in einem eigenen Continutiy-Beispiele-Blog ja bald mehr… bis dahin leßt, was Jonathan Follett schreibt :).

[tags]continuity, fh, animation, interaktionsdesign, userexperience, applikation, webapplication[/tags]

Scrybe / Animation im Kalender

Ein aussagekräftiges Sneak-Peek-Video über einen Online-Kalender mit Namen Scrybe , der diesem eigentlich abgedroschenen Thema einige interessante Funktionen und Sichtweisen hinzufügt.

Insbesondere die gezielt und geschickt eingesetzten Animationen und Transitions lassen den Arbeitsablauf angenehm flüssig erscheinen.

Oliver Wrede schreibt im Seminarblog Continuity:
Was in dem Video im Bezug auf »Continuity« eine Verbindung darstellt ist, dass die Autoren von iScrybe zum einen die Integration des Tools mit alltäglichen Arbeitsweisen suchen (Vermeidung von Medienbrüchen) und zum anderen sehr viel Wert darauf legen, dass die Software Kontext zu den einzelnen Informationen bieten kann (Zusammenhänge erkennbar machen, indem Wechsel der »Views« durch Übergänge erkennbar gemacht werden).

[via Tamim / Oliver]

[tag]continuity, video, flow, kalender, webapplikation, interfacedesign, ui[/tag]

gutes neues Yahoo-Interface

Yahoo hat seine Startseite neu gestaltet. Es gibt einige sehenswerte Features! Mehr im Continuity-Weblog…

[tag]yahoo, interfacedesgin, continuity, animation, ajax, pattern, launch[/tag]