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

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?

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]

Wie funktioniert Geld / 10-Punkte-Video

Aliens haben das Geld erfunden um die Erde und ihre Bewohner auszubeuten.

Max von Bock hat seine Diplomarbeit, die er Mitte 2005 an der FH Aachen, FB Design erstellt hat, online gestellt. In drei YouTube-Videos geteilt zeigt er seinen 10-Punkte-Plan zur erfolgreichen Ausbeutung eines Planeten mit halbintelligenten Lebewesen" <– das sind wir ;-)

So sah das bei Max Diplomausstellung aus:

[mygal=wie-funktioniert-geld]

Und hier die Videos:

PS: Im dritten Video kann man ein paar interessante Kommentare lesen.

[Danke, Tim]

Elephants Memory – Links zu einer visuellen Sprache

Elephants Memory ist eine visuelle Zeichensprache, die von Timothee Ingen-Housz entwickelt wurde.

Leider ist es recht schwer, Informationen über Elephants Memory im Internet zu finden. Das ist auch in den letzten 2 Jahren seit dem Visperanto-Seminar an der FH Aachen nicht besser geworden. Damals hat uns Timothee selbst alles erklärt, was man über diese nichtlineare visuelle Sprache wissen wollte.

Jetzt bleibt nur noch der Weg des Lesens und Schauens. Hier einige Links die euch das erleichtern sollen:

  1. „The Elephant’s Memory – In search of a pictorial language (PDF)" ist ein PDF das früher auf apple.com veröffentlicht war. Es ist meiner Meinung nach die beste Beschreibung der Sprache durch Timothee selbst. Da die Datei schon lange unauffindbar ist und weder Google-Cache noch die Waybackmaschine weiterhelfen, habe ich sie hier gespiegelt.
    Um einen Eindruck zu bekommen, sind die vielen erklärenden Grafiken und Satzbeispiele sehr hilfreich. Die im PDF formulierten Anwendungsfälle und die Conclusion dagegen haben sich — wie ich aus den Gesprächen im Seminar weiß — weiterentwickelt und sind nicht mehr ganz aktuell.
  2. Auf Phosphen.org liegt Timothees offizielle „Research project"-Seite. Bitte den ‚more'-Link nicht verpassen, sonst findet ihr nicht zu den logogram processing-Screenshots. Leider hat sich an dieser Seite sehr lange nichts getan…
  3. Das Seminarweblog Visperanto sammelt ebenfalls ein paar (zum Teil veraltete) Links und ist auch zu anderen Themen aus dem Kontext visueller Sprachen interessant.
  4. Paul Honeywil hat eine Review zu Elephants Memory geschrieben. Ich bevorzuge jedoch das obige PDF.
  5. Auch das „Institut für Informationssysteme und Computer Medien" hat ein Kapitel zu Elephant's Memory.

Alle weiteren Links die man beispielsweise über Google findet, sind meist tod oder uninteressanter.

Elephants Memory

Update: Bei onefootprint.com gibt es doch noch eine Version des oben verlinkten PDFs.

Gapminder: Weltweite Datenvisualisierung

„Data isn't as bad as you think" sagt Hans Rosling (Professor für internationale Gesundheit an dem schwedischen Karolinska Institute) in einem von zwei Videovorträgen über Gapminder, die man zur Zeit online findet. Und auch wenn Tim, Oliver und auch ich selbst schon vor einer Weile über dieses interessante Projekt geschrieben haben, versuche ich noch einmal die Quellen zusammenzufassen:

Was ist Gapminder?

Hans Rosling (Bild von TedTalks)

„Our vision: Making sense of the world by having fun with statistics!" schreibt Hans Rosling auf gapminder.org der zentralen Seite des Projekts. Es geht der Gruppe darum, die Schlucht (Gap) zwischen den rohen Statistiktabellen und ihrer eigentlichen Bedeutung zu überbrücken.

  1. In dem sie eine Schnittstelle anbieten um Daten zu nutzen — unabhängig von ihrem Datenformat und ihrer Struktur
  2. In dem sie Visualisierungs-Tools erstellen, die flexibel mit diesen Daten arbeiten und beliebige Fragestellungen visualisieren können.

Warum das wichtig ist?

Die statistischen Daten, die Gapminder aufbereitet und visualisiert sind alle schon vorhanden. Die UNO sammelt sie und auch Regierungen und andere (non profit) Organisationen haben Daten.

Bisher werden diese Daten jedoch nirgendwo gebündelt um übergreifend genutzt werden zu können. Für die meisten Daten (auch die der UNO = Kulturgut) muss man sogar bezahlen.

Für Daten-Interpretierende ist es also teuer an die Daten zu kommen, für die Medien schwierig sie (grafisch) aufzubereiten und dadurch für die Betrachter (uns) langweilig sie anzusehen.

Gapminder: Expensive, Difficult, Boring

Zwei Hilfs-Layer der Datenaufbereitung und Datenvisualisierung sollen — wie oben schon beschrieben — das teure, schwierige und langweilige ersetzt werden durch ein kostenloses (Interpretierer) AHA!- (Medien) und WOW!-Erlebnis (Betrachter).

Gapminder: Das Ziel Data und Graphics

Am einfachsten versteht man all das, wenn Rosling es selbst erklärt:

Videos über Gapminder

 

Gapminder-Ressourcen

Neben den Videos solltet ihr diese Dinge anschauen:

Der Bericht „Menschliche Entwicklung 2005" (Fullscreen-Flash)
Eine sehr schön aufbereitete Darstellung der weltweiten Themen Einkommen, Armut, Gesundheit, ihrer Unterschiede, Trends und Kluften und der Sterblichkeit.

Das Gapminder-Tool (Fullscreen-Flash)
Das zentrale Tool mit dem man hervorragend Daten aller möglicher Art kombiniert visualisieren kann: Zwei frei wähl bare Achsen, alle Länder, ihre kontinentale Zugehörigkeit (Farbe der Kreise) und Bevölkerungsgröße (Größe der Kreise) sowie all dies animiert über 30 Jahre. — Einzigartig!

Das Ziel von Gapminder als Powerpoint-Präsentation (html)
Aus dieser Präsentation sind die Screenshots oben.

Visualisierung der Unterschiede im Bildungssystem (Fullscreen-Flash)
Die „EDUCATION PYRAMIDS 2004" zeigen Unterschiede im Schulsystem verschiedener Länder anhand von Alterspyramiden.

Visualisation of education data at different levels in a number of countries.

Übrigens: Welche grafische Qualität das Gapminder-Projekt erreicht wird deutlich, vergleicht man die Datenvisualisierungen mit Grafiken, wie wir sie aus Zeitungen gewohnt sind. Zwar sind das schon spezialisierte Firmen, trotzdem geht die Aussage zu häufig im visuellen Rauschen unter…

Soweit ich Hans Rosling verstanden habe, kooperiert er mit Google um eine bessere Durchsuchbarkeit der Daten zu gewährleisten. Vielleicht wird dann einmal sein ultimatives Ziel, einen „Daten"-Reiter in der Google-Suche zu haben, wahr :-).

[tag]video,datensicht,density,visualisierung,statistik,datenbank,google,fh,praesentation[/tag]

Tellerrand 06-07-21

Es ist mal wieder Zeit für einen Blick über den Tellerrand:

[tag]tellerrand, scoutpress, microformats, fh, tj, pfadiblog[/tag]

Diplomdesigner

Werft einen Blick auf meine Pinnwand: direkt neben dem schon fast symbolisch ungenutzten Prioritäten-Pfeil, einer Web2.0-Definition und dem ScoutPress-Testausdruck für die Diplompräsentation hängt sie seit Samstag Abend, die Diplomurkunde.

Diplom-Urkunde an der Pinnwand

[tag]fh,studium,tj[/tag]